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
app/templates/auth/mfa_challenge.html
+64
View File
@@ -0,0 +1,64 @@
{% extends "base.html" %}
{% block title %}Two-Factor Verification{% endblock %}
{% block content %}
<div class="row justify-content-center mt-4">
<div class="col-md-5 col-lg-4">
<div class="card shadow-sm">
<div class="card-body p-4">
<div class="text-center mb-3">
<i class="bi bi-shield-lock fs-1 text-primary"></i>
<h4 class="mt-2 mb-1">Two-factor verification</h4>
<p class="text-muted small mb-0">
Enter the 6-digit code from your authenticator app.
</p>
</div>
<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 text-center"
inputmode="numeric" autocomplete="one-time-code" autofocus
placeholder="123456" style="letter-spacing:.4em;">
</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 small" for="useRecovery">
I'll use a recovery code instead
</label>
</div>
<button type="submit" class="btn btn-primary w-100">
<i class="bi bi-check2-circle"></i> Verify
</button>
</form>
<div class="text-center mt-3">
<a href="{{ url_for('auth.login') }}" class="small text-muted">Back to login</a>
</div>
</div>
</div>
</div>
</div>
<script>
// When "use recovery code" is toggled, relax the numeric hints for the code box.
(function () {
var chk = document.getElementById('useRecovery');
var box = document.querySelector('input[name="code"]');
if (!chk || !box) return;
chk.addEventListener('change', function () {
if (chk.checked) {
box.setAttribute('inputmode', 'text');
box.setAttribute('placeholder', 'xxxx-xxxx');
box.style.letterSpacing = '.15em';
} else {
box.setAttribute('inputmode', 'numeric');
box.setAttribute('placeholder', '123456');
box.style.letterSpacing = '.4em';
}
});
})();
</script>
{% endblock %}
app/templates/auth/mfa_recovery.html
+47
View File
@@ -0,0 +1,47 @@
{% extends "base.html" %}
{% block title %}Recovery Codes{% endblock %}
{% block content %}
<div class="row justify-content-center mt-3">
<div class="col-md-8 col-lg-6">
<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
app. 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('auth.profile') }}" 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 %}
app/templates/auth/mfa_setup.html
+62
View File
@@ -0,0 +1,62 @@
{% extends "base.html" %}
{% block title %}Enable Two-Factor{% endblock %}
{% block content %}
<div class="row justify-content-center mt-3">
<div class="col-md-8 col-lg-6">
<h3 class="mb-3"><i class="bi bi-shield-lock"></i> Enable two-factor authentication</h3>
<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 below, or enter the setup key manually.</li>
<li>Enter the 6-digit code the app shows 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>
<div class="input-group">
<input type="text" class="form-control font-monospace" id="secretKey"
value="{{ secret }}" readonly>
<button class="btn btn-outline-secondary" type="button" onclick="copySecret()">
<i class="bi bi-clipboard"></i>
</button>
</div>
</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-3">
<input type="text" name="code" class="form-control text-center"
inputmode="numeric" autocomplete="one-time-code" autofocus
placeholder="123456" style="letter-spacing:.4em;">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check2-circle"></i> Enable
</button>
</div>
</form>
</div>
</div>
<a href="{{ url_for('auth.profile') }}" class="btn btn-outline-secondary">
<i class="bi bi-x-lg"></i> Cancel
</a>
</div>
</div>
<script>
function copySecret() {
var el = document.getElementById('secretKey');
el.select();
el.setSelectionRange(0, 99999);
navigator.clipboard.writeText(el.value);
}
</script>
{% endblock %}
app/templates/auth/profile.html
+42
View File
@@ -157,6 +157,48 @@
</div>
</div>
{% if current_user.role in ['admin', 'director'] %}
<!-- Two-factor authentication (phase35) -->
<div class="card shadow-sm mb-4">
<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 current_user.mfa_enabled %}
<span class="badge bg-success">Enabled</span>
{% else %}
<span class="badge bg-secondary">Disabled</span>
{% endif %}
</div>
<div class="card-body">
{% if current_user.mfa_enabled %}
<p class="text-muted small mb-3">
Your account is protected with an authenticator app. You'll be asked
for a 6-digit code each time you sign in.
</p>
<form method="POST" action="{{ url_for('auth.mfa_disable') }}"
onsubmit="return confirm('Disable two-factor authentication? Your account will be less secure.');">
<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">
Add a second layer of security. After entering 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>
{% endif %}
<!-- Recent Inspections -->
<div class="card shadow-sm">
<div class="card-header bg-light d-flex justify-content-between align-items-center">