Ok, basically I have Captive Portal set up on some real default settings, nothing special added really. I have user authentication, some computers on the pass through mac addresses and I have added one user for all unregistered mac addresses to sign on as. The user ( of the free wifi) just needs to go to our front desk and ask for the password. Seems to be working pretty good so far, no problems.. None that I am aware of anyway. What I would like to do is add some more "flash" to my login page, is it possible to store some gifs, jpgs, or whatever else on my pfsense box for the login page to point to these files so it can use them?
Here is the code I have so far, I found a basic version on the net somewhere, don't remember where, but I have modified it a lot and added stuff here and there to get it to look like this, but it is not flashy enough for me, and I am not the best html editor in the world, not to mention my taste is colors is horrible.
---------------code starts below--------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background-color: #000;
}
body,td,th {
color: #090;
}
</style>
</head>
<body>
<form method="post" action="$PORTAL_ACTION$"
onsubmit="return CheckBoxesValidations() ;"> <input
name="redirurl" value="$PORTAL_REDIRURL$" type="hidden">
<h2 style="text-align: center;">
</h2>
<h2 style="text-align: center;"><big><big><big>Free
WiFi Login</big></big></big></h2>
<div style="text-align: center;">( see front desk for
password )</div>
<h2 style="text-align: center;"></h2>
<center>
<table style="border: 1px solid rgb(0, 0, 0);"
cellpadding="6" cellspacing="0" height="380"
width="550">
<tbody>
<tr bgcolor="#990000" height="10">
<td style="border-bottom: 1px solid rgb(0, 0, 0);"
bgcolor="#663366"> <font color="white">
Blah
blah blah Free WiFi Login </font> </td>
</tr>
<tr>
<td>
<div id="mainlevel">
<center>
<table border="0" cellpadding="5"
cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<center>
<div id="mainarea">
<center>
<table border="0" cellpadding="5"
cellspacing="5" width="100%">
<tbody>
<tr>
<td>
<div id="maindivarea">
<center>
<div id="statusbox"> <font
color="red" face="arial" size="+1">
</font> </div>
<div id="loginbox">
<table>
<tbody>
<tr>
<td colspan="2">
<center>Welcome to blah blah blah Free
WiFi Login page</center>
</td>
</tr>
<tr>
<td colspan="2">
<center>As always the user name is
blahblah and the password can be obtained from the front desk.</center>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="right">Username:</td>
<td align="left"><input
name="auth_user" style="border: 1px dashed ;"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td align="left"><input
name="auth_pass" style="border: 1px dashed ;"
type="password"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="right"></td>
<td align="left">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<p align="center"><textarea
cols="50" rows="15" name="aup" id="aup">Basically
this is a area for the TOS, it is unfinished. It is something that I
will eventually get around to, for now.. DO NOT ABUSE THE WIFI!! You
have been WARNED.</textarea> </p>
</td>
</tr>
</tbody>
</table>
<input id="iagree" name="CHKBOX1"
value="1" type="checkbox">Accept
<p></p>
<input name="accept" value="Continue"
type="submit"> </div>
</center>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
</tbody>
</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>
----------------------------------CODE ENDS --------------------------------------------------
and this is what it looks like ( it is a screenshot ) I took out the real names of stuff but you get the idea.
The Login page
The login error page
here is the code for error page ..
----------------code starts here --------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background-color: #000;
}
body,td,th {
color: #090;
}
</style>
<title>cploginerror</title>
</head>
<body>
<form method="post" action="$PORTAL_ACTION$"
onsubmit="return CheckBoxesValidations() ;"> <input
name="redirurl" value="$PORTAL_REDIRURL$" type="hidden">
<h2 style="text-align: center;">
</h2>
<h2 style="text-align: center;"><big><big><big>Free
WiFi Login</big></big></big></h2>
<div style="text-align: center;">( see front desk for
password )</div>
<h2 style="text-align: center;"><font>
<font
color="red" face="arial" size="+1">Invalid
credentials specified.</font></font></h2>
<center>
<table style="border: 1px solid rgb(0, 0, 0);"
cellpadding="6" cellspacing="0" height="380"
width="550">
<tbody>
<tr bgcolor="#990000" height="10">
<td style="border-bottom: 1px solid rgb(0, 0, 0);"
bgcolor="#663366"> <font color="white">
Blah
blah blah Free WiFi Login </font> </td>
</tr>
<tr>
<td>
<div id="mainlevel">
<center>
<table border="0" cellpadding="5"
cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<center>
<div id="mainarea">
<center>
<table border="0" cellpadding="5"
cellspacing="5" width="100%">
<tbody>
<tr>
<td>
<div id="maindivarea">
<center>
<div id="statusbox"> <font
color="red" face="arial" size="+1">
</font> </div>
<div id="loginbox">
<table>
<tbody>
<tr>
<td colspan="2">
<center>Welcome to blah blah blah Free
WiFi Login page</center>
</td>
</tr>
<tr>
<td colspan="2">
<center>As always the user name is
blahblah and the password can be obtained from the front desk.</center>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="right">Username:</td>
<td align="left"><input
name="auth_user" style="border: 1px dashed ;"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td align="left"><input
name="auth_pass" style="border: 1px dashed ;"
type="password"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="right"></td>
<td align="left">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<p align="center"><textarea
cols="50" rows="15" name="aup" id="aup">Basically
this is a area for the TOS, it is unfinished. It is something that I
will eventually get around to, for now.. DO NOT ABUSE THE WIFI!! You
have been WARNED.</textarea> </p>
</td>
</tr>
</tbody>
</table>
<input id="iagree" name="CHKBOX1"
value="1" type="checkbox">Accept
<p></p>
<input name="accept" value="Continue"
type="submit"> </div>
</center>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
</tbody>
</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>
--------------code ends here --------------------------------------
well if anything at least someone will have some simple code to get them started, hope it helps.
pfSense Forum
