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