From b8bdebfc587c36ec64f418f20a0cbee567246a6b Mon Sep 17 00:00:00 2001 From: Araozu Date: Fri, 9 Feb 2024 21:42:15 -0500 Subject: [PATCH] Add sample alpine & htmx code for interactivity --- .vscode/settings.json | 1 + src/controller/user.rs | 16 +++++++++--- src/view/mod.rs | 58 +++++++++++++++++++++++++++--------------- static/svg/loader.svg | 31 ++++++++++++++++++++++ 4 files changed, 81 insertions(+), 25 deletions(-) create mode 100644 static/svg/loader.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 3b3d33b..ccd6020 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,4 +3,5 @@ "rust": "html" }, "rust-analyzer.showUnlinkedFileNotification": false, + "tailwindCSS.classAttributes": ["class", "classes"] } diff --git a/src/controller/user.rs b/src/controller/user.rs index c2dbb3c..bb0f7d9 100644 --- a/src/controller/user.rs +++ b/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) -> (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) -> (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" } }) diff --git a/src/view/mod.rs b/src/view/mod.rs index 85fcd5e..c3639e1 100644 --- a/src/view/mod.rs +++ b/src/view/mod.rs @@ -11,31 +11,47 @@ 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" } - form - hx-post="/f/user" - hx-target="#user_create_response" - hx-target-400="#user_create_response" - 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"; + div + x-data="{user_name: '', user_surname: '', user_email: '', user_password: ''}" + { + form + hx-post="/f/user" + hx-target="#user_create_response" + hx-target-400="#user_create_response" + hx-swap="outerHTML" + { + input class="bg-c-bg text-c-on-bg border border-c-on-bg" + 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_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" + 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" + 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" + { + img class="inline-block htmx-indicator" src="/static/svg/loader.svg"; + "Registrar" + } + } br; - input class="bg-c-bg text-c-on-bg border border-c-on-bg" - required type="text" name="user_surnames" placeholder="Apellidos"; - 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"; - br; - 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"; + div id="user_create_response" {} } - br; - div id="user_create_response" {} } } } diff --git a/static/svg/loader.svg b/static/svg/loader.svg new file mode 100644 index 0000000..bf56bcd --- /dev/null +++ b/static/svg/loader.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file