Fix update/delete modals JS functions not working

.gitattributes

@@ -67,4 +67,4 @@
 *.cshtml	linguist-detectable=false
 *.css		linguist-detectable=false
 *.js		linguist-detectable=false
-###############################################################################
+###############################################################################

Middlewares/ExceptionHandlerMiddleware.cs

@@ -0,0 +1,46 @@
+using MTWireGuard.Models.Mikrotik;
+using System.Net;
+using System.Reflection;
+
+namespace MTWireGuard.Middlewares
+{
+    public class ExceptionHandlerMiddleware 
+    {
+        private readonly RequestDelegate _next;
+        //public (HttpStatusCode code, string message) GetResponse(Exception exception);
+
+        public ExceptionHandlerMiddleware(RequestDelegate next)
+        {
+            _next = next;
+        }
+
+        public async Task InvokeAsync(HttpContext context)
+        {
+            try
+            {
+                await _next(context);
+            }
+            catch (Exception exception)
+            {
+                // log the error
+                //Logger.Error(exception, "error during executing {Context}", context.Request.Path.Value);
+                Console.WriteLine(exception);
+                var response = context.Response;
+                response.ContentType = "application/json";
+
+                // get the response code and message
+                //var (status, message) = GetResponse(exception);
+                response.StatusCode = (int)HttpStatusCode.OK;
+                await response.WriteAsync(exception.Message);
+            }
+        }
+    }
+
+    public static class ExceptionHandlerMiddlewareExtensions
+    {
+        public static IApplicationBuilder UseExceptionHandling(this IApplicationBuilder builder)
+        {
+            return builder.UseMiddleware<ExceptionHandlerMiddleware>();
+        }
+    }
+}

Pages/Clients.cshtml

@@ -57,47 +57,6 @@
     <script src="js/wireguard.js"></script>
     <script src="js/wgelements.js"></script>
     <script>
-        document.addEventListener("DOMContentLoaded", function (event) {
-            fetch("/Clients/getAll")
-                .then((response) => response.text())
-                .then((data) => {
-                    document.querySelector('table tbody').innerHTML = data;
-                });
-        });
-
-        document.querySelectorAll(".sync-btn").forEach(form => {
-            form.addEventListener('click', function (event) {
-                let Id = event.target.closest('tr').getAttribute('data-id');
-                document.querySelector('#SyncModal input[name="ID"]').value = Id;
-            });
-        });
-
-        document.querySelectorAll(".delete-btn").forEach(form => {
-            form.addEventListener('click', function (event) {
-                let Id = event.target.closest('tr').getAttribute('data-id');
-                document.querySelector('#DeleteModal input[name="Id"]').value = Id;
-            });
-        });
-
-        document.querySelectorAll(".update-btn").forEach(form => {
-            form.addEventListener('click', function (event) {
-                document.querySelector('#EditModal form').reset();
-                let row = event.target.closest('tr');
-                let Id = row.getAttribute('data-id');
-                let name = row.querySelector('td:nth-child(2)').innerText;
-                let interface = row.querySelector('td:nth-child(3)').innerText;
-                let address = row.querySelector('td:nth-child(4)').innerText;
-                let publicKey = row.querySelector('td:nth-child(5)').innerText;
-                document.querySelector('#EditModal input[name="ID"]').value = Id;
-                document.querySelector('#EditModal input[name="Name"]').placeholder = name;
-                document.querySelector('#EditModal input[name="AllowedAddress"]').placeholder = address;
-                document.querySelector('#EditModal input[name="PublicKey"]').placeholder = publicKey;
-                let ifOption = document.querySelector('#EditModal option[value="' + interface + '"]');
-                if (ifOption)
-                    ifOption.setAttribute("selected", true);
-            });
-        });
-
         document.getElementById("QRModal").addEventListener('shown.coreui.modal', (event) => {
             let Id = event.relatedTarget.closest('tr').getAttribute('data-id');
             const xhttp = new XMLHttpRequest();

Pages/Components/UpdateClientModal/UpdateClientModal.cshtml

@@ -85,7 +85,7 @@
                         <input type="text" class="form-control" id="WGPUKeepAlive" name="KeepAlive" placeholder="Seconds">
                     </div>
                 </div>
-                <input type="hidden" name="ID" />
+                <input type="hidden" asp-for="ID" />
             </div>
             <div class="modal-footer">
                 <button type="reset" class="btn btn-secondary" data-coreui-dismiss="modal">Close</button>

Pages/Servers.cshtml

@@ -46,38 +46,4 @@
 @section Scripts {
     <script src="js/wireguard.js"></script>
     <script src="js/wgelements.js"></script>
-    <script>
-        document.addEventListener("DOMContentLoaded", function (event) {
-            fetch("/Servers/getAll")
-                .then((response) => response.text())
-                .then((data) => {
-                    document.querySelector('table tbody').innerHTML = data;
-                });
-        });
-
-        document.querySelectorAll(".delete-btn").forEach(form => {
-            form.addEventListener('click', function (event) {
-                let row = event.target.closest('tr');
-                let Id = row.getAttribute('data-id');
-                document.querySelector('#DeleteModal input[name="Id"]').value = Id;
-            });
-        });
-
-        document.querySelectorAll(".update-btn").forEach(form => {
-            form.addEventListener('click', function (event) {
-                document.querySelector('#EditModal form').reset();
-                let row = event.target.closest('tr');
-                let Id = row.getAttribute('data-id');
-                let name = row.querySelector('td:nth-child(2)').innerText;
-                let port = row.querySelector('td:nth-child(3)').innerText;
-                let mtu = row.querySelector('td:nth-child(4)').innerText;
-                let publicKey = row.querySelector('td:nth-child(5)').innerText;
-                document.querySelector('#EditModal input[name="ID"]').value = Id;
-                document.querySelector('#EditModal input[name="Name"]').placeholder = name;
-                document.querySelector('#EditModal input[name="Port"]').placeholder = port;
-                document.querySelector('#EditModal input[name="MTU"]').placeholder = mtu;
-                document.querySelector('#EditModal input[id$="PubKey"]').placeholder = publicKey;
-            });
-        });
-    </script>
 }

Pages/Shared/_ClientsTable.cshtml

@@ -79,17 +79,17 @@
                 <div class="dropdown-menu dropdown-menu-end">
                     @if (user.IsDifferent)
                     {
-                        <button class="dropdown-item sync-btn" data-coreui-toggle="modal" data-coreui-target="#SyncModal">Sync</button>
+                        <button class="dropdown-item sync-btn" data-coreui-toggle="modal" data-coreui-target="#SyncModal" onclick="syncBtn(event)">Sync</button>
                     }
                     <button class="dropdown-item" data-coreui-toggle="modal" data-coreui-target="#QRModal">QR</button>
                     <a class="dropdown-item" asp-page="Clients" asp-page-handler="DownloadTunnel" asp-route-id="@user.Id">Download</a>
-                    <button class="dropdown-item update-btn" data-coreui-toggle="modal" data-coreui-target="#EditModal">Edit</button>
+                    <button class="dropdown-item update-btn" data-coreui-toggle="modal" data-coreui-target="#EditModal" onclick="updateClientBtn(event)">Edit</button>
                     @{
                         var enabled = user.IsEnabled;
                         string enableORdisable = enabled ? "Disable" : "Enable";
                     }
-                    <a class="dropdown-item" asp-page="Clients" asp-page-handler="Enable" asp-route-ID="@user.Id" asp-route-IsEnabled="@enabled" data-target="_self" onclick="ddBtnClick(event);">@enableORdisable</a>
+                    <a class="dropdown-item" asp-page="Clients" asp-page-handler="Enable" asp-route-ID="@user.Id" asp-route-IsEnabled="@enabled" data-target="_self" onclick="dropdownBtnClick(event);">@enableORdisable</a>
-                    <button class="dropdown-item delete-btn text-danger" data-coreui-toggle="modal" data-coreui-target="#DeleteModal">Delete</button>
+                    <button class="dropdown-item delete-btn text-danger" data-coreui-toggle="modal" data-coreui-target="#DeleteModal" onclick="deleteBtn(event)">Delete</button>
                 </div>
             </div>
         </td>

Pages/Shared/_Layout.cshtml

@@ -203,7 +203,6 @@
             <div class="ms-md-auto">Powered by <a href="https://coreui.io/">CoreUI</a></div>
         </footer>
     </div>
-    @Html.AntiForgeryToken()
     <component type="typeof(Components.ToastContainer)" render-mode="Static" />
     <!-- CoreUI and necessary plugins-->
     <script src="vendors/coreui/coreui/js/coreui.bundle.min.js"></script>

Pages/Shared/_ServersTable.cshtml

@@ -69,9 +69,9 @@
                     </svg>
                 </button>
                 <div class="dropdown-menu dropdown-menu-end">
-                    <a class="dropdown-item" asp-page="Servers" asp-page-handler="Enable" asp-route-ID="@server.Id" asp-route-IsEnabled="@enabled" data-target="_self" onclick="ddBtnClick(event);">@enableORdisable</a>
+                    <a class="dropdown-item" asp-page="Servers" asp-page-handler="Enable" asp-route-ID="@server.Id" asp-route-IsEnabled="@enabled" data-target="_self" onclick="dropdownBtnClick(event);">@enableORdisable</a>
-                    <button class="dropdown-item update-btn" data-coreui-toggle="modal" data-coreui-target="#EditModal">Edit</button>
+                    <button class="dropdown-item update-btn" data-coreui-toggle="modal" data-coreui-target="#EditModal" onclick="updateServerBtn(event)">Edit</button>
-                    <button class="dropdown-item delete-btn text-danger" data-coreui-toggle="modal" data-coreui-target="#DeleteModal" data-id="@server.Id">Delete</button>
+                    <button class="dropdown-item delete-btn text-danger" data-coreui-toggle="modal" data-coreui-target="#DeleteModal" data-id="@server.Id" onclick="deleteBtn(event)">Delete</button>
                 </div>
             </div>
         </td>

Program.cs

@@ -9,20 +9,6 @@ using MTWireGuard.Repositories;
 using MTWireGuard.Services;
 using System.Diagnostics;
 
-#region Error Handling
-AppDomain.CurrentDomain.UnhandledException += new UnhandledExceptionEventHandler(UnhandledExceptionHandler);
-
-static void UnhandledExceptionHandler(object sender, UnhandledExceptionEventArgs e)
-{
-    Exception ex = e.ExceptionObject as Exception;
-    if (e.IsTerminating)
-        Debug.WriteLine($"[+] {ex.Message}");
-    else
-        Debug.WriteLine($"[-] {ex.Message}");
-    throw ex;
-}
-#endregion
-
 var builder = WebApplication.CreateBuilder(args);
 using DBContext context = new();
 
@@ -106,6 +92,7 @@ else
     });
 
 app.UseDependencyCheck();
