import { Component, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Router } from '@angular/router'; 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'; 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'; @Component({ selector: 'app-user-info', standalone: true, imports: [ CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressBarModule, MatCardModule, MatSnackBarModule, MatProgressSpinnerModule ], 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); private router = inject(Router); 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 = ''; // 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; } } }