Preparación de vistas para login y registro

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:58

Preparación de vistas para login y registro

Curso de Angular 4

Clase 60 de 80

Clase 60 / 80

Recursos

Implementar autenticación en Angular con Json Web Tokens (JWT) arranca con una base sólida: dos páginas de login y registro, rutas claras y un servicio centralizado de autorización. A continuación se muestra cómo estructurar componentes, maquetar con Bootstrap y preparar un servicio reutilizable, dejando lista la integración posterior con Firebase.

¿Qué construimos para la autenticación con Angular y JWT?

Empezamos creando dos componentes: login y registro. Se duplicó el componente de contacto y se renombraron archivos y selectores para cada caso. Luego, se configuraron rutas en AppModule y se añadió una barra de navegación con enlaces a ambos formularios usando routerLink. Finalmente, se creó un autorizacionService con métodos login y registro, inyectado en los componentes para probar su ejecución con console.log.

Habilidades practicadas: creación de componentes en Angular. Configuración de rutas. Maquetación con Bootstrap. Inyección de dependencias. Uso de services y funciones flecha. Pruebas con console.log.
Conceptos clave: Json Web Tokens (JWT). routerLink. @Injectable. navbar-right. Clases de Bootstrap como container, row, col-md-4, col-md-offset-4, well, btn, btn-primary, btn-default, btn-block.

¿Cómo crear las páginas de login y registro con Bootstrap?

Primero se generó el componente de login, ajustando selector, template y ruta. Luego se maquetó un formulario centrado con la grilla de Bootstrap, y se repitió el proceso para registro.

¿Cómo configurar el componente de login?

Duplicar el componente existente y renombrarlo a LoginComponent.
Actualizar selector a app-login y el templateUrl a login.component.html.

// login.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {}

¿Cómo maquetar el formulario con Bootstrap?

Centrar el formulario con col-md-4 y col-md-offset-4 dentro de un container y row.
Usar form-control para los campos y botones con btn.

<!-- login.component.html -->
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="well">
        <h1>login</h1>
        <label>email</label>
        <input type="email" class="form-control">
        <br>
        <label>contraseña</label>
        <input type="password" class="form-control">
        <hr>
        <a class="btn btn-primary btn-block">login</a>
        <a class="btn btn-default btn-block">cancelar</a>
      </div>
    </div>
  </div>
</div>

Para registro, se duplicó el de login, se renombraron archivos y referencias, y se cambió el título a “registrarse”.

// registro.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html'
})
export class RegistroComponent {}

¿Cómo declarar rutas y un servicio de autorización reutilizable?

Se añadieron rutas en AppModule para login y registro. Luego, se incorporó una navbar con enlaces a la derecha y se creó un service autorizacion.service.ts con métodos mínimos para probar el flujo.

¿Cómo definir rutas en AppModule?

Agregar rutas login y registro con sus componentes.
Incluir componentes en declarations y el servicio en providers.

// app.module.ts (fragmento)
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegistroComponent } from './registro/registro.component';
import { AutorizacionService } from './services/autorizacion.service';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'registro', component: RegistroComponent }
];

@NgModule({
  declarations: [LoginComponent, RegistroComponent],
  imports: [RouterModule.forRoot(routes)],
  providers: [AutorizacionService]
})
export class AppModule {}

¿Cómo añadir enlaces en la barra de navegación?

Usar una lista en la navbar con la clase navbar-right para alinear a la derecha.
Enlaces con routerLink hacia /login y /registro.

<!-- app.component.html (fragmento) -->
<ul class="nav navbar-nav navbar-right">
  <li><a routerLink="/login">login</a></li>
  <li><a routerLink="/registro">registro</a></li>
</ul>

¿Cómo crear e inyectar el servicio de autorización?

Declarar AutorizacionService con @Injectable().
Implementar métodos login y registro con funciones flecha y console.log.
Inyectar el servicio en los constructores de los componentes y llamar a los métodos con datos de prueba.

// services/autorizacion.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class AutorizacionService {
  public login = (email: string, password: string) => {
    console.log('método login');
  };

  public registro = (email: string, password: string) => {
    console.log('método registro');
  };
}

// login.component.ts (uso del servicio)
constructor(private autorizacionService: AutorizacionService) {
  this.autorizacionService.login('demo@email.com', '123456');
}

// registro.component.ts (uso del servicio)
constructor(private autorizacionService: AutorizacionService) {
  this.autorizacionService.registro('demo@email.com', '123456');
}

Con esto quedan listas las vistas, las rutas, la navbar y el service para avanzar al registro de usuarios con Firebase en el siguiente paso.

¿Tienes dudas sobre la estructura, las rutas o el servicio? Cuéntalo en los comentarios y comparte qué parte te gustaría profundizar a continuación.

LUIS CAIZA

Hace 8 años

Con boostrap 4 hay algunos cambios les dejo como utilice para que visualmente se vea parecido

html login

<br>
<br>
<div class="container">
    <div class="row">
        <div class="col-md-4 offset-4 col-md-4">
            <div class="card text-center">
                <div class="card-header">
                    Login
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email"class="form-control"id="email">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password"class="form-control"id="password">
                    </div>
                    <hr>
                    <button type="button" class="btn btn-primary btn-block">Login</button>
                    <button type="button" class="btn btn btn-light btn-block">Cancelar</button>
                </div>
            </div>
        </div>
    </div>
</div>

html registro

<br>
<br>
<div class="container">
    <div class="row">
        <div class="col-md-4 offset-4 col-md-4">
            <div class="card text-center">
                <div class="card-header">
                    Registrar
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email"class="form-control"id="email">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password"class="form-control"id="password">
                    </div>
                    <div class="form-group">
                        <label for="password2">Repetir Password</label>
                        <input type="password"class="form-control"id="password2">
                    </div>
                    <hr>
                    <button type="button" class="btn btn-primary btn-block">Registrarse</button>
                    <button type="button" class="btn btn btn-light btn-block">Cancelar</button>
                </div>
            </div>
        </div>
    </div>
</div>

si talvez necesitan como quedo el services

import {Injectable} from '@angular/core';

@Injectable()
export class AutotizacionServices {
    public login =( email:string ,password:string )=>{
        console.log('login');
    }
    public registro =( email:string ,password:string,password2:string )=>{
        console.log('registro');
    }
}

el ts quedaria algo asi

/**Selector ata a la app
 * Template es el html
 * styles son los css**/
import {ActivatedRoute} from '@angular/router';
import {PersonasServices} from '../services/personas.services';
import {Component} from '@angular/core';
import {AutotizacionServices} from '../services/autorizacion.services';


@Component ( {
    selector: 'app-registro',
    templateUrl: './registro.component.html'
} )
export class RegisroComponent {

    constructor (private router: ActivatedRoute, private autorizacion: AutotizacionServices) {
        this.autorizacion.registro('','','');
    }
}

Usuario anónimo

User

Hace 8 años

Con razón no me funcionaban algunas propiedades de personalización.

claudio olivares

Hace 7 años

Excelente aporte colega gracias

Comentarios (14)14 comentarios

Stephano Apiolaza Tapia

Hace 9 años

MA MateriaGris01

Diego Burlando

Josué Estévez Fernández

Geovanny Santana

Duilio Luque

Irwin Gabriel Ortiz Tamayo

Carlos Guzman

Juan Carlos Barcinilla Alarcon

Carlos Enrique Ramírez Flores

Carlos Uriel de Jesus Sánchez González

Diego Vallejo

Juan Roa

Gabriel Solorzano

veronica oviedo

Jessie Buckland Pérez

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina