feat(admin): relooking des pages auth via le design system (login/forgot/reset)
All checks were successful
CI / secret-scan (push) Successful in 11s
CI / php-lint (push) Successful in 28s
CI / static-tests (push) Successful in 55s
CI / js-tests (push) Successful in 30s
CI / secret-scan (pull_request) Successful in 10s
CI / php-lint (pull_request) Successful in 29s
CI / static-tests (pull_request) Successful in 58s
CI / js-tests (pull_request) Successful in 30s
CI / auto-merge (push) Has been skipped
CI / auto-merge (pull_request) Successful in 9s

layout.php ne chargeait pas admin.css (style inline minimal) -> les pages auth
s'affichaient sans style. Branche admin.css et reecrit login/forgot/reset avec la
carte existante (.login-card, .login-logo, .form-input, .btn-primary, .login-footer).
Ajoute les classes .alert (erreur/info) manquantes + accent jaune Wakdo sur la carte.
This commit is contained in:
Imugiii 2026-06-18 08:35:31 +00:00
parent 68a2690b98
commit 18e4168f0d
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;
?>
<main class="login-page">
<h1>Mot de passe oublie</h1>
<?php if ($noticeMessage !== null): ?>
<p role="status"><?= htmlspecialchars($noticeMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?>
<form method="post" action="/forgot_password">
<input type="hidden" name="_csrf" value="<?= $token ?>">
<div class="form-group">
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" autocomplete="email" required>
<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>
<button type="submit">Envoyer le lien</button>
</form>
<?php if ($noticeMessage !== null): ?>
<p class="alert alert-info" role="status"><?= htmlspecialchars($noticeMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?>
<p><a href="/login">Retour a la connexion</a></p>
<form method="post" action="/forgot_password">
<input type="hidden" name="_csrf" value="<?= $token ?>">
<div class="form-group">
<label class="form-label" for="email">Adresse e-mail</label>
<input class="form-input" type="email" id="email" name="email" autocomplete="email" required>
</div>
<button type="submit" class="btn btn-primary">Envoyer le lien</button>
</form>
<p class="login-footer"><a href="/login">Retour a la connexion</a></p>
</div>
</main>

View file

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

View file

@ -16,28 +16,34 @@ $resetToken = htmlspecialchars($token ?? '', ENT_QUOTES, 'UTF-8');
$errorMessage = isset($error) && is_string($error) ? $error : null;
?>
<main class="login-page">
<h1>Nouveau mot de passe</h1>
<?php if ($errorMessage !== null): ?>
<p role="alert"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?>
<form method="post" action="/reset_password">
<input type="hidden" name="_csrf" value="<?= $csrf ?>">
<input type="hidden" name="token" value="<?= $resetToken ?>">
<div class="form-group">
<label for="password">Nouveau mot de passe</label>
<input type="password" id="password" name="password" autocomplete="new-password" minlength="8" required>
<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>
<div class="form-group">
<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>
</div>
<?php if ($errorMessage !== null): ?>
<p class="alert alert-error" role="alert"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?>
<button type="submit">Reinitialiser</button>
</form>
<form method="post" action="/reset_password">
<input type="hidden" name="_csrf" value="<?= $csrf ?>">
<input type="hidden" name="token" value="<?= $resetToken ?>">
<p><a href="/login">Retour a la connexion</a></p>
<div class="form-group">
<label class="form-label" for="password">Nouveau mot de passe</label>
<input class="form-input" type="password" id="password" name="password" autocomplete="new-password" minlength="8" required>
</div>
<div class="form-group">
<label class="form-label" for="password_confirm">Confirmer le mot de passe</label>
<input class="form-input" type="password" id="password_confirm" name="password_confirm" autocomplete="new-password" minlength="8" required>
</div>
<button type="submit" class="btn btn-primary">Reinitialiser</button>
</form>
<p class="login-footer"><a href="/login">Retour a la connexion</a></p>
</div>
</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. -->
<meta name="robots" content="noindex, nofollow">
<title><?= $pageTitle ?></title>
<style>
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>
<link rel="stylesheet" href="/assets/css/admin.css">
</head>
<body>
<?= $content ?? '' ?>

View file

@ -1046,10 +1046,12 @@ tbody td.mono {
.login-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-top: 3px solid var(--color-yellow);
border-radius: var(--radius-lg);
padding: 40px;
width: 100%;
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 {
@ -1097,6 +1099,26 @@ tbody td.mono {
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 --- */
.text-muted {
color: var(--color-text-muted);