63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
HTML
{% 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 %}
|