In my previous post, I showed a very simple design for an Aruba captive portal that is usable on small handheld screens (like a cell phones) as well as full size browser windows. In this post, I had directly pasted the HTML code (with embedded CSS). This actually had a couple of drawbacks. First, WordPress didn’t really handle the code very well. Part of the reason I pasted it right in the post was to have the code stylized by GeSHi. Unfortunately, GeSHi didn’t properly highlight the CSS. This also ended up making the post really long and there’s at least a few places where it mutilated the code. And second, embedding the code in a WordPress post also had the drawback that you couldn’t see how the page looked other than in my screenshots.
At work, we have an Aruba wireless system. This system has the ability to have multiple SSID’s available. One of those SSID’s is for guest access. We require that every guest has a username and password to access our wi-fi system. This requires a captive portal. Aruba supports these captive portals quite nicely, but their authentication pages leave a lot to be desired. I recently spent some time searching Google for some sample templates that work well on cell phones, tablets and computers. While I did find some information it was mostly vague information (yes, it’s possible) or based on using other web design templates and uploading the necessary files.
This isn’t what I wanted. I really just wanted a very simple page that had a login form and our Usage Policy (not a link to it, the actual policy on the page). If it was on a tablet or a PC, I wanted them to use the screen real-estate to show them both side by side. If it was on a phone, they should be stacked to avoid zooming. I couldn’t find anything that did quite what I wanted, so I wrote my own. Just in case there’s somebody else looking, I decided to post it here.
First, a screenshot of how it looks on an iPhone 6:
And an iPad:
There are actually two more “modes” not pictured here. They are both only applicable to being displayed on a computer.
There is one mode that is in between phone and tablet size. The only time it should be used is if somebody opens a very small browser window. It condenses the login form to take less horizontal space, but still keeps the policy text to the right of the page.
The second mode is for a very large web browser windows (more than 1,200 pixels). This mode simply keeps the max width at 1,200 pixels and displays nothing to the right of that boundary.
The magic in all of this are the @media CSS queries. These media queries are a function of CSS3 and are not supported on older browsers such as IE 8 (the most recent version available on Windows XP). Because of this, I put most of the style (colors, borders, etc) outside of the media queries and then shifted items around using the media queries. The page may not respond exactly as it’s supposed to in older browsers (for example, the items don’t stack properly when the width drops below 480 pixels in IE8), but the page should still be functional.
The code is available after the break. You are welcome to take this code and modify it for your needs.
UPDATE 11-Feb-2016: Instead of embedding the code in this post, I now have a Live Demo page setup.
Back in 2010 as Microsoft was putting the finishing touches on Office 2010, the Microsoft Exchange team mentioned that it was going to possible to show pictures in Outlook 2010. They also talked about how these pictures could be loaded directly into Active Directory and Outlook would be able to pull them from the directory. It didn’t take me long to make the required schema change on our network at work and load a few pictures in for testing. Once I updated our system to support Windows 2008 domain controllers, the display of pictures in the beta version of Outlook started working perfectly.
Even before I got the picture display to work in Outlook, I started wondering if it would be possible to make Windows 7 automatically load those pictures for its User Tile (I actually even asked the question on the blog post by the MS Exchange Team). It seemed that this wasn’t possible. Supposedly the fact that this was desired was passed on to the Windows team, but even after Windows 7 SP1 came out there didn’t seem to be any official support for this feature. And as far as I can tell, none is forthcoming.
The other day, I happened across a post by a guy named Joco where he detailed an undocumented API in Windows 7 that sets the User Tile. He also included some sample C# code that you can execute with command line arguments for the username and the picture location. However, I want to load the pictures directly from AD and I’ve done most of my “programming” in Visual Basic, not C#. So, I took his sample code, translated the API declaration to VB and added some code to retrieve the picture from Active Directory.
The Executable File
For simplicity, I’m providing an executable file already compiled against .Net 3.5 (which comes with Windows 7). This executable is signed by a CA Cert code signing certificate. If you do not have their root certificates installed, Windows will tell you that it’s an invalid signature.
To use this file, it can be simply be run by the user. You can launch this automatically as part of a login script (which is how I use it). The logic script application I use also allows me to hide any output so the DOS box never gets seen by our users.