+//app.UseExceptionHandling();
 //app.UseAntiForgery();
 
 app.UseRouting();

build.bat

@@ -8,4 +8,4 @@ docker buildx build --no-cache --platform linux/amd64 -t mtwireguard .
 echo Docker image built!
 echo Save output file!
 docker save mtwireguard > mtwg.tar
-echo Finish
+echo Finish

wwwroot/js/script.js

@@ -34,7 +34,12 @@ Forms.forEach(form => {
 });
 
 dropdownBTNs.forEach(btn => {
-    btn.addEventListener('click', ddBtnClick);
+    btn.addEventListener('click', dropdownBtnClick);
+});
+
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    refreshTables();
 });
 
 function loadServers() {
@@ -60,7 +65,7 @@ function refreshTables() {
     }
 }
 
-function ddBtnClick(event) {
+function dropdownBtnClick(event) {
     event.preventDefault();
     fetch(event.target.getAttribute('href'))
         .then(res => res.json())
@@ -84,3 +89,45 @@ function ddBtnClick(event) {
             refreshTables();
         });
 }
+
+function deleteBtn(event) {
+    let Id = event.target.closest('tr').getAttribute('data-id');
+    document.querySelector('#DeleteModal input[name="Id"]').value = Id;
+}
+
+function syncBtn(event) {
+    let Id = event.target.closest('tr').getAttribute('data-id');
+    document.querySelector('#SyncModal input[name="ID"]').value = Id;
+}
+
+function updateClientBtn(event) {
+    document.querySelector('#EditModal form').reset();
+    let row = event.target.closest('tr');
+    let Id = row.getAttribute('data-id');
+    let name = row.querySelector('td:nth-child(2)').innerText;
+    let interface = row.querySelector('td:nth-child(3)').innerText;
+    let address = row.querySelector('td:nth-child(4)').innerText;
+    let publicKey = row.querySelector('td:nth-child(5)').innerText;
+    document.querySelector('#EditModal input[name="ID"]').value = Id;
+    document.querySelector('#EditModal input[name="Name"]').placeholder = name;
+    document.querySelector('#EditModal input[name="AllowedAddress"]').placeholder = address;
+    document.querySelector('#EditModal input[name="PublicKey"]').placeholder = publicKey;
+    let ifOption = document.querySelector('#EditModal option[value="' + interface + '"]');
+    if (ifOption)
+        ifOption.setAttribute("selected", true);
+}
+
+function updateServerBtn(event) {
+    document.querySelector('#EditModal form').reset();
+    let row = event.target.closest('tr');
+    let Id = row.getAttribute('data-id');
+    let name = row.querySelector('td:nth-child(2)').innerText;
+    let port = row.querySelector('td:nth-child(3)').innerText;
+    let mtu = row.querySelector('td:nth-child(4)').innerText;
+    let publicKey = row.querySelector('td:nth-child(5)').innerText;
+    document.querySelector('#EditModal input[name="ID"]').value = Id;
+    document.querySelector('#EditModal input[name="Name"]').placeholder = name;
+    document.querySelector('#EditModal input[name="Port"]').placeholder = port;
+    document.querySelector('#EditModal input[name="MTU"]').placeholder = mtu;
+    document.querySelector('#EditModal input[id$="PubKey"]').placeholder = publicKey;
+}

wwwroot/js/wgelements.js

@@ -14,11 +14,7 @@ function generateKeys(dom) {
 function changeIcon(btn) {
     let frm = btn.closest('form');
     let pk = frm.querySelector('input[id$="PubKey"]');
-    pk.toggleAttribute('disabled');/*
+    pk.toggleAttribute('disabled');
-    if (btn.getAttribute('id') == 'PUnlockBTN')
-        document.getElementById('WGPPubKey').toggleAttribute('disabled');
-    else
-        document.getElementById('WGSPubKey').toggleAttribute('disabled');*/
     let svg = btn.children.item(0);
     let use = svg.children.item(0);
     let icon = use.getAttribute('xlink:href');