Show error messages in UI if something goes wrong

web/templates/add-user.html

@@ -49,11 +49,4 @@
         <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
     </div>
 </form>
-
-<script>
-    var msg = "{{.Msg}}";
-    if (msg != "") {
-        alert(msg);
-    }
-</script>
 {{end}}

web/templates/editor.html

@@ -64,6 +64,7 @@
                     onSuccess(data);
                 })
                 .catch(error => {
+                    htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
                     onError(error);
                 });
         },

web/templates/first-user.html

@@ -29,11 +29,4 @@
         <input class="action-btn" type="submit" value="Anlegen" hx-post="/user/add-first" hx-target="#page-content" />
     </div>
 </form>
-
-<script>
-    var msg = "{{.Msg}}";
-    if (msg != "") {
-        alert(msg);
-    }
-</script>
 {{end}}

web/templates/index.html

@@ -28,6 +28,10 @@
     </header>
 
     <main class="mx-4">
+        <div class="hidden bg-slate-950 dark:bg-slate-50 fixed font-bold p-4 right-8 rounded-lg shadow-lg text-slate-100 dark:text-slate-900 top-8 z-50"
+            id="notification">
+        </div>
+
         <div id="page-content">
             {{template "page-content" .}}
         </div>
@@ -35,7 +39,7 @@
 
     <footer class="text-center text-gray-500 my-8">
         <p>&copy; 2024 Jason Streifling. Alle Rechte vorbehalten.</p>
-        <p>v0.11.1 - <strong>Alpha: Drastische Änderungen und Fehler vorbehalten.</strong></p>
+        <p>v0.12.0 - <strong>Alpha: Drastische Änderungen und Fehler vorbehalten.</strong></p>
     </footer>
 
     <script src="https://unpkg.com/htmx.org@2.0.2"></script>
@@ -66,6 +70,16 @@
             });
         });
     </script>
+    <script>
+        htmx.on('htmx:responseError', function (event) {
+            var notification = document.getElementById('notification');
+            notification.innerText = event.detail.xhr.responseText;
+            notification.classList.remove('hidden');
+            setTimeout(function () {
+                notification.classList.add('hidden');
+            }, 5000);
+        });
+    </script>
 </body>
 
 </html>