fix-lab documentation
  1. Components
  2. LoginComponent

File

src/app/auth/login/login.component.ts

Description

Llama al servicio y notifica si el inicio de sesión fue exitoso.

Metadata

selector app-login
styleUrls ../auth.styles.css
templateUrl ./login.component.html

Index

Properties
Methods

Methods

login
login(form: NgForm)
Defined in src/app/auth/login/login.component.ts:31

Recibe los datos del formulario de login.

Parameters :
Name Type Optional
form NgForm No
Returns : void

Properties

credentials
Type : Customers
Default value : new Customers()
Defined in src/app/auth/login/login.component.ts:21

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 al servicio y notifica si el inicio de sesión fue exitoso.
*/
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['../auth.styles.css']
})
export class LoginComponent {

  /**
  *Credenciales del usuario.
  */
  credentials: Customers = new Customers();

  /**
  *@ignore
  */
  constructor(private auth: AuthenticationService, private router: Router, private toastr: ToastrService) {}

  /**
  *Recibe los datos del formulario de login.
  */
  login(form: NgForm) 
  {
      this.credentials.email= form.value.email;
      this.credentials.password= form.value.password;

    this.auth.login(this.credentials).subscribe(
      () => {
        this.toastr.success('Inicio de sesión exitoso');
        this.router.navigateByUrl('/dashboard/home')
      },
      err => {
        this.toastr.error('Compruebe los datos introducidos','Error al iniciar sesión');
      }
    );
  }
}

<br><br>
<div class="py-5 text-center text-white">
    <div class="container text-center">
      <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><br>
          <h1>Accede a Fixlab</h1>
          <form (ngSubmit)="login(f)" #f="ngForm" novalidate="">

            <!--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>
            
            <!--Password-->
              <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" type="submit" value="Acceder" [disabled]="!f.valid">
            <input class="btn btn-danger btn-block" type="button" value="Volver" [routerLink]="['/']">
            <hr>

            <a [routerLink]="['/register']" routerLinkActive="active">¿No tienes una cuenta?</a>
          </form>
        </div>
      </div>
    </div>
  </div>
  <br><br>

../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;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""