Adding an EULA Checkbox to StoreFront

Written by Sam Jacobs and Rich Minichiello

Beginning with NetScaler firmware version 11.x, administrators have had an easy way to configure an End User License Agreement (EULA) checkbox. There is still no easy way to do so with StoreFront – hence this post. :)

We can break the process into the following steps:

  • Adding the EULA checkbox,
  • Adding the text of the EULA,
  • Code to enable/disable the logon button when the checkbox is checked/cleared, and
  • Disable the logon button when the screen is first displayed.

As always, before making any modifications, ensure that the StoreFront GUI console is closed.

 

Adding the EULA checkbox

To add the checkbox, insert the following into \inetpub\wwwroot\Citrix\<Store>Web\custom\script.js:

// add the checkbox
$('#pluginExplicitAuthBottom .customAuthBottom').html("<div><input id='EULAcheck' " +
     "type='checkbox' onclick='ToggleLogin();'/> " +
     "I accept the <a href='javascript:ShowTerms()'>terms and conditions</a> for website access.</div>");

Add the following to style.css in the custom directory:

/* CSS for checkbox */
.customAuthBottom {
   text-align:center;
   color:white;
   font-size:15px;
}

.customAuthBottom a {
   color:white;
   text-decoration:underline;
}

#EULAcheck {
   margin-left:150px;

Refresh the page, and you should be able to see the results of your efforts.

EULA Checkbox.jpg 

Adding the text of the EULA

The text of the EULA is created by calling one of the StoreFront API extensions. Add the following to script.js:

function ShowTerms (callback) {
    CTXS.ExtensionAPI.showMessage({
        messageTitle: "END USER LICENSE AGREEMENT",
        messageText: "<div class='disclaimer'>You are attempting to login to a Company computing resource. " +
            "This computing resource and the information contained herein is the express property " +
            "of the Company, and, as such, the use of said information is subject to the " +
            "Confidentiality and Non-Disclosure Policies set forth by company policy. </div>",
        okButtonText: "Ok",
        okAction: callback
    });
};

Then add the following to style.css:

.largeTiles .messageBoxPopup, 
.largeTiles .aboutBox {
    width: 700px;
    padding: 40px;
}
 
.disclaimer {
    font-size: 16px;
    color: #000;
    text-align: left;
    height: 400px;
    overflow-y: auto;
}

Test it out by clicking the terms and conditions hyperlink:

EULA2.jpg

 Code to enable/disable the logon button

We don’t want to allow the user to login unless the EULA checkbox has been checked, so we need to add code to enable and disable the login button, based on the status of the checkbox.

 Add the following to script.js:

 function ToggleLogin() {
       if (document.getElementById('EULAcheck').checked)
       {
              document.getElementById('loginBtn').className="button default ";
              document.getElementById("loginBtn").setAttribute("href","#");
              document.getElementById('loginBtn').style.color = "white";
       } else {
              document.getElementById('loginBtn').className="button default disabled-button";
              document.getElementById('loginBtn').removeAttribute('href');
              document.getElementById('loginBtn').style.color = "grey";
       }
}

And add the following to style.css:

 .disabled-button {
   pointer-events: none;
}

 Disable the logon button when the screen is first displayed

 Finally, we want to make sure that when the screen is initially displayed, the EULA checkbox is unchecked, and the logon button starts off disabled.

 Add the following to script.js:

function disableLogon() {
    document.getElementById('EULAcheck').checked=false;
    document.getElementById('loginBtn').className="button default disabled-button";
    document.getElementById('loginBtn').removeAttribute('href');
    document.getElementById('loginBtn').style.color = "grey";
}
setTimeout(disableLogon, 500);

 

Sam Jacobs is the Director of Technology Development at IPM, the longest standing Citrix Platinum Partner on the East Coast. With more than 30 years of IT consulting, Sam is a Citrix NetScaler, StoreFront, and Web Interface customization and integration expert, and holds Microsoft MCSD, Citrix CCP-M, and CCP-N certifications. He has presented advanced Web Interface and NetScaler customization sessions at BriForum, and has led breakout sessions at Citrix Synergy 2013-2017 on StoreFront and NetScaler. He is one of the top Citrix Support Forum contributors, and has earned industry praise for the tools he has developed to make Web Interface, StoreFront, and NetScaler easier to manage for administrators and more intuitive for end users. Sam became a Citrix Technology Professional (CTP) in 2015 and may be reached at He may be reached at: sam.jacobs@ipm.com or on Twitter at: @WIGuru.

Rich Minichiello has been a Senior Systems Engineer at Choice Solutions since 2015, which is a leading business technology company providing forward-thinking and innovative solutions to clients across the United States. Before working with Choice Solutions, Rich was a Senior Systems Engineer at Broward County Public Schools, the country’s 6th largest school district. During his 16 year tenure, he was responsible for building and maintaining the User Identity and Access Management suite to manage over 350,000 end users, the administration of over 700 virtual servers in their ESXi environment, building and maintaining their automated Windows and Apple imaging environments, lead engineer for their migration to Office 365 and general systems administration for their Active Directory environment. Rich currently holds certifications for RES/Ivanti Automation, Workspace and Identity Director technologies, as well as MCSE and MCSA certifications. He specializes in business process automation, user experience management, Microsoft, Ivanti and Citrix technologies. He may be reached at rminichiello@choicesolutions.com and on Twitter at @richminichiello.

Please login to add your comments.

Recent Stories
OpenSSL PKI for Lab Environments - RSA and ECDSA Signature Algorithms

To Cloud or not to Cloud.....

CUGC Perspective - The Partner/Customer Dynamic