Spaces:
Building
Building
<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> |