{% extends 'account/base.html.twig' %}

{% block title %}
    {% trans 'admin::compte-utilisateur changer mon mot de passe' %}
{% endblock %}

{% block head %}
<script type="text/javascript" language="javascript" src="/include/minify/?f=include/jslibs/jquery.validate.js,include/jslibs/jquery.validate.password.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $.validator.passwordRating.messages = {
            "similar-to-username": "{% trans 'forms::le mot de passe est trop similaire a l\'identifiant' %}",
            "too-short": "{% trans 'forms::la valeur donnee est trop courte' %}",
            "very-weak": "{% trans 'forms::le mot de passe est trop simple' %}",
            "weak": "{% trans 'forms::le mot de passe est simple' %}",
            "good": "{% trans 'forms::le mot de passe est bon' %}",
            "strong": "{% trans 'forms::le mot de passe est tres bon' %}"
        }

        $("#mainform").validate({
            rules: {
                form_old_password : {
                    required:true
                },
                form_password : {
                    password:'#form_login'
                },
                form_password_confirm : {
                    required:true,
                    equalTo:'#form_password'
                }
            },
            messages: {
                form_old_password : {
                    required :  "{% trans 'forms::ce champ est requis' %})"
                },
                form_password : {
                    required :  "{% trans 'forms::ce champ est requis' %}"
                },
                form_password_confirm : {
                    required :  "{% trans 'forms::ce champ est requis' %}",
                    equalTo :  "{% trans 'forms::les mots de passe ne correspondent pas' %}"
                }

            },
            errorPlacement: function(error, element) {
                error.appendTo(element.closest('.controls').find('.form_alert'));
            }
        });

    });
</script>
{% endblock %}

{% block content %}
<form method="POST" action="/account/reset-password/" id="mainform" class="form-horizontal">
    {% if passwordMsg is not none  %}
        <div class="alert alert-error">
            <a class="close" data-dismiss="alert" href="#">×</a>
            {{ passwordMsg }}
        </div>
    {% endif %}
    <div class="control-group">
        <label class="form_label control-label" for="form_login">{% trans 'admin::compte-utilisateur identifiant' %}</label>
        <div class="controls">
            <p>{{ app['authentication'].getUser().get_login() }}</p>
        </div>
    </div>
    <div class="control-group">
        <label class="form_label control-label" for="form_old_password">{% trans 'admin::compte-utilisateur ancien mot de passe' %}</label>
        <div class="controls">
            <input type="password" id="form_old_password" name="form_old_password" autocomplete="off" />
            <p class="form_alert help-block"></p>
        </div>
    </div>
    <div class="control-group">
        <label class="form_label control-label" for="form_password">
            {% trans 'admin::compte-utilisateur nouveau mot de passe' %}<br />
            <span style="font-size: 10px;">{% trans '8 caracteres minimum' %}</span>
        </label>
        <div class="controls">
            <input type="hidden" id="form_login" value="{{ app['authentication'].getUser().get_login() }}" autocomplete="off" />
            <input type="password" id="form_password" name="form_password" />
            <p class="form_alert help-block"></p>
            <div class="password-meter">
                <p class="password-meter-message">&nbsp;</p>
                <div class="password-meter-bg">
                    <div class="password-meter-bar"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="form_label control-label" for="form_password_confirm">{% trans 'admin::compte-utilisateur confirmer le mot de passe' %}</label>
        <div class="controls">
            <input type="password" id="form_password_confirm" name="form_password_confirm" autocomplete="off" />
            <p class="form_alert help-block"></p>
        </div>
    </div>
    <div class="form-actions" style="background-color: transparent;">
        <input type="submit" class="btn" value="{% trans 'boutton::valider' %}" style="margin: 20px auto;" />
        <input type="button" class="btn" value="{% trans 'boutton::annuler' %}" onclick="self.location.replace('/account/');" />
    </div>
</form>
<div>
    <p style="text-align: center; font-weight: bold; font-size: 13px; margin: 40px 0 0;">
        {% trans 'admin::compte-utilisateur A propos de la securite des mots de passe :' %}
    </p>
    <p style="text-align: center; margin: 20px 0 0;">
        {% trans 'admin::compte-utilisateur Les mots de passe doivent etre clairement distincts du login et contenir au moins deux types parmis les caracteres suivants :' %}
    </p>
    <div style="text-align: left; margin: 10px auto; width: 300px;">
        <ul>
            <li>{% trans 'admin::compte-utilisateur::securite caracteres speciaux' %}</li>
            <li>{% trans 'admin::compte-utilisateur::securite caracteres majuscules' %}</li>
            <li>{% trans 'admin::compte-utilisateur::securite caracteres minuscules' %}</li>
            <li>{% trans 'admin::compte-utilisateur::securite caracteres numeriques' %}</li>
        </ul>
    </div>
</div>
{% endblock %}