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

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 { MatCardModule } from '@angular/material/card';  // ADD THIS
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,
    MatCardModule,  // ADD THIS
    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;
    }
  }
}