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

This commit is contained in:
Eduardo Silva
2026-03-15 16:49:54 -03:00
parent 218bd32e93
commit 75d4fb022b
2 changed files with 24 additions and 5 deletions

View File

@@ -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>
''')
}

View File

@@ -60,11 +60,30 @@
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();