feat: confirm deletion

build.rs

@@ -32,6 +32,10 @@ fn main() -> std::io::Result<()> {
         nm_path.join("htmx.org/dist/ext/response-targets.js"),
         dist_path.join("response-targets.js"),
     )?;
+    copy(
+        nm_path.join("sweetalert2/dist/sweetalert2.min.js"),
+        dist_path.join("sweetalert2.min.js"),
+    )?;
     copy(
         Path::new("./static/brass.jpeg"),
         dist_path.join("brass.jpeg"),

src/endpoints/user/post_toggle.rs

@@ -56,7 +56,7 @@ pub async fn post(
                       </span>
                       <span>Entsperren</span>
                     <div id="user-{id}-locked" hx-swap-oob="true">ja</div>
-                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete">
+                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete"  hx-trigger="confirmed" onClick="fireConfirmModal(event)">
                   <span class="icon">
                     <svg class="feather">
                       <use href="/static/feather-sprite.svg#x-circle" />
@@ -74,7 +74,7 @@ pub async fn post(
                       </span>
                       <span>Sperren</span>
                     <div id="user-{id}-locked" hx-swap-oob="true">nein</div>
-                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" disabled hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete">
+                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" disabled hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed" onClick="fireConfirmModal(event)">
                   <span class="icon">
                     <svg class="feather">
                       <use href="/static/feather-sprite.svg#x-circle" />

static/package-lock.json

@@ -5,12 +5,21 @@
   "packages": {
     "": {
       "devDependencies": {
+        "@sweetalert2/theme-bulma": "^5.0.18",
         "bulma": "^1.0.1",
         "feather-icons": "^4.29.2",
         "htmx.org": "^1.9.12",
-        "sass": "^1.77.8"
+        "sass": "^1.77.8",
+        "sweetalert2": "^11.12.4"
       }
     },
+    "node_modules/@sweetalert2/theme-bulma": {
+      "version": "5.0.18",
+      "resolved": "https://registry.npmjs.org/@sweetalert2/theme-bulma/-/theme-bulma-5.0.18.tgz",
+      "integrity": "sha512-GmlNOFmgF9bw9XMAEz6kLWglvSLuNMtr/ThTYW6mEKkQw9M8s1WB/1H7s/nIn2IgamgOlz/fhDvDqX9ne5cgQg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -278,6 +287,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.12.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.12.4.tgz",
+      "integrity": "sha512-ZSpyaLbAmn4b7xjnV9x9BFD1UOrCAhIzm1D8dZ443kGxtVKqbTIA5SgXs4xeEtmFfEXUyC3RBgpSlu1AXmCiHA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

static/package.json

@@ -1,9 +1,11 @@
 {
   "devDependencies": {
+    "@sweetalert2/theme-bulma": "^5.0.18",
     "bulma": "^1.0.1",
     "feather-icons": "^4.29.2",
     "htmx.org": "^1.9.12",
-    "sass": "^1.77.8"
+    "sass": "^1.77.8",
+    "sweetalert2": "^11.12.4"
   },
   "scripts": {
     "build-bulma": "sass --load-path=node_modules --no-source-map style.scss dist/style.css"

static/style.scss

@@ -44,6 +44,10 @@ $beige-lighter: #eff0eb;
 // Import the themes so that all CSS variables have a value
 @forward "bulma/sass/themes";
 
+// TODO: bulma theme for sweetalert looks and feels outdated
+// @import "@sweetalert2/theme-bulma/bulma.scss";
+@import "sweetalert2/src/sweetalert2.scss";
+
 .feather {
   width: 24px;
   height: 24px;
@@ -81,3 +85,4 @@ $beige-lighter: #eff0eb;
 section.htmx-request {
   visibility: hidden;
 }
+

templates/base.html

@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="/static/style.css">
   <script src="/static/htmx.min.js"></script>
   <script src="/static/response-targets.js"></script>
+  <script src="/static/sweetalert2.min.js"></script>
 </head>
 
 <body class="hero is-fullheight" hx-ext="response-targets">

templates/user/overview.html

@@ -108,7 +108,8 @@
                   <span>Bearbeiten</span>
                 </a>
                 <button id="user-{{ u.id }}-delete" class="button is-danger is-light" {% if !u.locked %}disabled{% endif
-                  %} hx-delete="/users/{{ u.id }}" hx-target="closest tr" hx-swap="delete">
+                  %} hx-delete="/users/{{ u.id }}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed"
+                  onClick="fireConfirmModal(event)">
                   <span class="icon">
                     <svg class="feather">
                       <use href="/static/feather-sprite.svg#x-circle" />
@@ -126,4 +127,12 @@
     </div>
   </div>
 </section>
+
+<script>
+  const fireConfirmModal = (event) => {
+    Swal.fire({title: 'Den Nutzer wirklich löschen?', showCancelButton: true, cancelButtonText: 'Abbrechen', icon: 'warning', confirmButtonText: "Löschen", showCloseButton: true})
+      .then((result) => {if (result.isConfirmed) {htmx.trigger(event.target, 'confirmed');} });
+  }
+
+</script>
 {% endblock %}