refactor templates to extend base layout and improve styling

containers/auth-gateway/auth_gateway/static/style.css

@@ -1,117 +1,204 @@
-:root {
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    color-scheme: light;
-    --bg: #f2efe7;
-    --bg-accent: #ddd4c4;
-    --card: rgba(255, 252, 246, 0.92);
-    --ink: #1e1b18;
-    --muted: #6a6258;
-    --line: rgba(30, 27, 24, 0.12);
-    --accent: #6b3f24;
-    --accent-strong: #4c2714;
-    --danger: #a0251d;
-    --shadow: 0 30px 80px rgba(62, 40, 25, 0.16);
-}
 
-* {
+:root {
-    box-sizing: border-box;
+    --bg: #f4f4f5;
+    --card: #ffffff;
+    --ink: #18181b;
+    --subtle: #71717a;
+    --line: #e4e4e7;
+    --accent: #2563eb;
+    --accent-hover: #1d4ed8;
+    --danger: #dc2626;
+    --danger-hover: #b91c1c;
+    --radius: 12px;
+    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
 }
 
 body {
-    margin: 0;
     min-height: 100vh;
-    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+    background: var(--bg);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 14px;
     color: var(--ink);
-    background:
-        radial-gradient(circle at top left, rgba(107, 63, 36, 0.14), transparent 32%),
-        radial-gradient(circle at bottom right, rgba(93, 124, 96, 0.14), transparent 28%),
-        linear-gradient(180deg, var(--bg) 0%, var(--bg-accent) 100%);
-}
-
-.shell {
-    min-height: 100vh;
     display: grid;
+    grid-template-rows: 1fr auto;
     place-items: center;
-    padding: 24px;
+    padding: 24px 16px 0;
 }
 
+/* ── Layout ── */
+.shell {
+    width: min(100%, 400px);
+    padding-bottom: 24px;
+}
+
+footer {
+    width: 100%;
+    padding: 16px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--subtle);
+}
+
+footer a {
+    color: var(--subtle);
+    text-decoration: none;
+}
+
+footer a:hover { color: var(--ink); }
+
+/* ── Brand ── */
+.brand {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.brand-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--ink);
+    letter-spacing: -0.01em;
+}
+
+/* ── Card ── */
 .card {
-    width: min(100%, 440px);
-    padding: 32px;
-    border-radius: 24px;
     background: var(--card);
     border: 1px solid var(--line);
+    border-radius: var(--radius);
     box-shadow: var(--shadow);
+    padding: 28px;
 }
 
