Use extensions instead of alpine to manage form state

README.md

@@ -0,0 +1,13 @@
+# EEGSAC internal system
+
+The HARM MVC stack:
+
+- Htmx
+- Alpine
+- Rust
+    - Rocket
+    - Sqlx
+    - Maud
+- MySql
+
+

src/view/mod.rs

@@ -13,8 +13,9 @@ pub fn index() -> Markup {
                 script defer src="https://unpkg.com/htmx.org/dist/ext/response-targets.js" {}
                 script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" {}
                 script defer src="https://unpkg.com/htmx.org/dist/ext/class-tools.js" {}
+                script defer src="https://unpkg.com/htmx.org/dist/ext/loading-states.js" {}
             }
-            body hx-ext="response-targets, class-tools" {
+            body hx-ext="response-targets, class-tools, loading-states" {
                 h1 { "Registrar nuevo usuario" }
                 div
                     x-data="{user_name: '', user_surname: '', user_email: '', user_password: ''}"
@@ -25,27 +26,26 @@ pub fn index() -> Markup {
                         hx-target-400="#user_create_response"
                         hx-swap="outerHTML"
                     {
-                        input class="bg-c-bg text-c-on-bg border border-c-on-bg" 
+                        input class="bg-c-bg text-c-on-bg border border-c-on-bg disabled:opacity-50"
                             required type="text" name="user_name" placeholder="Nombres"
-                            x-model="user_name";
+                            data-loading-disable x-model="user_name";
                         br;
-                        input class="bg-c-bg text-c-on-bg border border-c-on-bg"
+                        input class="bg-c-bg text-c-on-bg border border-c-on-bg disabled:opacity-50"
                             required type="text" name="user_surname" placeholder="Apellidos"
-                            x-model="user_surname";
+                            data-loading-disable x-model="user_surname";
                         br;
-                        input class="bg-c-bg text-c-on-bg border border-c-on-bg"
+                        input class="bg-c-bg text-c-on-bg border border-c-on-bg disabled:opacity-50"
                             required type="email" name="user_email" placeholder="Correo electrónico"
-                            x-model="user_email";
+                            data-loading-disable x-model="user_email";
                         br;
-                        input class="bg-c-bg text-c-on-bg border border-c-on-bg"
+                        input class="bg-c-bg text-c-on-bg border border-c-on-bg disabled:opacity-50"
                             required type="password" name="user_password" placeholder="Contraseña"
-                            x-model="user_password";
+                            data-loading-disable x-model="user_password";
                         br;
                         button
-                            class="bg-pink-300 text-black py-2 px-4 rounded-full cursor-pointer inline-block my-2" 
+                            class="bg-pink-300 text-black py-2 px-4 rounded-full cursor-pointer inline-block my-2 disabled:opacity-50"
-                            type="submit" 
+                            data-loading-class="animate-pulse" type="submit" 
                         {
-                            img class="inline-block htmx-indicator" src="/static/svg/loader.svg";
                             "Registrar"
                         }
                     }

static/css/input.css

@@ -7,6 +7,13 @@
     --c-on-bg: #dedede;
 }
 
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-bg: #fafaf0;
+        --c-on-bg: #101010;
+    }
+}
+
 html {
     background-color: var(--c-bg);
     color: var(--c-on-bg);