Login. Plantilla reutilizable para generar un componente en Angular para el inicio de sesión de cualquier proyecto web.
Archivo login.component.html
<p-toast position="top-center" key="success"></p-toast>
<p-toast position="top-center" key="error"></p-toast>
<div class="p-grid p-mt-4">
<div class="p-col-12 p-sm-5">
<div class="center">
<img src="../../../../assets/imgs/login.png" title="Hanbai Pedidos" alt="Hanbai Pedidos" >
</div>
</div><!--/p-col-12-->
<div class="p-col-12 p-sm-6">
<div class="card">
<h1>{{company}} <small class="font-18">({{title}})</small></h1>
<h5>Acceso a usuarios registrados</h5>
<form #LogInForm="ngForm" (ngSubmit)="onSubmit()" class="forms">
<div class="p-fluid">
<div class="p-field p-grid">
<label for="usercode" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Usuario</label>
<div class="p-col-12 p-md-6">
<input id="usercode" name="usercode" type="text" pInputText #usercode="ngModel" [(ngModel)]="logIn.correo_sesion">
</div>
</div>
<div class="p-field p-grid">
<label for="password" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contraseña</label>
<div class="p-col-12 p-md-6">
<input id="password" name="password" type="password" autocomplete="on" pInputText #password="ngModel" [(ngModel)]="logIn.clave_vip">
</div>
</div>
<div class="p-field p-grid">
<div class="p-col-12 p-md-6">
<input [disabled]="!LogInForm.form.valid" class="btn bg-customer1 txt-white" type="submit" value="Iniciar sesión" name="submit" />
<div *ngIf="loading"><p-progressSpinner [style]="{width: '50px', height: '50px'}"></p-progressSpinner></div>
</div>
</div>
</div><!--/p-fluid-->
</form>
<hr>
<div style="width:60%;">
<br>
Si no cuenta con sus datos de acceso a nuestra plataforma web, solicite sus datos con su asesor de ventas.
</div>
</div><!--/card-->
</div><!--/p-col-12-->
</div><!--/p-grid-->
Archivo login.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LogInModel } from 'src/app/models/login.model';
import { AuthorizationService } from 'src/app/services/ng-access/auth.service';
import { CookiesService } from 'src/app/services/ng-global/cookies.service';
import { Global } from 'src/app/services/ng-global/global';
import {MessageService} from 'primeng/api';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers: [ MessageService, AuthorizationService, CookiesService ]
})
export class LoginComponent implements OnInit {
public logIn: LogInModel;
public loading = false;
public errorMessage = '';
public title = '';
public company = '';
constructor(
private router: Router,
private auth: AuthorizationService,
private cookie: CookiesService,
private messageService: MessageService
) {
this.logIn = new LogInModel('', '');
this.title = Global.product;
this.company = Global.company;
}
ngOnInit(): void {
localStorage.clear();
}
onSubmit(): void {
this.loading = true;
this.postLogIn(this.logIn);
}
postLogIn(body: LogInModel): void {
this.auth.postLogIn(body).subscribe(
response => {
if (response) {
if (response.status === 'success') {
this.cookie.setCookie_auth(response.token);
this.cookie.setCookie_user(response.object.idcliente);
const paramObj = {
idcliente: response.object.idcliente,
Cliente: response.object.Cliente,
correo_sesion: response.object.correo_sesion
};
this.cookie.setCookie_param(paramObj);
this.router.navigate(['/dashboard']);
}
else {
this.loading = false;
this.showError(response.message);
}
}
else {
this.loading = false;
this.showError('Ocurrio un problema con el inicio de sesión.');
}
},
error => {
this.loading = false;
console.log(error);
}
);
}
showSuccess(message: any): void { this.messageService.add({key: 'success', severity: 'success', summary: 'Éxito', detail: message}); }
showError(message: any): void { this.messageService.add({key: 'error', severity: 'error', summary: 'Error', detail: message}); }
}
Nota: se utilizan PrimeNG en el proyecto.
PLANTILLA LOGIN (Componente Angular)
Full Stack Web Developer && SDK SAPB1 Developer.
Melómano, Gamer (Xbox), Comprador compulsivo de Amazon y Posiblemente con TDAH.