feat: add notifications

web/src/endpoints/user/post_resend_registration.rs

@@ -1,4 +1,5 @@
 use actix_web::{web, HttpResponse, Responder};
+use serde_json::json;
 use sqlx::PgPool;
 
 use crate::{
@@ -38,5 +39,15 @@ pub async fn post(
         .send_registration_mail(&user_in_db, &registration.token)
         .await?;
 
-    Ok(HttpResponse::NoContent().finish())
+    let trigger = json!({
+        "showToast": {
+            "type": "success",
+            "message": "Registrierungsmail erfolgreich versendet!"
+        }
+    })
+    .to_string();
+
+    Ok(HttpResponse::NoContent()
+        .insert_header(("HX-TRIGGER", trigger))
+        .finish())
 }

web/static/style.scss

@@ -42,6 +42,7 @@ $primary: $crimson,
 @forward "bulma/sass/helpers/spacing";
 @forward "bulma/sass/helpers/flexbox";
 @forward "bulma/sass/helpers/color";
+@forward "bulma/sass/helpers/visibility";
 
 // Import the themes so that all CSS variables have a value
 @forward "bulma/sass/themes";
@@ -62,6 +63,7 @@ $primary: $crimson,
   vertical-align: middle;
 }
 
+// TODO: refactor into bulmas is-hidden?
 .result {
   visibility: hidden;
 }
@@ -72,6 +74,7 @@ $primary: $crimson,
   transition: opacity 2s ease-in;
 }
 
+// TODO: refactor into bulmas is-hidden?
 section.htmx-request {
   visibility: hidden;
 }
@@ -81,3 +84,30 @@ a.dropdown-item[disabled] {
     cursor: default;
     pointer-events: none;
 }
+
+#toast {
+  position: fixed;
+  padding: 0 1px;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
+}
+
+#toast-message {
+  padding: 17px 21px 22px 21px;
+}
+
+#toast-progress {
+    height: 5px;
+    position: relative;
+    animation: progressBar 3s ease-in-out;
+    animation-iteration-count: infinite;
+    animation-fill-mode:both;
+    border-radius: 20px 20px 0 0;
+}
+
+@keyframes progressBar {
+    0% { width: 0; }
+    100% { width: 100%; }
+}
+

web/static/utils.js

@@ -79,3 +79,20 @@ const isCurrentlyLight = getCurrentTheme() === "light";
 document.documentElement.setAttribute("data-theme", isCurrentlyLight ? "light" : "dark");
 document.getElementById("theme-switcher")?.addEventListener("click", switchTheme);
 setThemeSwitcherIconTo(isCurrentlyLight ? "moon" : "sun");
+
+// toast
+htmx.on("showToast", (e) => {
+	const toast = document.getElementById("toast");
+	const toastProgress = document.getElementById("toast-progress");
+	document.getElementById("toast-message").innerText = e.detail.message;
+
+	toast.classList.add(`is-${e.detail.type}`);
+	toastProgress.classList.add(`has-background-${e.detail.type}-90`)
+	toast.classList.remove("is-hidden");
+
+	setTimeout(() => {
+		toast.classList.add("is-hidden");
+		toast.classList.remove(`is-${e.detail.type}`);
+		toastProgress.classList.remove(`has-background-${e.detail.type}-90`)
+	}, 3000);
+})

web/templates/nav.html

@@ -91,6 +91,11 @@
   </section>
 </noscript>
 
+<div class="notification is-hidden" id="toast">
+  <div id="toast-progress"></div>
+  <div id="toast-message"></div>
+</div>
+
 {% block content %}
 {% endblock %}
 {% endblock %}