creating payload for reset and change password
creating payload for reset and change password before the apis are readymazdak/UX-1570
Mazdak Gibran
1 month ago
parent
1867e11502
commit
61df1a4ac2
@ -1,26 +1,89 @@
|
||||
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 { CommonModule } from '@angular/common';
|
||||
import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
|
||||
import { URIKey } from '../../utils/uri-enums';
|
||||
import { URIService } from '../../app.uri';
|
||||
import { HttpURIService } from '../../app.http.uri.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-reset-password',
|
||||
imports: [TranslateModule, PasswordHideShowComponent],
|
||||
imports: [TranslateModule, PasswordHideShowComponent, CommonModule, ReactiveFormsModule],
|
||||
templateUrl: './reset-password.component.html',
|
||||
styleUrl: './reset-password.component.scss'
|
||||
})
|
||||
export class ResetPasswordComponent {
|
||||
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 uriService: URIService, 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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue