Add loading and error messages to login page

This commit is contained in:
2024-11-23 00:46:30 -05:00
parent 9b48fc0204
commit 930618dcad
3 changed files with 31 additions and 2 deletions

View File

@ -4,6 +4,7 @@ use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use crate::users::UserCredentials;
use crate::components::loading::Loading;
#[component]
pub fn Login() -> impl IntoView {
@ -12,6 +13,9 @@ pub fn Login() -> impl IntoView {
let (show_password, set_show_password) = create_signal(false);
let loading = create_rw_signal(false);
let error_msg = create_rw_signal(None);
let toggle_password = move |_| {
set_show_password.update(|show_password| *show_password = !*show_password);
log!("showing password");
@ -24,6 +28,9 @@ pub fn Login() -> impl IntoView {
let password1 = password.get();
spawn_local(async move {
loading.set(true);
error_msg.set(None);
let user_credentials = UserCredentials {
username_or_email: username_or_email1,
password: password1
@ -35,6 +42,7 @@ pub fn Login() -> impl IntoView {
if let Err(err) = login_result {
// Handle the error here, e.g., log it or display to the user
log!("Error logging in: {:?}", err);
error_msg.set(Some(err.to_string()));
// Since we're not sure what the state is, manually refetch the user
user.refetch();
@ -48,10 +56,13 @@ pub fn Login() -> impl IntoView {
log!("Navigated to home page after login");
} else if let Ok(None) = login_result {
log!("Invalid username or password");
error_msg.set(Some("Invalid username or password".to_string()));
// User could be already logged in or not, so refetch the user
user.refetch();
}
loading.set(false);
});
};
@ -96,7 +107,13 @@ pub fn Login() -> impl IntoView {
</Show>
</div>
<a href="" class="forgot-pw">Forgot Password?</a>
<input type="submit" value="Login" />
<div class="error-msg" >{ move || error_msg.get() }</div>
<Show
when=move || !loading.get()
fallback=move || view! { <Loading /> }
>
<input type="submit" value="Login" />
</Show>
<span class="go-to-signup">
New here? <a href="/signup">Create an Account</a>
</span>