How to Hide Multiple Login Screens

 

If you have created a web page with multiple authenticated DataPages, you’ve probably noticed that by default each DataPage loads with its own log-in screen.  After a user logs into one, a session is created and all of the DataPages display as normal.  Although this is occasionally the desired behavior, you have the option of hiding extra log-in pages when the web page loads.  This article assumes that you already have enabled Web User Authentication and have deployed your DataPages.

Remove Extra Log-in Screens

Steps to hiding multiple log-in screens:

1.     Open the Authentication wizardAuthentication Button

Press the Authentication button to open the Authentication wizard.  Select the Custom option.  Click Next.

Configure Custom Authentication

2.     Choose your Authentication fields

In the second screen of the Authentication wizard you will chose which fields will be used for Authentication.  You can recreate the Express option by selecting your username and password fields.  Click Next and format your fields.  For your password field, remember to select Show as Password.

Select and Configure your Authentication Fields

3.     Insert a header and footer.

Click on the Insert button at the lower right of the DataPage Elements panel.  Select Header & Footer to insert these sections.

Insert Button to add Header and Footer

4.     Insert identification code into header and footer

Now add some code to identify the log-in screens.  In the header, add the following code exactly as it appears.  You can copy and paste this code directly from the area at the end of this article.

<div id="cb-auth-box" name="cb-auth-box">

In the footer add the following:

</div>

5.     Add JavaScript to your HTML to hide the extra log-in screens

Now go to the HTML of your web page.  After all of your Caspio Bridge deployment code sections, add the following lines of JavaScript.  This script will locate all of the log-in screens on your web page and hide all but the first one.

<script>

if(document.getElementsByName("cb-auth-box")) {
var v_box = document.getElementsByName("cb-auth-box").length ;
for (i=1; i < v_box; i++) { document.getElementsByName("cb-auth-box")[i].style.display = "none" ; }
}

</script>

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.