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

@@ -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();