From da99259f55284e023b4b7c8a1c74b000934bd00c Mon Sep 17 00:00:00 2001
From: Luke Lambert <me@lukelambert.com>
Date: Sat, 29 Jan 2022 01:53:56 -0600
Subject: [PATCH] QR code behind button and faster modal loading (#144)

---
 custom/js/helper.js    |  6 +++++-
 templates/clients.html | 47 ++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/custom/js/helper.js b/custom/js/helper.js
index 6ce7f60..9dff4ee 100644
--- a/custom/js/helper.js
+++ b/custom/js/helper.js
@@ -24,11 +24,15 @@ function renderClientList(data) {
                             <div class="overlay" id="paused_${obj.Client.id}"` + clientStatusHtml
                                 + `<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('${obj.Client.id}')"></i>
                             </div>
-                            <img src="${obj.QRCode}" />
                             <div class="info-box-content">
                                 <div class="btn-group">
                                     <a href="/download?clientid=${obj.Client.id}" class="btn btn-outline-success btn-sm">Download</a>
                                 </div>
+                                <div class="btn-group">      
+                                    <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
+                                        data-target="#modal_qr_client" data-clientid="${obj.Client.id}"
+                                        data-clientname="${obj.Client.name}">Scan</button>
+                                </div>
                                 <div class="btn-group">      
                                     <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
                                         data-target="#modal_email_client" data-clientid="${obj.Client.id}"
diff --git a/templates/clients.html b/templates/clients.html
index 3f39a2a..16d2057 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -57,6 +57,24 @@ Wireguard Clients
     </div>
     <!-- /.modal-dialog -->
 </div>
+<!-- /.modal -->
+
+<div class="modal fade" id="modal_qr_client">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">QR Code</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <img id="qr_code" class="w-100" style="image-rendering: pixelated;" src="" alt="QR code" />
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
 
 <div class="modal fade" id="modal_edit_client">
     <div class="modal-dialog">
@@ -280,7 +298,7 @@ Wireguard Clients
 
         // Edit client modal event
         $(document).ready(function () {
-            $("#modal_edit_client").on('shown.bs.modal', function (event) {
+            $("#modal_edit_client").on('show.bs.modal', function (event) {
                 let modal = $(this);
                 const button = $(event.relatedTarget);
                 const client_id = button.data('clientid');
@@ -440,7 +458,7 @@ Wireguard Clients
             }
         }
 
-        $("#modal_email_client").on('shown.bs.modal', function (event) {
+        $("#modal_email_client").on('show.bs.modal', function (event) {
             let modal = $(this);
             const button = $(event.relatedTarget);
             const client_id = button.data('clientid');
@@ -464,6 +482,31 @@ Wireguard Clients
             });
         });
 
+        $("#modal_qr_client").on('show.bs.modal', function (event) {
+            let modal = $(this);
+            const button = $(event.relatedTarget);
+            const client_id = button.data('clientid');
+            const QRCodeImg = modal.find("#qr_code");
+            QRCodeImg.hide();
+            $.ajax({
+                cache: false,
+                method: 'GET',
+                url: '/api/client/' + client_id,
+                dataType: 'json',
+                contentType: "application/json",
+                success: function (resp) {
+                    const client = resp.Client;
+
+                    modal.find(".modal-title").text("QR Code for " + client.name);
+                    QRCodeImg.attr('src', resp.QRCode).show();
+                },
+                error: function (jqXHR, exception) {
+                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
+                    toastr.error(responseJson['message']);
+                }
+            });
+        });
+
         $(document).ready(function () {
             $.validator.setDefaults({
                 submitHandler: function (form) {