add TOTP secret generation button and update help text for TOTP authentication

gatekeeper/views.py

@@ -183,7 +183,7 @@ def view_manage_auth_method(request):
         <p>Users will authenticate via an external identity provider (like Keycloak, Google, or Authelia). Requires Provider URL, Client ID, and Client Secret.</p>
         
         <h5>TOTP (Time-Based One-Time Password)</h5>
-        <p>Users will need to enter a rotating token from an authenticator app. Requires setting a Global TOTP Secret. <br>If <strong>Global TOTP Before Authentication</strong> is enabled, the PIN is required before the username and password to help combat bruteforce attacks.</p>
+        <p>Users will need to enter a rotating token from an authenticator app. If a user does not have a personal TOTP configured, the <strong>Global TOTP Secret</strong> will be used instead. </p>
         ''')
     }
 

templates/gatekeeper/gatekeeper_auth_method_form.html

@@ -60,21 +60,40 @@
         toggleFields();
 
         var qrContainer = $('<div class="mt-3 text-center" style="display:none;" id="qrCodeContainer"><img id="qrCodeImg" src="" class="img-fluid" style="border: 2px solid #ddd; border-radius: 8px; max-width: 250px;"/></div>');
-        var btnShowQr = $('<button type="button" class="btn btn-sm btn-info mt-2" id="btnShowQr"><i class="fas fa-qrcode"></i> {% trans 'View QR Code' %}</button>');
+        var btnShowQr = $('<button type="button" class="btn btn-sm btn-info mt-2 mr-1" id="btnShowQr"><i class="fas fa-qrcode"></i> {% trans 'View QR Code' %}</button>');
-        
+        var btnGenerate = $('<button type="button" class="btn btn-sm btn-secondary mt-2" id="btnGenerateTotp"><i class="fas fa-sync-alt"></i> {% trans 'Generate TOTP Secret' %}</button>');
+
         $('#div_id_totp_secret').append(btnShowQr);
+        $('#div_id_totp_secret').append(btnGenerate);
         $('#div_id_totp_secret').append(qrContainer);
 
+        function generateBase32Secret() {
+            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+            var randomBytes = new Uint8Array(32);
+            window.crypto.getRandomValues(randomBytes);
+            var result = '';
+            for (var digit = 0; digit < 32; digit++) {
+                result += chars[randomBytes[digit] % 32];
+            }
+            return result;
+        }
+
+        $('#btnGenerateTotp').click(function (e) {
+            e.preventDefault();
+            $('#id_totp_secret').val(generateBase32Secret());
+            $('#qrCodeContainer').slideUp();
+        });
+
         $('#btnShowQr').click(function (e) {
             e.preventDefault();
             var secret = $('#id_totp_secret').val();
             var name = $('#id_name').val() || 'Gatekeeper';
-            
+
             if (!secret) {
                 alert("{% trans 'Please enter a TOTP Secret first to generate the QR code.' %}");
                 return;
             }
-            
+
             var url = '/gatekeeper/auth_method/qr/?secret=' + encodeURIComponent(secret) + '&name=' + encodeURIComponent(name);
             $('#qrCodeImg').attr('src', url);
             $('#qrCodeContainer').slideToggle();