fix(register-page): implement password visibility toggle for registration fields

This commit is contained in:
2026-08-26 10:02:56 -03:00
parent 4a952af784
commit 85529f40f2
4 changed files with 55 additions and 3 deletions

View File

@@ -38,11 +38,13 @@
<label class="visually-hidden" for="register-password">Contraseña</label>
<app-input
id="register-password"
type="password"
type="password-toggle"
placeholder="Contraseña"
[value]="form.controls.password.value"
[invalid]="showControlError('password')"
[visible]="passwordVisible()"
(valueChange)="updateField('password', $event)"
(visibleChange)="setPasswordVisibility($event)"
/>
@if (getControlError('password'); as errorMessage) {
<small class="text-danger">{{ errorMessage }}</small>
@@ -51,11 +53,13 @@
<label class="visually-hidden" for="register-password-repeat">Repetir Contraseña</label>
<app-input
id="register-password-repeat"
type="password"
type="password-toggle"
placeholder="Repetir Contraseña"
[value]="form.controls.password_confirmation.value"
[invalid]="showControlError('password_confirmation')"
[visible]="passwordVisible()"
(valueChange)="updateField('password_confirmation', $event)"
(visibleChange)="setPasswordVisibility($event)"
/>
@if (getControlError('password_confirmation'); as errorMessage) {
<small class="text-danger">{{ errorMessage }}</small>

View File

@@ -12,6 +12,48 @@ describe('RegisterPageComponent', () => {
TestBed.resetTestingModule();
});
it('shows and hides both password fields with either visibility control', async () => {
await TestBed.configureTestingModule({
imports: [RegisterPageComponent],
providers: [
provideRouter([]),
{ provide: AuthService, useValue: { register: vi.fn() } },
{ provide: ModalService, useValue: { openSimple: vi.fn() } },
{ provide: ToastService, useValue: { danger: vi.fn() } }
]
}).compileComponents();
const fixture = TestBed.createComponent(RegisterPageComponent);
fixture.detectChanges();
const getPasswordInputs = () =>
Array.from(
fixture.nativeElement.querySelectorAll(
'input#register-password, input#register-password-repeat'
)
) as HTMLInputElement[];
const getVisibilityButtons = () =>
Array.from(
fixture.nativeElement.querySelectorAll('button[aria-label]')
) as HTMLButtonElement[];
expect(getPasswordInputs().map((input) => input.type)).toEqual(['password', 'password']);
getVisibilityButtons()[0].click();
fixture.detectChanges();
expect(getPasswordInputs().map((input) => input.type)).toEqual(['text', 'text']);
expect(getVisibilityButtons().map((button) => button.getAttribute('aria-label'))).toEqual([
'Ocultar contraseña',
'Ocultar contraseña'
]);
getVisibilityButtons()[1].click();
fixture.detectChanges();
expect(getPasswordInputs().map((input) => input.type)).toEqual(['password', 'password']);
});
it('submits registration data and redirects to /login on success', async () => {
const authService = {
register: vi.fn().mockReturnValue(

View File

@@ -48,6 +48,7 @@ export class RegisterPageComponent {
private readonly submittedState = signal(false);
private readonly serverErrorState = signal<string | null>(null);
private readonly isSubmittingState = signal(false);
private readonly passwordVisibleState = signal(false);
protected readonly form = this.formBuilder.nonNullable.group({
nombre_apellido: ['', [Validators.required, Validators.maxLength(TEXT_MAX_LENGTH)]],
@@ -67,6 +68,11 @@ export class RegisterPageComponent {
protected readonly submitted = this.submittedState.asReadonly();
protected readonly serverError = this.serverErrorState.asReadonly();
protected readonly isSubmitting = this.isSubmittingState.asReadonly();
protected readonly passwordVisible = this.passwordVisibleState.asReadonly();
protected setPasswordVisibility(visible: boolean): void {
this.passwordVisibleState.set(visible);
}
goToLogin(): void {
void this.router.navigate(['/login']);

View File

@@ -1,5 +1,5 @@
export const environment = {
production: false,
production: true,
nombre:"Homologación - activo",
url:"https://backend.qa.shopit.com.ar/api/",
urlDescarga:"url/"