52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
{% extends 'default.html' %}
|
|
{% set active_page = "setting" %}
|
|
{% block title %}
|
|
MFA Setup
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block default_content %}
|
|
<div class="bg-white p-6" style="max-width: 60em; margin: auto">
|
|
<h1 class="h2">Multi Factor Authentication</h1>
|
|
<p>Please open a TOTP application (Google Authenticator, Authy, etc)
|
|
on your smartphone and scan the following QR Code:
|
|
</p>
|
|
|
|
<canvas id="qr"></canvas>
|
|
|
|
<script>
|
|
(function () {
|
|
var qr = new QRious({
|
|
element: document.getElementById('qr'),
|
|
value: '{{otp_uri}}'
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<div class="mt-3 mb-2">
|
|
Or you can use the manual entry with the following key:
|
|
</div>
|
|
|
|
<div class="mb-3 p-3" style="background-color: #eee">
|
|
{{ current_user.otp_secret }}
|
|
</div>
|
|
|
|
|
|
<form method="post">
|
|
{{ otp_token_form.csrf_token }}
|
|
|
|
<div class="font-weight-bold mt-5">Token</div>
|
|
<div class="small-text">Please enter the 6-digit number displayed on your phone.</div>
|
|
|
|
{{ otp_token_form.token(class="form-control", placeholder="") }}
|
|
{{ render_field_errors(otp_token_form.token) }}
|
|
<button class="btn btn-lg btn-success mt-2">Validate</button>
|
|
</form>
|
|
|
|
|
|
</div>
|
|
{% endblock %}
|