Skip to content

Commit 6ae9e4e

Browse files
aromanovvaromanovv
committed
PD-4790 Revert "PD-4790 revert pr #2737"
This reverts commit db3249f.
1 parent 9954256 commit 6ae9e4e

6 files changed

Lines changed: 280 additions & 119 deletions

File tree

‎src/app/account-settings/components/settings-security-password/settings-security-password.component.html‎

Lines changed: 206 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,70 @@
1-
<app-settings-panels-data *ngIf="form" [formGroup]="form">
2-
<p i18n="@@account.changeOrUpdateAccountPassword">
3-
Change or update your account password.
4-
</p>
5-
6-
<div class="row">
7-
<label
8-
class="row mat-caption"
9-
[ngClass]="{
10-
error:
11-
form.controls.oldPassword?.invalid &&
12-
form.controls.oldPassword?.touched
13-
}"
14-
>
15-
<strong i18n="@@account.oldPassword">Old password</strong>
16-
</label>
17-
<mat-form-field appearance="outline" class="mat-form-field-min">
18-
<input matInput formControlName="oldPassword" type="password" />
1+
<app-settings-panels-data *ngIf="form">
2+
<form [formGroup]="form">
3+
@if (success) {
4+
<app-alert-message type="success" class="mb-8">
5+
<div content class="mt-0.5" i18n>
6+
Your ORCID account password has been updated
7+
</div>
8+
</app-alert-message>
9+
}
10+
<p i18n="@@account.changeOrUpdateAccountPassword" class="mb-4 mt-0" i18n>
11+
Change or update your account password.
12+
</p>
13+
<div class="row mb-6 flex flex-wrap">
14+
<label
15+
class="row mat-caption"
16+
[ngClass]="{
17+
error:
18+
form.controls.oldPassword?.invalid &&
19+
form.controls.oldPassword?.touched
20+
}"
21+
>
22+
<strong i18n="@@account.oldPassword">Old password</strong>
23+
</label>
24+
<mat-form-field
25+
appearance="outline"
26+
class="mat-form-field-min no-hint w-full"
27+
>
28+
<input
29+
matInput
30+
formControlName="oldPassword"
31+
type="password"
32+
[errorStateMatcher]="errorMatcher"
33+
[ngClass]="{
34+
error:
35+
form.controls.oldPassword?.invalid &&
36+
form.controls.oldPassword?.touched
37+
}"
38+
/>
39+
</mat-form-field>
1940
<mat-error
20-
*ngIf="form.hasError('required', 'oldPassword')"
41+
class="w-full orc-font-small-print mt-2"
42+
*ngIf="
43+
form.hasError('required', 'oldPassword') &&
44+
form.controls.oldPassword.touched
45+
"
2146
i18n="@@account.passwordCannotBeEmpty"
2247
>
2348
Password cannot be empty
2449
</mat-error>
2550
<mat-error
51+
class="w-full orc-font-small-print mt-2"
2652
*ngFor="
2753
let backendError of form.get('oldPassword').errors
2854
? form.get('oldPassword').errors['backendErrors']
2955
: []
3056
"
3157
>{{ backendError }}
3258
</mat-error>
33-
</mat-form-field>
34-
</div>
59+
</div>
3560

