From 2f6a50c6f6cf38c0a541528a9807eb24d6613e5a Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 9 Mar 2023 20:30:06 +0100
Subject: [PATCH] Add 2FA loading animation

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/settings-api.js | 2 ++
 settings-api.php                   | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/settings-api.js b/scripts/pi-hole/js/settings-api.js
index 285fbd5a..df2253a1 100644
--- a/scripts/pi-hole/js/settings-api.js
+++ b/scripts/pi-hole/js/settings-api.js
@@ -269,6 +269,8 @@ $("#modal-totp").on("shown.bs.modal", function () {
         level: "Q",
         size: 300,
       });
+      $("#qrcode-spinner").hide();
+      $("#qrcode").show();
     })
     .fail(function (data) {
       apiFailure(data);
diff --git a/settings-api.php b/settings-api.php
index 55dde6c8..c9d446bc 100644
--- a/settings-api.php
+++ b/settings-api.php
@@ -145,7 +145,10 @@ require 'scripts/pi-hole/php/header_authenticated.php';
                 <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>
+                    <i id="qrcode-spinner" class="fas fa-spinner fa-pulse fa-5x"></i>
+                </div>
+                <div class="text-center">
+                    <canvas id="qrcode" class="qrcode" title="QR Code" hidden="true"></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>