Security

Reply
Highlighted
Occasional Contributor I

Modal box for Terms of Use

We setup our Terms of Use otherwise known as Acceptable use policy on our captive portal so when the link is clicked on it opens it in a new browser tab which works great for most devices. However we ran into an issue on MacOS, some android phones, and Ubuntu 18.04. They use a special window that is specific for a captive portal. It is not a full browser window and will not allow you to open a new window so our link fails. 

 

I called TAC and they told me to "Enable bypassing the Apple Captive Network Assistant" on the login page. This effectively tells MacOS not to open the captive portal window and a user if forced to use a browser.  This is not a good user experience and only works on Apple products. I tried to explain how I wanted to use a modal box but it fell on deaf ears. He kept telling me this was the only way. Well if you want to motivate an IT engineer to prove you wrong that's a great thing to say. 

 

I worked with our web team and created the solution myself. What we did was create a modal box. It allows you to post any content, even from another page, on a floating window (not a pop-up) so you never have to leave the page. It works perfectly with the captive portal windows the aforementioned devices used and provides a great user experience. 

 

We used simple JavaScript and CSS to make the magic happen. You can find the basic structure at https://www.w3schools.com/howto/howto_css_modals.asp

The real trick is knowing where to put this information in ClearPass so it works.

 

There are two places you will put information.

Guest > Administration > Plugin Manager > Skin Plugins

This is where your CSS, Javascript, and Modal Divs go.

Click on "Configuration" for the skin your login or self-registration page is using. We used Galleria Skin. Use the w3schools "Try it yourself" feature to create the look you want and create your own naming scheme so it doesn't conflict with any ClearPass style tags already in use. Go to the section "HTML HEAD:" Paste in the CSS in the <script> section. 

Below </script> paste in the DIV section with your "Terms of Use" text or use an <iframe> call to your external terms page like we did.

<iframe src="/location/onClearPass.php" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" frameBorder="0" style="width:100%;height:60vh;"></iframe>

Now paste in the JavaScript into the <Script> section. We ran into an issue where the JavaScript would load before the css so we solved that by using a timeout function to encapsulate the javascript. 

setTimeout(function (){ all of your JavaScript for the modal box }, 500);

The 500 is milliseconds or half a second which was enough of a delay so it loads properly. 

 

We made so many customizations I can't list them here but the end product is so slick and works perfectly on every OS and device we tested. (Windows, MacOS, iPhone, iPad, various versions of android on many different phones) 

 

Guest > Configuration > Pages 

Web Logins and Self-Registration is where you will put the line of code to call the modal box for your "Terms of Use".

Web Logins > Login Form > checkmark "Override the default labels and error messages"

Terms Text: (Here is what we used)

I accept the <a id="terms-button" href="javascript&colon;void(0)">terms of use</a>

id=<your naming scheme to call the javascript function>

href= "use this to make the button behave like a URL link"

 

If you feel lost on any of this I suggest you involve your web team, they will be able to create a very nice modal box for you with this information.

Search Airheads
cancel
Showing results for 
Search instead for 
Did you mean: