Add 2FA frontend handling

Signed-off-by: DL6ER <dl6er@dl6er.de>

login.php

@@ -37,12 +37,13 @@ require 'scripts/pi-hole/php/header.php';
                         <input type="text" id="username" value="pi.hole" autocomplete="username" hidden>
                         <div class="pwd-field form-group">
                             <!-- hidden username input field to help password managers to autfill the password -->
-                            <input type="password" id="loginpw" name="pw" class="form-control" placeholder="Password" spellcheck="false" autocomplete="current-password" autofocus>
+                            <input type="password" id="loginpw" class="form-control" placeholder="Password" value="" spellcheck="false" autocomplete="current-password" autofocus>
+                            <span class="fa fa-key pwd-field form-control-feedback"></span>
                         </div>
-                        <div class="form-group">
-                            <input type="numeric" id="totp" name="totp" class="form-control hidden" placeholder="2FA token like 01234567" spellcheck="false" autocomplete="current-password" autofocus>
+                        <div class="form-group hidden" id="totp_input">
+                            <input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="" value="" spellcheck="false" autocomplete="current-password" autofocus>
+                            <span class="fa-solid fa-clock-rotate-left pwd-field form-control-feedback"></span>
                         </div>
-                        <span class="fa fa-key pwd-field form-control-feedback"></span>
                     </div>
                     <!--
                     <div class="form-group" title="Pi-hole has to set a cookie for the login session to be successful. The cookie will not contain your password nor is it used anywhere outside of you local Pi-hole.">

scripts/pi-hole/js/login.js

@@ -82,12 +82,27 @@ $("#loginform").submit(function (e) {
   });
 });
 
+// Trigger keyup event when pasting into the TOTP code input field
+$("#totp").on("paste", function (e) {
+  $(e.target).keyup();
+});
+
+$("#totp").on("keyup", function () {
+  var code = $(this).val();
+  if (code.length === 6) {
+    $("#loginform").submit();
+  }
+});
+
 $(function () {
   // Check if we need to login at all
   $.ajax({
     url: "/api/auth",
   }).done(function (data) {
     if (data.session.valid === true) redirect();
-    if (data.session.totp === true) $("#totp").removeClass("hidden");
+    if (data.session.totp === true) $("#totp_input").removeClass("hidden");
   });
+
+  // Clear TOTP field
+  $("#totp").val("");
 });

scripts/pi-hole/js/settings-api.js

@@ -5,9 +5,10 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, setConfigValues: false, apiFailure: false */
+/* global utils:false, setConfigValues: false, apiFailure: false, QRious: false */
 
 var apiSessionsTable = null;
+var TOTPdata = null;
 
 function renderBool(data, type) {
   // Display and search content
@@ -78,7 +79,9 @@ $(function () {
         "</button>";
       $("td:eq(7)", row).html(button);
       if (data.current_session) {
-        $("td:eq(5)", row).html('<strong title="This is the current session">' + data.remote_addr + "</strong>");
+        $("td:eq(5)", row).html(
+          '<strong title="This is the current session">' + data.remote_addr + "</strong>"
+        );
       }
     },
     select: {
@@ -190,6 +193,113 @@ function processWebServerConfig() {
     });
 }
 
+$("#modal-totp").on("shown.bs.modal", function () {
+  $.ajax({
+    url: "/api/auth/totp",
+  })
+    .done(function (data) {
+      TOTPdata = data.totp;
+      $("#totp_secret").text(data.totp.secret);
+      var qrlink =
+        "otpauth://totp/" +
+        data.totp.issuer +
+        ":" +
+        data.totp.account +
+        "?secret=" +
+        data.totp.secret +
+        "&issuer=" +
+        data.totp.issuer +
+        "&algorithm=" +
+        data.totp.algorithm +
+        "&digits=" +
+        data.totp.digits +
+        "&period=" +
+        data.totp.period;
+      /* eslint-disable-next-line no-new */
+      new QRious({
+        element: document.getElementById("qrcode"),
+        value: qrlink,
+        level: "Q",
+        size: 300,
+      });
+    })
+    .fail(function (data) {
+      apiFailure(data);
+    });
+});
+
+// Trigger keyup event when pasting into the TOTP code input field
+$("#totp_code").on("paste", function (e) {
+  $(e.target).keyup();
+});
+
+$("#totp_code").on("keyup", function () {
+  var code = parseInt($(this).val(), 10);
+  if (TOTPdata.codes.includes(code)) {
+    $("#totp_div").removeClass("has-error");
+    $("#totp_div").addClass("has-success");
+    $("#totp_code").prop("disabled", true);
+    $("#totp_submit").prop("disabled", false);
+    $("#totp_submit").removeClass("btn-default");
+    $("#totp_submit").addClass("btn-success");
+  }
+});
+
+function setTOTPSecret(secret) {
+  $.ajax({
+    url: "/api/config",
+    type: "PATCH",
+    data: JSON.stringify({ config: { webserver: { api: { totp_secret: secret } } } }),
+    contentType: "application/json",
+  })
+    .done(function () {
+      $("#button-enable-totp").addClass("hidden");
+      $("#button-disable-totp").removeClass("hidden");
+      $("#totp_code").val("");
+      $("#modal-totp").modal("hide");
+      var verb = secret.length > 0 ? "enabled" : "disabled";
+      alert(
+        "Two-factor authentication has been " +
+          verb +
+          ", you will need to re-login to continue using the web interface."
+      );
+      location.reload();
+    })
+    .fail(function (data) {
+      apiFailure(data);
+    });
+}
+
+$("#totp_submit").on("click", function () {
+  // Enable TOTP
+  setTOTPSecret(TOTPdata.secret);
+});
+
+$("#button-disable-totp").confirm({
+  text: "Are you sure you want to disable 2FA authentication on your Pi-hole?",
+  title: "Confirmation required",
+  confirm: function () {
+    // Disable TOTP
+    setTOTPSecret("");
+  },
+  cancel: function () {
+    // nothing to do
+  },
+  confirmButton: "Yes, disable 2FA",
+  cancelButton: "No, keep 2FA enabled",
+  post: true,
+  confirmButtonClass: "btn-danger",
+  cancelButtonClass: "btn-success",
+  dialogClass: "modal-dialog",
+});
+
 $(document).ready(function () {
   processWebServerConfig();
+  // Check if TOTP is enabled
+  $.ajax({
+    url: "/api/auth",
+  }).done(function (data) {
+    if (data.session.totp === false) $("#button-enable-totp").removeClass("hidden");
+    else $("#button-disable-totp").removeClass("hidden");
+  });
 });

scripts/pi-hole/js/settings.js

@@ -28,26 +28,40 @@ function setConfigValues(topic, key, value) {
 
   // else: we have a setting we can set
   var escapedKey = key.replace(/\./g, "\\.");
-  if (value.type === "enum (string)") {
-    // Remove all options from select
-    $("#" + escapedKey + " option").remove();
-    // Add allowed select items (if available)
-    value.allowed.forEach(function (allowedValue) {
-      var newopt = $("<option></option>")
+  switch (value.type) {
+    case "enum (string)": {
+      // Remove all options from select
+      $("#" + escapedKey + " option").remove();
+      // Add allowed select items (if available)
+      value.allowed.forEach(function (allowedValue) {
+        var newopt = $("<option></option>")
           .attr("value", allowedValue.item)
-          .text(allowedValue.description)
-          $("#" + escapedKey).append(newopt);
-    });
-    // Select the current value
-    $("#" + escapedKey + "-" + value.value).trigger("click");
-  } else if (value.type === "boolean") {
-    // Select checkboxes (if available)
-    $("#" + escapedKey).prop("checked", value.value);
-  } else if (value.type === "string array") {
-    // Set input field values from array (if available)
-    $("#" + escapedKey).val(value.value.join("\n"));
-  } else {
-    // Set input field values (if available)
-    $("#" + escapedKey).val(value.value);
+          .text(allowedValue.description);
+        $("#" + escapedKey).append(newopt);
+      });
+      // Select the current value
+      $("#" + escapedKey + "-" + value.value).trigger("click");
+
+      break;
+    }
+
+    case "boolean": {
+      // Select checkboxes (if available)
+      $("#" + escapedKey).prop("checked", value.value);
+
+      break;
+    }
+
+    case "string array": {
+      // Set input field values from array (if available)
+      $("#" + escapedKey).val(value.value.join("\n"));
+
+      break;
+    }
+
+    default: {
+      // Set input field values (if available)
+      $("#" + escapedKey).val(value.value);
+    }
   }
 }

settings-api.php

@@ -55,7 +55,7 @@ require 'scripts/pi-hole/php/header_authenticated.php';
             </div>
         </div>
     </div>-->
-    <div class="col-md-3">
+    <div class="col-md-6">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title">Advanced Settings</h3>
@@ -95,20 +95,13 @@ require 'scripts/pi-hole/php/header_authenticated.php';
                                 </select>
                             </div>
                         </div>
+                        <button type="button" id="button-enable-totp" class="btn btn-success hidden" data-toggle="modal" data-target="#modal-totp">Enable 2FA</button>
+                        <button type="button" id="button-disable-totp" class="btn btn-danger hidden" data-toggle="modal" data-target="#modal-totp-disable">Disable 2FA</button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <div class="col-md-3">
-        <div class="box box-warning">
-            <div class="box-header with-border">
-                <h3 class="box-title">2FA (TOTP) authentication</h3>
-            </div>
-            <div class="box-body">
-            </div>
-        </div>
-    </div>
     <div class="col-md-12">
         <div class="box box-warning">
             <div class="box-header with-border">
@@ -140,6 +133,44 @@ require 'scripts/pi-hole/php/header_authenticated.php';
     </div>
 </div>
 
+<div class="modal fade" id="modal-totp" style="display: none;">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">×</span></button>
+                <h4 class="modal-title">Enable two-factor authentication</h4>
+            </div>
+            <div class="modal-body">
+                <p>Use a phone app like Google Authenticator, 2FA Authenticator, FreeOTP or BitWarden, etc. to get 2FA codes when prompted during login.</p>
+                <p>1. Scan the QR code below with your app or enter the secret manually.</p>
+                <div class="text-center">
+                    <canvas id="qrcode" class="qrcode" title="QR Code"></canvas>
+                </div>
+                <p class="text-center"><code id="totp_secret"></code></p>
+                <p>2. Enter the 2FA code from your app below to confirm that you have set up 2FA correctly.</p>
+                <div class="row">
+                    <div class="col-md-6 col-md-offset-3">
+                        <div id="totp_div" class="has-feedback has-error">
+                            <div class="pwd-field form-group">
+                                <input type="text" size="6" maxlength="6" class="form-control totp_token" id="totp_code" placeholder=""/>
+                            </div>
+                            <i class="fa-solid fa-clock-rotate-left pwd-field form-control-feedback"></i>
+                        </div>
+                    </div>
+                </div>
+                <p>IMPORTANT: If you lose your 2FA token, you will not be able to login. You will need to disable 2FA on the comand line and re-enable 2FA to generate a new secret.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
+                <button type="button" id="totp_submit" disabled="true" class="btn btn-default">Enable 2FA</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="<?php echo fileversion('scripts/vendor/jquery.confirm.min.js'); ?>"></script>
+<script src="<?php echo fileversion('scripts/vendor/qrious.min.js'); ?>"></script>
 <script src="<?php echo fileversion('scripts/pi-hole/js/settings-api.js'); ?>"></script>
 <script src="<?php echo fileversion('scripts/pi-hole/js/settings.js'); ?>"></script>
 

style/pi-hole.css

@@ -1066,3 +1066,19 @@ table.dataTable tbody > tr > .selected {
   margin-bottom: 0px;
   border-top: 1px solid #ff0000aa;
 }
+
+.qrcode {
+  width: 50%;
+}
+
+.totp_token {
+  font-size: 1.5em;
+  font-weight: bold;
+  text-align: center;
+  font-family: monospace;
+  letter-spacing: .5em;
+}
+
+.totp_token::placeholder {
+  opacity: 0.1;
+}