Add reset password modal to user management
Introduced a new ResetPasswordModalComponent for resetting user passwords from the setup user page. Updated the setup-user component and template to include a reset password button and modal, and refactored password-hide-show to support resetting its state. Also adjusted reset-password component to enable userId input.mazdak/UX-2303
Mazdak Gibran
1 week ago
parent
1ddb35bbac
commit
3b70e23da0
@ -0,0 +1,78 @@
|
|||||||
|
<div class="modal fade" id="resetPasswordModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">
|
||||||
|
{{ 'resetPassword' | translate }}
|
||||||
|
</h5>
|
||||||
|
<button type="button" class="btn-close" (click)="closeModal()"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<form [formGroup]="resetPasswordForm">
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">{{ 'userID' | translate }}</label>
|
||||||
|
<input [readonly]="true" class="form-control" formControlName="userId" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">{{ 'enterNewPassword' | translate }}</label>
|
||||||
|
|
||||||
|
<div class="password-wrapper">
|
||||||
|
<input class="form-control" formControlName="newPassword" placeholder="{{'enterNewPassword' | translate}}" [type]="newPasswordType" appNoWhitespaces />
|
||||||
|
|
||||||
|
<app-password-hide-show #newPasswordPsh class="password-eye align-items-stretch" [showPassword]="true"
|
||||||
|
(onEyeClick)="togglePasswordType()">
|
||||||
|
</app-password-hide-show>
|
||||||
|
</div>
|
||||||
|
<div class="text-danger" *ngIf="resetPasswordForm.get('newPassword')?.touched ">
|
||||||
|
<div *ngIf="resetPasswordForm.get('newPassword')?.hasError('required')">
|
||||||
|
{{ 'fieldRequired' | translate }}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="resetPasswordForm.get('newPassword')?.hasError('pattern')">
|
||||||
|
{{ 'passwordPattern' | translate }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">{{ 'confirmPassword' | translate }}</label>
|
||||||
|
|
||||||
|
<div class="password-wrapper">
|
||||||
|
<input class="form-control" formControlName="confirmPassword" placeholder="{{'confirmPassword' | translate}}" [type]="confirmPasswordType" appNoWhitespaces />
|
||||||
|
|
||||||
|
<app-password-hide-show #confirmPasswordPsh class="password-eye align-items-stretch" [showPassword]="true"
|
||||||
|
(onEyeClick)="toggleConfirmPasswordType()">
|
||||||
|
</app-password-hide-show>
|
||||||
|
</div>
|
||||||
|
<div class="text-danger" *ngIf="resetPasswordForm.get('confirmPassword')?.touched ">
|
||||||
|
<div *ngIf="resetPasswordForm.get('confirmPassword')?.hasError('required')">
|
||||||
|
{{ 'fieldRequired' | translate }}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="resetPasswordForm.hasError('passwordMismatch')">
|
||||||
|
{{ 'passwordsDoNotMatch' | translate }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer d-flex justify-content-end gap-2">
|
||||||
|
<button type="button" class="btn btn-outline-secondary btn-sm px-4" (click)="closeModal()">
|
||||||
|
{{ 'cancel' | translate }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-primary btn-sm px-4" [disabled]="resetPasswordForm.invalid" (click)="submit()">
|
||||||
|
{{ 'save' | translate }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ResetPasswordModalComponent } from './reset-password-modal.component';
|
||||||
|
|
||||||
|
describe('ResetPasswordModalComponent', () => {
|
||||||
|
let component: ResetPasswordModalComponent;
|
||||||
|
let fixture: ComponentFixture<ResetPasswordModalComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [ResetPasswordModalComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(ResetPasswordModalComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
import { Component, Input, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { HttpURIService } from '../../app.http.uri.service';
|
||||||
|
import { URIKey } from '../../utils/uri-enums';
|
||||||
|
import { I18NService } from '../../services/i18n.service';
|
||||||
|
import { StorageService } from '../../shared/services/storage.service';
|
||||||
|
import { SuccessMessages } from '../../utils/enums';
|
||||||
|
import { HttpErrorResponse } from '@angular/common/http';
|
||||||
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-reset-password-modal',
|
||||||
|
standalone: true,
|
||||||
|
imports: [TranslateModule, ReactiveFormsModule, CommonModule, PasswordHideShowComponent],
|
||||||
|
templateUrl: './reset-password-modal.component.html'
|
||||||
|
})
|
||||||
|
export class ResetPasswordModalComponent implements OnInit {
|
||||||
|
newPasswordType: string = 'password'
|
||||||
|
confirmPasswordType: string = 'password'
|
||||||
|
@Input() userId!: string;
|
||||||
|
|
||||||
|
resetPasswordForm!: FormGroup;
|
||||||
|
@ViewChild('newPasswordPsh') passwordHideShow?:PasswordHideShowComponent
|
||||||
|
@ViewChild('confirmPasswordPsh') confirmPasswordHideShow?:PasswordHideShowComponent
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private httpURIService: HttpURIService,
|
||||||
|
private i18nService: I18NService,
|
||||||
|
private storageService: StorageService
|
||||||
|
) {}
|
||||||
|
togglePasswordType() {
|
||||||
|
this.newPasswordType = this.passwordHideShow?.showPassword ? 'password' : 'text';
|
||||||
|
}
|
||||||
|
toggleConfirmPasswordType() {
|
||||||
|
this.confirmPasswordType = this.confirmPasswordHideShow?.showPassword ? 'password' : 'text';
|
||||||
|
}
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.resetPasswordForm = this.fb.group({
|
||||||
|
userId: [''],
|
||||||
|
newPassword: ['', [
|
||||||
|
Validators.required,
|
||||||
|
Validators.minLength(8),
|
||||||
|
Validators.maxLength(20),
|
||||||
|
Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).+$/)
|
||||||
|
]],
|
||||||
|
confirmPassword: ['', Validators.required]
|
||||||
|
}, { validators: this.passwordMatchValidator });
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
if (changes['userId'] && this.resetPasswordForm) {
|
||||||
|
this.resetPasswordForm.reset({
|
||||||
|
userId: this.userId,
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
this.newPasswordType = 'password';
|
||||||
|
this.confirmPasswordType = 'password';
|
||||||
|
|
||||||
|
this.passwordHideShow?.reset();
|
||||||
|
this.confirmPasswordHideShow?.reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
passwordMatchValidator(group: AbstractControl): ValidationErrors | null {
|
||||||
|
const newPassword = group.get('newPassword')?.value;
|
||||||
|
const confirmPassword = group.get('confirmPassword')?.value;
|
||||||
|
return newPassword === confirmPassword ? null : { passwordMismatch: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
if (this.resetPasswordForm.invalid) return;
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
userId: this.userId,
|
||||||
|
newPassword: this.resetPasswordForm.get('newPassword')?.value,
|
||||||
|
porOrgaCode: this.storageService.getItem('POR_ORGACODE')
|
||||||
|
};
|
||||||
|
|
||||||
|
this.httpURIService.requestPOST(URIKey.RESET_PASSWORD_URI, payload)
|
||||||
|
.subscribe({
|
||||||
|
next: (res) => {
|
||||||
|
if (!(res instanceof HttpErrorResponse)) {
|
||||||
|
this.i18nService.success(SuccessMessages.RESET_PASSWORD_SUCCESS, []);
|
||||||
|
this.closeModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closeModal() {
|
||||||
|
this.resetPasswordForm.reset();
|
||||||
|
this.newPasswordType = 'password';
|
||||||
|
this.confirmPasswordType = 'password';
|
||||||
|
|
||||||
|
this.passwordHideShow?.reset();
|
||||||
|
this.confirmPasswordHideShow?.reset();
|
||||||
|
|
||||||
|
const modal = document.getElementById('resetPasswordModal');
|
||||||
|
modal?.classList.remove('show');
|
||||||
|
modal?.setAttribute('aria-hidden', 'true');
|
||||||
|
modal!.style.display = 'none';
|
||||||
|
document.body.classList.remove('modal-open');
|
||||||
|
document.querySelector('.modal-backdrop')?.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue