feat(admin): relooking des pages auth (login/forgot/reset) (#48)
All checks were successful
CI / secret-scan (push) Successful in 11s
CI / php-lint (push) Successful in 30s
CI / static-tests (push) Successful in 1m6s
CI / js-tests (push) Successful in 35s
CI / auto-merge (push) Has been skipped

This commit is contained in:
Corentin JOGUET 2026-06-18 11:19:21 +02:00
parent 50415465a5
commit 7281d958b4
5 changed files with 99 additions and 65 deletions

View file

@ -14,22 +14,28 @@ $token = htmlspecialchars($csrfToken ?? '', ENT_QUOTES, 'UTF-8');
$noticeMessage = isset($notice) && is_string($notice) ? $notice : null; $noticeMessage = isset($notice) && is_string($notice) ? $notice : null;
?> ?>
<main class="login-page"> <main class="login-page">
<h1>Mot de passe oublie</h1> <div class="login-card">
<div class="login-logo">
<img src="/assets/images/logo.png" alt="Wakdo">
<span class="login-logo-title">Wakdo Admin</span>
<span class="login-logo-sub">Reinitialisation du mot de passe</span>
</div>
<?php if ($noticeMessage !== null): ?> <?php if ($noticeMessage !== null): ?>
<p role="status"><?= htmlspecialchars($noticeMessage, ENT_QUOTES, 'UTF-8') ?></p> <p class="alert alert-info" role="status"><?= htmlspecialchars($noticeMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?> <?php endif; ?>
<form method="post" action="/forgot_password"> <form method="post" action="/forgot_password">
<input type="hidden" name="_csrf" value="<?= $token ?>"> <input type="hidden" name="_csrf" value="<?= $token ?>">
<div class="form-group"> <div class="form-group">
<label for="email">Adresse e-mail</label> <label class="form-label" for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" autocomplete="email" required> <input class="form-input" type="email" id="email" name="email" autocomplete="email" required>
</div> </div>
<button type="submit">Envoyer le lien</button> <button type="submit" class="btn btn-primary">Envoyer le lien</button>
</form> </form>
<p><a href="/login">Retour a la connexion</a></p> <p class="login-footer"><a href="/login">Retour a la connexion</a></p>
</div>
</main> </main>

View file

@ -16,32 +16,37 @@ $errorMessage = isset($error) && is_string($error) ? $error : null;
$noticeMessage = isset($notice) && is_string($notice) ? $notice : null; $noticeMessage = isset($notice) && is_string($notice) ? $notice : null;
?> ?>
<main class="login-page"> <main class="login-page">
<h1>Wakdo Admin</h1> <div class="login-card">
<p><small>Back-office de gestion</small></p> <div class="login-logo">
<img src="/assets/images/logo.png" alt="Wakdo">
<span class="login-logo-title">Wakdo Admin</span>
<span class="login-logo-sub">Back-office de gestion</span>
</div>
<?php if ($noticeMessage !== null): ?> <?php if ($noticeMessage !== null): ?>
<p role="status"><?= htmlspecialchars($noticeMessage, ENT_QUOTES, 'UTF-8') ?></p> <p class="alert alert-info" role="status"><?= htmlspecialchars($noticeMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?> <?php endif; ?>
<?php if ($errorMessage !== null): ?> <?php if ($errorMessage !== null): ?>
<p role="alert"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></p> <p class="alert alert-error" role="alert"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?> <?php endif; ?>
<form method="post" action="/login"> <form method="post" action="/login">
<input type="hidden" name="_csrf" value="<?= $token ?>"> <input type="hidden" name="_csrf" value="<?= $token ?>">
<div class="form-group"> <div class="form-group">
<label for="email">Adresse e-mail</label> <label class="form-label" for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" autocomplete="email" required> <input class="form-input" type="email" id="email" name="email" autocomplete="email" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Mot de passe</label> <label class="form-label" for="password">Mot de passe</label>
<input type="password" id="password" name="password" autocomplete="current-password" required> <input class="form-input" type="password" id="password" name="password" autocomplete="current-password" required>
</div> </div>
<button type="submit">Se connecter</button> <button type="submit" class="btn btn-primary">Se connecter</button>
</form> </form>
<p><a href="/forgot_password">Mot de passe oublie ?</a></p> <p class="login-footer"><a href="/forgot_password">Mot de passe oublie ?</a></p>
</div>
</main> </main>

View file

@ -16,10 +16,15 @@ $resetToken = htmlspecialchars($token ?? '', ENT_QUOTES, 'UTF-8');
$errorMessage = isset($error) && is_string($error) ? $error : null; $errorMessage = isset($error) && is_string($error) ? $error : null;
?> ?>
<main class="login-page"> <main class="login-page">
<h1>Nouveau mot de passe</h1> <div class="login-card">
<div class="login-logo">
<img src="/assets/images/logo.png" alt="Wakdo">
<span class="login-logo-title">Wakdo Admin</span>
<span class="login-logo-sub">Nouveau mot de passe</span>
</div>
<?php if ($errorMessage !== null): ?> <?php if ($errorMessage !== null): ?>
<p role="alert"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></p> <p class="alert alert-error" role="alert"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?> <?php endif; ?>
<form method="post" action="/reset_password"> <form method="post" action="/reset_password">
@ -27,17 +32,18 @@ $errorMessage = isset($error) && is_string($error) ? $error : null;
<input type="hidden" name="token" value="<?= $resetToken ?>"> <input type="hidden" name="token" value="<?= $resetToken ?>">
<div class="form-group"> <div class="form-group">
<label for="password">Nouveau mot de passe</label> <label class="form-label" for="password">Nouveau mot de passe</label>
<input type="password" id="password" name="password" autocomplete="new-password" minlength="8" required> <input class="form-input" type="password" id="password" name="password" autocomplete="new-password" minlength="8" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password_confirm">Confirmer le mot de passe</label> <label class="form-label" for="password_confirm">Confirmer le mot de passe</label>
<input type="password" id="password_confirm" name="password_confirm" autocomplete="new-password" minlength="8" required> <input class="form-input" type="password" id="password_confirm" name="password_confirm" autocomplete="new-password" minlength="8" required>
</div> </div>
<button type="submit">Reinitialiser</button> <button type="submit" class="btn btn-primary">Reinitialiser</button>
</form> </form>
<p><a href="/login">Retour a la connexion</a></p> <p class="login-footer"><a href="/login">Retour a la connexion</a></p>
</div>
</main> </main>

View file

@ -19,12 +19,7 @@ $pageTitle = htmlspecialchars($title ?? 'Wakdo', ENT_QUOTES, 'UTF-8');
<!-- Back-office prive : jamais indexe par les moteurs de recherche. --> <!-- Back-office prive : jamais indexe par les moteurs de recherche. -->
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<title><?= $pageTitle ?></title> <title><?= $pageTitle ?></title>
<style> <link rel="stylesheet" href="/assets/css/admin.css">
body { font-family: system-ui, sans-serif; margin: 2rem; color: #1a1a1a; line-height: 1.5; }
h1 { font-size: 1.5rem; }
small { color: #666; }
code { background: #f4f4f4; padding: 0.1em 0.3em; border-radius: 3px; }
</style>
</head> </head>
<body> <body>
<?= $content ?? '' ?> <?= $content ?? '' ?>

View file

@ -1046,10 +1046,12 @@ tbody td.mono {
.login-card { .login-card {
background: var(--color-white); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-top: 3px solid var(--color-yellow);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 40px; padding: 40px;
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
} }
.login-logo { .login-logo {
@ -1097,6 +1099,26 @@ tbody td.mono {
text-decoration: underline; text-decoration: underline;
} }
/* Alertes (formulaires auth : login, mot de passe oublie, reinitialisation) */
.alert {
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 13px;
margin-bottom: 16px;
}
.alert-error {
background: var(--color-danger-bg);
color: var(--color-danger-text);
border: 1px solid #FECACA;
}
.alert-info {
background: var(--color-info-bg);
color: var(--color-info-text);
border: 1px solid #BFDBFE;
}
/* --- Misc utilities --- */ /* --- Misc utilities --- */
.text-muted { .text-muted {
color: var(--color-text-muted); color: var(--color-text-muted);