feat(register): integrate modal and toast services for success and error handling

src/app/features/store/pages/register-page/register-page.component.spec.ts

@@ -3,6 +3,8 @@ import { provideRouter, Router } from '@angular/router';
 import { of, throwError } from 'rxjs';
 
 import { AuthService } from '../../../../core/services/auth/auth.service';
+import { ModalService } from '../../../../core/services/modal.service';
+import { ToastService } from '../../../../core/services/toast.service';
 import { RegisterPageComponent } from './register-page.component';
 
 describe('RegisterPageComponent', () => {
@@ -23,10 +25,21 @@ describe('RegisterPageComponent', () => {
         })
       )
     };
+    const modalService = {
+      openSimple: vi.fn().mockReturnValue(of(undefined))
+    };
+    const toastService = {
+      danger: vi.fn()
+    };
 
     await TestBed.configureTestingModule({
       imports: [RegisterPageComponent],
-      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
+      providers: [
+        provideRouter([]),
+        { provide: AuthService, useValue: authService },
+        { provide: ModalService, useValue: modalService },
+        { provide: ToastService, useValue: toastService }
+      ]
     }).compileComponents();
 
     const fixture = TestBed.createComponent(RegisterPageComponent);
@@ -49,6 +62,10 @@ describe('RegisterPageComponent', () => {
       password: 'secret123',
       password_confirmation: 'secret123'
     });
+    expect(modalService.openSimple).toHaveBeenCalledWith({
+      content: 'Tu cuenta fue creada correctamente',
+      buttonLabel: 'Cerrar'
+    });
     expect(navigateSpy).toHaveBeenCalledWith(['/login']);
   });
 
@@ -56,10 +73,21 @@ describe('RegisterPageComponent', () => {
     const authService = {
       register: vi.fn()
     };
+    const modalService = {
+      openSimple: vi.fn()
+    };
+    const toastService = {
+      danger: vi.fn()
+    };
 
     await TestBed.configureTestingModule({
       imports: [RegisterPageComponent],
-      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
+      providers: [
+        provideRouter([]),
+        { provide: AuthService, useValue: authService },
+        { provide: ModalService, useValue: modalService },
+        { provide: ToastService, useValue: toastService }
+      ]
     }).compileComponents();
 
     const fixture = TestBed.createComponent(RegisterPageComponent);
@@ -81,10 +109,21 @@ describe('RegisterPageComponent', () => {
     const authService = {
       register: vi.fn()
     };
+    const modalService = {
+      openSimple: vi.fn()
+    };
+    const toastService = {
+      danger: vi.fn()
+    };
 
     await TestBed.configureTestingModule({
       imports: [RegisterPageComponent],
-      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
+      providers: [
+        provideRouter([]),
+        { provide: AuthService, useValue: authService },
+        { provide: ModalService, useValue: modalService },
+        { provide: ToastService, useValue: toastService }
+      ]
     }).compileComponents();
 
     const fixture = TestBed.createComponent(RegisterPageComponent);
@@ -116,10 +155,21 @@ describe('RegisterPageComponent', () => {
         }))
       )
     };
+    const modalService = {
+      openSimple: vi.fn()
+    };
+    const toastService = {
+      danger: vi.fn()
+    };
 
     await TestBed.configureTestingModule({
       imports: [RegisterPageComponent],
-      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
+      providers: [
+        provideRouter([]),
+        { provide: AuthService, useValue: authService },
+        { provide: ModalService, useValue: modalService },
+        { provide: ToastService, useValue: toastService }
+      ]
     }).compileComponents();
 
     const fixture = TestBed.createComponent(RegisterPageComponent);
@@ -134,5 +184,6 @@ describe('RegisterPageComponent', () => {
     component.onSubmit();
 
     expect(component.serverError()).toBe('El email ya esta en uso.');
+    expect(toastService.danger).toHaveBeenCalledWith('El email ya esta en uso.');
   });
 });

src/app/features/store/pages/register-page/register-page.component.ts

@@ -10,6 +10,8 @@ import {
 import { Router } from '@angular/router';
 
 import { AuthService } from '../../../../core/services/auth/auth.service';
+import { ModalService } from '../../../../core/services/modal.service';
+import { ToastService } from '../../../../core/services/toast.service';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
 
@@ -40,6 +42,8 @@ export class RegisterPageComponent {
   private readonly formBuilder = inject(FormBuilder);
   private readonly router = inject(Router);
   private readonly authService = inject(AuthService);
+  private readonly modalService = inject(ModalService);
+  private readonly toastService = inject(ToastService);
 
   private readonly submittedState = signal(false);
   private readonly serverErrorState = signal<string | null>(null);
@@ -78,11 +82,18 @@ export class RegisterPageComponent {
     this.authService.register(this.form.getRawValue()).subscribe({
       next: () => {
         this.isSubmittingState.set(false);
-        void this.router.navigate(['/login']);
+        this.modalService.openSimple({
+          content: 'Tu cuenta fue creada correctamente',
+          buttonLabel: 'Cerrar'
+        }).subscribe(() => {
+          void this.router.navigate(['/login']);
+        });
       },
       error: (error: unknown) => {
         this.isSubmittingState.set(false);
-        this.serverErrorState.set(this.resolveErrorMessage(error));
+        const errorMessage = this.resolveErrorMessage(error);
+        this.serverErrorState.set(errorMessage);
+        this.toastService.danger(errorMessage);
       }
     });
   }

src/app/shared/components/modal-shell/modal-shell.component.scss

@@ -37,6 +37,7 @@
 }
 
 .modal-shell__content {
+  min-height: 180px;
   max-height: calc(100dvh - 2rem);
   border-radius: 1.25rem;
   background:
@@ -72,6 +73,10 @@
 }
 
 .modal-shell__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   padding: 0 1.25rem 1.25rem;
   color: #303030;
 }