-.eyebrow {
+.card-title {
-    margin: 0 0 12px;
+    font-size: 18px;
-    text-transform: uppercase;
+    font-weight: 700;
-    letter-spacing: 0.14em;
+    letter-spacing: -0.02em;
-    font-size: 0.72rem;
+    margin-bottom: 4px;
-    color: var(--muted);
 }
 
-h1 {
+.card-subtitle {
-    margin: 0 0 12px;
+    font-size: 13px;
-    font-family: "IBM Plex Serif", Georgia, serif;
+    color: var(--subtle);
-    font-size: clamp(1.9rem, 4vw, 2.3rem);
+    margin-bottom: 20px;
-    line-height: 1.05;
+    line-height: 1.5;
 }
 
-.muted {
+hr {
-    margin: 0 0 20px;
+    border: none;
-    color: var(--muted);
+    border-top: 1px solid var(--line);
+    margin: 20px 0;
 }
 
-.stack {
+/* ── Form ── */
-    display: grid;
+.stack { display: grid; gap: 12px; }
-    gap: 14px;
+
+.field { display: grid; gap: 5px; }
+
+.field span {
+    font-size: 13px;
+    font-weight: 500;
 }
 
-.field {
+input[type="text"],
-    display: grid;
+input[type="password"] {
-    gap: 8px;
-    font-size: 0.95rem;
-}
-
-input {
     width: 100%;
-    padding: 13px 14px;
+    padding: 9px 12px;
-    border-radius: 14px;
     border: 1px solid var(--line);
-    background: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
-    color: var(--ink);
+    background: #fff;
     font: inherit;
+    font-size: 14px;
+    color: var(--ink);
+    outline: none;
+    transition: border-color 120ms, box-shadow 120ms;
 }
 
-.button {
+input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
+}
+
+/* ── Buttons ── */
+.btn {
     display: inline-flex;
-    justify-content: center;
     align-items: center;
-    min-height: 48px;
+    justify-content: center;
-    padding: 12px 16px;
+    width: 100%;
-    border: 0;
+    padding: 9px 16px;
-    border-radius: 14px;
+    border: none;
+    border-radius: 8px;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
     text-decoration: none;
+    transition: background 120ms, box-shadow 120ms;
+}
+
+.btn-primary {
     background: var(--accent);
     color: #fff;
-    font-weight: 600;
-    cursor: pointer;
-    transition: transform 180ms ease, background 180ms ease;
 }
 
-.button:hover {
+.btn-primary:hover { background: var(--accent-hover); }
-    transform: translateY(-1px);
-    background: var(--accent-strong);
-}
 
-.button.secondary {
+.btn-secondary {
-    background: rgba(30, 27, 24, 0.08);
+    background: transparent;
     color: var(--ink);
+    border: 1px solid var(--line);
 }
 
-.error {
+.btn-secondary:hover { background: var(--bg); }
-    margin: 0 0 16px;
+
-    color: var(--danger);
+.btn-danger {
-    font-weight: 600;
+    background: var(--danger);
+    color: #fff;
+}
+
+.btn-danger:hover { background: var(--danger-hover); }
+
+/* ── Alert ── */
+.alert {
+    padding: 9px 12px;
+    border-radius: 8px;
+    font-size: 13px;
+    line-height: 1.4;
+    margin-bottom: 16px;
+}
+
+.alert-error {
+    background: #fef2f2;
+    color: var(--danger);
+    border: 1px solid #fecaca;
+}
+
+/* ── Info table ── */
+.info-table { width: 100%; border-collapse: collapse; }
+
+.info-table tr + tr td { border-top: 1px solid var(--line); }
+
+.info-table td {
+    padding: 9px 0;
+    font-size: 13px;
+    vertical-align: top;
+    line-height: 1.5;
+}
+
+.info-table td:first-child {
+    color: var(--subtle);
+    width: 36%;
+    padding-right: 12px;
+}
+
+/* ── Badge ── */
+.badge {
+    display: inline-block;
+    padding: 1px 8px;
+    border-radius: 99px;
+    font-size: 12px;
+    font-weight: 500;
+    background: #eff6ff;
+    color: var(--accent);
+    border: 1px solid #dbeafe;
+    margin: 2px 2px 2px 0;
 }

containers/auth-gateway/auth_gateway/templates/base.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Gatekeeper{% endblock %}</title>
+    <link rel="stylesheet" href="{{ external_path }}/static/style.css">
+</head>
+<body>
+    <div class="shell">
+        <div class="brand">
+            <span class="brand-name">🔐 Gatekeeper</span>
+        </div>
+        <section class="card">
+            {% block content %}{% endblock %}
+        </section>
+    </div>
+    <footer>
+        <a href="https://github.com/eduardogsilva/wireguard_webadmin" target="_blank" rel="noopener noreferrer">WireGuard WebAdmin</a>
+    </footer>
+</body>
+</html>

containers/auth-gateway/auth_gateway/templates/error.html

@@ -1,18 +1,6 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html lang="en">
+{% block title %}{{ title }} — Gatekeeper{% endblock %}
-<head>
+{% block content %}
-    <meta charset="UTF-8">
+    <h1 class="card-title">{{ title }}</h1>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <p class="card-subtitle">{{ message }}</p>
-    <title>{{ title }}</title>
+{% endblock %}
-    <link rel="stylesheet" href="{{ external_path }}/static/style.css">
-</head>
-<body>
-    <main class="shell">
-        <section class="card">
-            <p class="eyebrow">Auth Gateway</p>
-            <h1>{{ title }}</h1>
-            <p class="muted">{{ message }}</p>
-        </section>
-    </main>
-</body>
-</html>

containers/auth-gateway/auth_gateway/templates/login.html

@@ -1,29 +1,17 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html lang="en">
+{% block title %}Sign in — Gatekeeper{% endblock %}
-<head>
+{% block content %}
-    <meta charset="UTF-8">
+    <h1 class="card-title">Sign in</h1>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <p class="card-subtitle">Accessing <strong>{{ application_name }}</strong></p>
-    <title>Sign in</title>
+    <div class="stack">
-    <link rel="stylesheet" href="{{ external_path }}/static/style.css">
+        {% if "password" in methods %}
-</head>
+        <a class="btn btn-primary" href="{{ external_path }}/login/password?next={{ next | urlencode }}">Continue with username &amp; password</a>
-<body>
+        {% endif %}
-    <main class="shell">
+        {% if "oidc" in methods %}
-        <section class="card">
+        <a class="btn btn-secondary" href="{{ external_path }}/login/oidc/start?next={{ next | urlencode }}">Continue with OIDC</a>
-            <p class="eyebrow">Auth Gateway</p>
+        {% endif %}
-            <h1>Sign in to {{ application_name }}</h1>
+        {% if "totp" in methods %}
-            <p class="muted">Active policy: {{ policy_name }}</p>
+        <a class="btn btn-secondary" href="{{ external_path }}/login/totp?next={{ next | urlencode }}">Continue with authenticator code</a>
-            <div class="stack">
+        {% endif %}
-                {% if "password" in methods %}
+    </div>
-                <a class="button" href="{{ external_path }}/login/password?next={{ next | urlencode }}">Continue with username and password</a>
+{% endblock %}
-                {% endif %}
-                {% if "oidc" in methods %}
-                <a class="button secondary" href="{{ external_path }}/login/oidc/start?next={{ next | urlencode }}">Continue with OIDC</a>
-                {% endif %}
-                {% if "totp" in methods %}
-                <a class="button secondary" href="{{ external_path }}/login/totp?next={{ next | urlencode }}">Continue with TOTP</a>
-                {% endif %}
-            </div>
-        </section>
-    </main>
-</body>
-</html>

containers/auth-gateway/auth_gateway/templates/login_password.html

@@ -1,33 +1,21 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html lang="en">
+{% block title %}Sign in — Gatekeeper{% endblock %}
-<head>
+{% block content %}
-    <meta charset="UTF-8">
+    <h1 class="card-title">Sign in</h1>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <p class="card-subtitle">Enter your credentials to access <strong>{{ application_name }}</strong></p>
-    <title>Password sign in</title>
+    {% if error %}
-    <link rel="stylesheet" href="{{ external_path }}/static/style.css">
+    <div class="alert alert-error">{{ error }}</div>
-</head>
+    {% endif %}
-<body>
+    <form method="post" action="{{ external_path }}/login/password" class="stack">
-    <main class="shell">
+        <input type="hidden" name="next" value="{{ next }}">
-        <section class="card">
+        <label class="field">
-            <p class="eyebrow">Auth Gateway</p>
+            <span>Username</span>
-            <h1>Sign in to {{ application_name }}</h1>
+            <input type="text" name="username" autocomplete="username" autofocus required>
-            <p class="muted">Enter your local username and password.</p>
+        </label>
-            {% if error %}
+        <label class="field">
-            <p class="error">{{ error }}</p>
+            <span>Password</span>
-            {% endif %}
+            <input type="password" name="password" autocomplete="current-password" required>
-            <form method="post" action="{{ external_path }}/login/password" class="stack">
+        </label>
-                <input type="hidden" name="next" value="{{ next }}">
+        <button class="btn btn-primary" type="submit">Continue</button>
-                <label class="field">
+    </form>
-                    <span>Username</span>
+{% endblock %}
-                    <input type="text" name="username" autocomplete="username" required>
-                </label>
-                <label class="field">
-                    <span>Password</span>
-                    <input type="password" name="password" autocomplete="current-password" required>
-                </label>
-                <button class="button" type="submit">Continue</button>
-            </form>
-        </section>
-    </main>
-</body>
-</html>

containers/auth-gateway/auth_gateway/templates/login_totp.html

@@ -1,29 +1,17 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html lang="en">
+{% block title %}Verify identity — Gatekeeper{% endblock %}
-<head>
+{% block content %}
-    <meta charset="UTF-8">
+    <h1 class="card-title">Two-factor verification</h1>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <p class="card-subtitle">Enter the current code from your authenticator app to access <strong>{{ application_name }}</strong></p>
-    <title>TOTP verification</title>
+    {% if error %}
-    <link rel="stylesheet" href="{{ external_path }}/static/style.css">
+    <div class="alert alert-error">{{ error }}</div>
-</head>
+    {% endif %}
-<body>
+    <form method="post" action="{{ external_path }}/login/totp" class="stack">
-    <main class="shell">
+        <input type="hidden" name="next" value="{{ next }}">
-        <section class="card">
+        <label class="field">
-            <p class="eyebrow">Auth Gateway</p>
+            <span>Verification code</span>
-            <h1>Verify access to {{ application_name }}</h1>
+            <input type="text" name="token" inputmode="numeric" autocomplete="one-time-code" autofocus required>
-            <p class="muted">Enter the current code from your authenticator app.</p>
+        </label>
-            {% if error %}
+        <button class="btn btn-primary" type="submit">Verify</button>
-            <p class="error">{{ error }}</p>
+    </form>
-            {% endif %}
+{% endblock %}
-            <form method="post" action="{{ external_path }}/login/totp" class="stack">
-                <input type="hidden" name="next" value="{{ next }}">
-                <label class="field">
-                    <span>Verification code</span>
-                    <input type="text" name="token" inputmode="numeric" autocomplete="one-time-code" required>
-                </label>
-                <button class="button" type="submit">Verify</button>
-            </form>
-        </section>
-    </main>
-</body>
-</html>

containers/auth-gateway/auth_gateway/templates/session.html

@@ -1,64 +1,47 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html lang="en">
+{% block title %}You're signed in — Gatekeeper{% endblock %}
-<head>
+{% block content %}
-    <meta charset="UTF-8">
+    <h1 class="card-title">You're signed in</h1>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <p class="card-subtitle">Active session details</p>
-    <title>Session</title>
+    <table class="info-table">
-    <link rel="stylesheet" href="{{ external_path }}/static/style.css">
+        {% if session.username %}
-    <style>
+        <tr>
-        .info-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
+            <td>Username</td>
-        .info-table tr + tr td { border-top: 1px solid var(--line); }
+            <td>{{ session.username }}</td>
-        .info-table td { padding: 10px 0; font-size: 0.9rem; vertical-align: top; }
+        </tr>
-        .info-table td:first-child { color: var(--muted); width: 40%; }
+        {% endif %}
-        .badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; background: rgba(107,63,36,0.12); color: var(--accent-strong); margin: 2px 2px 2px 0; }
+        {% if session.email %}
-    </style>
+        <tr>
-</head>
+            <td>E-mail</td>
-<body>
+            <td>{{ session.email }}</td>
-    <main class="shell">
+        </tr>
-        <section class="card">
+        {% endif %}
-            <p class="eyebrow">Auth Gateway</p>
+        <tr>
-            <h1>Active session</h1>
+            <td>Verified via</td>
-            <table class="info-table">
+            <td>
-                {% if session.username %}
+                {% for factor in session.auth_factors %}
-                <tr>
+                <span class="badge">{{ factor }}</span>
-                    <td>Username</td>
+                {% endfor %}
-                    <td>{{ session.username }}</td>
+            </td>
-                </tr>
+        </tr>
-                {% endif %}
+        {% if session.groups %}
-                {% if session.email %}
+        <tr>
-                <tr>
+            <td>Groups</td>
-                    <td>E-mail</td>
+            <td>
-                    <td>{{ session.email }}</td>
+                {% for group in session.groups %}
-                </tr>
+                <span class="badge">{{ group }}</span>
-                {% endif %}
+                {% endfor %}
-                <tr>
+            </td>
-                    <td>Authenticated via</td>
+        </tr>
-                    <td>
+        {% endif %}
-                        {% for factor in session.auth_factors %}
+        <tr>
-                        <span class="badge">{{ factor }}</span>
+            <td>Expires</td>
-                        {% endfor %}
+            <td>{{ session.expires_at.strftime('%Y-%m-%d %H:%M UTC') }}</td>
-                    </td>
+        </tr>
-                </tr>
+    </table>
-                {% if session.groups %}
+    <hr>
-                <tr>
+    <form method="post" action="{{ external_path }}/logout">
-                    <td>Groups</td>
+        <input type="hidden" name="next" value="/">
-                    <td>
+        <button class="btn btn-danger" type="submit">Sign out</button>
-                        {% for group in session.groups %}
+    </form>
-                        <span class="badge">{{ group }}</span>
+{% endblock %}
-                        {% endfor %}
-                    </td>
-                </tr>
-                {% endif %}
-                <tr>
-                    <td>Expires</td>
-                    <td>{{ session.expires_at.strftime('%Y-%m-%d %H:%M UTC') }}</td>
-                </tr>
-            </table>
-            <form method="post" action="{{ external_path }}/logout">
-                <input type="hidden" name="next" value="/">
-                <button class="button" type="submit" style="width:100%">Sign out</button>
-            </form>
-        </section>
-    </main>
-</body>
-</html>