src/app/auth/register/register.component.ts
Llama y notifica si el registro fue exitoso.
| selector | app-register |
| styleUrls | ../auth.styles.css |
| templateUrl | ./register.component.html |
Properties |
Methods |
| register | ||||||
register(form: NgForm)
|
||||||
|
Recibe los datos del formulario de registro.
Parameters :
Returns :
void
|
| credentials |
Type : Customers
|
Default value : new Customers()
|
|
Credenciales del usuario. |
import { Component } from "@angular/core";
import { AuthenticationService} from "./../authentication.service";
import { Router } from "@angular/router";
import { NgForm } from '@angular/forms';
import { Customers } from '../../../models/customers';
import { ToastrService } from 'ngx-toastr';
/**
*Llama y notifica si el registro fue exitoso.
*/
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['../auth.styles.css']
})
export class RegisterComponent {
/**
*Credenciales del usuario.
*/
credentials: Customers = new Customers();
/**
*@ignore
*/
constructor(private auth: AuthenticationService, private router: Router, private toastr: ToastrService) {}
/**
*Recibe los datos del formulario de registro.
*/
register(form: NgForm)
{
this.credentials.id_user= 0;
this.credentials.email= form.value.email;
this.credentials.username= form.value.username;
this.credentials.password= form.value.password;
this.auth.register(this.credentials).subscribe(
() => {
this.toastr.success('Registro exitoso');
this.toastr.info('Puede proceder a iniciar sesión');
this.router.navigateByUrl("/**");
},
err => {
this.toastr.error('Compruebe los datos introducidos','Error al registrarse');
}
);
}
}
<br><br>
<div class="py-5 text-center text-white">
<div class="container-fluid">
<div class="row">
<div class="p-5 col-lg-6 col-10 mx-auto login-box">
<img src="/assets/images/logo.png" class="avatar text-center" alt="Logo FixLab">
<br>
<h1>¡Únete a nosotros!</h1>
<form (ngSubmit)="register(f)" #f="ngForm" novalidate="" method="POST">
<!-- Nombre de usuario -->
<input type="text" id="username" name="username" class="form-control" #username="ngModel" [(ngModel)]="credentials.username" [ngClass]="{'is-invalid':username.errors!=null && username.touched, 'is-valid':username.errors==null}" required minlength="3" placeholder="Nombre de usuario">
<!--Si no es válido-->
<div class="invalid-feedback">
<div *ngIf="username.errors?.required">
<small><strong>Este campo es requerido</strong></small>
</div>
<div *ngIf="username.errors?.minlength">
<small><strong>El nombre debe tener al menos {{username.errors.minlength.requiredLength}} carácteres</strong></small>
</div>
</div>
<!--Si es válido-->
<div *ngIf="username.valid" class="valid-feedback"></div>
<hr>
<!--Email-->
<input type="text" id="email" name="email" class="form-control" #email="ngModel" [(ngModel)]="credentials.email"
[ngClass]= "{'is-invalid':email.errors!=null && email.touched, 'is-valid':email.errors==null}"
required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="Correo electrónico">
<!--Si es válido-->
<div *ngIf="email.valid" class="valid-feedback"></div>
<!--Si es inválido-->
<div class="invalid-feedback">
<div *ngIf="email.errors?.required">
<small><strong>Este campo es requerido</strong></small>
</div>
<div *ngIf="email.errors?.pattern">
<small><strong>Se debe introducir un patrón de email válido</strong></small>
</div>
</div>
<hr>
<input type="password" class="form-control" id="password" name="password" #password="ngModel" [(ngModel)]="credentials.password" placeholder="Password" [ngClass]= "{'is-invalid':password.errors!=null && password.touched, 'is-valid':password.errors==null}" required minlength="8">
<!--Si es válido-->
<div *ngIf="email.valid" class="valid-feedback"></div>
<!--Si es inválido-->
<div class="invalid-feedback">
<div *ngIf="password.errors?.required">
<small><strong>Este campo es requerido</strong></small>
</div>
<div *ngIf="password.errors?.minlength">
<small><strong>El nombre debe tener al menos {{password.errors.minlength.requiredLength}} carácteres</strong></small>
</div>
</div>
<hr>
<input class="btn btn-primary btn-block" value="Registrase" [disabled]="!f.valid" type="submit" >
<input class="btn btn-danger btn-block" type="button" value="Volver" [routerLink]="['/']">
<hr>
<a [routerLink]="['/login']" routerLinkActive="active">¿Ya dispone de una cuenta con nosotros?</a>
</form>
</div>
</div>
</div>
</div>
../auth.styles.css
.login-box
{
background: #151515ba;
color: #fff;
text-align: center;
box-sizing: border-box;
border-radius: 20px;
}
.login-box .avatar
{
height: 160px;
width: 220px;
/*position: static;*/
text-align: center;
position: absolute;
top: -90px;
left: calc(50% - 107px);
}
.login-box h1
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box label
{
margin: 0;
padding: 0;
display: block;
}
.login-box input
{
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], .login-box input[type="password"]
{
border: none;
border-bottom: 1px solid azure;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"], input[type="button"]
{
border: none;
outline: none;
height: 40px;
color: azure;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"], input[type="button"]:hover
{
cursor: pointer;
color: azure;
}
.login-box a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover
{
color: azure;
}
.login-box hr
{
color: #151515ba;
}