From b90d8099c133ba8a8dc665ccea2bb001bfc3ebc6 Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Wed, 19 Nov 2025 21:54:51 +0200
Subject: [PATCH] Redesigns password-forgot and password-reset pages

---
 app/templates/form-password-forgot.php | 52 ++++++++++---------
 app/templates/form-password-reset.php  | 71 ++++++++++++++------------
 2 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/app/templates/form-password-forgot.php b/app/templates/form-password-forgot.php
index 45ea0ed..39bc898 100644
--- a/app/templates/form-password-forgot.php
+++ b/app/templates/form-password-forgot.php
@@ -1,32 +1,34 @@
 
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <div class="card mt-5">
-                        <div class="card-body">
-                            <h3 class="card-title mb-4">Reset password</h3>
-                            <p>Enter your email address and we will send you<br />
-                                instructions to reset your password.</p>
-                            <form method="post" action="?page=login&action=forgot">
+        <div class="auth-card mx-auto">
+            <div class="auth-card-body">
+                <div class="auth-header">
+                    <p class="auth-eyebrow">Forgot password</p>
+                    <h2 class="auth-title">Reset your access</h2>
+                    <p class="auth-subtitle">Enter the email linked to your account and if it exists in our records we will send you reset instructions.</p>
+                </div>
+                <form method="post" action="?page=login&action=forgot" class="auth-form" novalidate>
 <?php include CSRF_TOKEN_INCLUDE; ?>
-                                <div class="form-group">
-                                    <label for="email">email address:</label>
-                                    <input type="email"
-                                           class="form-control"
-                                           id="email"
-                                           name="email"
-                                           required
-                                           autocomplete="email">
-                                </div>
-                                <button type="submit" class="btn btn-primary btn-block mt-4">
-                                    Send reset instructions
-                                </button>
-                            </form>
-                            <div class="mt-3 text-center">
-                                <a href="?page=login">back to login</a>
-                            </div>
+                    <div class="mb-4">
+                        <label for="email" class="form-label">Email address</label>
+                        <div class="input-group auth-input-group">
+                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
+                            <input type="email"
+                                   class="form-control"
+                                   id="email"
+                                   name="email"
+                                   placeholder="you@example.com"
+                                   value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
+                                   required
+                                   autocomplete="email">
                         </div>
                     </div>
+                    <button type="submit" class="btn btn-primary auth-submit w-100">
+                        Send reset instructions
+                    </button>
+                </form>
+                <div class="mt-4 text-center">
+                    <a class="auth-link" href="?page=login">Back to login</a>
                 </div>
             </div>
         </div>
+
diff --git a/app/templates/form-password-reset.php b/app/templates/form-password-reset.php
index 2b25faf..e9bd5c6 100644
--- a/app/templates/form-password-reset.php
+++ b/app/templates/form-password-reset.php
@@ -1,38 +1,45 @@
 
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <div class="card mt-5">
-                        <div class="card-body">
-                            <h3 class="card-title mb-4">Set new password</h3>
-                            <form method="post" action="?page=login&action=reset&token=<?= htmlspecialchars(urlencode($token)) ?>">
+        <div class="auth-card mx-auto">
+            <div class="auth-card-body">
+                <div class="auth-header">
+                    <p class="auth-eyebrow">Secure account</p>
+                    <h2 class="auth-title">Choose a new password</h2>
+                    <p class="auth-subtitle">Create a password that is at least 8 characters long. We will sign you in once it is updated.</p>
+                </div>
+                <form method="post" action="?page=login&action=reset&token=<?= htmlspecialchars(urlencode($token)) ?>" class="auth-form" novalidate>
 <?php include CSRF_TOKEN_INCLUDE; ?>
-                                <div class="form-group">
-                                    <label for="new_password">new password:</label>
-                                    <input type="password"
-                                        class="form-control"
-                                        id="new_password"
-                                        name="new_password"
-                                        required
-                                        minlength="8"
-                                        autocomplete="new-password">
-                                </div>
-                                <div class="form-group mt-3">
-                                    <label for="confirm_password">confirm password:</label>
-                                    <input type="password"
-                                        class="form-control"
-                                        id="confirm_password"
-                                        name="confirm_password"
-                                        required 
-                                        minlength="8"
-                                        autocomplete="new-password">
-                                </div>
-                                <button type="submit" class="btn btn-primary btn-block mt-4">
-                                    Set new password
-                                </button>
-                            </form>
+                    <div class="mb-3">
+                        <label for="new_password" class="form-label">New password</label>
+                        <div class="input-group auth-input-group">
+                            <span class="input-group-text"><i class="fas fa-key"></i></span>
+                            <input type="password"
+                                   class="form-control"
+                                   id="new_password"
+                                   name="new_password"
+                                   placeholder="Enter new password"
+                                   required
+                                   minlength="8"
+                                   autocomplete="new-password">
                         </div>
                     </div>
-                </div>
+                    <div class="mb-4">
+                        <label for="confirm_password" class="form-label">Confirm password</label>
+                        <div class="input-group auth-input-group">
+                            <span class="input-group-text"><i class="fas fa-check"></i></span>
+                            <input type="password"
+                                   class="form-control"
+                                   id="confirm_password"
+                                   name="confirm_password"
+                                   placeholder="Re-enter new password"
+                                   required 
+                                   minlength="8"
+                                   autocomplete="new-password">
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-primary auth-submit w-100">
+                        Set new password
+                    </button>
+                </form>
             </div>
         </div>
+