Customizing the Login Control

You can adapt your Login control to make it unique to your site, not like login features on other web sites. A whole range of different formatting properties and styles is at your service for this purpose. The Submit button, for example, can be defined either as a regular button, a link button, or an image button. Additionally, you can define whether the input fields should be displayed horizontally or vertically and whether the text should be shown above or beside the fields. Naturally, you may adapt all the text, for example, to localize it.

Functional changes are possible without any difficulty. Using the DisplayRememberMe property, you can define whether the possibility of a permanent login should be offered to the user via a CheckBox control. With RememberMeSet, you can define the initial value of the CheckBox control. The behavior in the case of errors and many other situations may be handled individually.

If these options are not enough for you to make the modifications you desire, you can use templates instead, an example of which is shown in Figure 6-9. You can avoid a lot of manual work by converting the actual configured state with the help of the Task List into a template, and then working on the template afterward. The functionality of the control stays as it is, as long as you haven't changed the defined IDs of the controls.

Figure 6-9: Customizing included—the Login control supports templating.

It is obvious that using a template results in more source code. It's getting much clearer, however, how the control is working on the inside. Listing 6-2 offers a snippet.

Listing 6-2: Customizing the Login Control

<%@ page language="C#" master="~/MasterPage.master" %>
<script runat="server" language="c#">

</script>

<asp:content id="Content1"
    contentplaceholderid="ContentPlaceHolder1" runat="server">
    <asp:login id="Login1" runat="server"
        ...
        >

        <layouttemplate>
            <table style="FONT-SIZE: 10pt; FONT-FAMILY: Verdana" border="0">
                ...
                <tr>
                    <td align="right">User Name:</td>
                    <td>
                        <asp:textbox id="UserName" runat="server">
                        </asp:textbox>
                        <asp:requiredfieldvalidator
                            id="UserNameRequired" runat="server"
                            errormessage="User Name."
                            validationgroup="Content1$Login1_Group"
                            controltovalidate="UserName">
                                *
                            </asp:requiredfieldvalidator>
                    </td>
                </tr>
                ...
                <tr>
                    <td align="right" colspan="2">
                        <asp:button id="Button" runat="server"
                            validationgroup="Content1$Login1_Group" text="Log In"
                            commandname="Submit" />
                    </td>
                </tr>
                <tr>
                    <td style="COLOR: red" colspan="2">
                        <asp:literal id="FailureText" runat="server">
                        </asp:literal>
                    </td>
                </tr>
            </table>
        </layouttemplate>
    </asp:login>
</asp:content>

Consuming Events

The Login control offers four events by which you can interact with the Login process:

• BeforeLogin is raised before the authentication takes place. Here you have the capability to check the syntax of the created data, for example, and stop the login if necessary.

• AfterLogin will be raised after successful authentication and will allow you to pass through additional routines—for example, to load individual user data or to record the login.

• Authenticate can be used whenever you want to provide a customized authentication. With the help of the event arguments, you can specify whether or not the checking of user data has been successful. Normally, however, you'll implement your own mechanism for the authentication by an individual membership provider.

• LoginError is raised when the authentication stops and the user data is incorrect.

Using the PasswordRecovery Control

I've placed the control on the formerly shown login page so that you can see it in action in Listing 6-3. It really makes sense to place both controls on the same page, as shown in Figure 6-10. Alternatively, you may as well create a new page and link it with the help of a template-based Login control.

Figure 6-10: Oh dear, did you forget your password again?

Listing 6-3: The PasswordRecovery Control in Action

<asp:passwordrecovery id="PasswordRecovery1"
    runat="server" font-names="Verdana"
    font-size="10pt"
    bordercolor="#999999"
    borderwidth="1px"
    borderstyle="Solid"
    backcolor="#FFFFCC">

    <titletextstyle font-bold="True"
        forecolor="White" backcolor="#333399">
    </titletextstyle>

    <maildefinition from="lorenz@pgk.de">
    </maildefinition>
</asp:passwordrecovery>

If you want the control to do its job, you must enable it to send e-mails. Therefore, the following configuration is placed in the machine.config as a standard. If you've installed and activated a local SMTP service, you can leave the setting untouched. If you are using a different mail server, however, you can overwrite the data in the local web.config file.

<smtpMail
   serverName="localhost"
   serverPort="25">
/>

Additionally, you must edit the data of the password message to be sent. In the best-case scenario, it will do to assign the From property of the MailDefinition subobject to a sender's address. Here, the control will use the standard e-mail template. The result looks more or less like this:

