Creating a Login Page Using the 'ace-login-form' Component

You can create a custom login page by using ace-login-form component available in ace-lib.

Prerequisites

Create an angular CUI template app by following the instructions present in the Creating an Angular Project for the CUI Template page.

Steps

If the Angular App is created as per the above guidelines, use the following Angular CLI command to create a login page and login component in the application.

1. Navigate to the hello-cui App directory and run the following command to create a login module inside the app:
ng generate module login --route login --module app.module
2. Open the newly created login.component.html and paste the following login component tag into it.
<ace-login-form css-classlist="ace-bg-white"></ace-login-form>

Note: Add additional HTML tags outside the above tag and CSS classes if required to beautify and align the login component.

3. Handle the loginSuccess event by performing the following changes to the login.component.html and login.component.ts:

login.component.html

<div class="row">
    <div class="col-4"></div>
    <div class="col-4">
        <h2>Authentication Required</h2>
        <ace-login-form css-classlist="ace-bg-white" (loginSuccess)="loginSuccessHandler($event)"></ace-login-form>
    </div>
    <div class="col-4"></div>
</div>
 

login.component.ts

import { Component, OnInit } from '@angular/core';
@Component({

selector: ‘app-login’,

templateUrl: ‘./login.component.html’,

styleUrls: [‘./login.component.css’]

})

export class LoginComponent implements OnInit {


constructor() { }


loginSuccessHandler(event) {

//Handle Post login logic here.

const loggedInUserInfo = event.detail;

console.log(‘login Success’, loggedInUserInfo);


}

ngOnInit() {

}