ui: delete cache button requires confirmation

5 files changed, 17 insertions, 2 deletions

diff --git a/server/src/routes/ui/admin/mod.rs b/server/src/routes/ui/admin/mod.rs
index 0508c7d..beb146b 100644
--- a/server/src/routes/ui/admin/mod.rs
+++ b/server/src/routes/ui/admin/mod.rs
@@ -72,7 +72,7 @@ pub fn admin_dashboard<'a>(
                 input[type="submit", disabled=is_importing(), value="(Re-)Import Library"];
             }
             form[method="POST", action=uri!(r_admin_delete_cache())] {
-                input[type="submit", value="Delete Cache"];
+                input.danger[type="submit", value="Delete Cache"];
             }
             h2 { "Users" }
             p { a[href=uri!(r_admin_users())] "Manage Users" }
diff --git a/web/script/dangerbutton.ts b/web/script/dangerbutton.ts
new file mode 100644
index 0000000..aabcdb9
--- /dev/null
+++ b/web/script/dangerbutton.ts
@@ -0,0 +1,9 @@
+globalThis.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll("input.danger").forEach(el => {
+        el.addEventListener("click", ev => {
+            if (!confirm(`Really ${(el as HTMLInputElement).value}?`)) {
+                ev.preventDefault()
+            }
+        })
+    })
+})
diff --git a/web/script/main.ts b/web/script/main.ts
index eede963..ee08bf3 100644
--- a/web/script/main.ts
+++ b/web/script/main.ts
@@ -7,3 +7,4 @@
 import "./player/mod.ts"
 import "./transition.ts"
 import "./backbutton.ts"
+import "./dangerbutton.ts"
diff --git a/web/style/forms.css b/web/style/forms.css
index f020eb6..fa2ec67 100644
--- a/web/style/forms.css
+++ b/web/style/forms.css
@@ -147,3 +147,7 @@ fieldset .categories .category {
 fieldset .categories .category h3 {
     margin: 0px;
 }
+
+input.danger {
+    background-color: var(--c-danger);
+}
diff --git a/web/style/themes.css b/web/style/themes.css
index 62305cd..f7c4229 100644
--- a/web/style/themes.css
+++ b/web/style/themes.css
@@ -5,6 +5,7 @@
 */
 body {
     --video-brackground: black;
+    --c-danger: rgb(177, 36, 36);
 }
 body.theme-Dark {
     --accent-light: rgb(255, 163, 87);
@@ -66,4 +67,4 @@ body.theme-Purple {
     --font: rgb(218, 218, 218);
     --font-dark: rgb(122, 122, 122);
     --font-highlight: white;
-}
\ No newline at end of file
+}