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,109 @@
-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, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { ApiService } from '../../services/api.service';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-user-info',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressBarModule,
+    MatSnackBarModule
+  ],
+  templateUrl: './user-info.component.html',
+  styleUrls: ['./user-info.component.scss']
+})
+export class UserInfoComponent {
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private snackBar = inject(MatSnackBar);
+
+  username = this.authService.getUsername() || '';
+  currentPassword = '';
+  newPassword = '';
+  confirmPassword = '';
+  saving = false;
+  showCurrentPassword = false;
+  showNewPassword = false;
+  showConfirmPassword = false;
+
+  get passwordStrength(): { level: number; text: string; color: string } {
+    if (!this.newPassword) {
+      return { level: 0, text: '', color: '' };
+    }
+
+    let strength = 0;
+    
+    // Length check
+    if (this.newPassword.length >= 8) strength++;
+    if (this.newPassword.length >= 12) strength++;
+    
+    // Character variety
+    if (/[a-z]/.test(this.newPassword)) strength++;
+    if (/[A-Z]/.test(this.newPassword)) strength++;
+    if (/[0-9]/.test(this.newPassword)) strength++;
+    if (/[^a-zA-Z0-9]/.test(this.newPassword)) strength++;
+
+    if (strength <= 2) {
+      return { level: 33, text: 'Weak', color: 'warn' };
+    } else if (strength <= 4) {
+      return { level: 66, text: 'Medium', color: 'accent' };
+    } else {
+      return { level: 100, text: 'Strong', color: 'primary' };
+    }
+  }
+
+  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)
+    );
+  }
+
+  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;
+    }
+
+    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 = '';
+    } catch (error: any) {
+      const message = error.error?.detail || 'Failed to change password';
+      this.snackBar.open(message, 'Close', { duration: 5000 });
+    } finally {
+      this.saving = false;
+    }
+  }
 }