feat(register): add register page with routing and form implementation

src/app/app.routes.spec.ts

@@ -106,6 +106,35 @@ describe('app routes', () => {
     expect(compiled.textContent).toContain('Componentes reutilizables');
   });
 
+  it('loads the login page at /login and shows the create account CTA', async () => {
+    const { fixture, router } = await renderAppAt('/login');
+    const compiled = fixture.nativeElement as HTMLElement;
+
+    expect(router.url).toBe('/login');
+    expect(compiled.querySelector('app-login-page')).not.toBeNull();
+    expect(compiled.textContent).toContain('Iniciar sesión');
+    expect(compiled.textContent).toContain('Crear cuenta');
+  });
+
+  it('loads the register page at /register and renders the shared auth fields', async () => {
+    const { fixture, router } = await renderAppAt('/register');
+    const compiled = fixture.nativeElement as HTMLElement;
+    const placeholders = Array.from(compiled.querySelectorAll('input')).map((input) =>
+      input.getAttribute('placeholder')
+    );
+
+    expect(router.url).toBe('/register');
+    expect(compiled.querySelector('app-register-page')).not.toBeNull();
+    expect(compiled.textContent).toContain('CREAR CUENTA');
+    expect(compiled.textContent).toContain('Volver');
+    expect(placeholders).toEqual([
+      'Nombre y Apellido',
+      'Email',
+      'Contraseña',
+      'Repetir Contraseña'
+    ]);
+  });
+
   it('renders the tenant not found screen for any route when the tenant is missing', async () => {
     const { fixture } = await renderAppAt(
       '/componentes-test/reutilizables',

src/app/features/store/pages/login-page/login-page.component.html

@@ -20,9 +20,14 @@
 
   <div class="d-grid gap-2 text-center">
     <app-button hostClass="w-100 d-block" buttonClass="w-100">Ingresar</app-button>
-    <button type="button" class="login-page__create-account btn btn-link border-0 text-decoration-none px-3 py-2">
+    <app-button
+      variant="borderless"
+      hostClass="w-100 d-block text-center"
+      buttonClass="login-page__create-account px-3 py-2"
+      (click)="goToRegister()"
+    >
       Crear cuenta
-    </button>
+    </app-button>
   </div>
 </form>
 

src/app/features/store/pages/login-page/login-page.component.scss

@@ -18,7 +18,6 @@
 
 .login-page__create-account {
   min-height: 40px;
-  font-weight: 700;
 }
 
 .login-page__divider {

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

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
@@ -10,4 +11,10 @@ import { InputComponent } from '../../../../shared/components/input/input.compon
   styleUrl: './login-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class LoginPageComponent {}
+export class LoginPageComponent {
+  private readonly router = inject(Router);
+
+  goToRegister(): void {
+    void this.router.navigate(['/register']);
+  }
+}

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

@@ -0,0 +1,35 @@
+<header class="register-page__header text-center">
+  <h1 id="register-title" class="auth-title">CREAR CUENTA</h1>
+</header>
+
+<form class="register-page__form d-grid gap-3" novalidate aria-labelledby="register-title">
+  <div class="d-grid gap-3">
+    <label class="visually-hidden" for="register-full-name">Nombre y Apellido</label>
+    <app-input id="register-full-name" placeholder="Nombre y Apellido" />
+
+    <label class="visually-hidden" for="register-email">Email</label>
+    <app-input id="register-email" type="email" placeholder="Email" />
+
+    <label class="visually-hidden" for="register-password">Contraseña</label>
+    <app-input id="register-password" type="password" placeholder="Contraseña" />
+
+    <label class="visually-hidden" for="register-password-repeat">Repetir Contraseña</label>
+    <app-input
+      id="register-password-repeat"
+      type="password"
+      placeholder="Repetir Contraseña"
+    />
+  </div>
+
+  <div class="d-grid gap-2 text-center">
+    <app-button hostClass="w-100 d-block" buttonClass="w-100">Crear Cuenta</app-button>
+    <app-button
+      variant="borderless"
+      hostClass="w-100 d-block text-center"
+      buttonClass="register-page__back-action px-3 py-2"
+      (click)="goToLogin()"
+    >
+      Volver
+    </app-button>
+  </div>
+</form>

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

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+.register-page__header {
+  margin-bottom: 1.5rem;
+}
+
+.register-page__form {
+  width: 100%;
+}
+
+.register-page__back-action {
+  min-height: 40px;
+}

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

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { InputComponent } from '../../../../shared/components/input/input.component';
+
+@Component({
+  selector: 'app-register-page',
+  imports: [InputComponent, ButtonComponent],
+  templateUrl: './register-page.component.html',
+  styleUrl: './register-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RegisterPageComponent {
+  private readonly router = inject(Router);
+
+  goToLogin(): void {
+    void this.router.navigate(['/login']);
+  }
+}

src/app/features/store/store.routes.ts

@@ -3,6 +3,7 @@ import { Routes } from '@angular/router';
 import { AuthLayoutComponent } from '../../core/layout/auth-layout/auth-layout.component';
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
 import { LoginPageComponent } from './pages/login-page/login-page.component';
+import { RegisterPageComponent } from './pages/register-page/register-page.component';
 import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
 
 export const routes: Routes = [
@@ -24,6 +25,16 @@ export const routes: Routes = [
           }
         ]
       },
+      {
+        path: 'register',
+        component: AuthLayoutComponent,
+        children: [
+          {
+            path: '',
+            component: RegisterPageComponent
+          }
+        ]
+      },
       {
         path: 'producto/:id',
         loadComponent: () =>

src/app/shared/components/button/button.component.scss

@@ -30,7 +30,8 @@
 
 .btn-outline-primary,
 .btn-outline-neutral,
-.btn-outline-danger {
+.btn-outline-danger,
+.btn-borderless {
   --bs-btn-bg: transparent;
   --bs-btn-hover-color: #fff;
   --bs-btn-active-color: #fff;
@@ -107,3 +108,22 @@
   --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
   --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
 }
+
+.btn-borderless {
+  min-width: auto;
+  padding-inline: 0;
+  border: 0;
+  color: var(--tenant-primary);
+  font-weight: 700;
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-color: color-mix(in srgb, black 18%, var(--tenant-primary));
+  --bs-btn-hover-bg: transparent;
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-color: color-mix(in srgb, black 24%, var(--tenant-primary));
+  --bs-btn-active-bg: transparent;
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: transparent;
+  --bs-btn-disabled-opacity: 1;
+}

src/app/shared/components/button/button.component.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  it('applies the borderless variant class', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ButtonComponent);
+    fixture.componentRef.setInput('variant', 'borderless');
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+
+    expect(button.classList.contains('btn-borderless')).toBe(true);
+  });
+});

src/app/shared/components/button/button.component.ts

@@ -5,6 +5,7 @@ export type ButtonVariant =
   | 'primary'
   | 'secondary'
   | 'neutral-outline'
+  | 'borderless'
   | 'danger'
   | 'danger-secondary'
   | 'cancel';
@@ -31,6 +32,7 @@ export class ButtonComponent {
       primary: 'btn-primary',
       secondary: 'btn-outline-primary',
       'neutral-outline': 'btn-outline-neutral',
+      borderless: 'btn-borderless',
       danger: 'btn-danger',
       'danger-secondary': 'btn-outline-danger',
       cancel: 'btn-secondary'