From 685b4eb9718695c3c7a632677f7c727ba9a6a0db Mon Sep 17 00:00:00 2001 From: Eduardo Silva Date: Mon, 16 Mar 2026 11:58:48 -0300 Subject: [PATCH] refactor templates to extend base layout and improve styling --- .../auth_gateway/static/style.css | 239 ++++++++++++------ .../auth_gateway/templates/base.html | 22 ++ .../auth_gateway/templates/error.html | 24 +- .../auth_gateway/templates/login.html | 46 ++-- .../templates/login_password.html | 54 ++-- .../auth_gateway/templates/login_totp.html | 46 ++-- .../auth_gateway/templates/session.html | 111 ++++---- 7 files changed, 293 insertions(+), 249 deletions(-) create mode 100644 containers/auth-gateway/auth_gateway/templates/base.html diff --git a/containers/auth-gateway/auth_gateway/static/style.css b/containers/auth-gateway/auth_gateway/static/style.css index e9394e8..8f141ec 100644 --- a/containers/auth-gateway/auth_gateway/static/style.css +++ b/containers/auth-gateway/auth_gateway/static/style.css @@ -1,117 +1,204 @@ -:root { - 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); -} +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -* { - box-sizing: border-box; +:root { + --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 { - margin: 0 0 12px; - text-transform: uppercase; - letter-spacing: 0.14em; - font-size: 0.72rem; - color: var(--muted); +.card-title { + font-size: 18px; + font-weight: 700; + letter-spacing: -0.02em; + margin-bottom: 4px; } -h1 { - margin: 0 0 12px; - font-family: "IBM Plex Serif", Georgia, serif; - font-size: clamp(1.9rem, 4vw, 2.3rem); - line-height: 1.05; +.card-subtitle { + font-size: 13px; + color: var(--subtle); + margin-bottom: 20px; + line-height: 1.5; } -.muted { - margin: 0 0 20px; - color: var(--muted); +hr { + border: none; + border-top: 1px solid var(--line); + margin: 20px 0; } -.stack { - display: grid; - gap: 14px; +/* ── Form ── */ +.stack { display: grid; gap: 12px; } + +.field { display: grid; gap: 5px; } + +.field span { + font-size: 13px; + font-weight: 500; } -.field { - display: grid; - gap: 8px; - font-size: 0.95rem; -} - -input { +input[type="text"], +input[type="password"] { width: 100%; - padding: 13px 14px; - border-radius: 14px; + padding: 9px 12px; border: 1px solid var(--line); - background: rgba(255, 255, 255, 0.9); - color: var(--ink); + border-radius: 8px; + 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; - padding: 12px 16px; - border: 0; - border-radius: 14px; + justify-content: center; + width: 100%; + padding: 9px 16px; + 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 { - transform: translateY(-1px); - background: var(--accent-strong); -} +.btn-primary:hover { background: var(--accent-hover); } -.button.secondary { - background: rgba(30, 27, 24, 0.08); +.btn-secondary { + background: transparent; color: var(--ink); + border: 1px solid var(--line); } -.error { - margin: 0 0 16px; - color: var(--danger); - font-weight: 600; +.btn-secondary:hover { background: var(--bg); } + +.btn-danger { + 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; } diff --git a/containers/auth-gateway/auth_gateway/templates/base.html b/containers/auth-gateway/auth_gateway/templates/base.html new file mode 100644 index 0000000..793bf32 --- /dev/null +++ b/containers/auth-gateway/auth_gateway/templates/base.html @@ -0,0 +1,22 @@ + + + + + + {% block title %}Gatekeeper{% endblock %} + + + +
+
+ 🔐 Gatekeeper +
+
+ {% block content %}{% endblock %} +
+
+ + + diff --git a/containers/auth-gateway/auth_gateway/templates/error.html b/containers/auth-gateway/auth_gateway/templates/error.html index c8c538a..d8b6fc4 100644 --- a/containers/auth-gateway/auth_gateway/templates/error.html +++ b/containers/auth-gateway/auth_gateway/templates/error.html @@ -1,18 +1,6 @@ - - - - - - {{ title }} - - - -
-
-

Auth Gateway

-

{{ title }}

-

{{ message }}

-
-
- - +{% extends "base.html" %} +{% block title %}{{ title }} — Gatekeeper{% endblock %} +{% block content %} +

{{ title }}

+

{{ message }}

+{% endblock %} diff --git a/containers/auth-gateway/auth_gateway/templates/login.html b/containers/auth-gateway/auth_gateway/templates/login.html index 29d193b..fd2c424 100644 --- a/containers/auth-gateway/auth_gateway/templates/login.html +++ b/containers/auth-gateway/auth_gateway/templates/login.html @@ -1,29 +1,17 @@ - - - - - - Sign in - - - -
-
-

Auth Gateway

-

Sign in to {{ application_name }}

-

Active policy: {{ policy_name }}

-
- {% if "password" in methods %} - Continue with username and password - {% endif %} - {% if "oidc" in methods %} - Continue with OIDC - {% endif %} - {% if "totp" in methods %} - Continue with TOTP - {% endif %} -
-
-
- - +{% extends "base.html" %} +{% block title %}Sign in — Gatekeeper{% endblock %} +{% block content %} +

Sign in

+

Accessing {{ application_name }}

+
+ {% if "password" in methods %} + Continue with username & password + {% endif %} + {% if "oidc" in methods %} + Continue with OIDC + {% endif %} + {% if "totp" in methods %} + Continue with authenticator code + {% endif %} +
+{% endblock %} diff --git a/containers/auth-gateway/auth_gateway/templates/login_password.html b/containers/auth-gateway/auth_gateway/templates/login_password.html index f4cba7a..21873f9 100644 --- a/containers/auth-gateway/auth_gateway/templates/login_password.html +++ b/containers/auth-gateway/auth_gateway/templates/login_password.html @@ -1,33 +1,21 @@ - - - - - - Password sign in - - - -
-
-

Auth Gateway

-

Sign in to {{ application_name }}

-

Enter your local username and password.

- {% if error %} -

{{ error }}

- {% endif %} -
- - - - -
-
-
- - +{% extends "base.html" %} +{% block title %}Sign in — Gatekeeper{% endblock %} +{% block content %} +

Sign in

+

Enter your credentials to access {{ application_name }}

+ {% if error %} +
{{ error }}
+ {% endif %} +
+ + + + +
+{% endblock %} diff --git a/containers/auth-gateway/auth_gateway/templates/login_totp.html b/containers/auth-gateway/auth_gateway/templates/login_totp.html index a651761..c4687a2 100644 --- a/containers/auth-gateway/auth_gateway/templates/login_totp.html +++ b/containers/auth-gateway/auth_gateway/templates/login_totp.html @@ -1,29 +1,17 @@ - - - - - - TOTP verification - - - -
-
-

Auth Gateway

-

Verify access to {{ application_name }}

-

Enter the current code from your authenticator app.

- {% if error %} -

{{ error }}

- {% endif %} -
- - - -
-
-
- - +{% extends "base.html" %} +{% block title %}Verify identity — Gatekeeper{% endblock %} +{% block content %} +

Two-factor verification

+

Enter the current code from your authenticator app to access {{ application_name }}

+ {% if error %} +
{{ error }}
+ {% endif %} +
+ + + +
+{% endblock %} diff --git a/containers/auth-gateway/auth_gateway/templates/session.html b/containers/auth-gateway/auth_gateway/templates/session.html index 52097dc..52c8588 100644 --- a/containers/auth-gateway/auth_gateway/templates/session.html +++ b/containers/auth-gateway/auth_gateway/templates/session.html @@ -1,64 +1,47 @@ - - - - - - Session - - - - -
-
-

Auth Gateway

-

Active session

- - {% if session.username %} - - - - - {% endif %} - {% if session.email %} - - - - - {% endif %} - - - - - {% if session.groups %} - - - - - {% endif %} - - - - -
Username{{ session.username }}
E-mail{{ session.email }}
Authenticated via - {% for factor in session.auth_factors %} - {{ factor }} - {% endfor %} -
Groups - {% for group in session.groups %} - {{ group }} - {% endfor %} -
Expires{{ session.expires_at.strftime('%Y-%m-%d %H:%M UTC') }}
-
- - -
-
-
- - +{% extends "base.html" %} +{% block title %}You're signed in — Gatekeeper{% endblock %} +{% block content %} +

You're signed in

+

Active session details

+ + {% if session.username %} + + + + + {% endif %} + {% if session.email %} + + + + + {% endif %} + + + + + {% if session.groups %} + + + + + {% endif %} + + + + +
Username{{ session.username }}
E-mail{{ session.email }}
Verified via + {% for factor in session.auth_factors %} + {{ factor }} + {% endfor %} +
Groups + {% for group in session.groups %} + {{ group }} + {% endfor %} +
Expires{{ session.expires_at.strftime('%Y-%m-%d %H:%M UTC') }}
+
+
+ + +
+{% endblock %}