Page History

...

The logic to display different login pages based on parameters

To have different results based on the parameters, write a JavaScript code into the UI Builder > Settings > Configure Layout > Advanced, scroll down until the Custom JavaScript

Image Modified

Figure 3: Custom JavaScript section on UI Builder Advanced Settings.

The following script shows the different login pages based on the page and user parameters using JS:

$(document).ready(function(){
    const searchParams = new URLSearchParams(window.location.search);
    var page = searchParams.get('page');
    var userType = searchParams.get('user');
    
    if (page == 'login' && userType == 'admin') {
        $('#openIDLogin').remove(); //"openIDLogin" is the id of the cloud login button element
    } else if (page == 'login' && userType != 'admin') {
        $('#openIDLogin').appendTo('#loginForm'); //move button above table element
        $('table').remove(); //remove login form table
    }
});

This script takes in the parameters - if it is a login page and the user type is "admin", then remove the openID login button. Else if the type is not "admin", then move the openID login button and remove the login form.

A Custom CSS is also written for the cloud login button to keeps its styling after moving the element:

#openIDLogin {
    background: blue;
    padding: 10px 20px;
    border-radius: 3px;
    text-align: left;
    display: block;
    width: fit-content;
    color: white;
    margin: auto;
}
#icon {
padding-right: 20px;
}

Results

...

Figure 4: Admin login page, with username and password fields displayed.

...