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

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

Browse Source
This commit is contained in:
ncoronel
2026-07-02 15:57:54 -03:00
parent 5365811a50
commit 57f58c92be
11 changed files with 168 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -18,7 +18,6 @@
.login-page__create-account {
min-height: 40px;
font-weight: 700;
}
.login-page__divider {

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

@@ -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']);
}
}

35
src/app/features/store/pages/register-page/register-page.component.html Normal file
View File

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

15
src/app/features/store/pages/register-page/register-page.component.scss Normal file
View File

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

20
src/app/features/store/pages/register-page/register-page.component.ts Normal file
View File

@@ -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']);
}
}