change password

mazdak/UX-2073-new
Mazdak Gibran 2 weeks ago
parent 150fb0f88b
commit 4af126e444

@ -53,7 +53,7 @@ export class AuthenticationService {
this.credentialService.setPermission([]); this.credentialService.setPermission([]);
} }
this.buttonManagementService.setButtonPermissions(this.credentialService.getPermission(), this.isAdminUser()); this.buttonManagementService.setButtonPermissions(this.credentialService.getPermission(), this.isAdminUser());
if(data.user.isFirstLogin){ if(data.user.firstLogin){
this.router.navigate(["/changepassword"]); this.router.navigate(["/changepassword"]);
} else { } else {
this.router.navigate(["/home/dashboard"]); this.router.navigate(["/home/dashboard"]);

@ -3,7 +3,7 @@
<div class="inner-pg-sp"> <div class="inner-pg-sp">
<div class="container-fluid"> <div class="container-fluid">
<div *ngIf="isFirstLogin && firstTimeLoginForm" class="auth-page d-flex align-items-center"> <div *ngIf="firstLogin && firstTimeLoginForm" class="auth-page d-flex align-items-center">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-lg-5 col-xl-4"> <div class="col-md-6 col-lg-5 col-xl-4">
@ -29,6 +29,11 @@
(onEyeClick)="togglePasswordType1()"> (onEyeClick)="togglePasswordType1()">
</app-password-hide-show> </app-password-hide-show>
</div> </div>
<div class="text-danger"
*ngIf="firstTimeLoginForm.get('newPassword')?.touched && firstTimeLoginForm.get('newPassword')?.invalid">
{{ firstTimeLoginForm.get('newPassword')?.hasError('required') ? ('fieldRequired' | translate) :
firstTimeLoginForm.get('newPassword')?.hasError('minlength') ? ('passwordTooShort' | translate) : '' }}
</div>
</div> </div>
<!-- Confirm Password --> <!-- Confirm Password -->
@ -43,6 +48,12 @@
(onEyeClick)="togglePasswordType2()"> (onEyeClick)="togglePasswordType2()">
</app-password-hide-show> </app-password-hide-show>
</div> </div>
<div class="text-danger"
*ngIf="(firstTimeLoginForm.get('confirmPassword')?.touched && firstTimeLoginForm.get('confirmPassword')?.invalid) || firstTimeLoginForm.hasError('passwordMismatch')">
{{ firstTimeLoginForm.get('confirmPassword')?.hasError('required') ? ('fieldRequired' | translate) :
firstTimeLoginForm.get('confirmPassword')?.hasError('minlength') ? ('passwordTooShort' | translate) :
firstTimeLoginForm.hasError('passwordMismatch') ? ('passwordsDoNotMatch' | translate) : '' }}
</div>
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
@ -60,7 +71,7 @@
</div> </div>
</div> </div>
<div *ngIf="!isFirstLogin && changePasswordForm" class="full-width-page"> <div *ngIf="!firstLogin && changePasswordForm" class="full-width-page">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="d-sm-flex align-items-center justify-content-between navbar-header p-0"> <div class="d-sm-flex align-items-center justify-content-between navbar-header p-0">
@ -130,8 +141,10 @@
</div> </div>
<div class="text-danger" *ngIf="newPasswordError$"> <div class="text-danger"
{{ newPasswordError$ | translate }} *ngIf="changePasswordForm.get('newPassword')?.touched && changePasswordForm.get('newPassword')?.invalid">
{{ changePasswordForm.get('newPassword')?.hasError('required') ? ('fieldRequired' | translate) :
changePasswordForm.get('newPassword')?.hasError('minlength') ? ('passwordTooShort' | translate) : '' }}
</div> </div>
</div> </div>
</div> </div>
@ -153,8 +166,11 @@
(onEyeClick)="togglePasswordType2()"></app-password-hide-show> (onEyeClick)="togglePasswordType2()"></app-password-hide-show>
</div> </div>
<div class="text-danger" *ngIf="confirmPasswordError$"> <div class="text-danger"
{{ confirmPasswordError$ | translate }} *ngIf="(changePasswordForm.get('confirmPassword')?.touched && changePasswordForm.get('confirmPassword')?.invalid) || changePasswordForm.hasError('passwordMismatch')">
{{ changePasswordForm.get('confirmPassword')?.hasError('required') ? ('fieldRequired' | translate) :
changePasswordForm.get('confirmPassword')?.hasError('minlength') ? ('passwordTooShort' | translate) :
changePasswordForm.hasError('passwordMismatch') ? ('passwordsDoNotMatch' | translate) : '' }}
</div> </div>
</div> </div>

@ -18,7 +18,7 @@ import { SuccessMessages } from '../../utils/enums';
}) })
export class ChangePasswordComponent implements OnInit{ export class ChangePasswordComponent implements OnInit{
isFirstLogin = false; firstLogin = true;
firstTimeLoginForm!: FormGroup; firstTimeLoginForm!: FormGroup;
changePasswordForm!: FormGroup; changePasswordForm!: FormGroup;
currentLanguage = new FormControl(); currentLanguage = new FormControl();
@ -49,23 +49,28 @@ constructor(private fb: FormBuilder, private httpURIService: HttpURIService, pri
return newPassword === confirmPassword ? null : { passwordMismatch: true }; return newPassword === confirmPassword ? null : { passwordMismatch: true };
} }
ngOnInit(): void { initForm(): void {
this.checkIfFirstTimeChangePasswordOrNot(); if (this.firstLogin) {
this.changePasswordForm = undefined!;
if (this.isFirstLogin) {
this.firstTimeLoginForm = this.fb.group({ this.firstTimeLoginForm = this.fb.group({
newPassword: ['', [Validators.required, Validators.minLength(6)]], newPassword: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', [Validators.required, Validators.minLength(6)]] confirmPassword: ['', [Validators.required, Validators.minLength(6)]]
}, { validators: this.passwordMatchValidator }); }, { validators: this.passwordMatchValidator });
} else { } else {
this.firstTimeLoginForm = undefined!;
this.changePasswordForm = this.fb.group({ this.changePasswordForm = this.fb.group({
oldPassword: ['', Validators.required], oldPassword: ['', Validators.required],
newPassword: ['', [Validators.required, Validators.minLength(6)]], newPassword: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', [Validators.required, Validators.minLength(6)]] confirmPassword: ['', [Validators.required, Validators.minLength(6)]]
}, { validators: this.passwordMatchValidator }); }, { validators: this.passwordMatchValidator });
} }
} }
ngOnInit(): void {
this.checkIfFirstTimeChangePasswordOrNot();
this.initForm();
}
checkIfFirstTimeChangePasswordOrNot(): void { checkIfFirstTimeChangePasswordOrNot(): void {
try { try {
@ -73,10 +78,10 @@ constructor(private fb: FormBuilder, private httpURIService: HttpURIService, pri
this.storageService.getItem('user') || '{}' this.storageService.getItem('user') || '{}'
); );
this.isFirstLogin = !!currentUser?.user?.isFirstLogin; this.firstLogin = !!currentUser?.user?.firstLogin;
} catch (error) { } catch (error) {
console.error('Error parsing user data:', error); console.error('Error parsing user data:', error);
this.isFirstLogin = false; this.firstLogin = false;
} }
} }
@ -91,28 +96,8 @@ constructor(private fb: FormBuilder, private httpURIService: HttpURIService, pri
); );
} }
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;
}
getFormPayload() { getFormPayload() {
const form = this.isFirstLogin ? this.firstTimeLoginForm : this.changePasswordForm; const form = this.firstLogin ? this.firstTimeLoginForm : this.changePasswordForm;
return { return {
oldPassword: form.get('oldPassword')?.value || null, oldPassword: form.get('oldPassword')?.value || null,
@ -129,6 +114,18 @@ constructor(private fb: FormBuilder, private httpURIService: HttpURIService, pri
next: (response) => { next: (response) => {
if (!(response instanceof HttpErrorResponse)) { if (!(response instanceof HttpErrorResponse)) {
this.i18nService.success(SuccessMessages.CHANGE_PASSWORD_SUCCESS, []); this.i18nService.success(SuccessMessages.CHANGE_PASSWORD_SUCCESS, []);
if (this.firstLogin) {
const currentUser = JSON.parse(this.storageService.getItem('user') || '{}');
if (currentUser?.user) {
currentUser.user.firstLogin = false;
this.storageService.setItem('user', JSON.stringify(currentUser));
this.firstLogin = false;
console.log(this.firstLogin)
this.initForm();
}
}
} }
} }
}); });

Loading…
Cancel
Save