Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de Ionic 5 Forms: Ejemplo de interfaz de usuario de inicio de sesión y registro con temática

 En este tutorial, aprenderemos cómo usar formularios angulares en Ionic 5 creando un ejemplo simple de inicio de sesión y registro con temas.

En el tutorial anterior, creamos un servidor de autenticación JWT con Node y Express.js e implementamos un servicio de autenticación con servicios Angular y HttpClienten nuestra aplicación Ionic 5.

Consulte el tutorial anterior: Tutorial de autenticación Ionic 5 JWT: uso de Angular HttpClient con Node & Express.js Server

Creación de una interfaz de usuario de Ionic 5 por ejemplo

En esta parte, crearemos la interfaz de usuario real con componentes integrados de Ionic 5 y formas angulares.

Usaremos componentes de Ionic 5 como la cuadrícula iónica, los campos de entrada y los botones.

También veremos cómo usar algunas variables CSS como --background--colorpara personalizar los componentes de la interfaz de usuario y la propiedad de color de los componentes iónicos para asignar diferentes tipos de colores iónicos estándar, como los colores primarios y secundarios, a los componentes.

Veremos cómo usar el enrutamiento angular para navegar entre diferentes páginas de nuestra aplicación Ionic 5.

Hemos creado un proyecto de 5 jónico, creamos un módulo que encapsula la autenticación y creamos un servicio que implementa el register()login()logout()isLoggedIn()métodos. Ahora creemos las páginas y los componentes de la interfaz de usuario.

Creación de la página de registro

Regrese a su terminal y ejecute el siguiente comando para generar una página de registro dentro del authmódulo:

$ ionic generate page auth/register

Esto creará los siguientes archivos:

  • src/app/auth/register/register.module.ts,
  • src/app/auth/register/register.page.scss,
  • src/app/auth/register/register.page.html,
  • src/app/auth/register/register.page.spec.ts,
  • src/app/auth/register/register.page.ts

También actualizará el src/app/app-routing.module.tsarchivo para habilitar el enrutamiento a esta página agregando la siguiente ruta:

{ path:  'register', loadChildren:  './auth/register/register.module#RegisterPageModule' },

Esto significa que puede acceder a la página de registro http://localhost:8100/register.

Abra el src/app/auth/register/register.page.tsarchivo e importe, luego inyecte AuthServiceRouter:


import { Component, OnInit } from '@angular/core';
import { Router } from  "@angular/router";
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

  constructor(private  authService:  AuthService, private  router:  Router) { }

  ngOnInit() {
  }

}

A continuación, agregue el register()método que se llamará para registrar usuarios:

  register(form) {
    this.authService.register(form.value).subscribe((res) => {
      this.router.navigateByUrl('home');
    });
  }

Este método simplemente llama al register()método de AuthService, suscríbete al Observable devuelto y navega a la página de inicio cuando se realiza el registro.

Usamos el navigateByUrl()método del enrutador angular para navegar a una página por su URL.

El register()método toma un objeto de forma angular. La valuevariable contiene un objeto JS que corresponde a los campos del formulario y sus valores.

A continuación, abra el src/auth/register/register.page.htmlarchivo y agregue un formulario dentro <ion-content>:

<ion-content  color="primary">
  <form  #form="ngForm" (ngSubmit)="register(form)">
    <ion-grid>
      <ion-row color="primary" justify-content-center>
        <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
          <div text-center>
            <h3>Create your account!</h3>
          </div>
          <div padding>
            <ion-item>
              <ion-input  name="name" type="text" placeholder="Name" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="email" type="email" placeholder="your@email.com" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="confirm" type="password" placeholder="Password again" ngModel required></ion-input>
            </ion-item>
          </div>
          <div padding>
            <ion-button  size="large" type="submit" [disabled]="form.invalid" expand="block">Register</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

Asignamos el color iónico primario <ion-content>y los <ion-row>componentes.

A continuación, agreguemos algo de estilo. Abra el src/auth/register/register.page.scssarchivo y agregue:

ion-item{
    --background: #3880ff;
    --color: #fff;
}

ion-button{
    --background: #062f77;
}

Usamos las variables --background--colorpara cambiar los colores de los componentes <ion-item><ion-button>.

Esta es la captura de pantalla de nuestra página de registro:

Ionic 5 Página

Crear una página de inicio de sesión

A continuación, creemos una página de inicio de sesión. En su terminal, ejecute el siguiente comando:

$ ionic generate page auth/login

Se crearán los siguientes archivos:

  • src/app/auth/login/login.module.ts,
  • src/app/auth/login/login.page.scss,
  • src/app/auth/login/login.page.html,
  • src/app/auth/login/login.page.spec.ts,
  • src/app/auth/login/login.page.ts

Se src/app/app-routing.module.tsactualizará con la siguiente ruta:

{ path:  'login', loadChildren:  './auth/login/login.module#LoginPageModule' },

La loadChildrenpropiedad se utiliza para cargar de forma diferida el módulo de inicio de sesión.

Ahora, abra el src/app/auth/login/login.page.tsarchivo, importe e inyecte ambos AuthServiceRouter:

import { Component, OnInit } from '@angular/core';
import { Router } from  "@angular/router";
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(private  authService:  AuthService, private  router:  Router) { }

  ngOnInit() {
  }

}

A continuación, agregue el login()método:

  login(form){
    this.authService.login(form.value).subscribe((res)=>{
      this.router.navigateByUrl('home');
    });
  }

El login()método simplemente llama al login()método de AuthServicey se suscribe al Observable devuelto y luego navega a la página de inicio cuando se realiza el inicio de sesión.

Creemos ahora la interfaz de usuario de inicio de sesión. Abra el src/app/auth/login/login.page.htmlarchivo y agregue el siguiente código:

<ion-content color="primary" padding>
  <form #form="ngForm" (ngSubmit)="login(form)">
    <ion-grid>
      <ion-row color="primary" justify-content-center>
        <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
          <div text-center>
            <h3>Login</h3>
          </div>
          <div padding>
            <ion-item>
              <ion-input name="email" type="email" placeholder="your@email.com" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
            </ion-item>
          </div>
          <div padding>
            <ion-button size="large" type="submit" [disabled]="form.invalid" expand="block">Login</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

Usamos la cuadrícula iónica para colocar los elementos del formulario.

Abra el src/app/auth/login/login.page.scssarchivo y agregue estos estilos:

ion-item{
    --background: #3880ff;
    --color: #fff;
}
ion-button{
    --background: #062f77;
}

A continuación, agreguemos un enlace a la página de registro para permitir que los usuarios se registren si aún no tienen una cuenta. Dentro del <ion-grid>componente agregue:

      <ion-row>
          <div text-center>
        If you don't have an account, please <a routerLink='/register'>
          register</a> first!
          </div>
      </ion-row>

Usamos la routerLinkdirectiva de Angular Router para crear un enlace a la página de registro.

En el src/app/auth/login/login.page.scssarchivo, agregue:

a{
    color: #fff;
}

Esta es una captura de pantalla de la página de inicio de sesión:

Página de inicio de sesión de Ionic 5

Conclusión

Eso es todo, hemos creado nuestro sistema de inicio de sesión y registro usando Ionic 5 y Angular 7 en el front-end y Node, Express.js en el backend.

Publicar un comentario

0 Comentarios