Minimal htmx form

src/controller/user.rs

@@ -1,5 +1,5 @@
 use maud::{Markup, html};
-use rocket::form::Form;
+use rocket::{form::Form, http::Status};
 
 #[derive(FromForm, Debug)]
 pub struct UserCreate {
@@ -10,10 +10,23 @@ pub struct UserCreate {
 }
 
 #[post("/user", data = "<user>")]
-pub async fn create_user(user: Form<UserCreate>) -> Markup {
-    println!("Got a user: {:?}", user);
+pub async fn create_user(user: Form<UserCreate>) -> (Status, Markup) {
+    // Email domain must be eegsac.com
+    let email_domain = user.user_email.split('@').collect::<Vec<&str>>()[1];
 
-    html! {
-        ":D"
+    if email_domain != "eegsac.com" {
+        return (Status::BadRequest, html! {
+            div id="user_create_response" class="bg-red-500 text-white p-2 rounded" {
+                "El dominio del correo electrónico debe ser eegsac.com"
+            }
+        });
     }
+
+
+
+    (Status::Ok, html! {
+        div id="user_create_response" class="bg-green-700 text-white p-2 rounded" {
+            "Registrado con éxito"
+        }
+    })
 }

src/view/mod.rs

@@ -8,24 +8,34 @@ pub fn index() -> Markup {
             head {
                 title { "EEGSAC" }
                 link rel="stylesheet" type="text/css" href="/static/css/output.css";
+                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" {}
             }
-            body {
+            body hx-ext="response-targets" {
                 h1 { "Registrar nuevo usuario" }
                 form
-                    action="/f/user"
-                    method="post"
+                    hx-post="/f/user"
+                    hx-target="#user_create_response"
+                    hx-target-400="#user_create_response"
+                    hx-swap="outerHTML"
                 {
-                    input type="text" name="user_names" placeholder="Nombres";
+                    input class="bg-c-bg text-c-on-bg border border-c-on-bg" 
+                        required type="text" name="user_names" placeholder="Nombres";
                     br;
-                    input type="text" name="user_surnames" placeholder="Apellidos";
+                    input class="bg-c-bg text-c-on-bg border border-c-on-bg"
+                        required type="text" name="user_surnames" placeholder="Apellidos";
                     br;
-                    input type="email" name="user_email" placeholder="Correo electrónico";
+                    input class="bg-c-bg text-c-on-bg border border-c-on-bg"
+                        required type="email" name="user_email" placeholder="Correo electrónico";
                     br;
-                    input type="password" name="user_password" placeholder="Contraseña";
+                    input class="bg-c-bg text-c-on-bg border border-c-on-bg"
+                        required type="password" name="user_password" placeholder="Contraseña";
                     br;
                     input type="submit" value="Registrar";
                 }
+                br;
+                div id="user_create_response" {}
             }
         }
     }

tailwind.config.js

@@ -4,7 +4,12 @@ module.exports = {
         "./src/**/*.{html,rs}",
     ],
     theme: {
-        extend: {},
+        extend: {
+            colors: {
+                "c-bg": "var(--c-bg)",
+                "c-on-bg": "var(--c-on-bg)",
+            }
+        },
     },
     plugins: [],
 }