Create user-info.component.html

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

@@ -0,0 +1,77 @@
+<div class="user-info-container">
+  <h2>Change Password</h2>
+  
+  <form [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>Current Password</mat-label>
+      <input matInput 
+             [type]="hideCurrentPassword ? 'password' : 'text'"
+             formControlName="currentPassword"
+             autocomplete="current-password">
+      <button mat-icon-button matSuffix 
+              (click)="hideCurrentPassword = !hideCurrentPassword"
+              type="button">
+        <mat-icon>{{hideCurrentPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+      </button>
+      <mat-error *ngIf="passwordForm.get('currentPassword')?.hasError('required')">
+        Current password is required
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>New Password</mat-label>
+      <input matInput 
+             [type]="hideNewPassword ? 'password' : 'text'"
+             formControlName="newPassword"
+             autocomplete="new-password">
+      <button mat-icon-button matSuffix 
+              (click)="hideNewPassword = !hideNewPassword"
+              type="button">
+        <mat-icon>{{hideNewPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+      </button>
+      <mat-error *ngIf="passwordForm.get('newPassword')?.hasError('required')">
+        New password is required
+      </mat-error>
+      <mat-error *ngIf="passwordForm.get('newPassword')?.hasError('minlength')">
+        Password must be at least 8 characters
+      </mat-error>
+      <mat-error *ngIf="passwordForm.get('newPassword')?.hasError('pattern')">
+        Password must contain uppercase, lowercase and numbers
+      </mat-error>
+    </mat-form-field>
+
+    <div class="password-strength" *ngIf="passwordForm.get('newPassword')?.value">
+      <div class="strength-label">
+        Password Strength: <span [class]="'strength-' + passwordStrengthColor">{{passwordStrengthText}}</span>
+      </div>
+      <mat-progress-bar [value]="passwordStrength" [color]="passwordStrengthColor"></mat-progress-bar>
+    </div>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>Confirm New Password</mat-label>
+      <input matInput 
+             [type]="hideConfirmPassword ? 'password' : 'text'"
+             formControlName="confirmPassword"
+             autocomplete="new-password">
+      <button mat-icon-button matSuffix 
+              (click)="hideConfirmPassword = !hideConfirmPassword"
+              type="button">
+        <mat-icon>{{hideConfirmPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+      </button>
+      <mat-error *ngIf="passwordForm.get('confirmPassword')?.hasError('required')">
+        Please confirm your password
+      </mat-error>
+      <mat-error *ngIf="passwordForm.get('confirmPassword')?.hasError('passwordMismatch')">
+        Passwords do not match
+      </mat-error>
+    </mat-form-field>
+
+    <div class="form-actions">
+      <button mat-raised-button color="primary" 
+              type="submit"
+              [disabled]="passwordForm.invalid">
+        Save
+      </button>
+    </div>
+  </form>
+</div>