@nymphjs/tilmeld-components 1.0.0-beta.134 → 1.0.0-beta.136

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/Account.svelte +144 -142
  3. package/dist/ChangePassword.svelte +63 -61
  4. package/dist/Login.svelte +13 -2
  5. package/dist/Recover.svelte +153 -137
  6. package/dist/RevokeTokens.svelte +31 -29
  7. package/dist/TwoFactor.svelte +194 -180
  8. package/package.json +3 -3
  9. package/src/Account.svelte +144 -142
  10. package/src/ChangePassword.svelte +63 -61
  11. package/src/Login.svelte +13 -2
  12. package/src/Recover.svelte +153 -137
  13. package/src/RevokeTokens.svelte +31 -29
  14. package/src/TwoFactor.svelte +194 -180
package/dist/Recover.svelte CHANGED
@@ -25,101 +25,79 @@
25
25
  <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
26
26
  <Title id="tilmeld-recovery-title">{title}</Title>
27
27
  <Content id="tilmeld-recovery-content">
28
- {#if successRecoveredMessage}
29
- {successRecoveredMessage}
30
- {:else}
31
- {#if !hasSentSecret}
32
- {#if !$clientConfig.emailUsernames}
33
- <div>
34
- <FormField style="margin-right: 1em;">
35
- <Radio
36
- bind:group={recoveryType}
37
- value="password"
38
- {...prefixFilter(restProps, 'recoveryTypePassword$')}
39
- />
40
- {#snippet label()}
41
- I don't know my password.
42
- {/snippet}
43
- </FormField>
44
- <FormField style="margin-right: 1em;">
45
- <Radio
46
- bind:group={recoveryType}
47
- value="username"
48
- {...prefixFilter(restProps, 'recoveryTypeUsername$')}
49
- />
50
- {#snippet label()}
51
- I don't know my username.
52
- {/snippet}
53
- </FormField>
54
- </div>
55
- {/if}
56
-
57
- <div>
58
- {#if recoveryType === 'password'}
59
- <p>
60
- To reset your password, type the {$clientConfig.emailUsernames
61
- ? 'email'
62
- : 'username'}
63
- you use to sign in below.
64
- </p>
65
- {/if}
66
- {#if recoveryType === 'username'}
67
- <p>
68
- To get your username, type your email as you entered it when
69
- creating your account.
70
- </p>
28
+ <form
29
+ onsubmit={preventDefault(
30
+ stopPropagation(() => {
31
+ if (!successRecoveredMessage) {
32
+ if (!hasSentSecret) {
33
+ sendRecovery();
34
+ } else {
35
+ recover();
36
+ }
37
+ }
38
+ }),
39
+ )}
40
+ >
41
+ {#if successRecoveredMessage}
42
+ {successRecoveredMessage}
43
+ {:else}
44
+ {#if !hasSentSecret}
45
+ {#if !$clientConfig.emailUsernames}
46
+ <div>
47
+ <FormField style="margin-right: 1em;">
48
+ <Radio
49
+ bind:group={recoveryType}
50
+ value="password"
51
+ {...prefixFilter(restProps, 'recoveryTypePassword$')}
52
+ />
53
+ {#snippet label()}
54
+ I don't know my password.
55
+ {/snippet}
56
+ </FormField>
57
+ <FormField style="margin-right: 1em;">
58
+ <Radio
59
+ bind:group={recoveryType}
60
+ value="username"
61
+ {...prefixFilter(restProps, 'recoveryTypeUsername$')}
62
+ />
63
+ {#snippet label()}
64
+ I don't know my username.
65
+ {/snippet}
66
+ </FormField>
67
+ </div>
71
68
  {/if}
72
- </div>
73
69
 
74
- <div>
75
- <Textfield
76
- bind:this={accountElem}
77
- bind:value={account}
78
- label={$clientConfig.emailUsernames || recoveryType === 'username'
79
- ? 'Email Address'
80
- : 'Username'}
81
- type={$clientConfig.emailUsernames || recoveryType === 'username'
82
- ? 'email'
83
- : 'text'}
84
- input$autocomplete={$clientConfig.emailUsernames ||
85
- recoveryType === 'username'
86
- ? 'email'
87
- : 'username'}
88
- input$autocapitalize="off"
89
- input$spellcheck="false"
90
- {...prefixFilter(restProps, 'account$')}
91
- />
92
- </div>
93
-
94
- {#if recoveryType === 'password'}
95
- <div class="tilmeld-recover-action">
96
- <a
97
- href={'javascript:void(0);'}
98
- onclick={() => (hasSentSecret = 1)}
99
- {...prefixFilter(restProps, 'alreadyGotCodeLink$')}
100
- >
101
- Already Got a Code?
102
- </a>
70
+ <div>
71
+ {#if recoveryType === 'password'}
72
+ <p>
73
+ To reset your password, type the {$clientConfig.emailUsernames
74
+ ? 'email'
75
+ : 'username'}
76
+ you use to sign in below.
77
+ </p>
78
+ {/if}
79
+ {#if recoveryType === 'username'}
80
+ <p>
81
+ To get your username, type your email as you entered it when
82
+ creating your account.
83
+ </p>
84
+ {/if}
103
85
  </div>
104
- {/if}
105
- {:else}
106
- <div>
107
- <p {...prefixFilter(restProps, 'codeSentMessage$')}>
108
- A code has been sent to you by email. Enter that code here, and a
109
- new password for your account.
110
- </p>
111
- </div>
112
86
 
113
- {#if hasSentSecret === 1}
114
87
  <div>
115
88
  <Textfield
116
89
  bind:this={accountElem}
117
90
  bind:value={account}
118
- label={$clientConfig.emailUsernames
91
+ label={$clientConfig.emailUsernames ||
92
+ recoveryType === 'username'
119
93
  ? 'Email Address'
120
94
  : 'Username'}
121
- type={$clientConfig.emailUsernames ? 'email' : 'text'}
122
- input$autocomplete={$clientConfig.emailUsernames
95
+ type={$clientConfig.emailUsernames ||
96
+ recoveryType === 'username'
97
+ ? 'email'
98
+ : 'text'}
99
+ input$autocomplete={$clientConfig.emailUsernames ||
100
+ recoveryType === 'username'
123
101
  ? 'email'
124
102
  : 'username'}
125
103
  input$autocapitalize="off"
@@ -127,65 +105,103 @@
127
105
  {...prefixFilter(restProps, 'account$')}
128
106
  />
129
107
  </div>
130
- {/if}
131
108
 
132
- <div>
133
- <Textfield
134
- bind:value={secret}
135
- label="Recovery Code"
136
- type="text"
137
- input$autocomplete="one-time-code"
138
- {...prefixFilter(restProps, 'recoveryCode$')}
139
- />
140
- </div>
109
+ {#if recoveryType === 'password'}
110
+ <div class="tilmeld-recover-action">
111
+ <a
112
+ href={'javascript:void(0);'}
113
+ onclick={() => (hasSentSecret = 1)}
114
+ {...prefixFilter(restProps, 'alreadyGotCodeLink$')}
115
+ >
116
+ Already Got a Code?
117
+ </a>
118
+ </div>
119
+ {/if}
120
+ {:else}
121
+ <div>
122
+ <p {...prefixFilter(restProps, 'codeSentMessage$')}>
123
+ A code has been sent to you by email. Enter that code here, and
124
+ a new password for your account.
125
+ </p>
126
+ </div>
141
127
 
142
- <div>
143
- <Textfield
144
- bind:value={password}
145
- label="Password"
146
- type="password"
147
- input$autocomplete="new-password"
148
- {...prefixFilter(restProps, 'password$')}
149
- />
150
- </div>
128
+ {#if hasSentSecret === 1}
129
+ <div>
130
+ <Textfield
131
+ bind:this={accountElem}
132
+ bind:value={account}
133
+ label={$clientConfig.emailUsernames
134
+ ? 'Email Address'
135
+ : 'Username'}
136
+ type={$clientConfig.emailUsernames ? 'email' : 'text'}
137
+ input$autocomplete={$clientConfig.emailUsernames
138
+ ? 'email'
139
+ : 'username'}
140
+ input$autocapitalize="off"
141
+ input$spellcheck="false"
142
+ {...prefixFilter(restProps, 'account$')}
143
+ />
144
+ </div>
145
+ {/if}
151
146
 
152
- <div>
153
- <Textfield
154
- bind:value={password2}
155
- label="Re-enter Password"
156
- type="password"
157
- input$autocomplete="new-password"
158
- {...prefixFilter(restProps, 'password2$')}
159
- />
160
- </div>
147
+ <div>
148
+ <Textfield
149
+ bind:value={secret}
150
+ label="Recovery Code"
151
+ type="text"
152
+ input$autocomplete="one-time-code"
153
+ {...prefixFilter(restProps, 'recoveryCode$')}
154
+ />
155
+ </div>
161
156
 
162
- <div class="tilmeld-recover-action">
163
- <a
164
- href={'javascript:void(0);'}
165
- onclick={() => (hasSentSecret = false)}
166
- {...prefixFilter(restProps, 'needCodeLink$')}
167
- >
168
- Need a New Code?
169
- </a>
170
- </div>
171
- {/if}
157
+ <div>
158
+ <Textfield
159
+ bind:value={password}
160
+ label="Password"
161
+ type="password"
162
+ input$autocomplete="new-password"
163
+ {...prefixFilter(restProps, 'password$')}
164
+ />
165
+ </div>
172
166
 
173
- {#if failureMessage}
174
- <div class="tilmeld-recover-failure">
175
- {failureMessage}
176
- </div>
177
- {/if}
167
+ <div>
168
+ <Textfield
169
+ bind:value={password2}
170
+ label="Re-enter Password"
171
+ type="password"
172
+ input$autocomplete="new-password"
173
+ {...prefixFilter(restProps, 'password2$')}
174
+ />
175
+ </div>
178
176
 
179
- {#if loading}
180
- <div class="tilmeld-recover-loading">
181
- <CircularProgress
182
- style="height: 24px; width: 24px;"
183
- indeterminate
184
- {...prefixFilter(restProps, 'progress$')}
185
- />
186
- </div>
177
+ <div class="tilmeld-recover-action">
178
+ <a
179
+ href={'javascript:void(0);'}
180
+ onclick={() => (hasSentSecret = false)}
181
+ {...prefixFilter(restProps, 'needCodeLink$')}
182
+ >
183
+ Need a New Code?
184
+ </a>
185
+ </div>
186
+ {/if}
187
+
188
+ {#if failureMessage}
189
+ <div class="tilmeld-recover-failure">
190
+ {failureMessage}
191
+ </div>
192
+ {/if}
193
+
194
+ {#if loading}
195
+ <div class="tilmeld-recover-loading">
196
+ <CircularProgress
197
+ style="height: 24px; width: 24px;"
198
+ indeterminate
199
+ {...prefixFilter(restProps, 'progress$')}
200
+ />
201
+ </div>
202
+ {/if}
187
203
  {/if}
188
- {/if}
204
+ </form>
189
205
  </Content>
190
206
  <Actions>
191
207
  <Button onclick={() => (open = false)} disabled={loading}>
package/dist/RevokeTokens.svelte CHANGED
@@ -17,38 +17,40 @@
17
17
  <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
18
18
  <Title id="tilmeld-revoke-tokens-title">{title}</Title>
19
19
  <Content id="tilmeld-revoke-tokens-content">
20
- <div>
21
- {description}
22
- </div>
23
-
24
- <div style="margin-top: 1em;">
25
- <Textfield
26
- bind:value={password}
27
- label="Password"
28
- type="password"
29
- style="width: 100%;"
30
- input$autocomplete="current-password"
31
- {...prefixFilter(restProps, 'password$')}
32
- />
33
- </div>
34
-
35
- {@render additional?.()}
36
-
37
- {#if failureMessage}
38
- <div class="tilmeld-revoke-tokens-failure">
39
- {failureMessage}
20
+ <form onsubmit={preventDefault(stopPropagation(revokeTokens))}>
21
+ <div>
22
+ {description}
40
23
  </div>
41
- {/if}
42
-
43
- {#if loading}
44
- <div class="tilmeld-revoke-tokens-loading">
45
- <CircularProgress
46
- style="height: 24px; width: 24px;"
47
- indeterminate
48
- {...prefixFilter(restProps, 'progress$')}
24
+
25
+ <div style="margin-top: 1em;">
26
+ <Textfield
27
+ bind:value={password}
28
+ label="Password"
29
+ type="password"
30
+ style="width: 100%;"
31
+ input$autocomplete="current-password"
32
+ {...prefixFilter(restProps, 'password$')}
49
33
  />
50
34
  </div>
51
- {/if}
35
+
36
+ {@render additional?.()}
37
+
38
+ {#if failureMessage}
39
+ <div class="tilmeld-revoke-tokens-failure">
40
+ {failureMessage}
41
+ </div>
42
+ {/if}
43
+
44
+ {#if loading}
45
+ <div class="tilmeld-revoke-tokens-loading">
46
+ <CircularProgress
47
+ style="height: 24px; width: 24px;"
48
+ indeterminate
49
+ {...prefixFilter(restProps, 'progress$')}
50
+ />
51
+ </div>
52
+ {/if}
53
+ </form>
52
54
  </Content>
53
55
  <Actions>
54
56
  <Button disabled={loading} {...prefixFilter(restProps, 'closeButton$')}>