transition

front/js/bootstrap.js

@@ -5,6 +5,9 @@
  */
 
 import axios from "axios";
+import {loadHtmxFormsBehaviour} from "./htmx-form.js";
+
+loadHtmxFormsBehaviour();
 window.axios = axios;
 export const axiosInstance = axios;
 

front/js/htmx-form.js

@@ -0,0 +1,24 @@
+export function loadHtmxFormsBehaviour(){
+    document.querySelectorAll(".form").forEach(el => {
+        initHtmxForm(el);
+    })
+
+}
+
+function initHtmxForm(el){
+    el.addEventListener("htmx:responseError", (e) => {
+        el.querySelector(".form-errors").innerHTML = e.detail.xhr.response;
+    });
+
+    const formEl = el.querySelector("form");
+
+    if(!formEl.getAttribute("hx-redirect")){
+        return;
+    }
+    el.addEventListener("htmx:afterOnLoad", (e) => {
+        if(e.detail.successful){
+            return window.location.href = formEl.getAttribute("hx-redirect");
+        }
+    });
+
+}

front/js/main.js

@@ -4,6 +4,7 @@ import Account from "./svelte/Account.svelte";
 import Channel from "./svelte/Channel.svelte";
 import * as bootstrap from "bootstrap";
 import Mustache from "mustache";
+import 'htmx.org';
 
 Mustache.escape = function (value) {
     return value;