{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
{% block title %}{% trans %}Account Validation{% endtrans %}{% endblock %}
{% block ogtitle %}{% trans %}Account Validation{% endtrans %}{% endblock %}
{% block twtitle %}{% trans %}Account Validation{% endtrans %}{% endblock %}
{% block metaDescription %}{% trans %}account.validation.metaDescription{% endtrans %}{% endblock %}
{% block metaKeywords %}{% trans %}account.validation.metaKeywords{% endtrans %}{% endblock %}
{% block body %} 
    <div class="uv-paper-article uv-paper-form">
        <div class="uv-paper-section">
            <form action="" method="post" id="resetPasswordForm">
                <section>
                    <h1>{{ 'Reset Password'|trans }}</h1>
                    <div class="uv-element-block">
                        <p>{{ 'Enter your new password below to update your login credentials'|trans }}</p>
                    </div>

                    <div class="uv-form">
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Password'|trans }}</label>
                            <div class="uv-field-block uv-relative">
                                <input class="uv-field" type="password" name="password">
                            </div>
                        </div>
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Confirm Password'|trans }}</label>
                            <div class="uv-field-block uv-relative">
                                <input class="uv-field" type="password" name="confirmPassword">
                            </div>
                        </div>

                        <button class="uv-btn">{{ 'Save Password'|trans }}</button>
                    </div>
                </section>
            </form>
        </div>
       
    </div>
{% endblock %}
{% block footer %}
	{{ parent() }}
	<script type="text/javascript">
		$(function () {
			var ResetPasswordModel = Backbone.Model.extend({
				validation: {
                    'password': [{
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                        },{
                        pattern: /^(?=(.*[a-zA-Z].*){2,})(?=.*\d.*)(?=.*\W.*)[a-zA-Z0-9\S]{8,}$/,
                        msg: '{{ "Password must contain minimum 8 character length, at least two letters (not case sensitive), one number, one special character(space is not allowed)."|trans }}'
                    }],
                    'confirmPassword': {
                        equalTo: 'password',
                        msg: '{{ "The passwords does not match"|trans }}'
                    },
				}
			});

			var ResetPasswordForm = Backbone.View.extend({
                events: {
                    'blur input': 'formChanegd',
                    'click .uv-btn': 'submit'
                },
                initialize: function () {
                    Backbone.Validation.bind(this);
					{% if error.messageKey is defined %}
                        app.appView.renderResponseAlert({'alertClass': 'danger', 'alertMessage': "{{ error.messageKey }}"})
                    {% endif %}
                },
                formChanegd: 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();
					}
				}
			});

		    var view = new ResetPasswordForm({
		        el: '#resetPasswordForm',
		        model: new ResetPasswordModel()
		    });
		});
	</script>
{% endblock %}