106 lines
4.3 KiB
Rust
106 lines
4.3 KiB
Rust
use crate::auth::login;
|
|
use leptos::leptos_dom::*;
|
|
use leptos::*;
|
|
use leptos_icons::*;
|
|
use crate::users::UserCredentials;
|
|
use crate::app::LoggedInUserResource;
|
|
|
|
#[component]
|
|
pub fn Login(user: LoggedInUserResource) -> impl IntoView {
|
|
let (username_or_email, set_username_or_email) = create_signal("".to_string());
|
|
let (password, set_password) = create_signal("".to_string());
|
|
|
|
let (show_password, set_show_password) = create_signal(false);
|
|
|
|
let toggle_password = move |_| {
|
|
set_show_password.update(|show_password| *show_password = !*show_password);
|
|
log!("showing password");
|
|
};
|
|
|
|
let on_submit = move |ev: leptos::ev::SubmitEvent| {
|
|
ev.prevent_default();
|
|
|
|
let username_or_email1 = username_or_email.get();
|
|
let password1 = password.get();
|
|
|
|
spawn_local(async move {
|
|
let user_credentials = UserCredentials {
|
|
username_or_email: username_or_email1,
|
|
password: password1
|
|
};
|
|
|
|
let login_result = login(user_credentials).await;
|
|
if let Err(err) = login_result {
|
|
// Handle the error here, e.g., log it or display to the user
|
|
log!("Error logging in: {:?}", err);
|
|
|
|
// Since we're not sure what the state is, manually refetch the user
|
|
user.refetch();
|
|
} else if let Ok(Some(login_user)) = login_result {
|
|
// Manually set the user to the new user, avoiding a refetch
|
|
user.set(Some(login_user));
|
|
|
|
// Redirect to the login page
|
|
log!("Logged in Successfully!");
|
|
leptos_router::use_navigate()("/", Default::default());
|
|
log!("Navigated to home page after login");
|
|
} else if let Ok(None) = login_result {
|
|
log!("Invalid username or password");
|
|
|
|
// User could be already logged in or not, so refetch the user
|
|
user.refetch();
|
|
}
|
|
});
|
|
};
|
|
|
|
view! {
|
|
<div class="auth-page-container">
|
|
<div class="login-container">
|
|
<a class="return" href="/"><Icon icon=icondata::IoReturnUpBackSharp /></a>
|
|
<div class="header">
|
|
<h1>LibreTunes</h1>
|
|
</div>
|
|
<form class="login-form" action="POST" on:submit=on_submit>
|
|
<div class="input-box">
|
|
<input class="login-info" type="text" required
|
|
on:input = move |ev| {
|
|
set_username_or_email(event_target_value(&ev));
|
|
log!("username/email changed to: {}", username_or_email.get());
|
|
}
|
|
prop:value=username_or_email
|
|
/>
|
|
<span>Username/Email</span>
|
|
<i></i>
|
|
</div>
|
|
<div class="input-box">
|
|
<input class="login-password" type={move || if show_password() { "text" } else { "password"} } required
|
|
on:input = move |ev| {
|
|
set_password(event_target_value(&ev));
|
|
log!("password changed to: {}", password.get());
|
|
}
|
|
/>
|
|
<span>Password</span>
|
|
<i></i>
|
|
<Show
|
|
when=move || {show_password() == false}
|
|
fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility">
|
|
<Icon icon=icondata::AiEyeInvisibleFilled />
|
|
</button> /> }
|
|
>
|
|
<button on:click=toggle_password class="login-password-visibility">
|
|
<Icon icon=icondata::AiEyeFilled />
|
|
</button>
|
|
|
|
</Show>
|
|
</div>
|
|
<a href="" class="forgot-pw">Forgot Password?</a>
|
|
<input type="submit" value="Login" />
|
|
<span class="go-to-signup">
|
|
New here? <a href="/signup">Create an Account</a>
|
|
</span>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|