Styles and state improvements for login form

src/controller/mod.rs

@@ -1,5 +1,7 @@
+use std::time::Duration;
+
 use maud::Markup;
-use rocket::{http::Status, response::Redirect};
+use rocket::{form::Form, http::Status, response::Redirect, tokio::time::sleep};
 
 mod utils;
 
@@ -19,7 +21,23 @@ pub fn new_definition_redirect() -> Redirect {
     Redirect::to("/login")
 }
 
+#[derive(FromForm)]
+pub struct LoginData {
+    pub login_email: String,
+    pub login_password: String,
+}
+
+
 #[get("/login")]
 pub fn login_page() -> Markup {
     crate::view::login::login()
 }
+
+#[post("/login", data = "<data>")]
+pub async fn login(data: Form<LoginData>) -> (Status, String) {
+    println!("begin request: {}", data.login_email);
+    // Simulate trip to db
+    sleep(Duration::new(5, 0)).await;
+    println!("end request: {}", data.login_password);
+    (Status::Ok, ":D".into())
+}

src/main.rs

@@ -16,6 +16,7 @@ fn rocket() -> _ {
                 controller::new_definition,
                 controller::new_definition_redirect,
                 controller::login_page,
+                controller::login,
             ],
         )
         .mount("/static", FileServer::from(relative!("static")))

src/view/login.rs

@@ -12,21 +12,40 @@ pub fn login() -> Markup {
                 p class="my-4 p-2 rounded bg-c-bg-2 text-c-on-bg" {
                     "¡Iniciá sesión para comenzar a crear definiciones!"
                 }
-                div class="my-4 py-4 px-2 rounded bg-c-bg-2 text-c-on-bg" {
+                form class="my-4 py-4 px-2 rounded bg-c-bg-2 text-c-on-bg"
+                    "hx-post"="/login"
+                {
                     div class="py-2" {
                         label class="text-sm opacity-85" for="login-email" {"Correo electronico:"}
                         br;
-                        input class="inline-block w-full rounded bg-c-bg text-c-on-bg py-2 px-1" id="login-email";
+                        input 
+                            class="inline-block w-full rounded bg-c-bg text-c-on-bg py-2 px-1
+                                disabled:cursor-not-allowed disabled:opacity-50 transition-opacity"
+                            id="login-email" name="login_email" type="email"
+                            required
+                            data-loading-disable="true";
                     }
 
                     div class="py-2" {
                         label class="text-sm opacity-85" for="login-password" {"Contraseña:"}
                         br;
-                        input class="inline-block w-full rounded bg-c-bg text-c-on-bg py-2 px-1" id="login-password";
+                        input 
+                            class="inline-block w-full rounded bg-c-bg text-c-on-bg py-2 px-1 
+                                disabled:cursor-not-allowed disabled:opacity-50 transition-opacity"
+                            id="login-password" name="login_password" type="password"
+                            min="8"
+                            max="64"
+                            required
+                            data-loading-disable="true";
                     }
 
                     div class="text-center pt-2" {
-                        button type="submit" class="py-1 px-2 rounded bg-c-primary text-c-on-primary hover:underline" {
+                        button 
+                            type="submit" 
+                            class="py-1 px-2 rounded bg-c-primary text-c-on-primary hover:underline 
+                                disabled:cursor-not-allowed disabled:animate-pulse"
+                            data-loading-disable
+                        {
                             "Iniciar sesión"
                         }
                     }

src/view/mod.rs

@@ -21,10 +21,13 @@ pub fn skeleton(body: Markup) -> Markup {
                 link rel="preconnect" href="https://fonts.googleapis.com";
                 link rel="preconnect" href="https://fonts.gstatic.com" crossorigin;
                 link href="https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet";
+                // htmx
+                script src="https://unpkg.com/htmx.org@2.0.0" {}
+                script src="https://unpkg.com/htmx-ext-loading-states@2.0.0/loading-states.js" {}
                 // hyperscript
                 script src="https://unpkg.com/hyperscript.org@0.9.12" defer {}
             }
-            body {
+            body hx-ext="loading-states" {
                 (body)
             }
         }

static/tailwind.css

@@ -31,3 +31,8 @@ html {
     font-family: "Radio Canada Big", sans-serif;
     font-optical-sizing: auto;
 }
+
+/* htmx: data-loading extension */
+[data-loading] {
+  display: none;
+}