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

feat(login): redesign login page layout and integrate button component

Browse Source
This commit is contained in:
ncoronel
2026-07-02 15:20:07 -03:00
parent 85465ce7e1
commit 93d49fc7e6
4 changed files with 45 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,48 +1,51 @@
<section class="login-page"> <section class="py-4 py-md-5">
<div class="container-xl px-3 px-md-4"> <div class="container-xl px-3 px-md-4">
<div class="login-page__shell"> <div class="row justify-content-center py-md-4">
<article class="login-card" aria-labelledby="login-title"> <div class="col-12 col-md-9 col-lg-7 col-xl-5">
<div class="login-card__glow" aria-hidden="true"></div> <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="h5 fw-bold text-uppercase mb-0">Iniciar sesion</h1>
</header>
<div class="login-card__content"> <form class="d-grid gap-3" novalidate aria-labelledby="login-title">
<header class="login-card__header"> <div class="d-grid gap-3">
<span class="login-card__eyebrow">Mi cuenta</span> <label class="visually-hidden" for="login-email">Email</label>
<h1 id="login-title" class="login-card__title">Iniciar sesion</h1> <app-input id="login-email" type="email" placeholder="Email" />
<p class="login-card__description">
Accede a tus compras, favoritos y datos de envio desde un mismo lugar.
</p>
</header>
<form class="login-form" novalidate> <div class="d-grid gap-1">
<div class="login-form__fields"> <label class="visually-hidden" for="login-password">Contrasena</label>
<label class="visually-hidden" for="login-email">Email</label> <app-input id="login-password" type="password" placeholder="Contrasena" />
<app-input id="login-email" type="email" placeholder="Email" /> <div class="text-end">
<button type="button" class="btn btn-link p-0 border-0 text-decoration-none small text-secondary">
<div class="login-form__password-row"> Olvide mi contrasena
<label class="visually-hidden" for="login-password">Contrasena</label> </button>
<app-input id="login-password" type="password" placeholder="Contrasena" /> </div>
<button type="button" class="login-form__inline-link">Olvide mi contrasena</button> </div>
</div> </div>
<div class="d-grid gap-2 text-center">
<app-button buttonClass="w-100">Ingresar</app-button>
<button type="button" class="btn btn-link p-0 border-0 text-decoration-none small fw-bold">
Crear cuenta
</button>
</div>
</form>
<div class="d-flex justify-content-center my-4">
<span class="w-100" style="max-width: 16rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 160, 160, 0.55), transparent);"></span>
</div> </div>
<div class="login-form__actions"> <button
<button type="button" class="login-form__submit">Ingresar</button> type="button"
<button type="button" class="login-form__secondary-link">Crear cuenta</button> class="btn btn-outline-secondary w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
</div> >
</form> <i class="fa-brands fa-google text-danger" aria-hidden="true"></i>
<span>Continuar con Google</span>
<div class="login-card__divider" aria-hidden="true"> </button>
<span></span>
</div> </div>
</article>
<button type="button" class="login-card__social-button"> </div>
<span class="login-card__social-icon" aria-hidden="true">
<i class="fa-brands fa-google"></i>
</span>
<span>Continuar con Google</span>
</button>
</div>
</article>
</div> </div>
</div> </div>
</section> </section>

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

