{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
{% block title %}Forgot Password{% endblock %}
{% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %}
{% block templateCSS %}
<style>
#loginForm h1 {
font-size: 28px;
color: #6F6F6F;
font-weight: 600;
margin: 0px 0px 10px 0px;
}
.forgot-password-cta {
position: absolute;
font-size: 15px !important;
right: 0px;
top: 0px;
}
</style>
{% endblock %}
{% block pageWrapper %}
<div class="uv-large-box-plank">
<div class="uv-large-box-rt">
<div class="uv-center-box uv-text-center">
<form action="" method="post" id="loginForm">
<div class="uv-adjacent-center">
<h1>{{ "Forgot Password" |trans}}</h1>
<div class="uv-element-block">
<p>{{ "Enter your email address and we will send you an email with instructions to update your login credentials." |trans}}</p>
</div>
<div class="uv-adjacent-form">
<div class="uv-adjacent-element-block">
<label>{{ "Email" |trans}}</label>
<div class="uv-max-field">
<input class="uv-field" type="email" name="forgot_password_form[email]">
</div>
</div>
<div class="uv-adjacent-element-block">
{% if recaptchaDetail and recaptchaDetail.isActive == true %}
<div class="clearfix"></div>
<div class="g-recaptcha" data-sitekey="{{ recaptchaDetail.siteKey }}"></div>
<div class="clearfix"></div>
{% else %}
<!-- Recaptcha will not support -->
{% endif %}
</div>
<button class="uv-btn">{{ 'Send Mail'|trans }}</button>
</div>
</div>
</div>
</form>
</div>
<div class="uv-large-box-lt">
<div class="uv-center-box uv-text-center">
<a href="https://www.uvdesk.com">
<img alt="UVdesk" title="UVdesk" src="{{ asset('bundles/uvdeskcoreframework/images/uvdesk-logo-symbol.svg') }}">
</a>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
{{ parent() }}
{% if recaptchaDetail and recaptchaDetail.isActive == true %}
<script src='https://www.google.com/recaptcha/api.js'></script>
{% endif %}
<script type="text/javascript">
$(function () {
_.extend(Backbone.Validation.callbacks, {
valid : function (view, attr, selector) {
var $el = view.$('[name="' + attr + '"]');
$el.removeClass('uv-field-error');
$el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
},
invalid : function (view, attr, error, selector) {
var $el = view.$('[name="' + attr + '"]');
$el.addClass('uv-field-error');
$el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
$el.parents('.uv-adjacent-element-block').append("<span class='uv-field-message'>" + error + "</span>");
}
});
var LoginModel = Backbone.Model.extend({
validation: {
'forgot_password_form[email]': [{
required: true,
msg: '{{ "This field is mandatory"|trans }}'
},{
pattern: 'email',
msg: '{{ "This is not a valid email address"|trans }}'
}],
{% if recaptchaDetail and recaptchaDetail.isActive == true %}
'g-recaptcha-response' : {
fn: function(value) {
if(grecaptcha.getResponse().length > 0)
return false;
else
return true;
},
msg : '{{ "Please select CAPTCHA"|trans }}'
}
{% endif %}
}
});
var LoginForm = Backbone.View.extend({
el: 'form',
events: {
'blur input': 'formChanged',
'click .uv-btn': 'submit'
},
initialize: function () {
this.model = new LoginModel();
Backbone.Validation.bind(this);
},
formChanged: function(e) {
this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
},
submit: function (e) {
e.preventDefault();
var data = this.$el.serializeObject();
this.model.set(data);
if(this.model.isValid(true)){
this.$el.submit();
}
}
});
new LoginForm();
});
</script>
{% endblock %}