flare-ui/src/app/components/user-info/user-info.component.html

<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>