Custom Login page.



  • 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--------------------------------------------

    content="text/html; charset=ISO-8859-1">

    <form method="post" action="$PORTAL_ACTION$" <br="">onsubmit="return CheckBoxesValidations() ;"> <input<br>name="redirurl" value="$PORTAL_REDIRURL$" type="hidden">

    <big><big><big>Free

    WiFi Login</big></big></big>

    ( see front desk for
    password )

    <center>
      cellpadding="6" cellspacing="0" height="380"
    width="550">

    | bgcolor="#663366"> **Blah
    blah blah Free WiFi Login ** |
    |

    <center>
            cellspacing="0" width="100%">

    |

    <center>

    <center>
                  cellspacing="5" width="100%">

    |

    <center>
                       <font<br>color="red" face="arial" size="+1"></font<br>

    |

    <center>Welcome to blah blah blah Free
    WiFi Login page</center>

    |
    |

    <center>As always the user name is
    blahblah and the password can be obtained from the front desk.</center>

    |
    |   |
    | Username: | <input<br>name="auth_user" style="border: 1px dashed ;"></input<br> |
    | Password: | <input<br>name="auth_pass" style="border: 1px dashed ;"
    type="password"></input<br> |
    |   |
    | |

    |
    | | |
    | | |
    | | |
    | |

    <textarea<br>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<br>

    |

    value="1" type="checkbox">Accept

    type="submit">
                       </center>

    |

    </center>

    </center>

    |

    </center>

    |

    </center>

    ----------------------------------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 --------------------------------

    content="text/html; charset=ISO-8859-1">

    <title>cploginerror</title>

    <form method="post" action="$PORTAL_ACTION$" <br="">onsubmit="return CheckBoxesValidations() ;"> <input<br>name="redirurl" value="$PORTAL_REDIRURL$" type="hidden">

    <big><big><big>Free

    WiFi Login</big></big></big>

    ( see front desk for
    password )

    **<font<br>color="red" face="arial" size="+1">**Invalid

    credentials specified.</font<br>

    <center>
      cellpadding="6" cellspacing="0" height="380"
    width="550">

    | bgcolor="#663366"> **Blah
    blah blah Free WiFi Login ** |
    |

    <center>
            cellspacing="0" width="100%">

    |

    <center>

    <center>
                  cellspacing="5" width="100%">

    |

    <center>
                       <font<br>color="red" face="arial" size="+1">
                       </font<br>

    |

    <center>Welcome to blah blah blah Free
    WiFi Login page</center>

    |
    |

    <center>As always the user name is
    blahblah and the password can be obtained from the front desk.</center>

    |
    |   |
    | Username: | <input<br>name="auth_user" style="border: 1px dashed ;"></input<br> |
    | Password: | <input<br>name="auth_pass" style="border: 1px dashed ;"
    type="password"></input<br> |
    |   |
    | |

    |
    | | |
    | | |
    | | |
    | |

    <textarea<br>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<br>

    |

    value="1" type="checkbox">Accept

    type="submit">
                       </center>

    |

    </center>

    </center>

    |

    </center>

    |

    </center>

    --------------code ends here --------------------------------------

    well if anything at least someone will have some simple code to get them started, hope it helps.</input<br></form></input<br> </form>



  • 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.. :)



  • 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.



  • 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!!!!)



  • 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



  • 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



  • @luke240778:

    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


Locked