From 85465ce7e1918f89b31a13eac92084c5d0b1bc04 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 2 Jul 2026 15:14:08 -0300 Subject: [PATCH] feat(login): add login page component with template and styles --- .../login-page/login-page.component.html | 48 ++++ .../login-page/login-page.component.scss | 229 ++++++++++++++++++ .../pages/login-page/login-page.component.ts | 12 + src/app/features/store/store.routes.ts | 5 + 4 files changed, 294 insertions(+) create mode 100644 src/app/features/store/pages/login-page/login-page.component.html create mode 100644 src/app/features/store/pages/login-page/login-page.component.scss create mode 100644 src/app/features/store/pages/login-page/login-page.component.ts diff --git a/src/app/features/store/pages/login-page/login-page.component.html b/src/app/features/store/pages/login-page/login-page.component.html new file mode 100644 index 0000000..982f941 --- /dev/null +++ b/src/app/features/store/pages/login-page/login-page.component.html @@ -0,0 +1,48 @@ +
+
+ +
+
diff --git a/src/app/features/store/pages/login-page/login-page.component.scss b/src/app/features/store/pages/login-page/login-page.component.scss new file mode 100644 index 0000000..8d6b777 --- /dev/null +++ b/src/app/features/store/pages/login-page/login-page.component.scss @@ -0,0 +1,229 @@ +: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; + } +} diff --git a/src/app/features/store/pages/login-page/login-page.component.ts b/src/app/features/store/pages/login-page/login-page.component.ts new file mode 100644 index 0000000..59f6b61 --- /dev/null +++ b/src/app/features/store/pages/login-page/login-page.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +import { InputComponent } from '../../../../shared/components/input/input.component'; + +@Component({ + selector: 'app-login-page', + imports: [InputComponent], + templateUrl: './login-page.component.html', + styleUrl: './login-page.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class LoginPageComponent {} diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts index a1b22f7..e99f280 100644 --- a/src/app/features/store/store.routes.ts +++ b/src/app/features/store/store.routes.ts @@ -1,6 +1,7 @@ import { Routes } from '@angular/router'; 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'; export const routes: Routes = [ @@ -12,6 +13,10 @@ export const routes: Routes = [ path: '', component: StoreHomePageComponent }, + { + path: 'login', + component: LoginPageComponent + }, { path: 'producto/:id', loadComponent: () =>