Add sample alpine & htmx code for interactivity

.vscode/settings.json

@@ -3,4 +3,5 @@
         "rust": "html"
     },
     "rust-analyzer.showUnlinkedFileNotification": false,
+    "tailwindCSS.classAttributes": ["class", "classes"]
 }

src/controller/user.rs

@@ -3,8 +3,8 @@ use rocket::{form::Form, http::Status};
 
 #[derive(FromForm, Debug)]
 pub struct UserCreate {
-    pub user_names: String,
-    pub user_surnames: String,
+    pub user_name: String,
+    pub user_surname: String,
     pub user_email: String,
     pub user_password: String,
 }
@@ -16,7 +16,10 @@ pub async fn create_user(user: Form<UserCreate>) -> (Status, Markup) {
 
     if email_domain != "eegsac.com" {
         return (Status::BadRequest, html! {
-            div id="user_create_response" class="bg-red-500 text-white p-2 rounded" {
+            div id="user_create_response" 
+                class="bg-red-500 text-white p-2 rounded transition-opacity"
+                classes="add opacity-0:5s, add hidden:1s"
+            {
                 "El dominio del correo electrónico debe ser eegsac.com"
             }
         });
@@ -25,7 +28,12 @@ pub async fn create_user(user: Form<UserCreate>) -> (Status, Markup) {
 
 
     (Status::Ok, html! {
-        div id="user_create_response" class="bg-green-700 text-white p-2 rounded" {
+        div id="user_create_response"
+            class="bg-green-700 text-white p-2 rounded transition-opacity"
+            classes="add opacity-0:5s, add hidden:1s"
+            // Reset the form state
+            x-init="user_name = ''; user_surname = ''; user_email = ''; user_password = '';"
+        {
             "Registrado con éxito"
         }
     })

src/view/mod.rs

@@ -11,9 +11,14 @@ pub fn index() -> Markup {
                 link rel="icon" type="image/png" href="/static/img/favicon.png";
                 script defer src="https://unpkg.com/htmx.org@1.9.10" crossorigin="anonymous" {}
                 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" {}
             }
-            body hx-ext="response-targets" {
+            body hx-ext="response-targets, class-tools" {
                 h1 { "Registrar nuevo usuario" }
+                div
+                    x-data="{user_name: '', user_surname: '', user_email: '', user_password: ''}"
+                {                
                     form
                         hx-post="/f/user"
                         hx-target="#user_create_response"
@@ -21,22 +26,33 @@ pub fn index() -> Markup {
                         hx-swap="outerHTML"
                     {
                         input class="bg-c-bg text-c-on-bg border border-c-on-bg" 
-                        required type="text" name="user_names" placeholder="Nombres";
+                            required type="text" name="user_name" placeholder="Nombres"
+                            x-model="user_name";
                         br;
                         input class="bg-c-bg text-c-on-bg border border-c-on-bg"
-                        required type="text" name="user_surnames" placeholder="Apellidos";
+                            required type="text" name="user_surname" placeholder="Apellidos"
+                            x-model="user_surname";
                         br;
                         input class="bg-c-bg text-c-on-bg border border-c-on-bg"
-                        required type="email" name="user_email" placeholder="Correo electrónico";
+                            required type="email" name="user_email" placeholder="Correo electrónico"
+                            x-model="user_email";
                         br;
                         input class="bg-c-bg text-c-on-bg border border-c-on-bg"
-                        required type="password" name="user_password" placeholder="Contraseña";
+                            required type="password" name="user_password" placeholder="Contraseña"
+                            x-model="user_password";
                         br;
-                    input type="submit" value="Registrar";
+                        button
+                            class="bg-pink-300 text-black py-2 px-4 rounded-full cursor-pointer inline-block my-2" 
+                            type="submit" 
+                        {
+                            img class="inline-block htmx-indicator" src="/static/svg/loader.svg";
+                            "Registrar"
+                        }
                     }
                     br;
                     div id="user_create_response" {}
                 }
             }
         }
+    }
 }

static/svg/loader.svg

@@ -0,0 +1,31 @@
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="#fff" offset="100%"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </path>
+            <circle fill="#fff" cx="36" cy="18" r="1">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>