104 lines
4.2 KiB
HTML
104 lines
4.2 KiB
HTML
{% extends "base_settings_page.html" %}
|
|
{% block content %}
|
|
<div style="max-width: 700px;">
|
|
|
|
<p>On this page you can configure a new Authenticator app. Please use an authenticator app to scan the QR code.</p>
|
|
|
|
<p>Note: if you have not an authenticator app yet, you might want to use
|
|
<a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" rel="noopener" target="_blank">FreeOTP
|
|
Authenticator</a> for example.</p>
|
|
|
|
<img src="data:image/png;base64,{{ qr_code }}" style="width: 150px; margin: 20px 0px;"/>
|
|
|
|
<p>If you can't scan the QrCode, please use the following parameters instead:</p>
|
|
<ul>
|
|
<li><strong>Account name:</strong> <i>{{ account_name }}</i> <a
|
|
href="javascript:copyToClipboard('{{ account_name }}')">Copy to clipboard</a></li>
|
|
<li><strong>Secret key:</strong> <i>{{ secret_key }}</i> <a
|
|
href="javascript:copyToClipboard('{{ secret_key }}')">Copy
|
|
to clipboard</a></li>
|
|
</ul>
|
|
|
|
<p>Once you have scanned the QrCode, please generate a code and type it below:</p>
|
|
|
|
<form id="validateForm" method="post">
|
|
<input type="hidden" name="secret" id="secretInput" value="{{ secret_key }}"/>
|
|
|
|
<div class="form-group">
|
|
<label for="inputDevName" class="form-label mt-4">Device name</label>
|
|
<input type="text" class="form-control" id="inputDevName"
|
|
placeholder="Device / Authenticator app name"
|
|
value="Authenticator app" minlength="1" required/>
|
|
<small class="form-text text-muted">Please give a name to your device to identity it more easily
|
|
later.</small>
|
|
<div class="invalid-feedback">Please give a name to this authenticator app</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inputFirstCode" class="form-label mt-4">First code</label>
|
|
<input type="text" class="form-control" id="inputFirstCode"
|
|
placeholder="XXXXXX"
|
|
maxlength="6" minlength="6" required/>
|
|
<small class="form-text text-muted">Check that your authenticator app is working correctly by typing a first
|
|
code.</small>
|
|
<div class="invalid-feedback">Please enter a first code (must have 6 digits)</div>
|
|
</div>
|
|
|
|
<input type="submit" value="Register app" class="btn btn-primary">
|
|
</form>
|
|
|
|
<script src="/assets/js/clipboard_utils.js"></script>
|
|
|
|
<script>
|
|
const form = document.getElementById("validateForm");
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const secret = document.getElementById("secretInput").value;
|
|
const factorNameInput = document.getElementById("inputDevName");
|
|
const firstCodeInput = document.getElementById("inputFirstCode");
|
|
|
|
let fail = false;
|
|
factorNameInput.classList.remove("is-invalid");
|
|
if (factorNameInput.value.length === 0) {
|
|
fail = true;
|
|
factorNameInput.classList.add("is-invalid");
|
|
}
|
|
|
|
firstCodeInput.classList.remove("is-invalid");
|
|
if (firstCodeInput.value.length != 6) {
|
|
fail = true;
|
|
firstCodeInput.classList.add("is-invalid");
|
|
}
|
|
|
|
|
|
if (fail)
|
|
return;
|
|
|
|
try {
|
|
const res = await fetch("/settings/api/two_factor/save_totp_factor", {
|
|
method: "post",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
factor_name: factorNameInput.value,
|
|
secret: secret,
|
|
first_code: firstCodeInput.value,
|
|
})
|
|
});
|
|
|
|
let text = await res.text();
|
|
alert(text);
|
|
|
|
if (res.status == 200)
|
|
location.href = "/settings/two_factors";
|
|
} catch(e) {
|
|
console.error(e);
|
|
alert("Failed to register authenticator app!");
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
{% endblock content %}
|