Awesome Captive Portal Page Material UI

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

Gertjan

@MacUsers said in Awesome Captive Portal Page Material UI:

Did you able to do that modification in the end?

Get the source of the default html page.
Remove the lines that reference the User and password entry boxes.
[ add some more home made style sheets, background pages, other html stuff - whatever ... find 8 954 trillion examples on the net ^^]
Save.
TEST - and loop to start if errors.
Done.

MacUsers

thanks @Gertjan!!
Sort of figured that out after posting. Made a custom captive-portal suit, which I'm going to put that in github, for anyone likes to replace the stock pages.