This article shows how to position a Login component on a web page, and then toggle this area to show who is logged in.
We also need to provide room for any error messages such as incorrect password, not a valid email address, etc.
The method described below requires some skill with CSS and the ability to work in the source area of an A5W page, editing HTML and XBASIC code.
This is the desired effect. A clean login component area with fields for Username, Password and also links to recover the password and "Remember Me" to allow the user to store their login for subsequent visits.
This is the desired effect. A clean login component area with fields for Username, Password and also links to recover the password and "Remember Me" to allow the user to store their login for subsequent visits.
We also need to provide room for any error messages such as incorrect password, not a valid email address, etc.
And when the user has logged in, we want to hide the login fields and instead show the users name, a logout link and any information or links that pertain to their logged-in status. This is important as it indicates to the user that they are logged in.
We start with a graphic, called header.jpg in this article. Our image has a nice clearly defined login area to the right, about 110x230px with rounded edges. Our login dialog will be superimposed over this area using CSS.
Out of the box, the Alpha Five Login dialog takes up a bit too much real estate, so we need to use the Freeform area of the Login Dialog maker to reduce this. In the image below, the normal state is shown in the upper right, the desired version is in the lower left.
And here is a WYSIWYG view of the Freeform area, showing how we used a table to align the labels and flatten it just a bit for less overall vertical space.
In addition, we need to shorten several of the stock error messages. Remember, they have to fit in the graphic area I have provided. If they are too long, the message will wrap to a second line, and I just don't have room in the area I have provided. The image below shows where you can edit the Login dialog's error messages.
Insert the graphic header.jpg image where desired. Here is the CSS code I use to insert the header graphic.
#logo{
height:150px;
position:relative;
background-image: url(../images/header.jpg) ;
background-repeat:no-repeat;
}
Side note - I happen to use a header.a5w* at the top of every single page in a given web application. So, I only perform this operation once, in header.a5w. And then I use the a5w_include() function to place my header at the top of other pages in my web application.
Insert the login dialog in the A5W page.
First I create a DIV with ID=loginarea and place the normal Alpha Five login dialog code within this DIV. That's the two lines after the ELSE in the image below. Remember I also want to toggle this area when the person logs in, to show that they are logged in. So within this DIV I include an IF-ELSE-ENDIF statement.
Insert the login dialog in the A5W page.
First I create a DIV with ID=loginarea and place the normal Alpha Five login dialog code within this DIV. That's the two lines after the ELSE in the image below. Remember I also want to toggle this area when the person logs in, to show that they are logged in. So within this DIV I include an IF-ELSE-ENDIF statement.
The area above the ELSE defines the condition that someone IS logged in and shows their name and several links that would only be of use to someone who is logged in. The area below the ELSE is the normal login dialog code produced by Alpha Five when the login dialog was inserted. The only change I made was to move the line "?x_login.Output.Body.Login_Errors" below the line "?x_login.Output.Body.Login_HTML" because I happen to want my error messages to appear below the login dialog. I also used HTML 'strong' tag to highlight the error message.
Here is the section of my style sheet to format the loginarea DIV.
#loginarea{
top:0px;
position:absolute;
font-size:xx-small;
}
#loginarea .noneInput{
font-size:xx-small;
}
The selector is for positioning. I've chosen absolute positioning which means my loginarea DIV will be superimosed or "floating" on top of the previous DIV, my header logo. As I change the values for the left and top properties, the loginarea div will move from its default position to exactly where I want it to appear, to the far right. I also have set a property to reduce the font size in this area.
To exactly position the DIV, I use a Firefox add-on named Firebug. Here is a quick video showing how the DIV is positioned using the left and top properties: http://www.sqst.com/video/css_absolute_positioning.htm.
The second selector is used to also reduce the size of the data-entry field. This alters the font size for the class named "noneInput" which is provided by Alpha Five. I don't want to alter the size for all instances of the noneInput class, just those within the loginarea DIV.
Footnote
* I don't want to go in to it here, but I actually do not have just ONE header.a5w inserted using a5w_include(). I break my header in to two files, header_head.a5w and header_body.a5w. The first file contains only the portion of a normal A5W page that would be found in side the head tags, and the later contains only the portion that is found just past the body tag.
To help clarify, here is my basic page layout:
