72 lines
2.6 KiB
Rust
72 lines
2.6 KiB
Rust
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>
|
|
}
|
|
}
|