Update flare-ui/src/app/components/user-info/user-info.component.ts

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

@@ -1,83 +1,110 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-user-info',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  template: `
-    <div class="user-info-container">
-      <h2>User Information</h2>
-
-      <div class="card">
-        <div class="card-body">
-          <p class="text-muted">Password change functionality coming soon...</p>
-
-          <form (ngSubmit)="changePassword()" #passwordForm="ngForm">
-            <div class="form-group">
-              <label for="currentPassword">Current Password</label>
-              <input
-                type="password"
-                id="currentPassword"
-                name="currentPassword"
-                [(ngModel)]="currentPassword"
-                required
-                disabled
-              >
-            </div>
-
-            <div class="form-group">
-              <label for="newPassword">New Password</label>
-              <input
-                type="password"
-                id="newPassword"
-                name="newPassword"
-                [(ngModel)]="newPassword"
-                required
-                disabled
-              >
-            </div>
-
-            <div class="form-group">
-              <label for="confirmPassword">Confirm New Password</label>
-              <input
-                type="password"
-                id="confirmPassword"
-                name="confirmPassword"
-                [(ngModel)]="confirmPassword"
-                required
-                disabled
-              >
-            </div>
-
-            <button type="submit" class="btn btn-primary" disabled>
-              Change Password
-            </button>
-          </form>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .user-info-container {
-      h2 {
-        margin-bottom: 1.5rem;
-      }
-    }
-
-    .text-muted {
-      color: #6c757d;
-      margin-bottom: 1rem;
-    }
-  `]
-})
-export class UserInfoComponent {
-  currentPassword = '';
-  newPassword = '';
-  confirmPassword = '';
-
-  changePassword() {
-    console.log('Password change not implemented yet');
-  }
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ApiService } from '../../services/api.service';
+
+@Component({
+  selector: 'app-user-info',
+  templateUrl: './user-info.component.html',
+  styleUrls: ['./user-info.component.scss']
+})
+export class UserInfoComponent {
+  passwordForm: FormGroup;
+  hideCurrentPassword = true;
+  hideNewPassword = true;
+  hideConfirmPassword = true;
+  passwordStrength = 0;
+  passwordStrengthText = '';
+  passwordStrengthColor = '';
+
+  constructor(
+    private fb: FormBuilder,
+    private apiService: ApiService,
+    private snackBar: MatSnackBar
+  ) {
+    this.passwordForm = this.fb.group({
+      currentPassword: ['', Validators.required],
+      newPassword: ['', [
+        Validators.required,
+        Validators.minLength(8),
+        Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/)
+      ]],
+      confirmPassword: ['', Validators.required]
+    }, { validators: this.passwordMatchValidator });
+
+    // Watch password changes for strength indicator
+    this.passwordForm.get('newPassword')?.valueChanges.subscribe(password => {
+      this.updatePasswordStrength(password);
+    });
+  }
+
+  passwordMatchValidator(form: FormGroup) {
+    const newPassword = form.get('newPassword');
+    const confirmPassword = form.get('confirmPassword');
+    
+    if (newPassword && confirmPassword && newPassword.value !== confirmPassword.value) {
+      confirmPassword.setErrors({ passwordMismatch: true });
+    } else {
+      confirmPassword.setErrors(null);
+    }
+    return null;
+  }
+
+  updatePasswordStrength(password: string) {
+    if (!password) {
+      this.passwordStrength = 0;
+      this.passwordStrengthText = '';
+      return;
+    }
+
+    let strength = 0;
+    
+    // Length check
+    if (password.length >= 8) strength += 20;
+    if (password.length >= 12) strength += 20;
+    
+    // Character variety
+    if (/[a-z]/.test(password)) strength += 20;
+    if (/[A-Z]/.test(password)) strength += 20;
+    if (/\d/.test(password)) strength += 20;
+    if (/[^a-zA-Z0-9]/.test(password)) strength += 20;
+
+    this.passwordStrength = Math.min(strength, 100);
+    
+    if (this.passwordStrength < 40) {
+      this.passwordStrengthText = 'Weak';
+      this.passwordStrengthColor = 'warn';
+    } else if (this.passwordStrength < 70) {
+      this.passwordStrengthText = 'Medium';
+      this.passwordStrengthColor = 'accent';
+    } else {
+      this.passwordStrengthText = 'Strong';
+      this.passwordStrengthColor = 'primary';
+    }
+  }
+
+  async onSubmit() {
+    if (this.passwordForm.invalid) {
+      return;
+    }
+
+    try {
+      await this.apiService.changePassword(
+        this.passwordForm.value.currentPassword,
+        this.passwordForm.value.newPassword
+      ).toPromise();
+
+      this.snackBar.open('Password changed successfully', 'Close', {
+        duration: 3000,
+        panelClass: 'success-snackbar'
+      });
+
+      this.passwordForm.reset();
+    } catch (error) {
+      this.snackBar.open('Failed to change password', 'Close', {
+        duration: 5000,
+        panelClass: 'error-snackbar'
+      });
+    }
+  }
 }