| 1 | <h1 id="title" class="title">Change password</h1>
|
| 2 | <p class="sub-title">Please set a new password</p>
|
| 3 |
|
| 4 | <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
|
| 5 | <p class="alert-title"><b>Oh snap!</b></p>
|
| 6 | <ul class="alert-message-list">
|
| 7 | <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
|
| 8 | </ul>
|
| 9 | </nb-alert>
|
| 10 |
|
| 11 | <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
|
| 12 | <p class="alert-title"><b>Hooray!</b></p>
|
| 13 | <ul class="alert-message-list">
|
| 14 | <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
|
| 15 | </ul>
|
| 16 | </nb-alert>
|
| 17 |
|
| 18 | <form (ngSubmit)="resetPass()" #resetPassForm="ngForm" aria-labelledby="title">
|
| 19 |
|
| 20 | <div class="form-control-group">
|
| 21 | <label class="label" for="input-password">New Password:</label>
|
| 22 | <input nbInput
|
| 23 | [(ngModel)]="user.password"
|
| 24 | #password="ngModel"
|
| 25 | type="password"
|
| 26 | id="input-password"
|
| 27 | name="password"
|
| 28 | class="first"
|
| 29 | placeholder="New Password"
|
| 30 | autofocus
|
| 31 | fullWidth
|
| 32 | fieldSize="large"
|
| 33 | [status]="password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'"
|
| 34 | [required]="getConfigValue('forms.validation.password.required')"
|
| 35 | [minlength]="getConfigValue('forms.validation.password.minLength')"
|
| 36 | [maxlength]="getConfigValue('forms.validation.password.maxLength')"
|
| 37 | [attr.aria-invalid]="password.invalid && password.touched ? true : null">
|
| 38 | <ng-container *ngIf="password.invalid && password.touched">
|
| 39 | <p class="caption status-danger" *ngIf="password.errors?.required">
|
| 40 | Password is required!
|
| 41 | </p>
|
| 42 | <p class="caption status-danger" *ngIf="password.errors?.minlength || password.errors?.maxlength">
|
| 43 | Password should contains
|
| 44 | from {{getConfigValue('forms.validation.password.minLength')}}
|
| 45 | to {{getConfigValue('forms.validation.password.maxLength')}}
|
| 46 | characters
|
| 47 | </p>
|
| 48 | </ng-container>
|
| 49 | </div>
|
| 50 |
|
| 51 | <div class="form-group">
|
| 52 | <label class="label" for="input-re-password">Confirm Password:</label>
|
| 53 | <input nbInput
|
| 54 | [(ngModel)]="user.confirmPassword"
|
| 55 | #rePass="ngModel"
|
| 56 | id="input-re-password"
|
| 57 | name="rePass"
|
| 58 | type="password"
|
| 59 | class="last"
|
| 60 | placeholder="Confirm Password"
|
| 61 | fullWidth
|
| 62 | fieldSize="large"
|
| 63 | [status]="rePass.touched
|
| 64 | ? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success')
|
| 65 | : 'basic'"
|
| 66 | [required]="getConfigValue('forms.validation.password.required')"
|
| 67 | [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null">
|
| 68 | <ng-container *ngIf="rePass.touched">
|
| 69 | <p class="caption status-danger" *ngIf="rePass.invalid && rePass.errors?.required">
|
| 70 | Password confirmation is required!
|
| 71 | </p>
|
| 72 | <p class="caption status-danger" *ngIf="password.value != rePass.value && !rePass.errors?.required">
|
| 73 | Password does not match the confirm password.
|
| 74 | </p>
|
| 75 | </ng-container>
|
| 76 | </div>
|
| 77 |
|
| 78 | <button nbButton
|
| 79 | status="primary"
|
| 80 | fullWidth
|
| 81 | size="large"
|
| 82 | [disabled]="submitted || !resetPassForm.valid"
|
| 83 | [class.btn-pulse]="submitted">
|
| 84 | Change password
|
| 85 | </button>
|
| 86 | </form>
|
| 87 |
|
| 88 | <section class="sign-in-or-up" aria-label="Sign in or sign up">
|
| 89 | <p><a class="text-link" routerLink="../login">Back to Log In</a></p>
|
| 90 | <p><a class="text-link" routerLink="../register">Register</a></p>
|
| 91 | </section>
|