Introduction
In the previous post pfSense 2.0 RC1 Configure Captive Portal for Guests with Local User Management we configured a basic Captive Portal. Now I want to customize a little the web pages that are presented to the guests. Users will send credentials, and it is better to use HTTPS, that’s why will will configure it too.
Scenario
I want to customize the pages put custom colors and logo. Moreover the default page does not have a voucher field available, and I want this too. Granting access to guests, must follow some rules, so Acceptable Use Policy that have to be acknowledged is suitable for such a page
for Portal login
<html>
<style type=”text/css”>
body {
background-color: #000;
}
body,td,th {
color: #090;
}
</style>
<body>
<form method=”post” action=”$PORTAL_ACTION$” onsubmit=”return CheckBoxesValidations() ;”>
<input name=”redirurl” type=”hidden” value=”$PORTAL_REDIRURL$”>
<center>
<center>
<img src=”captiveportal-logo.png” alt=”logo”/>
</center>
<table cellpadding=”6″ cellspacing=”0″ width=”550″ height=”380″ style=”border:1px solid #000000″>
<tr height=”10″ bgcolor=”#990000″>
<td bgcolor=”#663366″ style=”border-bottom:1px solid #000000″>
<font color=’white’>
<b>
Stefcho’s captive portal
</b>
</font>
</td>
</tr>
<tr>
<td>
<div id=”mainlevel”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”0″>
<tr>
<td>
<center>
<div id=”mainarea”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”5″>
<tr>
<td>
<div id=”maindivarea”>
<center>
<div id=’statusbox’>
<font color=’red’ face=’arial’ size=’+1′>
<b>
<style type=”text/css”>
body {
background-color: #000;
}
body,td,th {
color: #090;
}
</style>
<body>
<form method=”post” action=”$PORTAL_ACTION$” onsubmit=”return CheckBoxesValidations() ;”>
<input name=”redirurl” type=”hidden” value=”$PORTAL_REDIRURL$”>
<center>
<center>
<img src=”captiveportal-logo.png” alt=”logo”/>
</center>
<table cellpadding=”6″ cellspacing=”0″ width=”550″ height=”380″ style=”border:1px solid #000000″>
<tr height=”10″ bgcolor=”#990000″>
<td bgcolor=”#663366″ style=”border-bottom:1px solid #000000″>
<font color=’white’>
<b>
Stefcho’s captive portal
</b>
</font>
</td>
</tr>
<tr>
<td>
<div id=”mainlevel”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”0″>
<tr>
<td>
<center>
<div id=”mainarea”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”5″>
<tr>
<td>
<div id=”maindivarea”>
<center>
<div id=’statusbox’>
<font color=’red’ face=’arial’ size=’+1′>
<b>
</b>
</font>
</div>
<br/>
<div id=’loginbox’>
<table>
<tr><td colspan=”2″><center>Welcome to the Stefcho’s Wireless Network Captive Portal!</td></tr>
<tr><td colspan=”2″><center>Enter User Credentials, or Voucher Code to gain access.</td></tr>
<tr><td> </td></tr>
<tr><td align=”right”>Username:</td><td align=”left”><input name=”auth_user” type=”text” style=”border: 1px dashed;”></td></tr>
<tr><td align=”right”>Password:</td><td align=”left”><input name=”auth_pass” type=”password” style=”border: 1px dashed;”></td></tr>
<tr><td> </td></tr>
<tr><td align=”right”>Voucher:</td><td align=”left”><input name=”auth_voucher” type=”text” style=”border: 1px dashed;”></td></tr>
<tr><td></td><td><tr><td></td><td>
<tr><td></td><td><tr><td></td><td>
<P align=”center”><TEXTAREA id=”aup” name=”aup” rows=”15″ cols=”50″> Acceptable Use Policy (AUP).
</TEXTAREA>
</td></tr>
</tr>
</table>
<input id=”iagree” type=”checkbox” name=”CHKBOX1″ value=”1″>Accept</p>
<input name=”accept” type=”submit” value=”Continue”>
</div>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</center>
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
</form>
<script type=”text/javascript”>
function CheckBoxesValidations()
{
if(document.getElementById(‘iagree’).checked == false)
{
alert(“Please read and accept the User agreement to proceed!”);
return false;
}
else
return true;
}
</script>
</body>
</html>
</font>
</div>
<br/>
<div id=’loginbox’>
<table>
<tr><td colspan=”2″><center>Welcome to the Stefcho’s Wireless Network Captive Portal!</td></tr>
<tr><td colspan=”2″><center>Enter User Credentials, or Voucher Code to gain access.</td></tr>
<tr><td> </td></tr>
<tr><td align=”right”>Username:</td><td align=”left”><input name=”auth_user” type=”text” style=”border: 1px dashed;”></td></tr>
<tr><td align=”right”>Password:</td><td align=”left”><input name=”auth_pass” type=”password” style=”border: 1px dashed;”></td></tr>
<tr><td> </td></tr>
<tr><td align=”right”>Voucher:</td><td align=”left”><input name=”auth_voucher” type=”text” style=”border: 1px dashed;”></td></tr>
<tr><td></td><td><tr><td></td><td>
<tr><td></td><td><tr><td></td><td>
<P align=”center”><TEXTAREA id=”aup” name=”aup” rows=”15″ cols=”50″> Acceptable Use Policy (AUP).
</TEXTAREA>
</td></tr>
</tr>
</table>
<input id=”iagree” type=”checkbox” name=”CHKBOX1″ value=”1″>Accept</p>
<input name=”accept” type=”submit” value=”Continue”>
</div>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</center>
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
</form>
<script type=”text/javascript”>
function CheckBoxesValidations()
{
if(document.getElementById(‘iagree’).checked == false)
{
alert(“Please read and accept the User agreement to proceed!”);
return false;
}
else
return true;
}
</script>
</body>
</html>
For Portal_error
<tr>
<td>
<div id=”mainlevel”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”0″>
<tr>
<td>
<center>
<div id=”mainarea”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”5″>
<tr>
<td>
<div id=”maindivarea”>
<center>
<div id=’statusbox’>
<font color=’red’ face=’arial’ size=’+1′>
<b>
Invalid credentials specified.
</b>
</font>
</div>
<br/>
<td>
<div id=”mainlevel”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”0″>
<tr>
<td>
<center>
<div id=”mainarea”>
<center>
<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”5″>
<tr>
<td>
<div id=”maindivarea”>
<center>
<div id=’statusbox’>
<font color=’red’ face=’arial’ size=’+1′>
<b>
Invalid credentials specified.
</b>
</font>
</div>
<br/>
0 comments:
Post a Comment