From 18e4168f0d4046b41083acdc6b96df494a7c3312 Mon Sep 17 00:00:00 2001
From: Imugiii <corentin.jog@gmail.com>
Date: Thu, 18 Jun 2026 08:35:31 +0000
Subject: [PATCH] feat(admin): relooking des pages auth via le design system
 (login/forgot/reset)

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.
---
 src/app/Views/auth/forgot.php         | 36 ++++++++++--------
 src/app/Views/auth/login.php          | 53 +++++++++++++++------------
 src/app/Views/auth/reset.php          | 46 +++++++++++++----------
 src/app/Views/layout.php              |  7 +---
 src/public/admin/assets/css/admin.css | 22 +++++++++++
 5 files changed, 99 insertions(+), 65 deletions(-)

diff --git a/src/app/Views/auth/forgot.php b/src/app/Views/auth/forgot.php
index fde146b..4776752 100644
--- a/src/app/Views/auth/forgot.php
+++ b/src/app/Views/auth/forgot.php
@@ -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>
diff --git a/src/app/Views/auth/login.php b/src/app/Views/auth/login.php
index 187b1d3..73b82e1 100644
--- a/src/app/Views/auth/login.php
+++ b/src/app/Views/auth/login.php
@@ -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>
diff --git a/src/app/Views/auth/reset.php b/src/app/Views/auth/reset.php
index e8b8b41..8253c4f 100644
--- a/src/app/Views/auth/reset.php
+++ b/src/app/Views/auth/reset.php
@@ -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>
diff --git a/src/app/Views/layout.php b/src/app/Views/layout.php
index 5bf12f5..484a20d 100644
--- a/src/app/Views/layout.php
+++ b/src/app/Views/layout.php
@@ -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 ?? '' ?>
diff --git a/src/public/admin/assets/css/admin.css b/src/public/admin/assets/css/admin.css
index f16b7a8..990ac59 100644
--- a/src/public/admin/assets/css/admin.css
+++ b/src/public/admin/assets/css/admin.css
@@ -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);
-- 
2.45.3