From 68caf82167affb5e43b417b0c3c6f166fe1acc20 Mon Sep 17 00:00:00 2001
From: "DESKTOP-T0O5CDB\\DESK-555BD" <ivancheahkf@gmail.com>
Date: Sat, 5 Oct 2024 18:02:42 -0600
Subject: [PATCH] moved token into modal.

---
 Views/Admin/Index.cshtml | 83 ++++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 33 deletions(-)

diff --git a/Views/Admin/Index.cshtml b/Views/Admin/Index.cshtml
index bfedd33..912738b 100644
--- a/Views/Admin/Index.cshtml
+++ b/Views/Admin/Index.cshtml
@@ -25,43 +25,15 @@
     </div>
     <hr />
     <div class="row">
-        <div class="col-md-5 col-12">
+        <div class="col-12">
             <div class="row">
                 <div class="col-2 d-flex align-items-center">
-                    <span class="lead">@translator.Translate(userLanguage, "Tokens")</span>
+                    <span class="lead">@translator.Translate(userLanguage, "Users")</span>
                 </div>
                 <div class="col-10 d-flex align-items-center justify-content-end">
-                    <div class="btn-group">
-                        <button onclick="generateNewToken()" class="btn btn-primary btn-md mt-1 mb-1">
-                            <i class="bi bi-pencil-square me-2"></i>@translator.Translate(userLanguage, "Generate User Token")
-                        </button>
-                        <button class="btn btn-outline-primary btn-md mt-1 mb-1" @(emailServerIsSetup ? "" : "disabled") onclick="toggleAutoNotify(event)">
-                            <div class="form-check">
-                                <input class="form-check-input" type="checkbox" role="switch" id="enableAutoNotify" @(emailServerIsSetup ? "checked" : "disabled")>
-                                <label class="form-check-label" for="enableAutoNotify">@translator.Translate(userLanguage, "Notify")</label>
-                            </div>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <hr />
-            <table class="table table-hover">
-                <thead class="sticky-top">
-                    <tr class="d-flex">
-                        <th scope="col" class="col-4">@translator.Translate(userLanguage, "Token")</th>
-                        <th scope="col" class="col-6">@translator.Translate(userLanguage, "Issued To")</th>
-                        <th scope="col" class="col-2">@translator.Translate(userLanguage, "Delete")</th>
-                    </tr>
-                </thead>
-                <tbody id="tokenTable">
-                    @await Html.PartialAsync("_Tokens", Model.Tokens)
-                </tbody>
-            </table>
-        </div>
-        <div class="col-12 col-md-7">
-            <div class="row">
-                <div class="col-12 d-flex align-items-center">
-                    <span class="lead">@translator.Translate(userLanguage, "Users")</span>
+                    <button onclick="showTokenModal()" class="btn btn-primary btn-md mt-1 mb-1">
+                        <i class="bi bi-pencil-square me-2"></i>@translator.Translate(userLanguage, "Manage Tokens")
+                    </button>
                 </div>
             </div>
             <hr />
@@ -80,8 +52,53 @@
             </table>
         </div>
     </div>
+    <div class="modal fade" data-bs-focus="false" id="tokenModal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                        <div class="d-flex align-items-center">
+                            <span class="lead">@translator.Translate(userLanguage, "Tokens")</span>
+                        </div>
+                        <div class="d-flex align-items-center ms-auto">
+                            <div class="btn-group">
+                                <button onclick="generateNewToken()" class="btn btn-primary btn-md mt-1 mb-1">
+                                    <i class="bi bi-pencil-square me-2"></i>@translator.Translate(userLanguage, "Generate")
+                                </button>
+                                <button class="btn btn-outline-primary btn-md mt-1 mb-1" @(emailServerIsSetup ? "" : "disabled") onclick="toggleAutoNotify(event)">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" role="switch" id="enableAutoNotify" @(emailServerIsSetup ? "checked" : "disabled")>
+                                        <label class="form-check-label" for="enableAutoNotify">@translator.Translate(userLanguage, "Notify")</label>
+                                    </div>
+                                </button>
+                            </div>
+                        <button class="btn btn-close btn-md mt-1 mb-1 ms-2" onclick="hideTokenModal()" aria-label="Close"></button>
+                        </div>
+                </div>
+                <div class="modal-body">
+                    <table class="table table-hover">
+                        <thead class="sticky-top">
+                            <tr class="d-flex">
+                                <th scope="col" class="col-4">@translator.Translate(userLanguage, "Token")</th>
+                                <th scope="col" class="col-6">@translator.Translate(userLanguage, "Issued To")</th>
+                                <th scope="col" class="col-2">@translator.Translate(userLanguage, "Delete")</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tokenTable">
+                            @await Html.PartialAsync("_Tokens", Model.Tokens)
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 <script>
+    function showTokenModal() {
+        $("#tokenModal").modal('show');
+    }
+    function hideTokenModal() {
+        $("#tokenModal").modal('hide');
+    }
     function reloadTokenTable() {
         $.get('/Admin/GetTokenPartialView', function (data) {
             $("#tokenTable").html(data);