From: <lorenz@pgk.de>
Subject: Password
To: <lorenz@pgk.de>

Please return to the site and log in using the following information.
User Name: lorenz@pgk.de
Password: 6BR7afTDcl

The e-mail doesn't look really smart yet, so you may want to make individual changes to the template. Using several properties of the MailDefinition class, you may also define a couple of things apart from the sender's address: Should a carbon copy of the e-mail be sent? Which format is going to be used (text or HTML)? Do you want to set a subject and a priority?

The option to create a message based completely upon a template is very useful. Just create a new text file in the root directory of the application and name it, for example, PasswordRecovery.txt. Now you place the desired e-mail text in the file, but without the heading lines. Then you use <%UserName%> and <%Password%> as placeholders for the username and the password. A simple template might look like this:

Hi there!

Your user name is <%UserName%>.
Your password is <%Password%>.

Thanks!

In order to use the template, you must assign the PasswordRecovery control's MailDefinition.BodyFileName property to the filename you've chosen.

Customizing the Control

PasswordRecovery is quite similar to the previously mentioned Login control and can be adapted thoroughly as well. Here, a couple of Style properties are at your service, and all the text can be adapted, of course.

The control offers three different templates that you can build up completely from scratch or use on the basis of the already integrated views:

• UserName is the initial view of the control, and it asks the user to type in a user name, that is, the login name.

• Question is used if the user must answer a question to get to the password.

• Answer is shown if the password has been detected successfully or has been set back and e-mailed to the user.

Consuming Events

The PasswordRecovery control implements a couple of events that you may handle to step through the control's cycle:

• BeforeUserLookup: Is raised before the control tries to find out the user account belonging to the specified name. You have the option to use individual tests and to cancel the process.

• UserLookupError: Allows you to stop the cycle in case the entered user name can't be validated.

• BeforeAnswerLookup: Is used before the answer entered by the user is checked. You may cancel this operation within the scope of the event.

• AnswerLookupError: Is raised if the entered answer isn't correct.

• BeforeSendMail: Is raised before an e-mail is sent to the user. With the help of the event arguments, you get access to the instance of the MailMessage class that is based on the template mentioned earlier. This way you can modify the message and add more data if desired.

Creating Role-Based Templates

Unfortunately, the approach shown previously has one small issue. As soon as a user logs in, that user will see all the links, even those to the admin area. In reality, only a small number of people will have the right to access the administration. In cases like this one, the LoginView control enables you to create as many role-based templates as you want, and they will be displayed depending on the roles to which the users belong.

To create a new role-based template, you must select the LoginView control in the Design or Source view and choose the entry RoleGroups from the Properties grid. With the "..." button, you can open the Collection Editor, shown in Figure 6-12, and use it to create new templates based on one or several roles.

Figure 6-12: You can define custom role-based templates.

Templates created in this way can be edited visually in the Design view and filled with content as usual. With each entry in the source code, a subcontrol of the type RoleGroup will be created, to which a ContentTemplate property will be assigned (see Listing 6-5).

Listing 6-5: The Created RoleGroup Subcontrol with Assigned ContentTemplate

<asp:loginview id="LoginView1" runat="server">
    <anonymoustemplate>
        Links:<br />
        <asp:hyperlink runat="server"
            navigateurl="~/Default.aspx">
            Main
        </asp:hyperlink>
    </anonymoustemplate>
    <rolegroups>
        <asp:rolegroup roles="Admins,SuperUsers">
            <contenttemplate>
                Links:
                <br />
                <asp:hyperlink runat="server"
                    navigateurl="~/Default.aspx">
                    Main
                </asp:hyperlink>
                <br />
                <asp:hyperlink runat="server"
                    navigateurl="~/ProtectedArea/Default.aspx">
                    Protected Area
                </asp:hyperlink>
                <br />
                <asp:hyperlink runat="server"
                    navigateurl="~/AdminArea/Default.aspx">
                    Admin Area
                </asp:hyperlink>
            </contenttemplate>
        </asp:rolegroup>
    </rolegroups>
    <loggedintemplate>
        Links:<br />
        <asp:hyperlink runat="server"
            navigateurl="~/Default.aspx">
            Main
        </asp:hyperlink>
        <br />
        <asp:hyperlink runat="server"
            navigateurl="~/ProtectedArea/Default.aspx">
            Protected Area
        </asp:hyperlink>
    </loggedintemplate>
</asp:loginview>