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

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

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -12,6 +12,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { ApiService } from '../../services/api.service';
 import { AuthService } from '../../services/auth.service';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-user-info',
@@ -31,7 +32,7 @@ import { AuthService } from '../../services/auth.service';
   templateUrl: './user-info.component.html',
   styleUrls: ['./user-info.component.scss']
 })
-export class UserInfoComponent {
+export class UserInfoComponent implements OnDestroy {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private snackBar = inject(MatSnackBar);
@@ -45,6 +46,14 @@ export class UserInfoComponent {
   showCurrentPassword = false;
   showNewPassword = false;
   showConfirmPassword = false;
+  
+  // Memory leak prevention
+  private destroyed$ = new Subject<void>();
+
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
 
   get passwordStrength(): { level: number; text: string; color: string } {
     if (!this.newPassword) {
@@ -73,49 +82,94 @@ export class UserInfoComponent {
   }
 
   get isFormValid(): boolean {
-    return !!(
-      this.currentPassword &&
-      this.newPassword &&
-      this.confirmPassword &&
-      this.newPassword === this.confirmPassword &&
-      this.newPassword.length >= 8 &&
-      /[a-z]/.test(this.newPassword) &&
-      /[A-Z]/.test(this.newPassword) &&
-      /[0-9]/.test(this.newPassword)
-    );
+    return !!this.currentPassword && 
+           !!this.newPassword && 
+           this.newPassword === this.confirmPassword && 
+           this.newPassword.length >= 8;
   }
 
-  async changePassword() {
-    if (!this.isFormValid) {
-      this.snackBar.open('Please fill all fields correctly', 'Close', { duration: 3000 });
-      return;
-    }
-
-    if (this.newPassword !== this.confirmPassword) {
-      this.snackBar.open('New passwords do not match', 'Close', { duration: 3000 });
-      return;
-    }
+  changePassword() {
+    if (!this.isFormValid || this.saving) return;
 
     this.saving = true;
-    try {
-      await this.apiService.changePassword(this.currentPassword, this.newPassword).toPromise();
-      this.snackBar.open('Password changed successfully', 'Close', { duration: 3000 });
-      
-      // Clear form
-      this.currentPassword = '';
-      this.newPassword = '';
-      this.confirmPassword = '';
-      
-      // Navigate to projects tab after successful password change
-      setTimeout(() => {
-        this.router.navigate(['/projects']);
-      }, 500);
-      
-    } catch (error: any) {
-      const message = error.error?.detail || 'Failed to change password';
-      this.snackBar.open(message, 'Close', { duration: 5000 });
-    } finally {
-      this.saving = false;
+    
+    this.apiService.changePassword(this.currentPassword, this.newPassword)
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: () => {
+          this.saving = false;
+          
+          // Clear form
+          this.currentPassword = '';
+          this.newPassword = '';
+          this.confirmPassword = '';
+          
+          // Show success message
+          this.snackBar.open(
+            'Password changed successfully. Please login again.',
+            'OK',
+            { 
+              duration: 5000,
+              panelClass: ['success-snackbar']
+            }
+          ).afterDismissed().subscribe(() => {
+            // Logout after password change
+            this.authService.logout();
+          });
+        },
+        error: (error) => {
+          this.saving = false;
+          
+          // Handle validation errors
+          if (error.status === 422 && error.error?.details) {
+            // Field-level errors
+            const fieldErrors = error.error.details;
+            if (fieldErrors.some((e: any) => e.field === 'current_password')) {
+              this.snackBar.open(
+                'Current password is incorrect',
+                'Close',
+                { 
+                  duration: 5000,
+                  panelClass: ['error-snackbar']
+                }
+              );
+            } else if (fieldErrors.some((e: any) => e.field === 'new_password')) {
+              const pwError = fieldErrors.find((e: any) => e.field === 'new_password');
+              this.snackBar.open(
+                pwError.message || 'New password does not meet requirements',
+                'Close',
+                { 
+                  duration: 5000,
+                  panelClass: ['error-snackbar']
+                }
+              );
+            }
+          } else {
+            // Generic error
+            this.snackBar.open(
+              error.error?.detail || 'Failed to change password',
+              'Close',
+              { 
+                duration: 5000,
+                panelClass: ['error-snackbar']
+              }
+            );
+          }
+        }
+      });
+  }
+
+  togglePasswordVisibility(field: 'current' | 'new' | 'confirm') {
+    switch(field) {
+      case 'current':
+        this.showCurrentPassword = !this.showCurrentPassword;
+        break;
+      case 'new':
+        this.showNewPassword = !this.showNewPassword;
+        break;
+      case 'confirm':
+        this.showConfirmPassword = !this.showConfirmPassword;
+        break;
     }
   }
 }