36-
<div class="input-container">
37-
<label
38-
class="row mat-caption"
39-
[ngClass]="{
40-
error:
41-
form.controls.password?.invalid && form.controls.password?.touched
42-
}"
43-
>
44-
<strong i18n="@@account.newPassword">New password</strong>
45-
</label>
46-
<mat-form-field
47-
appearance="outline"
48-
class="mat-form-field-min input-container"
49-
>
50-
<input
51-
formControlName="password"
52-
type="password"
53-
matInput
54-
autocomplete="new-password"
55-
id="cy-password-input"
56-
/>
57-
<mat-error
58-
*ngIf="form.hasError('required', 'password')"
59-
i18n="@@shared.passwordCantBeEmpty"
61+
<div class="input-container">
62+
<label
63+
class="row mat-caption"
64+
[ngClass]="{
65+
error:
66+
form.controls.password?.invalid && form.controls.password?.touched
67+
}"
6068
>
6169
<strong i18n="@@account.newPassword">New password</strong>
6270
</label>
@@ -178,77 +186,162 @@
178186
"
179187
i18n="@@register.passwordConfirmationRequired"
180188
>
181-
{{ error }}
182-
</div>
183-
</mat-error>
184-
</mat-form-field>
185-
</div>
189+
<div class="flex">
190+
<input
191+
formControlName="password"
192+
type="password"
193+
matInput
194+
autocomplete="new-password"
195+
[errorStateMatcher]="errorMatcher"
196+
id="cy-password-input"
197+
/>
198+
@if (!validate8orMoreCharacters && !validateAtLeastALetterOrSymbol
199+
&& !validateAtLeastANumber && form.controls.retypedPassword.value
200+
=== form.controls.password.value){
201+
<mat-icon class="check ml-1">check</mat-icon>
202+
}
203+
</div>
204+
</mat-form-field>
205+
<mat-error
206+
class="w-full orc-font-small-print mt-2"
207+
*ngIf="
208+
form.hasError('required', 'password') &&
209+
form.controls.password.touched
210+
"
211+
i18n="@@shared.passwordCantBeEmpty"
212+
>
213+
Password cannot be empty
214+
</mat-error>
215+
<mat-error
216+
class="w-full orc-font-small-print mt-2"
217+
*ngIf="
218+
!form.hasError('required', 'password') &&
219+
(form.hasError('minlength', 'password') ||
220+
form.hasError('pattern', 'password')) &&
221+
form.controls.password.touched
222+
"
223+
i18n="@@register.wrongPasswordPatternV2"
224+
>
225+
Password must meet all requirements
226+
</mat-error>
227+
<mat-error
228+
class="w-full orc-font-small-print mt-2"
229+
*ngIf="form.hasError('maxlength', 'password')"
230+
i18n="@@register.passwordIsToLongV2"
231+
>
232+
Password must be between 8 and 256 characters
233+
</mat-error>
234+
<mat-error
235+
class="w-full orc-font-small-print mt-2"
236+
*ngIf="this.form.hasError('backendError', 'password')"
237+
>
238+
<div
239+
*ngFor="let error of this.form.getError('backendError', 'password')"
240+
>
241+
{{ error }}
242+
</div>
243+
</mat-error>
244+
</div>
245+
<div class="mb-6">
246+
<mat-form-field
247+
appearance="outline"
248+
class="mat-form-field-min input-container no-hint"
249+
[ngClass]="{
250+
'valid-password border rounded-xs':
251+
!validate8orMoreCharacters &&
252+
!validateAtLeastALetterOrSymbol &&
253+
!validateAtLeastANumber &&
254+
form.controls.retypedPassword.value ===
255+
form.controls.password.value
256+
}"
257+
>
258+
<div class="flex">
259+
<input
260+
formControlName="retypedPassword"
261+
type="password"
262+
matInput
263+
autocomplete="new-password"
264+
id="cy-password-confirm-input"
265+
class="grow"
266+
[errorStateMatcher]="errorMatcher"
267+
placeholder="{{ confirmPasswordPlaceholder }}"
268+
/>
269+
@if (!validate8orMoreCharacters && !validateAtLeastALetterOrSymbol
270+
&& !validateAtLeastANumber && form.controls.retypedPassword.value
271+
=== form.controls.password.value){
272+
<mat-icon class="check ml-1">check</mat-icon>
273+
}
274+
</div>
275+
</mat-form-field>
276+
<mat-error
277+
class="w-full orc-font-small-print mt-2"
278+
*ngIf="
279+
form.hasError('required', 'retypedPassword') &&
280+
form.controls.retypedPassword.touched
281+
"
282+
i18n="@@register.passwordConfirmationRequired"
283+
>
284+
Retype your password
285+
</mat-error>
186286

