Aug 31 2006

CreateUserWizard using email as username

Posted by admin under Membership profile and roles

A very common scenario is to use email address as login id instead of a username. Here I will show you my approach to that CreateUserWizard tweaking:

The idea was first to somehow hide the username field, and in the event CreateUserWizard1_CreatingUser set the UserName to the Email. Well, that didn't work out since the UserName is the central part in the whole chain of events happening - so the solution was instead the opposite, which does indeed make sense. Hiding the email textbox in the createuserwizard and then somehow force the username to be an valid email address.

By using the templating functionality of the createuserwizard control we are able to create our own controls (textboxes etc) to be shown (the key is to name them correctly) and to our asp:TextBox ID="UserName" control we link a RegularExpressionValidator checking for valid emails:


        <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
        <WizardSteps>
            <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
            <ContentTemplate>
            <fieldset>
            <legend><a name="DIS" style="color: #09f;"><b><span id="lblname2" class="content4">Registration is completely free</span></b></a></legend>
            <span id="lblyournamedis" class="content2"><br /> Your email:</span> <span class="cred2">*</span>
            <br />
            <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
                        ErrorMessage="Email is required." ToolTip="Email is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="UserName"
                    ErrorMessage="Email address is not valid" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator><br />
            &nbsp;<span id="Span1" class="content2">Password:</span> <span class="cred2">*</span>            
            <br />
                  <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
                        ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
            <br />
            &nbsp;<span id="Span2" class="content2">Confirm password:</span> <span class="cred2">*</span>            
            <br />
                   <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword"
                        ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required."
                        ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
            <br />
             <asp:TextBox ID="Email" runat="server" Visible="false"></asp:TextBox>
            
                    <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password"
                        ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match."
                        ValidationGroup="CreateUserWizard1"></asp:CompareValidator>
            
            <br />
<asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
            </fieldset>
            </ContentTemplate>
            </asp:CreateUserWizardStep>
            <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
            <ContentTemplate>
            <b>Thanks for registering with us</b><br />
            Now wait for an email to be sent to the email address you specified with instructions to enable your account and login.
            </ContentTemplate>
            </asp:CompleteWizardStep>
        </WizardSteps>
        </asp:CreateUserWizard>

So basically what we are doing is still using the the txtUserName control,but setting the label to "Email" and also tying an email regularexpression to it.  As for the email textbox we need to define it - but nothing stops us from setting it to invisible:


<asp:TextBox ID="Email" runat="server" Visible="false"></asp:TextBox>

And, one more thing needs to be done, setting the email property as well. We hook into the CreatingUser event - which gets called after clicking the "Create" button but before the user actually is saved to the database.



    protected void CreateUserWizard1_CreatingUser(object sender, LoginCancelEventArgs e)
    {
        CreateUserWizard cuw = (CreateUserWizard)sender;
        cuw.Email = cuw.UserName;

    }

We simply set the email property to the same as the username (remember  username will be an email).

As you might have seen in my code I have DisableCreatedUser to true - and that's what we are gonna talk about in next article.

Links