Creating a Custom Signup Page

Magentrix allows you to publish custom signup pages for your portals using Active Pages and Active Controllers. Custom signup pages can be used to ask users additional questions that aren't asked in the Magentrix standard Sign Up page. It also provides you with the option of adding custom messages and better control how you choose to brand the page.

In order to create a new Sign Up page, create a new Active Page and a Controller such as "CustomSignUp" and "CustomSignUpController". Use the SignUpModel class provided by Magentrix or extend it to create a Model container to be passed between the Page and its Controller. The SignUpModel provides you with most of the fields you need in order to capture a new registration information, such as "First Name", "Last Name", "UserName", "Email", etc.

Below is a sample Signup Page markup:

<aspx:AspxPage runat="server" Id="MySignUpPage" title="Sign Up">
<body>
  <div class="container-fluid">
    <div class="row max500">
      <aspx:ViewMessages runat='server' />  
    </div>
    <div class="row max500">
        <div id="signPanel" class="content">
        <h2>Sign Up</h2><br/>
        <aspx:ViewSection runat='server' columns='one' showHeader='false' labelPosition='top'>
            <aspx:InputField runat='server' value='{!Model.FirstName}'/>
            <aspx:InputField runat='server' value='{!Model.LastName}'/>
            <aspx:InputField runat='server' value='{!Model.Email}'/>
            <aspx:InputField runat='server' value='{!Model.Title}'/>
            <aspx:InputField runat='server' value='{!Model.Company}'/>
            <aspx:InputField runat="server" Value='{!Model.UserName}' />
            <aspx:InputField runat='server' value='{!Model.Password}'/>
            <aspx:InputField runat='server' value='{!Model.VerifyPassword}'/>
            <aspx:FieldCaptcha runat='server' label="Verify your request" /> 
            <aspx:SectionItem runat='server' HideLabel="true">
                <aspx:CommandButton runat='server' Text='Sign Up' 
                    CssClass='btn btnOrange signupBtn' data-theme='b' />
            </aspx:SectionItem>
        </aspx:ViewSection> 
        </div>
    </div>
  </div>
</body>
</aspx:AspxPage>

On the Controller, you can implement a HTTP POST action to read user inputs and use PortalManager to create and login the user to the portal:

[Secure]
[SerializeViewData]
public class CustomSignUpController : AspxController
{
    public override ActionResponse Index()
    {
        var model = new CustomSignUpModel();
        return View(model);
    }
    
    [HttpPost]
    [CaptchaValidator]    
    [ValidateAntiForgeryToken]
    public ActionResponse Index(CustomSignUpModel model, string retUrl)
    {
        // Check the validation status and shows errors to the user if not valid: 
        if (!ModelState.IsValid) 
           return View(model);
        
        // Optionally lookup contacts by the given Email and populate the 
        // info into the existing contact record. (record duplication prevention).
        // ...
        
        // Maps fields to the Contact entity:
        var contact = new Contact();
        contact.Firstname = model.FirstName;
        contact.Lastname = model.LastName;
        contact.Email = model.Email;

        //map other fields...
        string userId = null;

        try
        {
            userId = PortalManager.CreatePortalUser(contact, contact.Email, model.Password);
        }
        catch (Exception ex) {
            // Show the error messages to the user
            ModelState.AddModelError(ex);
            return View(model);
        }
        
        // If a user was successfully created, then you can log 
        // the user in and set the return URL (which is the point user started to 
        // interact with the portal)
        if (!IsEmpty(userId))
        {
            // Optionally update the contact with recent info
            Update(contact, new { SystemMode = true });
            
            // This method logs the user in and forwards the user to return url or their home page
            return PortalManager.Login(model.UserName, model.Password, retUrl);
        }
        else 
        {
            // Show a message to the user that an activation email is sent to them and they 
            // They need to verify their email.
            return Redirect(ActivePages.ConfirmRegistration);
        }
    }
    
    // Extended the SignUpModel to include additional fields
    public class CustomSignUpModel : SignUpModel
    {
        [Display(Name = "Title")]
        public string Title { get; set; }
        
        [Required]
        [Display(Name = "Company")]
        public string Company { get; set; }
    }
    
}

In the above view, we have added CAPTCHA validation as well. This is recommended since Sign Up pages are publicly available. In order to validate the CAPTCHA use the [CaptchaValidator] attribute. The Secure attribute on the Controller class ensures that the user is redirected to the SSL (https) version of the page which is required for the signup form.

Table of Contents

Creating a Custom Signup Page