feat(login): implement auth layout and restructure login page with improved styling and structure

src/app/core/layout/auth-layout/auth-layout.component.html

@@ -0,0 +1,13 @@
+<section class="auth-layout">
+  <div class="auth-layout__container container-xl">
+    <div class="auth-layout__row row justify-content-center">
+      <div class="auth-layout__column col-12 col-md-9 col-lg-7 col-xl-5">
+        <article class="auth-layout__card card border-0 shadow-lg">
+          <div class="auth-layout__body card-body">
+            <router-outlet />
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>

src/app/core/layout/auth-layout/auth-layout.component.scss

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+
+.auth-layout {
+  padding: 1.5rem 0 2rem;
+}
+
+.auth-layout__container {
+  padding-inline: 1rem;
+}
+
+.auth-layout__row {
+  padding-block: 1rem;
+}
+
+.auth-layout__card {
+  border-radius: 1.5rem;
+  overflow: hidden;
+}
+
+.auth-layout__body {
+  padding: 2rem 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .auth-layout {
+    padding: 3rem 0;
+  }
+
+  .auth-layout__container {
+    padding-inline: 1.5rem;
+  }
+
+  .auth-layout__row {
+    padding-block: 1.5rem;
+  }
+
+  .auth-layout__body {
+    padding: 3rem;
+  }
+}

src/app/core/layout/auth-layout/auth-layout.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-auth-layout',
+  imports: [RouterOutlet],
+  templateUrl: './auth-layout.component.html',
+  styleUrl: './auth-layout.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AuthLayoutComponent {}

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

@@ -1,91 +1,66 @@
-<section class="py-4 py-md-5">
+<header class="login-page__header text-center">
-  <div class="container-xl px-3 px-md-4">
+  <h1 id="login-title" class="login-page__title">Iniciar sesión</h1>
-    <div class="row justify-content-center py-md-4">
+</header>
-      <div class="col-12 col-md-9 col-lg-7 col-xl-5">
-        <article class="card border-0 shadow-lg rounded-4">
-          <div class="card-body p-4 p-md-5">
-            <header class="text-center mb-4">
-              <h1 id="login-title" class="fw-bold text-uppercase mb-0" style="font-size: 17px; color: #666666;">
-                Iniciar sesión
-              </h1>
-            </header>
 
-            <form class="d-grid gap-3" novalidate aria-labelledby="login-title">
+<form class="login-page__form d-grid gap-3" novalidate aria-labelledby="login-title">
-              <div class="d-grid gap-3">
+  <div class="d-grid gap-3">
-                <label class="visually-hidden" for="login-email">Email</label>
+    <label class="visually-hidden" for="login-email">Email</label>
-                <app-input id="login-email" type="email" placeholder="Email" />
+    <app-input id="login-email" type="email" placeholder="Email" />
 
-                <div class="d-grid gap-1">
+    <div class="d-grid gap-1">
-                  <label class="visually-hidden" for="login-password">Contraseña</label>
+      <label class="visually-hidden" for="login-password">Contraseña</label>
-                  <app-input id="login-password" type="password" placeholder="Contrasena" />
+      <app-input id="login-password" type="password" placeholder="Contrasena" />
-                  <div class="text-end">
+      <div class="text-end">
-                    <button
+        <button type="button" class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none">
-                      type="button"
+          Olvidé mi contraseña
-                      class="btn btn-link p-0 border-0 text-decoration-none"
+        </button>
-                      style="font-size: 12px; font-weight: 325; color: #A0A0A0;"
-                    >
-                      Olvidé mi contraseña
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <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="btn btn-link border-0 text-decoration-none fw-bold px-3 py-2"
-                  style="min-height: 40px;"
-                >
-                  Crear cuenta
-                </button>
-              </div>
-            </form>
-
-            <div class="d-flex align-items-center justify-content-center gap-3 my-4" aria-hidden="true">
-              <span class="flex-grow-1" style="max-width: 18rem; height: 1px; background-color: #d9d9d9;"></span>
-              <span
-                class="rounded-circle border flex-shrink-0"
-                style="width: 16px; height: 16px; border-color: #d9d9d9 !important; background-color: #ffffff;"
-              ></span>
-              <span class="flex-grow-1" style="max-width: 18rem; height: 1px; background-color: #d9d9d9;"></span>
-            </div>
-
-            <app-button
-              variant="neutral-outline"
-              hostClass="w-100 d-block"
-              buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
-              [disabled]="true"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 48 48"
-                width="18"
-                height="18"
-                aria-hidden="true"
-              >
-                <path
-                  fill="#FFC107"
-                  d="M43.61 20.08H42V20H24v8h11.3C33.65 32.66 29.19 36 24 36c-6.63 0-12-5.37-12-12s5.37-12 12-12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C12.95 4 4 12.95 4 24s8.95 20 20 20s20-8.95 20-20c0-1.34-.14-2.65-.39-3.92z"
-                />
-                <path
-                  fill="#FF3D00"
-                  d="M6.31 14.69l6.57 4.82C14.66 15.1 18.96 12 24 12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C16.32 4 9.66 8.34 6.31 14.69z"
-                />
-                <path
-                  fill="#4CAF50"
-                  d="M24 44c5.2 0 9.9-1.99 13.47-5.23l-6.19-5.24C29.2 35.11 26.72 36 24 36c-5.17 0-9.62-3.32-11.28-7.95l-6.52 5.02C9.51 39.56 16.24 44 24 44z"
-                />
-                <path
-                  fill="#1976D2"
-                  d="M43.61 20.08H42V20H24v8h11.3c-.79 2.37-2.31 4.38-4.28 5.53l.01-.01l6.19 5.24C36.78 39.13 44 34 44 24c0-1.34-.14-2.65-.39-3.92z"
-                />
-              </svg>
-              <span>Continuar con Google</span>
-            </app-button>
-          </div>
-        </article>
       </div>
     </div>
   </div>
