Mirrors/wireguard_webadmin
1
0
Fork 0
mirror of https://github.com/eduardogsilva/wireguard_webadmin.git synced 2026-03-17 22:36:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add password and TOTP PIN fields to user form with validation and QR code generation

Browse Source
This commit is contained in:
Eduardo Silva
2026-03-15 17:08:58 -03:00
parent 75d4fb022b
commit 2386d8fbb3
3 changed files with 183 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
templates/gatekeeper/gatekeeper_user_form.html Normal file
View File

@@ -0,0 +1,83 @@
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load i18n %}
{% block content %}
<div class='row'>
<div class='{% if form_size %}{{ form_size }}{% else %}col-lg-6{% endif %}'>
<div class="card card-primary card-outline">
{% if page_title %}
<div class="card-header">
<h3 class="card-title">{{ page_title }}</h3>
</div>
{% endif %}
<div class="card-body row">
<div class="col-lg-12">
{% csrf_token %}
{% crispy form %}
</div>
</div>
</div>
</div>
{% if form_description %}
<div class='{% if form_description.size %}{{ form_description.size }}{% else %}col-lg-6{% endif %}'>
<div class="card card-primary card-outline">
<div class="card-body row">
<div class="col-lg-12">
{{ form_description.content|safe }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% endblock %}
{% block custom_page_scripts %}
<script>
$(document).ready(function () {
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 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_username').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();
});
});
</script>
{% endblock %}