Page Safe 1.2.1

Joe Workman

If you are looking for an easy to set up way to restrict access to [a portion of] your website, then Joe Workman’s latest stack Page Safe may just be the solution you are looking for.

You can use Page Safe to lock one or multiple pages with a single password; multiple areas (each with their own password), each consisting of one or more pages. So, for example, you could have an area restricted to departmental use, and another area restricted for administration use. Moreover, you can filter the content displayed on pages depending on which PIN or passcode the user has entered using nested Stack Safe elements. Page Safe is delivered as a suite of three stacks: Page Safe, Logout, and Stack Safe.

The Page Safe stack element is as its name betrays the workhorse of this suite — this is the stack element that secures your web page. The stack uses PHP at the back end which means that page content is not downloaded until the password or numeric PIN has been correctly entered — this also means that the page can not be previewed inside RapidWeaver, and needs to be published to a server for testing.

As a consequence it follows that when you are designing webpages that you intend to secure, it is easier to design the visual appearance of the page, before adding the Page Safe stack; when the page is laid out the user simply needs to add the Page Safe component to the top of every page that they want to protect, and configure it to suit the look and feel of the site under development.

Like all of Joe Workman’s stacks Page Safe is well designed. It provides the site designer with a enough configurability to be flexible while remaining easy to use.

Looking first at the physical presentation of the Page Safe stack element, there are options for the Page that allow the user to specify a page title to be displayed when the login form is being presented to the user, as well as options for the background. There are options for the Page Safe visual component: these include the type of graphic to display, which can be displayed as either an animated keyhole, or any one of three styles of animated padlocks, or you can elect to use a custom image.

The second area affecting the physical presentation is the choice of either a four-to-seven digit PIN, or the use of a zero-or-more character passcode, which can include alpha-numeric characters, spaces and punctuation, despite the misleading information that the stack’s tooltip presents to the designer. There are options for the text that is presented to the user inviting them to enter the passcode when the page is first loaded, and to acknowledge a successful login or a login failure, and options for the colour of this text.

There are also a series of options for the container that contains the graphic and the input controls, that include colour, opacity, position and corner rounding that affects both the container and the input controls ensuring a consistency in the look and feel.

Finally there is an option for a footer to appear at the bottom of the login page that allows you to specify a small logo (48x48px), and a short notice beneath the logo.

The most important non-visual option, is the ‘Page Safe ID’ that allows the site designer to group multiple pages together — such that entering the appropriate password for that ID in one place allows access to all pages with the same ‘Page Safe ID’. This is also used by the Stack Safe stack, to present differential content to users. Also included in the suite is a global Page Safe template that can be used to ensure a degree of consistency in the look-and-feel for a single ‘Page Safe ID’.

Personally, I would have liked to see an option to specify the number of times that a user can try to login, before the input controls refuse to accept further tries.

The second element in the suite is the Stack Safe which allows the user to display different content to different users depending on the ‘Page Safe ID’. When a user navigates to a page that utilises this stack, one set of content can be displayed if they are logged in, and an entirely different set displayed if they have not logged in. Moreover, since stacks can be nested, it is possible to present differential content to users logged in through different routes through your application. The only option presented to the user for this element is the ‘Page Safe ID’.

The final element in the suite is the Logout stack, which has no configurable options, and requires any button, or text link element to be added to the stack. When the button or link is pressed the user is logged out.

Page Safe is not a user management system and does not claim to be — for something like that the reader is directed towards a product like SiteLok from Vibralogix.

Page Safe is a new stack, and there seem to still be one or two teething issues with the suite, at the time of testing. The first such issue could perhaps be a latency issue on slow networks, that allowed the user to enter the entire PIN in a single digit box in the input control — this had the effect of rendering a correct PIN ‘invalid’. However, this is not a show stopper issue. The second attempt at logging in, always seems to work.

The second issue concerns the need to be able to log out of multiple areas of a website, and the lack of a place to specify the ‘Page Safe ID’ in the Logout stack element to select the grouping that you want to exit. This is really only a problem when the Logout stack element is placed on a page that is not protected by a Page Safe element on the page, and you might have this situation on a page that seeks to show differential content depending on the user’s login route using the Stack Safe stack element. In such a circumstance you may not want to protect the page by any one Page Safe ID.

There are also minor tooltip errors that show up in the HUD, that reflect the rapid and active development of this stack suite.

Overall I found Page Safe to be a well designed and simple to use solution for websites that do not have too complex demands for security. I look forward to seeing its continued development over the next few months and years.

Angus MacPheep

Angus MacPheep is the man behind the mask, the ghost in the machine. Don’t be fooled by his suave good looks and reckless disregard for convention — he’s the real driving-force behind RapidWeaver Central, a madly intuitive aesthete who makes inspirational leaps of faith and conjures pixel-perfect design magic from the uninspiring ether. He’s also a real hit with the ladies.