Amélioration de l'expérience utilisateur

This commit is contained in:
2024-09-09 20:27:54 +02:00
parent 76ddc9fe30
commit b087a7130c
13 changed files with 207 additions and 87 deletions

View File

@@ -1,74 +1,76 @@
<?php
use piko\Piko;
use function Piko\I18n\__;
assert($this instanceof Piko\View);
/* @var $this \piko\View */
/* @var $user piko\user\models\User */
/* @var $message array */
/* @var $router \piko\Router */
$router = Piko::get('router');
$this->title = Piko::t('user', 'Change your account ({account}) password',['account' => $user->username]);
if (is_array($message)) {
$this->params['message'] = $message;
echo '<div class="container text-center"><a class="btn btn-primary" href="'. $router->getUrl('user/default/login').'">'
. Piko::t('user', 'Login') . '</a></div>';
return;
}
$this->title = __('user', 'Change your account ({account}) password',['account' => $user->username]);
$js = <<<SCRIPT
jQuery(document).ready(function($) {
document.addEventListener('DOMContentLoaded', function() {
function validateField(event) {
var field = event.target;
function validateField(e) {
var that = this;
$.post('{$router->getUrl('user/default/check-registration')}', $('#register-form').serialize(), function(errors) {
if (errors[that.name]) {
$(that).addClass('is-invalid')
$(that).removeClass('is-valid')
$(that).next('.invalid-feedback').text(errors[that.name])
fetch('{$this->getUrl('user/default/check-registration')}', {
method: 'POST',
body: new URLSearchParams(new FormData(document.getElementById('register-form')))
})
.then(response => response.json())
.then(errors => {
if (errors[field.name]) {
field.classList.add('is-invalid');
field.classList.remove('is-valid');
field.nextElementSibling.textContent = errors[field.name];
} else {
$(that).removeClass('is-invalid')
$(that).addClass('is-valid')
field.classList.remove('is-invalid');
field.classList.add('is-valid');
}
});
}
$('#password').focusout(validateField);
$('#password2').focusout(validateField);
document.getElementById('password').addEventListener('focusout', validateField);
document.getElementById('password2').addEventListener('focusout', validateField);
});
SCRIPT;
$this->registerJs($js);
?>
<div class="container" style="margin-top: 100px">
<div class="container">
<h1 class="h4"><?= $this->title ?></h1>
<?php if (!empty($message) && $message['type'] === 'success'): ?>
<div class="alert alert-success" role="alert">
<?= $message['content'] ?>
<p class="text-center"><a class="btn btn-primary" href="<?= $this->getUrl('user/default/login') ?>">
<?= __('user', 'Login') ?></a>
</p>
</div>
<?php else: ?>
<form method="post" id="register-form" novalidate>
<div class="form-group">
<label for="password"><?= Piko::t('user', 'Password') ?></label>
<div class="mb-2">
<label for="password"><?= __('user', 'Password') ?></label>
<input type="password" class="form-control" id="password" name="password" value="" autocomplete="off">
<div class="invalid-feedback"></div>
</div>
<div class="form-group">
<label for="password2"><?= Piko::t('user', 'Confirm your password') ?></label>
<div class="mb-2">
<label for="password2"><?= __('user', 'Confirm your password') ?></label>
<input type="password" class="form-control" id="password2" name="password2" value="" autocomplete="off">
<div class="invalid-feedback"></div>
</div>
<button type="submit" class="btn btn-primary"><?= Piko::t('user', 'Send') ?></button>
<button type="submit" class="btn btn-primary"><?= __('user', 'Send') ?></button>
</form>
<?php endif ?>
</div>