Merge pull request 'creating payload for reset and change password' (#22) from mazdak/UX-1570 into dev-pending-09-12-2025
Reviewed-on: https://ct.mfsys.com.pk/aConnect/aConnect-UX/pulls/22dev-pending-09-12-2025
commit
822f4860d9
@ -1,26 +1,88 @@
|
|||||||
import { Component, ViewChild } from '@angular/core';
|
import { Component, ViewChild, OnInit } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { TranslateModule } from '@ngx-translate/core';
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
|
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({
|
@Component({
|
||||||
selector: 'app-reset-password',
|
selector: 'app-reset-password',
|
||||||
imports: [TranslateModule, PasswordHideShowComponent],
|
imports: [TranslateModule, PasswordHideShowComponent, CommonModule, ReactiveFormsModule],
|
||||||
templateUrl: './reset-password.component.html',
|
templateUrl: './reset-password.component.html',
|
||||||
styleUrl: './reset-password.component.scss'
|
styleUrl: './reset-password.component.scss'
|
||||||
})
|
})
|
||||||
export class ResetPasswordComponent {
|
export class ResetPasswordComponent implements OnInit{
|
||||||
passwordType1: string = 'password';
|
resetPasswordForm!: FormGroup
|
||||||
passwordType2: string = 'password';
|
passwordType1: string = 'password';
|
||||||
|
passwordType2: string = 'password';
|
||||||
|
|
||||||
|
@ViewChild('psh1') passwordHideShow1?: PasswordHideShowComponent;
|
||||||
|
@ViewChild('psh2') passwordHideShow2?: PasswordHideShowComponent;
|
||||||
|
|
||||||
@ViewChild('psh1') passwordHideShow1 ?: PasswordHideShowComponent;
|
constructor(private fb: FormBuilder, private httpURIService: HttpURIService){}
|
||||||
@ViewChild('psh2') passwordHideShow2 ?: PasswordHideShowComponent;
|
|
||||||
|
|
||||||
|
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() {
|
togglePasswordType1() {
|
||||||
this.passwordType1 = this.passwordHideShow1?.showPassword ? 'password' : 'text';
|
this.passwordType1 = this.passwordHideShow1?.showPassword ? 'password' : 'text';
|
||||||
}
|
}
|
||||||
togglePasswordType2() {
|
togglePasswordType2() {
|
||||||
this.passwordType2 = this.passwordHideShow2?.showPassword ? 'password' : 'text';
|
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();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue