Conformation for Unbans (#60)

* Conformation for Unbans * onclick handler was stupid here lmao * using let cause julian knows more than me * const is better lmaooooooooooooooooooooo --------- Co-authored-by: Geekyhobo <66805063+Ahlytlex@users.noreply.github.com>
space-wizards · Mar 16, 2024 · e53aa72 · e53aa72
1 parent 59a7aed
commit e53aa72
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/.idea/.idea.SS14.Admin/.idea/.name b/.idea/.idea.SS14.Admin/.idea/.name
diff --git a/SS14.Admin/Pages/Tables/BansTable.cshtml b/SS14.Admin/Pages/Tables/BansTable.cshtml
@@ -7,7 +7,7 @@
         <partial name="Tables/Pagination" for="Pagination"/>
     }
 }
-    <table class="table table-striped mt-3">
+<table class="table table-striped mt-3">
     <thead>
     <tr>
         <th style="min-width: 210px">
@@ -104,9 +104,12 @@
             <td>
                 @if (ban.Active && User.IsInRole("BAN"))
                 {
-                    <form asp-page="/Bans/Index" asp-page-handler="Unban">
+                    <form id="unban-form-@ban.Id" asp-page="/Bans/Index" asp-page-handler="Unban">
                         <input type="hidden" name="Id" value="@ban.Id">
-                        <input type="submit" class="btn btn-secondary" value="Unban">
+                        <button type="button" class="btn btn-secondary" onclick="showConfirmation('@ban.Id')">Unban</button>
+                        <div class="confirmation-button" id="confirmation-button-@ban.Id" style="display: none;">
+                            <button type="submit" class="btn btn-danger">Are you sure?</button>
+                        </div>
                     </form>
                 }
             </td>
@@ -115,7 +118,21 @@
     </tbody>
 </table>
 
+<script>
+    function showConfirmation(banId) {
+        const confirmationButton = document.getElementById('confirmation-button-' + banId);
+        const unbanButton = document.getElementById('unban-form-' + banId).querySelector('button[type="button"]');
+        confirmationButton.style.display = 'block';
+        unbanButton.style.display = 'none';
+        setTimeout(function() {
+            confirmationButton.style.display = 'none';
+            unbanButton.style.display = 'block';
+        }, 3000); // Revert after 3 seconds
+    }
+</script>
+
 @if (b == true)
 {
 <partial name="Tables/Pagination" for="Pagination"/>
 }
+
diff --git a/SS14.Admin/Pages/Tables/RoleBansTable.cshtml b/SS14.Admin/Pages/Tables/RoleBansTable.cshtml
@@ -95,9 +95,12 @@
             <td>
                 @if (ban.Active && User.IsInRole("BAN"))
                 {
-                    <form asp-page="/RoleBans/Index" asp-page-handler="Unban">
+                    <form id="unban-form-@ban.Id" asp-page="/Bans/Index" asp-page-handler="Unban">
                         <input type="hidden" name="Id" value="@ban.Id">
-                        <input type="submit" class="btn btn-secondary" value="Unban">
+                        <button type="button" class="btn btn-secondary" onclick="showConfirmation('@ban.Id')">Unban</button>
+                        <div class="confirmation-button" id="confirmation-button-@ban.Id" style="display: none;">
+                            <button type="submit" class="btn btn-danger">Are you sure?</button>
+                        </div>
                     </form>
                 }
             </td>
@@ -106,6 +109,19 @@
     </tbody>
 </table>
 
+<script>
+    function showConfirmation(banId) {
+        const confirmationButton = document.getElementById('confirmation-button-' + banId);
+        const unbanButton = document.getElementById('unban-form-' + banId).querySelector('button[type="button"]');
+        confirmationButton.style.display = 'block';
+        unbanButton.style.display = 'none';
+        setTimeout(function() {
+            confirmationButton.style.display = 'none';
+            unbanButton.style.display = 'block';
+        }, 3000); // Revert after 3 seconds
+    }
+</script>
+
 @if(b == true)
 {
     <partial name="Tables/Pagination" for="Pagination"/>