Mobile Login Page

[davidfrendo]

Hi all,

I am using pfSense 2.0.2 as the corporate captive portal solution with the integrated FreeRADIUS 2 package.

The solution is working perfectly. Recently, I have updated the captive portal login page in a way to identify the type of device (e.g. phone, tablet and computer) and this works quite well.

The only issue I am having is that the mobile version even though works and logs user in does not do the redirection to the original page.

I am hereby attaching the page code and the screenshot of the mobile page after pressing the Authenticate button.

Many thanks in advance.

Best regards,

David
captiveportal-login-page.php.txt

[jonallport]

Try going up to 2.0.3 pre-release…

There is a bug in the redirect url handling in 2.0.2 that mangles the URL; the first '/' is dropped in the parameter.  This is not usually a problems for PC(/Mac/*NIX) users as their initial URL is most likely google.com or similar.

Mobile devices (eg. iOS) will bring up the authentication after connecting to the network and trying to load (in the case of iOS) "http://www.apple.com/library/test/success.html"

That will get put into the redirect url parameter as  "http://www.apple.comlibrary/test/success.html" - which will fail to load after authentication

PS. I'm guessing this is the problem, as you haven't added the screenshot to the post!

[davidfrendo]

Hi,

Thanks for the reply, much appreciated. Will definitely try that.

Apologies for missing the screenshot. Uploading one with this post. Basically after hitting Authenticate, the circle in the screenshot appears and while authentication is successful no redirection occurs.

Many thanks again!

[topcat]

hi have you got the "captiveportal-mobile_detect.php" script file?

thanks

[davidfrendo]

Hi,

Yes, kindly find attached.

Unfortunately upgrading to 2.0.3-PreRelease didn't solve issue.

Many thanks in advance.

captiveportal-mobile_detect.php.txt

[Enrica_CH]

I have another solution to solve a better visibilty for mobiles.

Current browsers could interpret the line "@media all and (max-width: 481px)" in the CSS. You define as usual a style sheet. Then you overwrite definitions for a predefined resolution. To simplify you could also hide div containers. You can test this solution with Firefox on your PC. As soon as the browser width is less then 481px it switches suddendly.

Attached is our solution. Please rename it without the extention .txt.

captiveportal.html.txt
captiveportal.css.txt

[drupsta]

davidfrendo - Any luck in solving your problem? I would also to implement your solution if it worked with you. Thanks

[Enrica_CH]

Yes I solved it. Within the CSS file I have sections with media tags. What is between that tags overwrites the already defined definitions if medica condition matches.
see my example (without Pictures).

If you try my attachments, please remove .txt

captiveportal.css.txt
captiveportal.html.txt

[cwilkinson]

Hey, would you be willing to share the rest of this/image files? Looking at modifying this for personal use if you will allow it.

[drupsta]

I have manged to fix the davidfrendo problem by adding data-ajax="false" as attribute to the form in the mobile page section. I have attached a copy of the file here for those who want to use it.

captiveportal-login-page.php.txt

[Enrica_CH]

Here ist the ZIP file with all images for my proposal. Please remove the .txt

captiveportal-images.zip.txt