aConnect-UX/src/app/user-management/change-password/change-password.component.ts

import { CommonModule } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
import { HttpURIService } from '../../app.http.uri.service';
import { URIKey } from '../../utils/uri-enums';
import { StorageService } from '../../shared/services/storage.service';
import { I18NService } from '../../services/i18n.service';
import { HttpErrorResponse } from '@angular/common/http';
import { FormConstants, SuccessMessages } from '../../utils/enums';
import { Router } from '@angular/router';
import { AuthenticationService } from '../../services/authenticate.service';


@Component({
  selector: 'app-change-password',
  imports: [TranslateModule, FormsModule, ReactiveFormsModule, CommonModule, PasswordHideShowComponent,],
  templateUrl: './change-password.component.html',
  styleUrl: './change-password.component.scss'
})

export class ChangePasswordComponent implements OnInit{
  isFirstLogin = false;
  firstTimeLoginForm!: FormGroup;
  changePasswordForm!: FormGroup;
  currentLanguage = new FormControl();
  httpService: any;

passwordType: string = 'password';
passwordType1: string = 'password';
passwordType2: string = 'password';

@ViewChild('psh') passwordHideShow?: PasswordHideShowComponent;
@ViewChild('psh1') passwordHideShow1 ?: PasswordHideShowComponent;
@ViewChild('psh2') passwordHideShow2 ?: PasswordHideShowComponent;
constructor(
  private fb: FormBuilder, 
  private httpURIService: HttpURIService, 
  private storageService: StorageService, 
  private i18nService: I18NService, 
  private router: Router,
  private authService: AuthenticationService ){}

 togglePasswordType() {
    this.passwordType = this.passwordHideShow?.showPassword ? 'password' : 'text';
  }
 togglePasswordType1() {
    this.passwordType1 = this.passwordHideShow1?.showPassword ? 'password' : 'text';
  }
 togglePasswordType2() {
    this.passwordType2 = this.passwordHideShow2?.showPassword ? 'password' : 'text';
  }

   ngOnInit(): void { 
     const userStr = this.storageService.getItem('user');
     if (userStr) {
       const user = JSON.parse(userStr);
       this.isFirstLogin = user?.requiresPasswordChange || user?.user?.firstLogin || false;
     }
        
     if (this.isFirstLogin) {
       this.firstTimeLoginForm = this.fb.group({
         oldPassword: ['', Validators.required],
         newPassword: ['', [
           Validators.required,
           Validators.minLength(8),
           Validators.maxLength(20),
           Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/)
         ]],
         confirmPassword: ['', [
           Validators.required,
           Validators.minLength(8),
           Validators.maxLength(20),
           Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/)
         ]]
       }, { validators: [
        this.passwordMatchValidator,
        this.oldAndNewPasswordNotSame,] 
      });
     } 
  
  else {
    this.changePasswordForm = this.fb.group({
      oldPassword: ['', Validators.required],
      newPassword: ['', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20),
        Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/)
      ]
      ],
      confirmPassword: ['', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20),
        Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/)
      ]
      ]
    }, { validators: [
      this.passwordMatchValidator,
      this.oldAndNewPasswordNotSame,
    ]
    }, 
     );

  }
}

  passwordMatchValidator(group: AbstractControl): ValidationErrors | null {
    const newPassword = group.get('newPassword')?.value;
    const confirmPassword = group.get('confirmPassword')?.value;
    return newPassword === confirmPassword ? null : { passwordMismatch: true };
  }
  
  oldAndNewPasswordNotSame(group: AbstractControl): ValidationErrors | null {
  const oldPassword = group.get('oldPassword')?.value;
  const newPassword = group.get('newPassword')?.value;

  if (!oldPassword || !newPassword) {
    return null;
  }

  return oldPassword === newPassword
    ? { oldAndNewPasswordSame: true }
    : null;
}


  checkIfFirstTimeChangePasswordOrNot(): void {
    try {
      const currentUser: any = JSON.parse(
        this.storageService.getItem('user') || '{}'
      );

      this.isFirstLogin = !!currentUser?.user?.isFirstLogin;
    } catch (error) {
      console.error('Error parsing user data:', error);
      this.isFirstLogin = false;
    }
  }

 getFormPayload() {
  const form = this.isFirstLogin ? this.firstTimeLoginForm : this.changePasswordForm;
  
  return {
    oldPassword: form.get('oldPassword')?.value || null,
    newPassword: form.get('newPassword')?.value,
    userId: this.storageService.getItem('USER_ID'),
    porOrgaCode: this.storageService.getItem('POR_ORGACODE')
  };
}
  onSubmit(){
    if (this.isFirstLogin) {
      this.changeFirstTimePassword();
    } else {
      this.changeRegularPassword();
    }
  }

  changeFirstTimePassword() {
     if (!this.firstTimeLoginForm || this.firstTimeLoginForm.invalid) {
        if (this.firstTimeLoginForm) {
            this.markFormGroupTouched(this.firstTimeLoginForm);
        }
        return;
    }


    const payload = this.getFormPayload();

    this.httpURIService.requestPOST(URIKey.FIRST_LOGIN_URI, payload)
      .subscribe({
        next: (response) => {
          if (!(response instanceof HttpErrorResponse)) {
            this.i18nService.success(SuccessMessages.CHANGE_PASSWORD_SUCCESS, []);
   
            const userStr = this.storageService.getItem('user');
            if (userStr) {
              const user = JSON.parse(userStr);
              user.requiresPasswordChange = false;
              if (user.user) {
                user.user.firstLogin = false;
              }

              if (payload.newPassword) {
                this.storageService.setItem(FormConstants.PASSWORD, payload.newPassword);
              }
              this.storageService.setItem('user', JSON.stringify(user));
              this.authService.updateCredentialsAfterPasswordChange(payload.newPassword);

            }
               
            this.router.navigate(['/home/dashboard']);
          }
        },
        error: (error) => {
          console.error('Password change failed:', error);
        }
      });
  }

  changeRegularPassword() {
    if (!this.changePasswordForm || this.changePasswordForm.invalid) {
        if (this.changePasswordForm) {
            this.markFormGroupTouched(this.changePasswordForm);
        }
        return;
    }

    const payload = this.getFormPayload();

    this.httpURIService.requestPOST(URIKey.CHANGE_PASSWORD_URI, payload)
      .subscribe({
        next: (response) => {
          if (!(response instanceof HttpErrorResponse)) {
            this.i18nService.success(SuccessMessages.CHANGE_PASSWORD_SUCCESS, []);
            this.router.navigate(['/home/dashboard']);
          }
        }
      });
  }

  private markFormGroupTouched(formGroup: FormGroup) {
    Object.values(formGroup.controls).forEach(control => {
      control.markAsTouched();
      if (control instanceof FormGroup) {
        this.markFormGroupTouched(control);
      }
    });
  }

}