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

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: () =>