{% 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" maxlength="{{ max_name_len }}" required/> <small class="form-text text-muted">Please give a name to your device to identify 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 %}