Spaces:
Running
Running
Update flare-ui/src/app/components/user-info/user-info.component.html
Browse files
flare-ui/src/app/components/user-info/user-info.component.html
CHANGED
|
@@ -0,0 +1,81 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div class="user-info-container">
|
| 2 |
+
<h2>User Information</h2>
|
| 3 |
+
|
| 4 |
+
<mat-card>
|
| 5 |
+
<mat-card-header>
|
| 6 |
+
<mat-card-title>Change Password</mat-card-title>
|
| 7 |
+
<mat-card-subtitle>User: {{ username }}</mat-card-subtitle>
|
| 8 |
+
</mat-card-header>
|
| 9 |
+
|
| 10 |
+
<mat-card-content>
|
| 11 |
+
<form (ngSubmit)="changePassword()" #passwordForm="ngForm">
|
| 12 |
+
<mat-form-field appearance="outline" class="full-width">
|
| 13 |
+
<mat-label>Current Password</mat-label>
|
| 14 |
+
<input matInput
|
| 15 |
+
[type]="showCurrentPassword ? 'text' : 'password'"
|
| 16 |
+
name="currentPassword"
|
| 17 |
+
[(ngModel)]="currentPassword"
|
| 18 |
+
required
|
| 19 |
+
[disabled]="saving">
|
| 20 |
+
<button mat-icon-button matSuffix type="button"
|
| 21 |
+
(click)="showCurrentPassword = !showCurrentPassword">
|
| 22 |
+
<mat-icon>{{ showCurrentPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
|
| 23 |
+
</button>
|
| 24 |
+
</mat-form-field>
|
| 25 |
+
|
| 26 |
+
<mat-form-field appearance="outline" class="full-width">
|
| 27 |
+
<mat-label>New Password</mat-label>
|
| 28 |
+
<input matInput
|
| 29 |
+
[type]="showNewPassword ? 'text' : 'password'"
|
| 30 |
+
name="newPassword"
|
| 31 |
+
[(ngModel)]="newPassword"
|
| 32 |
+
required
|
| 33 |
+
[disabled]="saving">
|
| 34 |
+
<button mat-icon-button matSuffix type="button"
|
| 35 |
+
(click)="showNewPassword = !showNewPassword">
|
| 36 |
+
<mat-icon>{{ showNewPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
|
| 37 |
+
</button>
|
| 38 |
+
<mat-hint>At least 8 characters with uppercase, lowercase and numbers</mat-hint>
|
| 39 |
+
</mat-form-field>
|
| 40 |
+
|
| 41 |
+
<div class="password-strength" *ngIf="newPassword">
|
| 42 |
+
<div class="strength-label">
|
| 43 |
+
Password Strength:
|
| 44 |
+
<span [class]="'strength-' + passwordStrength.color">
|
| 45 |
+
{{ passwordStrength.text }}
|
| 46 |
+
</span>
|
| 47 |
+
</div>
|
| 48 |
+
<mat-progress-bar
|
| 49 |
+
[value]="passwordStrength.level"
|
| 50 |
+
[color]="passwordStrength.color">
|
| 51 |
+
</mat-progress-bar>
|
| 52 |
+
</div>
|
| 53 |
+
|
| 54 |
+
<mat-form-field appearance="outline" class="full-width">
|
| 55 |
+
<mat-label>Confirm New Password</mat-label>
|
| 56 |
+
<input matInput
|
| 57 |
+
[type]="showConfirmPassword ? 'text' : 'password'"
|
| 58 |
+
name="confirmPassword"
|
| 59 |
+
[(ngModel)]="confirmPassword"
|
| 60 |
+
required
|
| 61 |
+
[disabled]="saving">
|
| 62 |
+
<button mat-icon-button matSuffix type="button"
|
| 63 |
+
(click)="showConfirmPassword = !showConfirmPassword">
|
| 64 |
+
<mat-icon>{{ showConfirmPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
|
| 65 |
+
</button>
|
| 66 |
+
<mat-error *ngIf="confirmPassword && confirmPassword !== newPassword">
|
| 67 |
+
Passwords do not match
|
| 68 |
+
</mat-error>
|
| 69 |
+
</mat-form-field>
|
| 70 |
+
|
| 71 |
+
<div class="form-actions">
|
| 72 |
+
<button mat-raised-button color="primary"
|
| 73 |
+
type="submit"
|
| 74 |
+
[disabled]="!isFormValid || saving">
|
| 75 |
+
{{ saving ? 'Saving...' : 'Change Password' }}
|
| 76 |
+
</button>
|
| 77 |
+
</div>
|
| 78 |
+
</form>
|
| 79 |
+
</mat-card-content>
|
| 80 |
+
</mat-card>
|
| 81 |
+
</div>
|