nngo/JQC_multi_tenant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

July 4 - Implement TOTP 2FA

Browse Source
This commit is contained in:
nngo
2026-07-04 13:40:03 -04:00
parent 07226b4878
commit d87c889ca2
23 changed files with 1336 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/panel/templates/panel/base.html
+4
View File
@@ -84,6 +84,10 @@
class="{{ 'active' if request.endpoint == 'health.dashboard' else '' }}">
<i class="bi bi-heart-pulse"></i> Health
</a>
<a href="{{ url_for('auth.security') }}"
class="{{ 'active' if request.endpoint == 'auth.security' else '' }}">
<i class="bi bi-shield-lock"></i> Security
</a>
</nav>
<div class="sa-footer">
{% if sa_username %}
control/panel/templates/panel/mfa_challenge.html
+69
View File
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two-Factor Verification — JQC Control</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
body { background: #0f172a; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: #1e293b; border-radius: 14px; padding: 2.5rem 2.25rem;
width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.login-card .logo { font-size: 2rem; color: #3b82f6; }
.login-card h1 { color: #f1f5f9; font-size: 1.3rem; font-weight: 700; margin-top: .5rem; }
.login-card .sub { color: #64748b; font-size: .85rem; margin-bottom: 1.5rem; }
.login-card label { color: #94a3b8; font-size: .85rem; }
.login-card .form-control { background: #0f172a; border-color: #334155; color: #f1f5f9; text-align: center; letter-spacing: .35em; }
.login-card .form-control:focus { background: #0f172a; border-color: #3b82f6;
box-shadow: 0 0 0 .2rem rgba(59,130,246,.25); color: #f1f5f9; }
.form-check-label { color: #94a3b8; font-size: .8rem; }
.btn-panel { background: #3b82f6; border-color: #3b82f6; color: #fff; font-weight: 600; }
.btn-panel:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.error-box { background: #450a0a; border: 1px solid #7f1d1d; color: #fca5a5;
border-radius: 8px; padding: .65rem 1rem; font-size: .85rem; margin-bottom: 1rem; }
.footer-note { color: #334155; font-size: .72rem; text-align: center; margin-top: 1.5rem; }
.footer-note a { color: #475569; }
</style>
</head>
<body>
<div class="login-card">
<div class="logo"><i class="bi bi-shield-lock-fill"></i></div>
<h1>Two-factor verification</h1>
<p class="sub">Enter the 6-digit code from your authenticator app.</p>
{% if error %}
<div class="error-box"><i class="bi bi-exclamation-triangle me-1"></i>{{ error }}</div>
{% endif %}
<form method="POST" action="{{ url_for('auth.mfa_challenge') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<input type="text" name="code" class="form-control form-control-lg"
inputmode="numeric" autocomplete="one-time-code" autofocus
placeholder="123456" required>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" name="recovery" id="useRecovery" value="1">
<label class="form-check-label" for="useRecovery">Use a recovery code instead</label>
</div>
<button type="submit" class="btn btn-panel w-100">
<i class="bi bi-check2-circle me-1"></i> Verify
</button>
</form>
<p class="footer-note"><a href="{{ url_for('auth.login') }}">Back to login</a></p>
</div>
<script>
(function () {
var chk = document.getElementById('useRecovery');
var box = document.querySelector('input[name="code"]');
if (chk && box) chk.addEventListener('change', function () {
box.style.letterSpacing = chk.checked ? '.15em' : '.35em';
box.setAttribute('placeholder', chk.checked ? 'xxxx-xxxx' : '123456');
box.setAttribute('inputmode', chk.checked ? 'text' : 'numeric');
});
})();
</script>
</body>
</html>
control/panel/templates/panel/mfa_recovery.html
+46
View File
@@ -0,0 +1,46 @@
{% extends "panel/base.html" %}
{% block title %}Recovery Codes — JQC Control{% endblock %}
{% block page_title %}Two-Factor Authentication{% endblock %}
{% block content %}
<div class="row">
<div class="col-lg-7">
<div class="alert alert-success">
<i class="bi bi-shield-check"></i> <strong>Two-factor authentication is now enabled.</strong>
</div>
<div class="card shadow-sm">
<div class="card-body">
<h4 class="mb-2"><i class="bi bi-key"></i> Save your recovery codes</h4>
<p class="text-muted">
Each code works <strong>once</strong> if you lose access to your authenticator.
Store them somewhere safe — <strong>they will not be shown again.</strong>
</p>
<div class="bg-light border rounded p-3 mb-3">
<div class="row row-cols-2 g-2 font-monospace text-center" id="codeList">
{% for code in codes %}
<div class="col"><span class="badge bg-white text-dark border fs-6 w-100 py-2">{{ code }}</span></div>
{% endfor %}
</div>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" onclick="copyCodes()">
<i class="bi bi-clipboard"></i> Copy codes
</button>
<a href="{{ url_for('tenants.list_tenants') }}" class="btn btn-primary ms-auto">
<i class="bi bi-check-lg"></i> I've saved them — Done
</a>
</div>
</div>
</div>
</div>
</div>
<script>
function copyCodes() {
var codes = Array.from(document.querySelectorAll('#codeList .badge'))
.map(function (b) { return b.textContent.trim(); }).join('\n');
navigator.clipboard.writeText(codes);
}
</script>
{% endblock %}
control/panel/templates/panel/mfa_setup.html
+45
View File
@@ -0,0 +1,45 @@
{% extends "panel/base.html" %}
{% block title %}Enable Two-Factor — JQC Control{% endblock %}
{% block page_title %}Two-Factor Authentication{% endblock %}
{% block content %}
<div class="row">
<div class="col-lg-7">
<h4 class="mb-3"><i class="bi bi-shield-lock"></i> Enable two-factor authentication</h4>
<div class="card shadow-sm mb-3">
<div class="card-body">
<ol class="mb-3 ps-3">
<li class="mb-1">Install an authenticator app (Google Authenticator, Authy, 1Password…).</li>
<li class="mb-1">Scan the QR code, or enter the setup key manually.</li>
<li>Enter the 6-digit code to confirm and finish.</li>
</ol>
<div class="text-center mb-3">
<div class="d-inline-block p-2 bg-white border rounded" style="width:220px;height:220px;">
{{ qr_svg | safe }}
</div>
</div>
<div class="mb-3">
<label class="form-label small text-muted mb-1">Manual setup key</label>
<input type="text" class="form-control font-monospace" value="{{ secret }}" readonly>
</div>
<form method="POST" action="{{ url_for('auth.mfa_setup') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<label class="form-label fw-semibold">Enter the 6-digit code to confirm</label>
<div class="input-group input-group-lg mb-2">
<input type="text" name="code" class="form-control text-center" inputmode="numeric"
autocomplete="one-time-code" autofocus placeholder="123456" style="letter-spacing:.3em;">
<button type="submit" class="btn btn-primary"><i class="bi bi-check2-circle"></i> Enable</button>
</div>
</form>
</div>
</div>
<a href="{{ url_for('tenants.list_tenants') }}" class="btn btn-outline-secondary">
<i class="bi bi-x-lg"></i> Cancel
</a>
</div>
</div>
{% endblock %}
control/panel/templates/panel/security.html
+48
View File
@@ -0,0 +1,48 @@
{% extends "panel/base.html" %}
{% block title %}Security — JQC Control{% endblock %}
{% block page_title %}Security{% endblock %}
{% block content %}
<div class="row">
<div class="col-lg-7">
<div class="card shadow-sm">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<h6 class="mb-0 fw-semibold"><i class="bi bi-shield-lock me-1"></i>Two-Factor Authentication</h6>
{% if mfa_enabled %}
<span class="badge bg-success">Enabled</span>
{% else %}
<span class="badge bg-secondary">Disabled</span>
{% endif %}
</div>
<div class="card-body">
{% if mfa_enabled %}
<p class="text-muted small mb-2">
Your superadmin account requires a 6-digit code at every sign-in.
Recovery codes remaining: <strong>{{ recovery_remaining }}</strong>.
</p>
<form method="POST" action="{{ url_for('auth.mfa_disable') }}"
onsubmit="return confirm('Disable two-factor on the control panel? This lowers security for ALL tenants.');">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<label class="form-label small">Enter a current code or your password to disable:</label>
<div class="input-group">
<input type="text" name="code" class="form-control" placeholder="6-digit code"
inputmode="numeric" autocomplete="off">
<input type="password" name="password" class="form-control" placeholder="…or password"
autocomplete="off">
<button type="submit" class="btn btn-outline-danger">Disable 2FA</button>
</div>
</form>
{% else %}
<p class="text-muted small mb-3">
Two-factor is strongly recommended — the control panel manages every
tenant. After your password you'll confirm a one-time code from an
authenticator app.
</p>
<a href="{{ url_for('auth.mfa_setup') }}" class="btn btn-primary">
<i class="bi bi-shield-plus me-1"></i>Enable Two-Factor
</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}