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.
For quite some time now I’ve been taking a pretty big risk with a lot of files at home. I have a linux box that I run samaba on in order to share files with my Windows machines. These Windows machines map that share as their “S” drive. Once upon a time, this 120GB drive had a twin in the box with it and everything that was on one drive was automatically placed on the other drive (using software RAID 1). Years ago, that mirror was broken and never restored. So, all my data was setting on one hard drive (this included all of Haylee’s Pictures, a bunch of other pictures, all my MP3 files, and a few other random files). I could always dig my CD’s out and re-rip them to get the MP3 files, but Haylee’s pictures were a little harder to replace. I mitigated this risk by occasionally going in and burning these pictures to a DVD, but that required some manual work to do the backup. It also left open to loss anything that was created more recently than the last backup.
A couple months ago I moved Haylee’s picture site off the server in our spare bedroom and onto DreamHost. This helped out with the risk to Haylee’s pictures because most of them had also been uploaded to that site. But not all our pictures are uploaded to that site and it didn’t do anything for the other types of files on the S drive. To make matters worse, some of the stuff on that S drive isn’t really for public consumption. Probably the most personal thing on that drive is our Quicken backup. While it’s not the end of the world if somebody gets ahold of that, it’s still not something you generally want “out there.” So what I needed was a secure and automated way to back up all my files. I had toyed with the idea of using an old DLT drive I had laying around, but getting that to running was a lot of work and the DLT drive isn’t exactly quiet. Due to some other recent developments, we moved the computer out of its own room out into the living room. A loud tape drive really doesn’t work in that environment. So I needed something slightly different.