pfSense Support Subscription

Author Topic: Custom Login page.  (Read 6710 times)

0 Members and 1 Guest are viewing this topic.

Offline virtualliquid

  • Jr. Member
  • **
  • Posts: 71
    • View Profile
Custom Login page.
« on: January 18, 2012, 08:23:35 pm »

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&nbsp;
</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>&nbsp;</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>&nbsp;</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&nbsp;
</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>&nbsp;</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>&nbsp;</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.

Offline virtualliquid

  • Jr. Member
  • **
  • Posts: 71
    • View Profile
Re: Custom Login page.
« Reply #1 on: January 18, 2012, 08:30:00 pm »
Well I would just like to say, that after actually reading the file manager on the top of the page, I found that I can indeed add the files I speak of to this problem I am having, I guess the only real problem, would be to read what is right in front of me.... I will leave post, incase someone needs some basic page ideas.. :)

Offline luke240778

  • Sr. Member
  • ****
  • Posts: 482
    • View Profile
    • Muti Wifi
Re: Custom Login page.
« Reply #2 on: March 13, 2012, 09:30:16 pm »
i see you have done the "Invalid Credentials" just by inserting text, are you also unable to get the Radius Responses by using the "$PORTAL_MESSAGE$" ?

No matter what i do i can't get that to work on my custom error page.

Offline atmlogic

  • Newbie
  • *
  • Posts: 1
    • View Profile
Re: Custom Login page.
« Reply #3 on: April 05, 2012, 11:16:55 am »
Thank you for posting your custom page.  I am just wondering where the secret stash of custom pages exist?  I think that 'everyone'  (at least the group of 'they')  Think that if your smart enough to get pfSense, m0n0Wall, Untangle working (especially if you got it going on Net4801) then you MUST know some basic HTML...  However... I really don't, and even if I did I don't want to do any more than resize my logo and paste it into someone elses awsome looking page.

Does anyone know of the secret list of custom captive portal pages?  (BTW, Untangle has a great looking captive portal page, however you need to be a full on developer to change that one!!!!)

Offline EOC2611P

  • Full Member
  • ***
  • Posts: 120
    • View Profile
Re: Custom Login page.
« Reply #4 on: April 10, 2012, 01:05:38 pm »
Virtualliquid you did some great work there! thank you for sharing  ;D

I am currently using your template but i removed the password and username fields as i don't want people to register an account.
If only there was a way to add a background picture or some more "captivating" graphic to it... :D

Offline EOC2611P

  • Full Member
  • ***
  • Posts: 120
    • View Profile
Re: Custom Login page.
« Reply #5 on: May 15, 2012, 04:42:48 am »
Just an update.
Thanks to the user Noobie that shared this great link, i am now able to put some graphic on the portal, here is the link:    http://forum.pfsense.org/index.php/topic,26141.0.html
A big thanks also to all those who put some work into it, thanks for sharing!  ;D

Offline Abdsalem

  • Full Member
  • ***
  • Posts: 299
    • View Profile
Re: Custom Login page.
« Reply #6 on: July 06, 2012, 10:31:13 pm »
i see you have done the "Invalid Credentials" just by inserting text, are you also unable to get the Radius Responses by using the "$PORTAL_MESSAGE$" ?

No matter what i do i can't get that to work on my custom error page.

Try
Code: [Select]
<?php echo "$PORTAL_MESSAGE$" ?>