Recover Password

Recover password in frontend

The Recover Password app has settings for handling when a user wants to recover or change their password.

The module is able to handle two different scenarios:

1. An anonymous user can provide their email and username and get sent an email with a link for changing their password, provided they are an existing user in the system
2. A signed in user can change their password

In the section Recover Password two templates can be set:

• Template is a template that should include a forgotten password form, the template is only shown for anonymous users
• Password template is a template that should include a changing password form, and is only shown for logged in users or redirected users via the email link with a recover-token

The section Email includes settings for the recover password email the user will receive.

Template

The forgotten password template should inherit the UserPasswordRecoverViewModel and using the Dynamicweb.Rendering and the Dynamicweb.Users.Frontend.RecoverPasswordModule namespaces. It should include a form that sends a reset your password-email when the user inserts a correct username and email address:

@inherits ViewModelTemplate<UserPasswordRecoverViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Users.Frontend.RecoverPasswordModule

<div>
    <h4>Forgot your password?</h4>
    <p>Enter your name or email and we will send you a link to reset your password.</p>
</div>
<!-- Create a form that sends an email with a link for creating a new password -->
<form method="post">
    <div>
        <input type="text" name="Email" id="Email" placeholder="Email">
        <label for="Email">Email</label>
                    
        <input type="text" name="Username" id="Username" placeholder="Username">
        <label for="Username">Username</label>

        <button type="submit" id="PasswordRecoveryButton">Send password link</button>
        <a href="/Default.aspx?ID=@GetPageIdByNavigationTag("SignInPage")" id="BackToSignInButton">Nevermind, back to sign in</a>
    </div>
</form>

<!-- Use the RecoverPasswordResult property to display the form result to the user -->
@if (Model.RecoverPasswordResult == RecoverPasswordResultType.MissingValue)
{
    <div> Please provide either a username or email address.</div>
}
@if (Model.RecoverPasswordResult == RecoverPasswordResultType.UserNotFound)
{
    <div> No user found with the provided username or email.</div>
}
@if (Model.RecoverPasswordResult == RecoverPasswordResultType.Success)
{
    <div> Check your email - we sent you an email with a link. Click it to continue to create a new password.</div>
}

Password template

The password template also should inherit the UserPasswordRecoverViewModel and using the Dynamicweb.Rendering and the Dynamicweb.Users.Frontend.RecoverPasswordModule namespaces.

@inherits ViewModelTemplate<UserPasswordRecoverViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Users.Frontend.RecoverPasswordModule

<div>
    <h4>Reset your password</h4>
    <p>Enter and confirm your new password.</p>
</div>

<!-- Create a form with input fields to change the password -->
<form method="post" action="">
    <input type="hidden" name="UserRecoverPassword" value="true"/>
    <div>
        <input type="password" name="NewPassword" id="NewPassword" placeholder="NewPassword">
        <label for="NewPassword">NewPassword</label>

        <input type="password" name="ConfirmNewPassword" id="ConfirmNewPassword" placeholder="ConfirmNewPassword">
        <label for="ConfirmNewPassword">ConfirmNewPassword</label>

        <button type="submit" name="LoginAction" value="Recovery" id="PasswordRecoveryButton">Change password</button>
        <a href="/Default.aspx?ID=@GetPageIdByNavigationTag("SignInPage")" id="BackToSignInButton">Nevermind, back to sign in</a>
    </div>
</form>  

<!-- Use the RecoverPasswordResult property to display the form result to the user -->
@if (Model.RecoverPasswordResult == RecoverPasswordResultType.MismatchedPasswords)
{
    <div> Passwords don't match </div>
}

@if (Model.RecoverPasswordResult == RecoverPasswordResultType.InvalidPasswordLength)
{
    <div> Password not accepted: Length is not valid. </div>
}

@if (Model.RecoverPasswordResult == RecoverPasswordResultType.InvalidPasswordComplexity)
{
    <div> Password not accepted: @{errorMessage.TrimEnd('.')}.. </div>
}

@if (Model.RecoverPasswordResult == RecoverPasswordResultType.Success)
{
    <div> Password changed </div>
}

Email template

The email template should inherit the UserPasswordRecoveryEmailViewModel and using the Dynamicweb.Rendering and the Dynamicweb.Frontend namespaces. Most importantly the email should include a link with a recovery token which the user needs to follow to complete the password recovery process:

@inherits ViewModelTemplate<UserPasswordRecoveryEmailViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend

<h2>Password recovery</h2>

@if (!string.IsNullOrWhiteSpace(Model.RecoveryLink))
{   
    <!--Create a link with a recovery token using the property RecoveryLink -->
    string link = Model.RecoveryLink.Replace("LoginAction=Recovery&", "");
    <p>
        Hi @Model.User.UserName
        We have received a request to set your password for your account.
        Click on the link below to set a new password.
    </p>
    <a href="@link">Set password</a>
    <p>
        If you didn't ask to set your password, ignore this email and your password will not be changed.
    </p>
}