AgileApps CUI template: Creating a login page using 'ace-login-form' ace-lib component (for Angular app):

Knowledge base
, , , ,
1

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

Prerequisites:

If the angular app is created as per the above guidelines, then use the following angular CLI command to create a login page and login component in the application:

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

Next, 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 addtional html tags outside the above tag and css classes if required to beautify and align the login compoent

Next, 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() {

}


}