@@ -1,229 +0,0 @@
:host {
display: block;
}
.login-page {
position: relative;
padding-block: clamp(2rem, 6vw, 4.5rem);
}
.login-page__shell {
display: grid;
place-items: center;
min-height: min(100%, 42rem);
}
.login-card {
position: relative;
width: min(100%, 34rem);
padding: clamp(1.5rem, 3vw, 2rem);
border: 1px solid rgba(99, 118, 243, 0.08);
border-radius: 1.5rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
rgba(255, 255, 255, 0.94);
box-shadow:
0 30px 70px rgba(18, 26, 62, 0.08),
0 10px 22px rgba(18, 26, 62, 0.06);
overflow: hidden;
}
.login-card__glow {
position: absolute;
inset: -25% auto auto 50%;
width: 70%;
height: 14rem;
border-radius: 999px;
background: color-mix(in srgb, white 58%, var(--tenant-primary));
opacity: 0.35;
filter: blur(42px);
transform: translateX(-50%);
pointer-events: none;
}
.login-card__content {
position: relative;
z-index: 1;
display: grid;
gap: 1.5rem;
}
.login-card__header {
display: grid;
gap: 0.65rem;
text-align: center;
}
.login-card__eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, #ffffff 18%, var(--tenant-primary));
}
.login-card__title {
margin: 0;
font-size: clamp(1.7rem, 4vw, 2.3rem);
font-weight: 700;
letter-spacing: -0.04em;
color: #1d2433;
}
.login-card__description {
width: min(100%, 25rem);
margin: 0 auto;
color: #70778a;
font-size: 0.95rem;
line-height: 1.6;
}
.login-form {
display: grid;
gap: 1.35rem;
}
.login-form__fields {
display: grid;
gap: 0.9rem;
}
.login-form__password-row {
display: grid;
gap: 0.45rem;
}
.login-form__inline-link,
.login-form__secondary-link {
padding: 0;
border: 0;
background: transparent;
font: inherit;
}
.login-form__inline-link {
justify-self: end;
color: #9aa0b2;
font-size: 0.8rem;
transition: color 0.2s ease;
}
.login-form__inline-link:hover,
.login-form__inline-link:focus-visible {
color: color-mix(in srgb, black 12%, var(--tenant-primary));
}
.login-form__actions {
display: grid;
gap: 0.85rem;
}
.login-form__submit {
width: 100%;
min-height: 3rem;
padding: 0.8rem 1.25rem;
border: 1px solid transparent;
border-radius: 0.8rem;
background: linear-gradient(
135deg,
color-mix(in srgb, white 18%, var(--tenant-primary)),
var(--tenant-primary)
);
color: #ffffff;
font-size: 0.96rem;
font-weight: 700;
box-shadow: 0 10px 24px rgba(var(--tenant-primary-rgb, 99, 118, 243), 0.18);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}
.login-form__submit:hover,
.login-form__submit:focus-visible {
filter: brightness(0.96);
box-shadow: 0 14px 28px rgba(var(--tenant-primary-rgb, 99, 118, 243), 0.24);
transform: translateY(-1px);
}
.login-form__secondary-link {
justify-self: center;
color: var(--tenant-primary);
font-size: 0.86rem;
font-weight: 700;
text-decoration: none;
transition: opacity 0.2s ease;
}
.login-form__secondary-link:hover,
.login-form__secondary-link:focus-visible {
opacity: 0.82;
}
.login-card__divider {
display: flex;
align-items: center;
justify-content: center;
}
.login-card__divider span {
width: 100%;
max-width: 16rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(160, 160, 160, 0.55), transparent);
}
.login-card__social-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
width: 100%;
min-height: 3rem;
padding: 0.8rem 1.25rem;
border: 1px solid rgba(30, 41, 59, 0.16);
border-radius: 0.8rem;
background: rgba(255, 255, 255, 0.8);
color: #2f3545;
font-size: 0.95rem;
font-weight: 600;
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.login-card__social-button:hover,
.login-card__social-button:focus-visible {
border-color: rgba(var(--tenant-primary-rgb, 99, 118, 243), 0.28);
box-shadow: 0 10px 26px rgba(18, 26, 62, 0.08);
transform: translateY(-1px);
}
.login-card__social-icon {
display: inline-grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
color: #ea4335;
font-size: 1.05rem;
}
@media (max-width: 575.98px) {
.login-page {
padding-block: 1.5rem 2.5rem;
}
.login-card {
padding: 1.35rem;
border-radius: 1.15rem;
}
.login-card__content {
gap: 1.25rem;
}
.login-card__description {
font-size: 0.9rem;
}
}

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

@@ -1,10 +1,11 @@
import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ButtonComponent } from '../../../../shared/components/button/button.component';
import { InputComponent } from '../../../../shared/components/input/input.component'; import { InputComponent } from '../../../../shared/components/input/input.component';
@Component({ @Component({
selector: 'app-login-page', selector: 'app-login-page',
imports: [InputComponent], imports: [InputComponent, ButtonComponent],
templateUrl: './login-page.component.html', templateUrl: './login-page.component.html',
styleUrl: './login-page.component.scss', styleUrl: './login-page.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush

3
src/app/shared/components/button/button.component.ts
View File

@@ -19,6 +19,7 @@ export class ButtonComponent {
readonly variant = input<ButtonVariant>('primary'); readonly variant = input<ButtonVariant>('primary');
readonly type = input<'button' | 'submit' | 'reset'>('button'); readonly type = input<'button' | 'submit' | 'reset'>('button');
readonly disabled = input(false); readonly disabled = input(false);
readonly buttonClass = input<string>('');
protected readonly buttonClasses = computed(() => { protected readonly buttonClasses = computed(() => {
const variants: Record<ButtonVariant, string> = { const variants: Record<ButtonVariant, string> = {
@@ -29,6 +30,6 @@ export class ButtonComponent {
cancel: 'btn-secondary' cancel: 'btn-secondary'
}; };
return ['btn', variants[this.variant()]]; return ['btn', variants[this.variant()], this.buttonClass()];
}); });
} }