tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ncoronel
2026-07-02 15:45:26 -03:00
parent ff3c3233c1
commit 3c98600193
6 changed files with 182 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/core/layout/auth-layout/auth-layout.component.html Normal file
View File

@@ -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>

42
src/app/core/layout/auth-layout/auth-layout.component.scss Normal file
View File

@@ -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;
}
}

11
src/app/core/layout/auth-layout/auth-layout.component.ts Normal file
View File

@@ -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 {}

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

@@ -1,91 +1,66 @@
<section class="py-4 py-md-5">
<div class="container-xl px-3 px-md-4">
<div class="row justify-content-center py-md-4">
<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>
<header class="login-page__header text-center">
<h1 id="login-title" class="login-page__title">Iniciar sesión</h1>
</header>
<form class="d-grid gap-3" novalidate aria-labelledby="login-title">
<div class="d-grid gap-3">
<label class="visually-hidden" for="login-email">Email</label>
<app-input id="login-email" type="email" placeholder="Email" />
<form class="login-page__form d-grid gap-3" novalidate aria-labelledby="login-title">
<div class="d-grid gap-3">
<label class="visually-hidden" for="login-email">Email</label>
<app-input id="login-email" type="email" placeholder="Email" />
<div class="d-grid gap-1">
<label class="visually-hidden" for="login-password">Contraseña</label>
<app-input id="login-password" type="password" placeholder="Contrasena" />
<div class="text-end">
<button
type="button"
class="btn btn-link p-0 border-0 text-decoration-none"
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 class="d-grid gap-1">
<label class="visually-hidden" for="login-password">Contraseña</label>
<app-input id="login-password" type="password" placeholder="Contrasena" />
<div class="text-end">
<button type="button" class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none">
Olvidé mi contraseña
</button>
</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>

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

@@ -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;
}

9
src/app/features/store/store.routes.ts
View File

@@ -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',