Awesome Captive Portal Page Material UI

fhaeberle

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

jimp

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

Presbuteros

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

@jimp
thanks for including his work in the 2.4.4-RELEASE.

funked00

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
Daniel

jahonix

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

SCNR

jimp

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

funked00

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

jimp

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.

mrxz99

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

Gertjan

@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/captiveportal.inc - start at line 310 - as an example.

mrxz99

@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.
Thanks.

Gertjan

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.

mrxz99

@gertjan
I use the default logout page from pfsense.

ashima

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

HTML>
<HEAD>
	<TITLE>Logout</TITLE>
</HEAD>
<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" />
				<br/><br/><br/></td>
				
			</tr>
			<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">
                        </td>
                        </tr>

                </table>
		</FORM>
	</DIV>
</BODY>

Gertjan

@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 )
and
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 :)

ashima

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.

Gertjan

@ashima

Edit index.php - goto line 80.
Change

} elseif (!empty($cpsession)) {

for

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

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

ashima

Thanks @Gertjan Logout is working with that change.

Thank you so much.

Gertjan

The more official patch is out : https://github.com/pfsense/pfsense/commit/c857583bb95d6d787b3334e5775cfd7921d547fb#diff-71474409c847a22d74a82a536ceaa04d

MacUsers

@funked00 said in Awesome Captive Portal Page Material UI:

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

Hi Daniel,
Did you able to do that modification in the end? I'm on the same boat with exactly the same target in mind; any help would be very much appreciated!!

-San