From 67cc2a67e8df3c80fbc980d28ceb502142a545fc Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Wed, 19 Nov 2025 19:54:16 +0200
Subject: [PATCH] Redesigns login page

---
 app/templates/form-login.php    | 52 ++++++++++--------
 public_html/static/css/main.css | 94 +++++++++++++++++++++++++++++++++
 2 files changed, 125 insertions(+), 21 deletions(-)

diff --git a/app/templates/form-login.php b/app/templates/form-login.php
index 968c51e..5b0399c 100644
--- a/app/templates/form-login.php
+++ b/app/templates/form-login.php
@@ -1,34 +1,44 @@
         <!-- login form -->
-        <div class="card text-center w-50 mx-auto">
-            <h2 class="card-header">Login</h2>
-            <div class="card-body">
-                <p class="card-text"><strong>Welcome to <?= htmlspecialchars($config['site_name']); ?>!</strong><br />Please enter login credentials:</p>
-                <form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=login">
+        <div class="auth-card mx-auto">
+            <div class="auth-card-body">
+                <div class="auth-header">
+                    <p class="auth-eyebrow">Welcome back</p>
+                    <h2 class="auth-title">Sign in to <?= htmlspecialchars($config['site_name']); ?></h2>
+                    <p class="auth-subtitle">Enter your credentials to continue</p>
+                </div>
+                <form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=login" class="auth-form" novalidate>
 <?php include CSRF_TOKEN_INCLUDE; ?>
-                    <div class="form-group mb-3">
-                        <input type="text" class="form-control w-50 mx-auto" name="username" placeholder="Username" 
-                            pattern="[A-Za-z0-9_\-]{3,20}" title="3-20 characters, letters, numbers, - and _"
-                            required />
+                    <div class="mb-3">
+                        <label for="username" class="form-label">Username</label>
+                        <div class="input-group auth-input-group">
+                            <span class="input-group-text"><i class="fas fa-user"></i></span>
+                            <input type="text" id="username" class="form-control" name="username" placeholder="Username"
+                                pattern="[A-Za-z0-9_\-]{3,20}" title="3-20 characters, letters, numbers, - and _"
+                                value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"
+                                required />
+                        </div>
                     </div>
-                    <div class="form-group mb-3">
-                        <input type="password" class="form-control w-50 mx-auto" name="password" placeholder="Password" 
-                            pattern=".{8,}" title="Eight or more characters"
-                            required />
+                    <div class="mb-3">
+                        <label for="password" class="form-label">Password</label>
+                        <div class="input-group auth-input-group">
+                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
+                            <input type="password" id="password" class="form-control" name="password" placeholder="Password"
+                                pattern=".{8,}" title="Eight or more characters"
+                                required />
+                        </div>
                     </div>
-                    <div class="form-group mb-3">
-                        <label for="remember_me">
-                            <input type="checkbox" id="remember_me" name="remember_me" />
-                            remember me
+                    <div class="d-flex justify-content-between align-items-center mb-4 auth-remember">
+                        <label class="form-check-label" for="remember_me">
+                            <input class="form-check-input" type="checkbox" id="remember_me" name="remember_me" />
+                            Remember me
                         </label>
+                        <a class="auth-link" href="?page=login&action=forgot">Forgot password?</a>
                     </div>
 <?php if (isset($_GET['redirect'])): ?>
                     <input type="hidden" name="redirect" value="<?php echo htmlspecialchars($_GET['redirect']); ?>">
 <?php endif; ?>
-                    <input type="submit" class="btn btn-primary" value="Login" />
+                    <button type="submit" class="btn btn-primary auth-submit w-100">Login</button>
                 </form>
-                <div class="mt-3">
-                    <a href="?page=login&action=forgot">forgot password?</a>
-                </div>
             </div>
         </div>
         <!-- /login form -->
diff --git a/public_html/static/css/main.css b/public_html/static/css/main.css
index 33846dd..6ef7d97 100644
--- a/public_html/static/css/main.css
+++ b/public_html/static/css/main.css
@@ -264,6 +264,100 @@ body {
     gap: 1rem;
 }
 
+/* Auth forms */
+.auth-card {
+    max-width: 420px;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    background: rgba(255, 255, 255, 0.97);
+    border-radius: 1.25rem;
+    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);
+    border: none;
+}
+
+.auth-card-body {
+    padding: 2.5rem 2.75rem 2.25rem;
+}
+
+.auth-header {
+    text-align: left;
+    margin-bottom: 2rem;
+}
+
+.auth-eyebrow {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #94a3b8;
+    margin-bottom: 0.4rem;
+}
+
+.auth-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #0f172a;
+    margin-bottom: 0.4rem;
+}
+
+.auth-subtitle {
+    margin: 0;
+    color: #64748b;
+    font-size: 0.95rem;
+}
+
+.auth-input-group .input-group-text {
+    background: transparent;
+    border-right: none;
+    color: #94a3b8;
+}
+
+.auth-input-group .form-control {
+    border-left: none;
+    border-radius: 0 0.65rem 0.65rem 0;
+}
+
+.auth-input-group .input-group-text,
+.auth-input-group .form-control {
+    border-color: rgba(148, 163, 184, 0.8);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.auth-input-group .form-control:focus {
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
+}
+
+.auth-remember .form-check-input {
+    margin-right: 0.35rem;
+}
+
+.auth-link {
+    font-size: 0.85rem;
+    color: #3b82f6;
+    text-decoration: none;
+}
+
+.auth-link:hover {
+    text-decoration: underline;
+}
+
+.auth-submit {
+    padding: 0.85rem 1rem;
+    border-radius: 0.85rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.35);
+}
+
+@media (max-width: 576px) {
+    .auth-card-body {
+        padding: 2rem 1.75rem;
+    }
+
+    .auth-title {
+        font-size: 1.35rem;
+    }
+}
+
 .modern-header-btn {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);