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 { StorageService } from '../../shared/services/storage.service';
import { Router } from '@angular/router';
import { URIService } from '../../app.uri';
import { HttpURIService } from '../../app.http.uri.service';
import { URIKey } from '../../utils/uri-enums';

@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;
  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 uriService: URIService, private httpURIService: HttpURIService){}

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

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

   ngOnInit(): void { 
    this.changePasswordForm = this.fb.group({
      oldPassword: ['', Validators.required],
      enterNewPassword: ['',[ Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', [Validators.required, Validators.minLength(6)]]
    },
    {
      validators: this.passwordMatchValidator
    }
    )
  }
   get newPasswordError$() {
    const control = this.changePasswordForm.get('newPassword');
    if (!control || !control.touched) return null;

    if (control.hasError('required')) return 'fieldRequired';
    if (control.hasError('minlength')) return 'passwordTooShort';
    return null;
  }

   get confirmPasswordError$() {
    const control = this.changePasswordForm.get('confirmPassword');
    if (!control || !control.touched) return null;

    if (control.hasError('required')) return 'fieldRequired';
    if (control.hasError('minlength')) return 'passwordTooShort';
    if (this.changePasswordForm.hasError('passwordMismatch')) return 'passwordsDoNotMatch';

    return null;
  }

  onSubmit(){
    if(this.changePasswordForm.invalid){return}
    
    const payload = {
      oldPassword: this.changePasswordForm.value.oldPassword,
      newPassword: this.changePasswordForm.value.enterNewPassword
    }

    this.httpURIService.requestPOST(URIKey.CHANGE_PASSWORD_URI, payload)
      .subscribe();
  }

}