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>
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() { }