Using Parameters To Dictate Which Login Page To Show (OpenID Connect)

Introduction

This article discusses a way to display different login pages by passing parameters set in the URL. The requirement that will be used as an example is to have two different URLs of the same login page to display for admin users and non-admin users. This article will use the default Joget DX CRM app as an example.

How does it work?

Setting parameters on the URL

The Login page URL with the parameters set for admin view:

The Login page URL with the parameters set for non-admin view:

Parameters to take note of when using the script in the next section:

• page=login
• user=admin or user=non

The logic to display different login pages based on parameters

1. To have different results based on the parameters, use JavaScript code in the UI Builder > Settings > Configure Layout > Advanced.
2. Scroll down until the Custom JavaScript section.
   
3. The following script shows the different login pages based on the page and user parameters using JavaScript:
   

   $(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
       }
   });

   JavaScript

    

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 keep 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;
}

Expected Outcome

The image below displays the Admin login page, with username and password fields displayed:

The image below shows the Non-admin login page, with only the cloud login button displayed.

Related Documentation

• Joget SSO with OpenID Connect