improve authentication method form

gatekeeper/forms.py

@@ -115,21 +115,21 @@ class AuthMethodForm(forms.ModelForm):
             Div(
                 Div('name', css_class='col-md-6'),
                 Div('auth_type', css_class='col-md-6'),
-                css_class='row'
+                css_class='row auth-type-group'
             ),
             Div(
                 Div('totp_secret', css_class='col-md-6'),
                 Div('totp_pin', css_class='col-md-6'),
-                css_class='row'
+                css_class='row totp-group'
             ),
             Div(
                 Div('oidc_provider', css_class='col-md-12'),
-                css_class='row'
+                css_class='row oidc-group'
             ),
             Div(
                 Div('oidc_client_id', css_class='col-md-6'),
                 Div('oidc_client_secret', css_class='col-md-6'),
-                css_class='row'
+                css_class='row oidc-group'
             ),
             Div(
                 Div(

gatekeeper/urls.py

@@ -17,6 +17,7 @@ urlpatterns = [
     # Auth Methods
     path('auth_method/manage/', views.view_manage_auth_method, name='manage_gatekeeper_auth_method'),
     path('auth_method/delete/', views.view_delete_auth_method, name='delete_gatekeeper_auth_method'),
+    path('auth_method/qr/', views.view_generate_totp_qr, name='generate_totp_qr'),
 
     # Auth Method Allowed Domains
     path('domain/manage/', views.view_manage_auth_domain, name='manage_gatekeeper_domain'),

gatekeeper/views.py

@@ -1,5 +1,10 @@
+import io
+
+import pyotp
+import qrcode
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
+from django.http import HttpResponse
 from django.shortcuts import render, get_object_or_404, redirect
 from django.urls import reverse
 from django.utils.translation import gettext as _
@@ -223,6 +228,42 @@ def view_delete_auth_method(request):
     return render(request, 'generic_delete_confirmation.html', context)
 
 
+@login_required
+def view_generate_totp_qr(request):
+    if not UserAcl.objects.filter(user=request.user).filter(user_level__gte=50).exists():
+        return HttpResponse("Access Denied", status=403)
+
+    totp_secret = request.GET.get('secret')
+    issuer = request.GET.get('issuer', 'wireguard_webadmin')
+    name = request.GET.get('name', 'Gatekeeper')
+
+    if not totp_secret:
+        return HttpResponse("No secret provided", status=400)
+
+    try:
+        totp = pyotp.TOTP(totp_secret)
+        uri = totp.provisioning_uri(name=name, issuer_name=issuer)
+
+        qr = qrcode.QRCode(
+            version=1,
+            error_correction=qrcode.constants.ERROR_CORRECT_L,
+            box_size=10,
+            border=4,
+        )
+        qr.add_data(uri)
+        qr.make(fit=True)
+        img = qr.make_image(fill_color="black", back_color="white")
+
+        response = HttpResponse(content_type="image/png")
+        img_io = io.BytesIO()
+        img.save(img_io, format='PNG')
+        img_io.seek(0)
+        response.write(img_io.getvalue())
+        return response
+    except Exception:
+        return HttpResponse("Error generating QR code", status=500)
+
+
 @login_required
 def view_manage_auth_domain(request):
     if not UserAcl.objects.filter(user=request.user).filter(user_level__gte=50).exists():

templates/gatekeeper/gatekeeper_auth_method_form.html

@@ -36,5 +36,45 @@
 {% endblock %}
 
 {% block custom_page_scripts %}
+<script>
+    $(document).ready(function () {
+        function toggleFields() {
+            var authType = $('#id_auth_type').val();
+            if (authType === 'local_password' || authType === 'ip_address') {
+                $('.totp-group').hide();
+                $('.oidc-group').hide();
+            } else if (authType === 'totp') {
+                $('.totp-group').show();
+                $('.oidc-group').hide();
+            } else if (authType === 'oidc') {
+                $('.totp-group').hide();
+                $('.oidc-group').show();
+            }
+        }
 
+        $('#id_auth_type').change(toggleFields);
+        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> View QR Code</button>');
+        
+        $('#div_id_totp_secret').append(btnShowQr);
+        $('#div_id_totp_secret').append(qrContainer);
+
+        $('#btnShowQr').click(function (e) {
+            e.preventDefault();
+            var secret = $('#id_totp_secret').val();
+            var name = $('#id_name').val() || 'Gatekeeper';
+            
+            if (!secret) {
+                alert("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 %}