flare / flare-ui /src /app /components /user-info /user-info.component.html
ciyidogan's picture
Upload 118 files
9f79da5 verified
<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>