Can register Authenticator app

templates/settings/add_2fa_totp_page.html

@@ -21,23 +21,83 @@
 
     <p>Once you have scanned the QrCode, please generate a code and type it below:</p>
 
-    <div class="form-group">
-        <label for="inputDevName" class="form-label mt-4">Device name</label>
-        <input type="text" class="form-control" id="inputDevName" aria-describedby="emailHelp" placeholder="Enter email"
-               value="Authenticator app">
-        <small class="form-text text-muted">Please give a name to your device to identity it more easily later.</small>
-    </div>
+    <form id="validateForm" method="post">
+        <input type="hidden" name="secret" id="secretInput" value="{{ secret_key }}"/>
 
-    <div class="form-group">
-        <label for="inputFirstCode" class="form-label mt-4">First code</label>
-        <input type="text" class="form-control" id="inputFirstCode" aria-describedby="emailHelp" placeholder="XXXXXX"
-               maxlength="6"/>
-        <small class="form-text text-muted">Check that your authenticator app is working correctly by typing a first
-            code.</small>
-    </div>
+        <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_factors/save_totp_key", {
+                    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 %}