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

import { Component, ViewChild, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { CommonModule } from '@angular/common';
import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
import { URIKey } from '../../utils/uri-enums';
import { HttpURIService } from '../../app.http.uri.service';

@Component({
  selector: 'app-reset-password',
  imports: [TranslateModule, PasswordHideShowComponent, CommonModule, ReactiveFormsModule],
  templateUrl: './reset-password.component.html',
  styleUrl: './reset-password.component.scss'
})
export class ResetPasswordComponent implements OnInit{
  resetPasswordForm!: FormGroup
  passwordType1: string = 'password';
  passwordType2: string = 'password';

  @ViewChild('psh1') passwordHideShow1?: PasswordHideShowComponent;
  @ViewChild('psh2') passwordHideShow2?: PasswordHideShowComponent;
  
  constructor(private fb: FormBuilder, private httpURIService: HttpURIService){}

  ngOnInit(): void {
    this.resetPasswordForm = this.fb.group({
      userId: ['', Validators.required],
      newPassword: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', [Validators.required, Validators.minLength(6)]]
    },
    {
      validators: this.passwordMatchValidator
    }
  );
  this.resetPasswordForm.get('newPassword')?.valueChanges.subscribe(()=>{
    this.resetPasswordForm.get('confirmPassword')?.updateValueAndValidity();
  });

 
  }
 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('newPassword')?.value;
    const confirmPassword = group.get('confirmPassword')?.value;

    return newPassword === confirmPassword ? null : { passwordMismatch: true };
  }

  get newPasswordError() {
    const control = this.resetPasswordForm.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.resetPasswordForm.get('confirmPassword');
    if (!control || !control.touched) return null;

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

    return null;
  }

  onSubmit() {
    if (this.resetPasswordForm.invalid) return;

    const payload = {
      userId: this.resetPasswordForm.value.userId,
      newPassword: this.resetPasswordForm.value.newPassword
    };
    this.httpURIService.requestPOST(URIKey.RESET_PASSWORD_URI, payload)
  .subscribe();

  }

 
}