Ionic 5 Forms Tutorial: Login & Register UI Example with Theming

Ionic 5 Forms Tutorial: Login & Register UI Example with Theming

In this post we will give you information about Ionic 5 Forms Tutorial: Login & Register UI Example with Theming. Hear we will give you detail about Ionic 5 Forms Tutorial: Login & Register UI Example with ThemingAnd how to use it also give you demo for it if it is necessary.

In this tutorial, we’ll learn how to use Angular forms in Ionic 5 by building a simple login and registration example with theming.

In the previous tutorial, we’ve created a JWT authentication server with Node and Express.js and implemented an authentication service with Angular services and HttpClient in our Ionic 5 application.

Check out the previous tutorial: Ionic 5 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server

Creating an Ionic 5 UI by Example

In this part, we’ll create the actual UI with built-in Ionic 5 components and Angular forms.

We’ll be using Ionic 5 components such as the Ionic Grid, Input fields and Buttons.

We’ll also see how to use some CSS variables like --background and --color for custom theming the UI components and the color property of Ionic components to assign different types of standard Ionic colors such as the primary and secondary colors to the components.

We’ll see how to use Angular routing to navigate between different pages of our Ionic 5 application.

We’ve created an Ionic 5 project, created a module that encapsulates authentication and created a service that implements the register(), login(), logout() and isLoggedIn() methods. Let’s now create the UI pages and components.

Creating the Register Page

Head back to your terminal and run the following command to generate a register page inside the auth module:

$ ionic generate page auth/register

This will create the following files:

  • 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

It will also update the src/app/app-routing.module.tsfile to enable routing to this page by adding the following route:

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

This means, you can access the registration page http://localhost:8100/register.

Open the src/app/auth/register/register.page.ts file and import then inject AuthService and Router:

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'],})exportclassRegisterPageimplementsOnInit{constructor(privateauthService:AuthService,privaterouter:Router){}ngOnInit(){}}

Next, add the register() method that will be called for registering users:

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

This method simply calls the register() method of AuthService, subscribe to the returned Observable and navigate to the home page when registration is done.

We use the navigateByUrl() method of the Angular Router to navigate to a page by its URL.

The register() method takes an Angular form object. The value variable contains a JS object that corresponds to the fields of the form and their values.

Next open the src/auth/register/register.page.html file and add a form inside <ion-content>:

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

We assign the primary Ionic color to <ion-content> and <ion-row> components.

Next, let’s add some styling. Open the src/auth/register/register.page.scss file and add:

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

We use the --background and --color variables to change the colors of <ion-item> and <ion-button> components.

This is the screenshot our registration page:

Ionic 5 Page

Creating a Login Page

Next, let’s create a login page. In your terminal, run the following command:

$ ionic generate page auth/login

The following files will be created:

  • 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

The src/app/app-routing.module.ts will be updated with the following route:

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

The loadChildren property is used to lazy load the login module.

Now, open the src/app/auth/login/login.page.ts file, import and inject both AuthService and Router:

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'],})exportclassLoginPageimplementsOnInit{constructor(privateauthService:AuthService,privaterouter:Router){}ngOnInit(){}}

Next, add the login() method:

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

The login() method simply calls the login() method of AuthService and subscribe to the returned Observable then navigate to the home page when login is done.

Let’s now create the login UI. Open the src/app/auth/login/login.page.html file and add the following code:

<ion-contentcolor="primary"padding><form#form="ngForm"(ngSubmit)="login(form)"><ion-grid><ion-rowcolor="primary"justify-content-center><ion-colalign-self-centersize-md="6"size-lg="5"size-xs="12"><divtext-center><h3>Login</h3></div><divpadding><ion-item><ion-inputname="email"type="email"placeholder="your@email.com"ngModelrequired></ion-input></ion-item><ion-item><ion-inputname="password"type="password"placeholder="Password"ngModelrequired></ion-input></ion-item></div><divpadding><ion-buttonsize="large"type="submit"[disabled]="form.invalid"expand="block">Login</ion-button></div></ion-col></ion-row></ion-grid></form></ion-content>

We use the Ionic Grid to place the form elements.

Open the src/app/auth/login/login.page.scss file and add these styles:

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

Next, let’s add a link to the register page to allow users to register if they don’t already have an account. Inside the <ion-grid> component add:

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

We use the routerLink directive of Angular Router to create a link to the register page.

In the src/app/auth/login/login.page.scss file, add:

a{color:#fff;}

This is a screenshot of the login page:

Ionic 5 login page

Conclusion

That’s it we have created our login and registration system using Ionic 5 and Angular 7 in the front-end and Node, Express.js in the backend.


Hope this code and post will helped you for implement Ionic 5 Forms Tutorial: Login & Register UI Example with Theming. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US