Easy to create CSS login screens using Pega PE V851

 We all know that we have OOTB login screen given by Pega and is built on CSS and HTML. But the login screen in OOTB is a static screen and is not a flash/animated gif screen where we have the rich look & feel. Pega won't stop us to leverage these animated login screens in the system. To implement a animated login screen, we need the custom CSS and JS files to update the Pega rules in a specific ruleset version accordingly. The main HTML rule:@baseclass.Web-Login in Pega is used to create the login screen. There is a OOTB rule: py-login-screen where it has the CSS specifications to use in the login form. 

To begin on this exercise, first you need to have a dedicated ruleset for making the changes. I am giving my old post link where you have all the steps mentioned to create a ruleset in this context. Here is the link to follow before we start this PoC. 

http://pisupativenkatasesha.blogspot.com/2020/12/how-to-change-pega-login-screen-with.html 

First of all, we need to have CSS, JS file to begin with. Here is a site: https://freefrontend.com/css-login-forms/ where you can choose your favorite login screen an the code to be used in Pega. I have taken 2 login screens for this post.

(1) A simple login screen with animated feature given in the code. The login screen look and feel is given below.

To implement on the above screen, we need to update the below rules in the dedicated ruleset (Unauthenticated) as mentioned in the above post.

1) HTML rule: Web-Login 

2) CSS rule: py-login-screen

The code is present in the below github and copy them over to Pega rules accordingly.

https://github.com/RKPisupati/PegaLogin

(2) I did select another screen where it has 2 tabs for login and signup functionalities. This is little complex when compared with the above option. For this, we need to build the JS functions and call them in the Web-Login HTML rule accordingly. For now, I have done the changes on the login screen and the work needs to be done on Signup form to create an operator in Pega using the OOTB activity: CreateOperator from the JS function call. We can add as man tabs as we want in this option and the tabs can be hide/show based on the when conditions in Pega code. These advanced changes will be taken care when we have the actual implementation. The CSS code is directly appended in the Web-Login rule and you can check under <style>..</style> in the code. The UI elements specific changes are also taken care in the code and the code can be downloaded from the below github.

https://github.com/RKPisupati/PegaLogin/blob/main/Web-Login1

The look and feel after implementation is like below.

References:

1) Google.com

2) Pega Community site

3) Pega developer help