CODE WITH EDD | PLANTILLA LOGIN (Componente Angular)

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)

Edd Lozano

Web | + posts

Full Stack Web Developer && SDK SAPB1 Developer.

Melómano, Gamer (Xbox), Comprador compulsivo de Amazon y Posiblemente con TDAH.