mirror of
https://github.com/eduardogsilva/wireguard_webadmin.git
synced 2026-03-17 22:36:17 +00:00
refactor templates to extend base layout and improve styling
This commit is contained in:
Eduardo Silva
22
containers/auth-gateway/auth_gateway/templates/base.html
Normal file
22
containers/auth-gateway/auth_gateway/templates/base.html
Normal file
@@ -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>
|
||||
@@ -1,18 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<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>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ title }} — Gatekeeper{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="card-title">{{ title }}</h1>
|
||||
<p class="card-subtitle">{{ message }}</p>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,29 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sign in</title>
|
||||
<link rel="stylesheet" href="{{ external_path }}/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Auth Gateway</p>
|
||||
<h1>Sign in to {{ application_name }}</h1>
|
||||
<p class="muted">Active policy: {{ policy_name }}</p>
|
||||
<div class="stack">
|
||||
{% if "password" in methods %}
|
||||
<a class="button" href="{{ external_path }}/login/password?next={{ next | urlencode }}">Continue with username and password</a>
|
||||
{% 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>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Sign in — Gatekeeper{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="card-title">Sign in</h1>
|
||||
<p class="card-subtitle">Accessing <strong>{{ application_name }}</strong></p>
|
||||
<div class="stack">
|
||||
{% if "password" in methods %}
|
||||
<a class="btn btn-primary" href="{{ external_path }}/login/password?next={{ next | urlencode }}">Continue with username & password</a>
|
||||
{% endif %}
|
||||
{% if "oidc" in methods %}
|
||||
<a class="btn btn-secondary" href="{{ external_path }}/login/oidc/start?next={{ next | urlencode }}">Continue with OIDC</a>
|
||||
{% endif %}
|
||||
{% if "totp" in methods %}
|
||||
<a class="btn btn-secondary" href="{{ external_path }}/login/totp?next={{ next | urlencode }}">Continue with authenticator code</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,33 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Password sign in</title>
|
||||
<link rel="stylesheet" href="{{ external_path }}/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Auth Gateway</p>
|
||||
<h1>Sign in to {{ application_name }}</h1>
|
||||
<p class="muted">Enter your local username and password.</p>
|
||||
{% if error %}
|
||||
<p class="error">{{ error }}</p>
|
||||
{% endif %}
|
||||
<form method="post" action="{{ external_path }}/login/password" class="stack">
|
||||
<input type="hidden" name="next" value="{{ next }}">
|
||||
<label class="field">
|
||||
<span>Username</span>
|
||||
<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>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Sign in — Gatekeeper{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="card-title">Sign in</h1>
|
||||
<p class="card-subtitle">Enter your credentials to access <strong>{{ application_name }}</strong></p>
|
||||
{% if error %}
|
||||
<div class="alert alert-error">{{ error }}</div>
|
||||
{% endif %}
|
||||
<form method="post" action="{{ external_path }}/login/password" class="stack">
|
||||
<input type="hidden" name="next" value="{{ next }}">
|
||||
<label class="field">
|
||||
<span>Username</span>
|
||||
<input type="text" name="username" autocomplete="username" autofocus required>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Password</span>
|
||||
<input type="password" name="password" autocomplete="current-password" required>
|
||||
</label>
|
||||
<button class="btn btn-primary" type="submit">Continue</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,29 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TOTP verification</title>
|
||||
<link rel="stylesheet" href="{{ external_path }}/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Auth Gateway</p>
|
||||
<h1>Verify access to {{ application_name }}</h1>
|
||||
<p class="muted">Enter the current code from your authenticator app.</p>
|
||||
{% if error %}
|
||||
<p class="error">{{ error }}</p>
|
||||
{% endif %}
|
||||
<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>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Verify identity — Gatekeeper{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="card-title">Two-factor verification</h1>
|
||||
<p class="card-subtitle">Enter the current code from your authenticator app to access <strong>{{ application_name }}</strong></p>
|
||||
{% if error %}
|
||||
<div class="alert alert-error">{{ error }}</div>
|
||||
{% endif %}
|
||||
<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" autofocus required>
|
||||
</label>
|
||||
<button class="btn btn-primary" type="submit">Verify</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,64 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Session</title>
|
||||
<link rel="stylesheet" href="{{ external_path }}/static/style.css">
|
||||
<style>
|
||||
.info-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
|
||||
.info-table tr + tr td { border-top: 1px solid var(--line); }
|
||||
.info-table td { padding: 10px 0; font-size: 0.9rem; vertical-align: top; }
|
||||
.info-table td:first-child { color: var(--muted); width: 40%; }
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Auth Gateway</p>
|
||||
<h1>Active session</h1>
|
||||
<table class="info-table">
|
||||
{% if session.username %}
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td>{{ session.username }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if session.email %}
|
||||
<tr>
|
||||
<td>E-mail</td>
|
||||
<td>{{ session.email }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td>Authenticated via</td>
|
||||
<td>
|
||||
{% for factor in session.auth_factors %}
|
||||
<span class="badge">{{ factor }}</span>
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
{% if session.groups %}
|
||||
<tr>
|
||||
<td>Groups</td>
|
||||
<td>
|
||||
{% for group in session.groups %}
|
||||
<span class="badge">{{ group }}</span>
|
||||
{% 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>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}You're signed in — Gatekeeper{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="card-title">You're signed in</h1>
|
||||
<p class="card-subtitle">Active session details</p>
|
||||
<table class="info-table">
|
||||
{% if session.username %}
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td>{{ session.username }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if session.email %}
|
||||
<tr>
|
||||
<td>E-mail</td>
|
||||
<td>{{ session.email }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td>Verified via</td>
|
||||
<td>
|
||||
{% for factor in session.auth_factors %}
|
||||
<span class="badge">{{ factor }}</span>
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
{% if session.groups %}
|
||||
<tr>
|
||||
<td>Groups</td>
|
||||
<td>
|
||||
{% for group in session.groups %}
|
||||
<span class="badge">{{ group }}</span>
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td>Expires</td>
|
||||
<td>{{ session.expires_at.strftime('%Y-%m-%d %H:%M UTC') }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<form method="post" action="{{ external_path }}/logout">
|
||||
<input type="hidden" name="next" value="/">
|
||||
<button class="btn btn-danger" type="submit">Sign out</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user