Awesome Captive Portal Page Material UI

  • Awesome pfsense login pages template for your captive portal!

    This Material UI will soon be integrated in the new pfsense release as default.
    This is for those who can't update. GitHub Link

    alt text

    Supports latest version of pfsense.

    The portal pages are using $PORTAL_ACTION$ and $PORTAL_REDIRURL$ to get data from the firewall backend. Authentication requests are send with POST requests to the firewall.

    The login sites are

    • based on google material thinking,
    • full responsive and
    • support all modern browsers.

    All pages have User/Password input written in HTML5 and inline css (in the head tag):

    • Login Page
    • Logout Page with Logout message
    • Error Page with Error message

    This separations is provided and needed by pfsense backend, anyone who is familiar with captive portal and pfsense will know that. Feel free to set issues if you are not comfortable with that solution and if I can do better.

    The main plus point of this solutions is the look and feel of the login screen based on a google material thinking. Both background image and logo SVG can be changed as everything of the code.

    This UI will soon be integrated in the new pfsense release as default.
    This is for those who can't update. GitHub Link

  • Rebel Alliance Developer Netgate

    It's actually in 2.4.4-RELEASE which came out on Monday, so it's there now for everyone. ☺

  • @fhaeberle
    thanks for adding some color. keep them coming.

    thanks for including his work in the 2.4.4-RELEASE.

  • Wow, the new CP looks great!

    But what's the official way to change the design now? I found /var/etc/captiveportal_*.html but is it the right way?

    I just want to disable the username and password field to show because only vouchers should be used.

    Best regards

  • Does it also mean that setting up a new CP automatically beams me to "Nautilus Beach Resort"? Have to try that immediately, Scotty!


  • Rebel Alliance Developer Netgate

    @funked00 said in Awesome Captive Portal Page Material UI:

    Wow, the new CP looks great!

    But what's the official way to change the design now? I found /var/etc/captiveportal_*.html but is it the right way?

    The same as before. Check Use custom captive portal page and then upload your own HTML as always. Only the default behavior has changed.

  • @jimp Thank you, now I found it. Could it be that the checkbox "Use custom captive portal page" is new in 2.4.4 ;-)?

  • Rebel Alliance Developer Netgate

    Yes, that is new in 2.4.4 because of the changes we made to how the portal page is made.

    By default you get the new style and you can customize the logo, background, and ToS without needing to upload custom HTML. If you want more customization you can choose to do so and upload custom html as before.

  • @jimp How about logout page? I can't access/use my logout page.

  • @mrxz99 said in Awesome Captive Portal Page Material UI:

    @jimp How about logout page? I can't access/use my logout page.

    What do you mean by "can't access/use my logout page".

    The build in logout page works. It's actually a popup being created when you login.
    But, as said a trillion times already : when user do not accept popups, and most don't, then the logout "page" will never show up.
    So, first things first : does your browser accepts popups ? If not, well, case closed ;)
    If it does, you should see the default logout page. If not, this indicates probably some setup quirk. Repair this first.

    Then, if you want, change the popup page with your own.
    When building your own, use /etc/inc/ - start at line 310 - as an example.

  • @gertjan Thanks for your suggestion.
    After uncheck block popup on my browser, the logout page was appear but still get an error when I hit logout button.
    on pfsense :
    uncheck block pop-up:
    Login page:
    After login --> logout pop-up appear:
    After hit logout button, user can't logout from captive portal :

    Hmmm, I'm newbie on pfsense, maybe you can help.

  • Can you show us what the URL is "behind" the Logout button ?
    It look like that one of the params "'logout_id'"isn't set in the URL.

  • @gertjan
    I use the default logout page from pfsense.

  • Hi @Gertjan , I am having a similar issue. It says:

    You Are connected.

    Even after clicking Logout button. The same was working in earlier version.
    Here's the URL I am using...

    <BODY BGCOLOR="#435370">
    	<DIV ALIGN="center" STYLE="color: #ffffff; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
    		<FORM METHOD="POST" ACTION="<?=$logouturl;?>">
    <table align="center">
    			<tr  align="center">
    				<td colspan=2><img src="captiveportal-Logo_01.jpg" />
    			<tr><td colspan=2>Hello <?=$username;?>,   Welcome to  Network, Click the button below to disconnect. Your Ip Address is <?=$clientip;?>. Your Mac Id is <?=$clientmac;?>.
    			<br/>	<br/></td></tr>
    			<INPUT NAME="logout_id" TYPE="hidden" VALUE="<?=$sessionid;?>">
    			<INPUT NAME="zone" TYPE="hidden" VALUE="<?=$cpzone;?>">
                             <tr align="center">
    				<td> &nbsp;</td>
    			<td><INPUT NAME="logout" TYPE="submit" VALUE="Logout">

  • @ashima said in Awesome Captive Portal Page Material UI:

    You Are connected.

    I see this text if :
    pfSense user database contains info about the logged in client ( this list : Status => Captive Portal => zone-name )
    ipfw has not any information about this connection (user/client is missing in the 2 tables) - use "ipfw table all list" to check.

    Solution : log out the concerning client.
    Also : never-ever edit the captive portal settings when clients are connected :)

  • Hi @Gertjan,
    I have disconnected all my clients from captive portal page. The Captive Portal Status shows 0 clients connected.

    Now when I login from the client desktop, the portal page is displayed and i am successfully able to login. A logout page with logout button is displayed on the browser ( The code is included in the previous reply). But when I click on logout button it doesn't logout. Instead it shows " You are connected". When I check in Captive Portal status it shows the client is connected. So the logout code is not working.

    The same code was working in 2.4.2. When Logout button was clicked the client was disconnected from the portal.

    Infact I have tried the code provided by @fhaeberle also. The Logout button doesn't disconnect the client from the portal.

    Thank you for your help.

    PS: Should I start a new thread for this.

  • @ashima

    Edit index.php - goto line 80.

    } elseif (!empty($cpsession)) {


    } elseif ((!empty($cpsession)) && (! $_POST['logout_id'])) {

    With this edit I'm able to disconnect using the button on the the popup page.

  • Thanks @Gertjan Logout is working with that change.

    Thank you so much.

Log in to reply