Files
aem_monespace/monaem/templates/default/change_password.pt
2023-06-22 10:26:17 +02:00

101 lines
3.6 KiB
XML

<metal:block use-macro="main_template">
<div metal:fill-slot="content">
<div tal:condition="message" tal:content="message" class="alert alert-danger" />
<br />
<div class="row">
<form id="change-password-form" class="form-horizontal" action="${url}" method="post" tal:condition="member"
data-fv-framework="bootstrap"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-xs-3 control-label">Mot de passe actuel</label>
<div class="col-xs-4">
<input class="form-control" type="password" name="old_password"
data-fv-notempty="true"
data-fv-notempty-message="Le mot de passe est obligatoire" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Nouveau mot de passe</label>
<div class="col-xs-4">
<input class="form-control" type="password" name="new_password1" id="new_password1"
placeholder="20 caractères maximum"
data-fv-notempty="true"
data-fv-notempty-message="Le mot de passe est obligatoire" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Confirmer le mot de passe</label>
<div class="col-xs-4">
<input class="form-control" type="password" name="new_password2" id="new_password2"
placeholder="20 caractères maximum"
data-fv-identical="true"
data-fv-identical-field="password"
data-fv-identical-message="Le mot de passe et sa confirmation ne sont pas identiques" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-4">
<button class="btn btn-primary" type="submit" name="form.submitted">
<span class="glyphicon glyphicon-ok"></span>&nbsp;Enregistrer</button>
</div>
</div>
</form>
<br />
<br />
<br />
</div> <!-- row -->
<script>
$(document).ready(function() {
var fv = $('#change-password-form').formValidation({
fields: {
new_password1: {
validators: {
notEmpty: {
message: 'Le mot de passe est obligatoire'
},
stringLength:{
min: 8,
max: 20,
message: "La longueur du mot de passe n'est pas respectée, minimum 8, maximum 20"
},
regexp: {
regexp: /^(?=.*\d)(?=.*[!@#$%^&*\_\-\.\+,;\:\\/§à\]\[\?\{\}])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z!@#$%^&*\_\-\.\+,;\:\\/§à\]\[\?\{\}]{8,}$/,
message: 'Le mot de passe doit contenir au minimum une lettre, un nombre,un majuscule, un minuscle, et un caractère speciaux.',
}
}
},
new_password2: {
validators: {
notEmpty: {
message: 'Le mot de passe est obligatoire'
},
callback: {
message: 'Le mot de passe et sa confirmation ne sont pas identiques.',
callback: function(input) {
var new_password1 = $('#new_password1').val();
return new_password1 == input;
}
}
}
},
},
}).data();
$('form input').on('keypress', function(e) {
return e.which !== 13;
});
$('#new_password1').on('change input', function(){
fv.formValidation.revalidateField($('#new_password2'))
});
});
</script>
</div>
</metal:block>