feat(login): implement full page reload on successful login and refactor navigation logic
This commit is contained in:
@@ -10,7 +10,7 @@ describe('LoginPageComponent', () => {
|
|||||||
TestBed.resetTestingModule();
|
TestBed.resetTestingModule();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('submits credentials and navigates to home on success', async () => {
|
it('submits credentials and redirects to home with a full page reload on success', async () => {
|
||||||
const authService = {
|
const authService = {
|
||||||
login: vi.fn().mockReturnValue(
|
login: vi.fn().mockReturnValue(
|
||||||
of({
|
of({
|
||||||
@@ -30,6 +30,7 @@ describe('LoginPageComponent', () => {
|
|||||||
const component = fixture.componentInstance as any;
|
const component = fixture.componentInstance as any;
|
||||||
const router = TestBed.inject(Router);
|
const router = TestBed.inject(Router);
|
||||||
const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
|
const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
|
||||||
|
const redirectSpy = vi.spyOn(component, 'redirectToHome').mockImplementation(() => undefined);
|
||||||
|
|
||||||
component.form.setValue({
|
component.form.setValue({
|
||||||
email: 'ada@example.com',
|
email: 'ada@example.com',
|
||||||
@@ -42,7 +43,8 @@ describe('LoginPageComponent', () => {
|
|||||||
email: 'ada@example.com',
|
email: 'ada@example.com',
|
||||||
password: 'secret123'
|
password: 'secret123'
|
||||||
});
|
});
|
||||||
expect(navigateSpy).toHaveBeenCalledWith(['/']);
|
expect(redirectSpy).toHaveBeenCalled();
|
||||||
|
expect(navigateSpy).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('surfaces backend login errors', async () => {
|
it('surfaces backend login errors', async () => {
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { DOCUMENT } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
|
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
|
||||||
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
@@ -20,6 +21,7 @@ export class LoginPageComponent {
|
|||||||
private readonly formBuilder = inject(FormBuilder);
|
private readonly formBuilder = inject(FormBuilder);
|
||||||
private readonly router = inject(Router);
|
private readonly router = inject(Router);
|
||||||
private readonly authService = inject(AuthService);
|
private readonly authService = inject(AuthService);
|
||||||
|
private readonly document = inject(DOCUMENT);
|
||||||
|
|
||||||
private readonly submittedState = signal(false);
|
private readonly submittedState = signal(false);
|
||||||
private readonly serverErrorState = signal<string | null>(null);
|
private readonly serverErrorState = signal<string | null>(null);
|
||||||
@@ -51,7 +53,7 @@ export class LoginPageComponent {
|
|||||||
this.authService.login(this.form.getRawValue()).subscribe({
|
this.authService.login(this.form.getRawValue()).subscribe({
|
||||||
next: () => {
|
next: () => {
|
||||||
this.isSubmittingState.set(false);
|
this.isSubmittingState.set(false);
|
||||||
void this.router.navigate(['/']);
|
this.redirectToHome();
|
||||||
},
|
},
|
||||||
error: (error: unknown) => {
|
error: (error: unknown) => {
|
||||||
this.isSubmittingState.set(false);
|
this.isSubmittingState.set(false);
|
||||||
@@ -100,6 +102,11 @@ export class LoginPageComponent {
|
|||||||
return 'El valor ingresado no es valido.';
|
return 'El valor ingresado no es valido.';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected redirectToHome(): void {
|
||||||
|
const homeUrl = this.router.serializeUrl(this.router.createUrlTree(['/']));
|
||||||
|
this.document.location.assign(homeUrl);
|
||||||
|
}
|
||||||
|
|
||||||
private resolveErrorMessage(error: unknown): string {
|
private resolveErrorMessage(error: unknown): string {
|
||||||
const errorPayload =
|
const errorPayload =
|
||||||
typeof error === 'object' && error !== null && 'error' in error
|
typeof error === 'object' && error !== null && 'error' in error
|
||||||
|
|||||||
Reference in New Issue
Block a user