Hi Guru's
I've been trying to implement the forgot password feature/function in one of my/our signin forms. With the help/search for other forum posts regarding the feature, but were unable to implement it successfull.
The extranet-signin-form is places in the ecom information.cshtml template, so the user can choose to login or enter new information during the ecom checkout process.
I have the code to the sign-in form here below: (using bootstrap modal) - Im using same form to sign-in or recover password.
information.cshtml :
<div class="modal " role="dialog" id="loginPanel" tabindex="-1" aria-hidden="true" aria-labelledby="loginModalTitle">
<form role="form" class="form-horizontal" name="ExtUserForm" method="POST" action="" id="" onsubmit="return formValidation.validate(this);">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">@Translate("close", "Luk", true)</span>
</button>
<h4 class="modal-titel" id="loginModalTitle">@Translate("existing_user", "Allerede bruger")? <small>- @Translate("Login_text", "Login her")</small></h4>
</div><!--/.modal-header-->
<div class="modal-body">
<div class="form-group">
<label for="login_username" id="label_login_username" data-login-value="@(Translate("username", "Brugernavn"))" data-forgotpassword-value="@(Translate("email", "E-mail"))" class="control-label col-xs-12 col-sm-3 col-md-3">@Translate("username", "Brugernavn")</label>
<div class="col-xs-12 col-sm-9 col-md-9">
<input type="text" id="login_username" name="Username" class="form-control" />
<input type="hidden" name="__validate" id="login_username_validation" value="login_username|required" />
</div>
</div>
<div class="form-group" id="password_login_wrapper">
<label for="login_password" class="control-label col-xs-12 col-sm-3 col-md-3">@Translate("password", "Adgangskode")</label>
<div class="col-xs-12 col-sm-9 col-md-9">
<input type="password" id="login_password" name="Password" class="form-control" />
<input type="hidden" name="__validate" id="password_validation" value="login_password|required" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-3 col-md-3"></div>
<div class="col-xs-12 col-sm-9 col-md-9">
<div class="checkbox">
<label>
<input type="checkbox" name="ForgotPassword" id="ForgotPassword" value="True" />
@Translate("forgot_my_password", "Jeg har glemt min adgangskode")
<input type="hidden" name="ForgotPasswordConfirm" value="@(Translate("forgot_password_message_success", "Din adgangskode er sendt til din mail."))">
<input type="hidden" name="ForgotPasswordEmailNotFound" value="@(Translate("forgot_password_message_error", "Brugernavn(E-mail) er ukendt"))">
<input type="hidden" name="ForgotPasswordMailTemplate" value="Extranet_send_password.cshtml" />
</label>
</div>
</div>
</div>
<div class="form-group" id="rememberMe">
<div class="col-xs-12 col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" id="EcomUser_RememberMe" name="AutoLogin" value="True"/>
@Translate("SignIn_RememberMe", "Husk mig", true)
</label>
</div>
</div>
</div>
</div><!--/.modal-body-->
<div class="modal-footer text-right">
<div class="form-group">
<div class="col-xs-12">
<button type="button" class="btn btn-default" data-dismiss="modal">@Translate("close", "Luk", true)</button>
<button type="submit" name="@(GetString("CartV2.CurrentStepButtonName"))" data-login-value="@(Translate("Login", "Login"))" data-forgotpassword-value="@(Translate("get_password", "Hent adgangskode"))" id="EcomUserLogin" class="btn btn-primary pull-right text-right">@Translate("Login", "Login")</button>
</div>
</div>
</div><!--/.modal-footer-->
</div><!--/.modal-content-->
</div><!--/.modal-dialog-->
</form>
</div><!--/#loginPanel .modal fade-->
And my javascript that shows/hides fields in the form when choosing to either login or that the user have forgotten his/her password.:
function toggleForgotPassword(){
if($("#ForgotPassword:checked").length == 0){
// not active
$("#password_validation").attr("name","__validate");
$("#password_login_wrapper").show();
$("#label_login_username").html($("#label_login_username").attr('data-login-value'));
$("#rememberMe").show();
$("#EcomUserLogin").html($("#EcomUserLogin").attr('data-login-value'));
$("#login_username_validation").attr('value', 'login_username|required');
} else {
// Forgot password
$("#password_validation").attr("name","");
$("#password_login_wrapper").hide();
$("#label_login_username").html($("#label_login_username").attr('data-forgotpassword-value'));
$("#rememberMe").hide();
$("#EcomUserLogin").html($("#EcomUserLogin").attr('data-forgotpassword-value'));
$("#login_username_validation").attr('value', 'login_username|email');
}
$('#loginPanel input[data-hasqtip]').each(function(){
$(this).qtip("destroy");
$(this).val('');
$(this).css('border-color','');
});
bindJqueryEvents(); //binding validation events to input fields.
}
$(document).ready(function(){
$("#loginPanel").on("change", "#ForgotPassword", function(){
toggleForgotPassword();
});
});
And this is the Extranet_send_password.cshtml E-mail template specified to be used in the form (value of field ForgotPasswordMailTemplate):
- Located in the /Templates/Extranet folder.
Hej @GetString("DWUsers:User:Name")<br /><br />
Du kan logge ind på sitet med nedenstående oplysninger:<br />
<strong>Brugernavn:</strong> @GetValue("DWUsers:User:Username") - @GetValue("DWExtranetUsername")<br />
<strong>Kodeord:</strong> @GetValue("DWUsers:User:Password") - @GetValue("DWExtranetPassword")
My issues are:
I don't receive any e-mail when i submit the form with my e-mail(Username field). I neither get any error messages (or don't know how to get them).
Also, it would be great with a solution where the user wont be sent his/her password(in plain text), but isntead a link they can click on to reset/change their passwords.
Any help is much appreciated.
// Finn Frost
