SyferLock Help Center

Captive Portal Customizations

Modify Example Template

This is a modified form of the default template.  Modify this file by replacing all instances of the following:

  • <FQDN of GridGuard Server> is the full DNS name of the GridGuard server (virtual appliance), (e.g., 'gg.dmz.company.net')
  • <RADIUS realm> is the realm name of a RADIUS-configured realm (e.g., 'radius-pinonly')
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://<FQDN of GridGuard Server>/gridguard/skin/default/skin.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<meta name="viewport" content="initial-scale=1.0">
<title>User Identification Portal</title>
<style>
	html, body{
		height: 99%;
	}
	body {
		color: #111;
		font-family: Verdana,Arial,Helvetica,sans-serif;
		background-color:#d2d6dA;
		vertical-align: middle;
	}
	#activearea {
		border-width: 2px;
		border-color: #c2c6cA;
		border-style: solid;
		border-radius: 15px;
		background-color: #ffffff;
		padding: 20px;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	#heading {
		font-size: 1.1em;
		font-weight: bold;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	#desc {
		font-size: 1em;
		margin: 15px;
		max-width: 400px;
		text-align: left;
		margin-left: auto;
		margin-right: auto;
	}
	form td span {
		font-size: 1em;
		font-weight: bold;
	}
	#formtable {
		height: 100%;
		width: 100%;
	}
	#taLogin {
		width: 250px;
		margin-left: auto;
		margin-right: auto;
	}
	.buttonFixed {
		font-size: 1em;
	}
	.msg {
		background-color: #ffff99;
		border-width: 2px;
		border-color: #ff0000;
		border-style: solid;
		border-radius: 5px;
		margin-top: 0.5em;
		padding: 0.5em;
		max-height: 150px;
		height: expression( this.scrollHeight > 150 ? "150px" : "auto" ); /* sets max-height for IE */
		overflow: auto;
		font-size: 1em;
	}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body onload="loadPage(); loadGrid('<FQDN of GridGuard Server>', '<RADIUS Realm>', 'f', 'gridId', 'gridpanel');">
<table id="formtable">
<tr><td>
	<div id="activearea" style="display: table; max-width: 750px">
		<div style="display:table-cell; vertical-align: top;">
			<div id="heading">User Identification Portal</div>
			<div id="desc">The resource you are trying to access requires proper user identification prior to access. Please enter your credentials.</div>
			<div id="formdiv">
				<input type="hidden" disabled="true" id="gridId" /><br/>
				<pan_form/>
			</div>
		</div>
		<div id="outer" style="display:table-cell; vertical-align: top;"> 
			<div id="gridpanel" /> 
		</div>
	</div>
</td></tr>
</table>
</body>
<script src="https://<FQDN of GridGuard Server>/web/grid-thin/GridLite.js"></script>
<script>
(function ($) {
$.fn.waitUntilExists = function (handler, shouldRunHandlerOnce, isChild) {var found='found';var $this=$(this.selector);var $elements=$this.not(function () { return $(this).data(found); }).each(handler).data(found, true);if (!isChild) {(window.waitUntilExists_Intervals = window.waitUntilExists_Intervals || {})[this.selector] = window.setInterval(function () { $this.waitUntilExists(handler, shouldRunHandlerOnce, true); }, 500);}else if(shouldRunHandlerOnce && $elements.length){window.clearInterval(window.waitUntilExists_Intervals[this.selector]);}return $this;}}(jQuery));
	$(window).load(function () {
		$("#submit").waitUntilExists(function() {
			var btn = $("#submit");
			var clickhandler = this.onclick;
			this.onclick = null;
			// new click handler
			btn.click(function() {
				// grab gridID and create new password
				var gridIDField = document.getElementById("gridId");
				var gridID = gridIDField.value;
				var gridcode = document.getElementsByName("passwd")[0].value;
				document.getElementsByName("passwd")[0].value = gridID + "|" + gridcode;
			});
			btn.click(clickhandler);
		}, true);
	});
</script>
</html>

Once you have edited the file, save it as "custom-portal-custom.txt"

Upload Custom Portal Page

Upload Custom Portal Page
  1. On Device->Response Pages, click on Captive Portal Comfort Page

Import Modified Template

Import Modified Template
  1. In the dialog box, Click on Import
  2. Select the file you created above and click OK

Commit All Changes

Commit All Changes
  1. Commit and Save all changes

Display Page on Login

Display Page on Login

Attempts to access a protected IP via the Captive Portal should now result in the Grid being displayed on the Response Page.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk