65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
{% 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 %}
|