initial commit

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I4a6b498153eccd5407510dd541b7f4816a6a6964

crates/pinakes-ui/src/components/login.rs

@@ -0,0 +1,75 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Login(
+    on_login: EventHandler<(String, String)>,
+    #[props(default)] error: Option<String>,
+    #[props(default = false)] loading: bool,
+) -> Element {
+    let mut username = use_signal(String::new);
+    let mut password = use_signal(String::new);
+
+    let on_submit = {
+        move |_| {
+            let u = username.read().clone();
+            let p = password.read().clone();
+            if !u.is_empty() && !p.is_empty() {
+                on_login.call((u, p));
+            }
+        }
+    };
+
+    let on_key = move |e: KeyboardEvent| {
+        if e.key() == Key::Enter {
+            let u = username.read().clone();
+            let p = password.read().clone();
+            if !u.is_empty() && !p.is_empty() {
+                on_login.call((u, p));
+            }
+        }
+    };
+
+    rsx! {
+        div { class: "login-container",
+            div { class: "login-card",
+                h2 { class: "login-title", "Pinakes" }
+                p { class: "login-subtitle", "Sign in to continue" }
+
+                if let Some(ref err) = error {
+                    div { class: "login-error", "{err}" }
+                }
+
+                div { class: "login-form",
+                    div { class: "form-group",
+                        label { class: "form-label", "Username" }
+                        input {
+                            r#type: "text",
+                            placeholder: "Enter username",
+                            value: "{username}",
+                            disabled: loading,
+                            oninput: move |e: Event<FormData>| username.set(e.value()),
+                            onkeypress: on_key,
+                        }
+                    }
+                    div { class: "form-group",
+                        label { class: "form-label", "Password" }
+                        input {
+                            r#type: "password",
+                            placeholder: "Enter password",
+                            value: "{password}",
+                            disabled: loading,
+                            oninput: move |e: Event<FormData>| password.set(e.value()),
+                            onkeypress: on_key,
+                        }
+                    }
+                    button {
+                        class: "btn btn-primary login-btn",
+                        disabled: loading,
+                        onclick: on_submit,
+                        if loading { "Signing in..." } else { "Sign In" }
+                    }
+                }
+            }
+        }
+    }
+}