187-
<ol>
188-
<li>
189-
<ng-container
190-
[ngTemplateOutlet]="
191-
form.hasError('required', 'password') ||
192-
form.hasError('minlength', 'password')
193-
? invalid
194-
: valid
195-
"
196-
></ng-container>
197-
<div i18n="@@register.passwordLength">8 or more characters</div>
198-
</li>
199-
<li>
200-
<ng-container
201-
[ngTemplateOutlet]="
202-
form.hasError('required', 'password') ||
203-
form.getError('pattern', 'password')?.requiredPattern ==
204-
hasLetterOrSymbolPattern
205-
? invalid
206-
: valid
207-
"
208-
></ng-container>
209-
<div i18n="@@register.passwordSymbolV2">At least 1 letter or symbol</div>
210-
</li>
211-
<li>
212-
<ng-container
213-
[ngTemplateOutlet]="
214-
form.hasError('required', 'password') ||
215-
form.getError('pattern', 'password')?.requiredPattern ==
216-
hasNumberPattern
217-
? invalid
218-
: valid
219-
"
220-
></ng-container>
221-
<div i18n="@@register.passwordNumberV2">At least 1 number</div>
222-
</li>
223-
</ol>
287+
<mat-error
288+
class="w-full orc-font-small-print mt-2"
289+
*ngIf="
290+
form.hasError('mismatch', 'retypedPassword') &&
291+
form.controls.retypedPassword.touched
292+
"
293+
i18n="@@register.passwordConfirmationMatchV2"
294+
>
295+
Passwords do not match
296+
</mat-error>
297+
</div>
298+
</div>
299+
300+
<p i18n="@@register.yourPasswordHas">Your password has:</p>
301+
<ol class="grid gap-4 mb-8">
302+
<li>
303+
<ng-container
304+
[ngTemplateOutlet]="validate8orMoreCharacters ? invalid : valid"
305+
></ng-container>
306+
<div i18n="@@register.passwordLength">8 or more characters</div>
307+
</li>
308+
<li>
309+
<ng-container
310+
[ngTemplateOutlet]="validateAtLeastALetterOrSymbol ? invalid : valid"
311+
></ng-container>
312+
<div i18n="@@register.atLeastALetterOrSymbol">
313+
At least 1 letter or symbol
314+
</div>
315+
</li>
316+
<li>
317+
<ng-container
318+
[ngTemplateOutlet]="validateAtLeastANumber ? invalid : valid"
319+
></ng-container>
320+
<div i18n="@@register.atLeastANumber">At least 1 number</div>
321+
</li>
322+
</ol>
224323

225-
<label
226-
class="row mat-caption"
227-
[ngClass]="{
228-
error:
229-
form.controls.retypedPassword?.invalid &&
230-
form.controls.retypedPassword?.touched
231-
}"
232-
>
233-
<strong i18n="@@account.confirmNewPassword">Confirm new password</strong>
234-
</label>
235-
<mat-form-field
236-
appearance="outline"
237-
class="mat-form-field-min input-container"
238-
>
239-
<input
240-
formControlName="retypedPassword"
241-
type="password"
242-
matInput
243-
autocomplete="new-password"
244-
id="cy-password-confirm-input"
245-
/>
246-
<mat-error
247-
*ngIf="form.hasError('required', 'retypedPassword')"
248-
i18n="@@register.passwordConfirmationRequired"
324+
@if (twoFactorState) {
325+
<app-two-factor-auth-form
326+
class="w-[537px] block mb-8"
327+
codeControlName="twoFactorCode"
328+
recoveryControlName="twoFactorRecoveryCode"
329+
[showAlert]="true"
249330
>
250-
Retype your password
251-
</mat-error>
331+
</app-two-factor-auth-form>
332+
}
333+
<div class="button-container">
334+
<button
335+
(click)="save()"
336+
type="submit"
337+
mat-raised-button
338+
color="primary"
339+
i18n="@@shared.saveChanges"
340+
id="cy-save-password"
341+
>
342+
Save changes
343+
</button>
344+
</div>
252345

253346
@if (twoFactorState) {
254347
<app-auth-challenge

‎src/app/account-settings/components/settings-security-password/settings-security-password.component.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ ol {
2626
}
2727

2828
mat-form-field {
29-
max-width: 400px;
29+
max-width: 537px;
3030
width: 100%;
31-
margin-bottom: 16px;
31+
font-size: 14px !important;
3232
}
3333
.error-container {
3434
margin-bottom: 16px;

‎src/app/account-settings/components/settings-security-password/settings-security-password.component.scss-theme.scss‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,29 @@
88
$foreground: map-get($theme, foreground);
99
$background: map-get($theme, background);
1010

11-
::ng-deep .valid {
12-
color: mat.m2-get-color-from-palette($accent, 900);
11+
::ng-deep .mat-icon.valid {
12+
color: map-get($foreground, 'brand-primary-dark');
13+
}
14+
15+
::ng-deep .mat-icon.no-checked {
16+
color: map-get($background, 'ui-background-light');
1317
}
1418
.error {
1519
color: map-get($foreground, 'state-warning-dark');
1620
}
21+
button {
22+
background: $brand-secondary-dark !important;
23+
color: white !important;
24+
}
25+
26+
.valid-password {
27+
background-color: $brand-primary-lightest;
28+
border-color: $brand-primary-dark;
29+
}
30+
31+
.check {
32+
color: $brand-primary-dark;
33+
}
1734
}
1835

1936
@include settings-security-password-password-theme($orcid-app-theme);

0 commit comments

Comments
 (0)