feat(admin): relooking des pages auth (login/forgot/reset) (#48)
This commit is contained in:
parent
50415465a5
commit
7281d958b4
5 changed files with 99 additions and 65 deletions
|
|
@ -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>
|
||||
<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): ?>
|
||||
<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; ?>
|
||||
|
||||
<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>
|
||||
<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">Envoyer le lien</button>
|
||||
<button type="submit" class="btn btn-primary">Envoyer le lien</button>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
||||
<?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 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; ?>
|
||||
|
||||
<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>
|
||||
<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 for="password">Mot de passe</label>
|
||||
<input type="password" id="password" name="password" autocomplete="current-password" required>
|
||||
<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">Se connecter</button>
|
||||
<button type="submit" class="btn btn-primary">Se connecter</button>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,15 @@ $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>
|
||||
<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): ?>
|
||||
<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; ?>
|
||||
|
||||
<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 ?>">
|
||||
|
||||
<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>
|
||||
<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 for="password_confirm">Confirmer le mot de passe</label>
|
||||
<input type="password" id="password_confirm" name="password_confirm" autocomplete="new-password" minlength="8" required>
|
||||
<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">Reinitialiser</button>
|
||||
<button type="submit" class="btn btn-primary">Reinitialiser</button>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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 ?? '' ?>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue