Added auth

frontend/src/pages/login.rs

@@ -0,0 +1,71 @@
+use web_sys::HtmlInputElement;
+use yew::prelude::*;
+
+use crate::api;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub on_login: Callback<()>,
+}
+
+#[function_component(LoginPage)]
+pub fn login_page(props: &Props) -> Html {
+    let username = use_state(String::new);
+    let password = use_state(String::new);
+    let error = use_state(|| None::<String>);
+
+    let on_submit = {
+        let username = username.clone();
+        let password = password.clone();
+        let error = error.clone();
+        let on_login = props.on_login.clone();
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            let u = (*username).clone();
+            let p = (*password).clone();
+            let error = error.clone();
+            let on_login = on_login.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::login(&u, &p).await {
+                    Ok(_) => on_login.emit(()),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        })
+    };
+
+    html! {
+        <div class="auth-page">
+            <div class="auth-card">
+                <h1>{ "Shanty" }</h1>
+                <p class="text-muted">{ "Sign in to continue" }</p>
+
+                if let Some(ref err) = *error {
+                    <div class="error">{ err }</div>
+                }
+
+                <form onsubmit={on_submit}>
+                    <div class="form-group">
+                        <label>{ "Username" }</label>
+                        <input type="text" autocomplete="username" value={(*username).clone()}
+                            oninput={let u = username.clone(); Callback::from(move |e: InputEvent| {
+                                let input: HtmlInputElement = e.target_unchecked_into();
+                                u.set(input.value());
+                            })} />
+                    </div>
+                    <div class="form-group">
+                        <label>{ "Password" }</label>
+                        <input type="password" autocomplete="current-password" value={(*password).clone()}
+                            oninput={let p = password.clone(); Callback::from(move |e: InputEvent| {
+                                let input: HtmlInputElement = e.target_unchecked_into();
+                                p.set(input.value());
+                            })} />
+                    </div>
+                    <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
+                        { "Sign In" }
+                    </button>
+                </form>
+            </div>
+        </div>
+    }
+}