-</section>
+
+  <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">
+      Crear cuenta
+    </button>
+  </div>
+</form>
+
+<div class="login-page__divider d-flex align-items-center justify-content-center gap-3" aria-hidden="true">
+  <span class="login-page__divider-line flex-grow-1"></span>
+  <span class="login-page__divider-dot rounded-circle border flex-shrink-0"></span>
+  <span class="login-page__divider-line flex-grow-1"></span>
+</div>
+
+<app-button
+  variant="neutral-outline"
+  hostClass="w-100 d-block"
+  buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
+  [disabled]="true"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 48 48"
+    width="18"
+    height="18"
+    aria-hidden="true"
+  >
+    <path
+      fill="#FFC107"
+      d="M43.61 20.08H42V20H24v8h11.3C33.65 32.66 29.19 36 24 36c-6.63 0-12-5.37-12-12s5.37-12 12-12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C12.95 4 4 12.95 4 24s8.95 20 20 20s20-8.95 20-20c0-1.34-.14-2.65-.39-3.92z"
+    />
+    <path
+      fill="#FF3D00"
+      d="M6.31 14.69l6.57 4.82C14.66 15.1 18.96 12 24 12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C16.32 4 9.66 8.34 6.31 14.69z"
+    />
+    <path
+      fill="#4CAF50"
+      d="M24 44c5.2 0 9.9-1.99 13.47-5.23l-6.19-5.24C29.2 35.11 26.72 36 24 36c-5.17 0-9.62-3.32-11.28-7.95l-6.52 5.02C9.51 39.56 16.24 44 24 44z"
+    />
+    <path
+      fill="#1976D2"
+      d="M43.61 20.08H42V20H24v8h11.3c-.79 2.37-2.31 4.38-4.28 5.53l.01-.01l6.19 5.24C36.78 39.13 44 34 44 24c0-1.34-.14-2.65-.39-3.92z"
+    />
+  </svg>
+  <span>Continuar con Google</span>
+</app-button>

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

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+}
+
+.login-page__header {
+  margin-bottom: 1.5rem;
+}
+
+.login-page__title {
+  margin: 0;
+  color: #666666;
+  font-size: 17px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.login-page__form {
+  width: 100%;
+}
+
+.login-page__forgot-password {
+  color: #a0a0a0;
+  font-size: 12px;
+  font-weight: 325;
+}
+
+.login-page__create-account {
+  min-height: 40px;
+  font-weight: 700;
+}
+
+.login-page__divider {
+  margin-block: 1.5rem;
+}
+
+.login-page__divider-line {
+  max-width: 18rem;
+  height: 1px;
+  background-color: #d9d9d9;
+}
+
+.login-page__divider-dot {
+  width: 16px;
+  height: 16px;
+  border-color: #d9d9d9 !important;
+  background-color: #ffffff;
+}

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

@@ -1,5 +1,6 @@
 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 { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
@@ -15,7 +16,13 @@ export const routes: Routes = [
       },
       {
         path: 'login',
-        component: LoginPageComponent
+        component: AuthLayoutComponent,
+        children: [
+          {
+            path: '',
+            component: LoginPageComponent
+          }
+        ]
       },
       {
         path: 'producto/:id',