From ac416e9517dae8802dbad8fc36e609d38eb6cefb Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Sat, 10 Feb 2024 06:41:32 -0500
Subject: [PATCH] Use extensions instead of alpine to manage form state

---
 README.md            | 13 +++++++++++++
 src/view/mod.rs      | 24 ++++++++++++------------
 static/css/input.css |  7 +++++++
 3 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..621f159
--- /dev/null
+++ b/README.md
@@ -0,0 +1,13 @@
+# EEGSAC internal system
+
+The HARM MVC stack:
+
+- Htmx
+- Alpine
+- Rust
+    - Rocket
+    - Sqlx
+    - Maud
+- MySql
+
+
diff --git a/src/view/mod.rs b/src/view/mod.rs
index c3639e1..5620db3 100644
--- a/src/view/mod.rs
+++ b/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" 
-                            type="submit" 
+                            class="bg-pink-300 text-black py-2 px-4 rounded-full cursor-pointer inline-block my-2 disabled:opacity-50"
+                            data-loading-class="animate-pulse" type="submit" 
                         {
-                            img class="inline-block htmx-indicator" src="/static/svg/loader.svg";
                             "Registrar"
                         }
                     }
diff --git a/static/css/input.css b/static/css/input.css
index feda6b1..5e02c42 100644
--- a/static/css/input.css
+++ b/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);