eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Merge pull request 'Indicate loading and errors on login/signup pages' (#154) from 147-indicate-loading-and-errors-on-loginsignup into main

Browse Source 
Reviewed-on: LibreTunes/LibreTunes#154
This commit is contained in:
Ethan Girouard 2024-11-23 06:15:25 +00:00
commit aced8723c2
5 changed files with 60 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/login.rs
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>

18
src/pages/signup.rs
View File

@ -4,6 +4,7 @@ use crate::util::state::GlobalState;
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use crate::components::loading::Loading;
#[component]
pub fn Signup() -> impl IntoView {
@ -13,6 +14,9 @@ pub fn Signup() -> 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");
@ -30,12 +34,16 @@ pub fn Signup() -> impl IntoView {
};
log!("new user: {:?}", new_user);
loading.set(true);
error_msg.set(None);
let user = GlobalState::logged_in_user();
spawn_local(async move {
if let Err(err) = signup(new_user.clone()).await {
// Handle the error here, e.g., log it or display to the user
log!("Error signing up: {:?}", err);
error_msg.set(Some(err.to_string()));
// Since we're not sure what the state is, manually refetch the user
user.refetch();
@ -49,6 +57,8 @@ pub fn Signup() -> impl IntoView {
leptos_router::use_navigate()("/", Default::default());
log!("Navigated to home page after signup")
}
loading.set(false);
});
};
@ -99,7 +109,13 @@ pub fn Signup() -> impl IntoView {
</button>
</Show>
</div>
<input type="submit" value="Sign Up" />
<div class="error-msg">{ move || error_msg.get() }</div>
<Show
when=move || !loading.get()
fallback=move || view!{ <Loading /> }
>
<input type="submit" value="Sign Up" />
</Show>
<span class="go-to-login">
Already Have an Account? <a href="/login" class="link" >Go to Login</a>
</span>

13
style/login.scss
View File

@ -8,7 +8,7 @@
top: 50%;
left: 50%;
width: 27rem;
height: 30rem;
height: 31rem;
transform: translate(-50%, -50%);
background: $auth-containers;
z-index: 1;
@ -96,6 +96,17 @@
color: #fff;
transition: all 0.2s;
}
.login-form .error-msg {
color: $error-color;
margin-top: 1rem;
height: 1rem;
}
.login-form .loading {
margin-top: 4.5rem;
margin-left: auto;
margin-right: auto;
margin-bottom: calc(1.5rem - 10px);
}
.login-form input[type="submit"] {
margin-top: 3rem;
width: 100%;

14
style/signup.scss
View File

@ -17,7 +17,7 @@
top: 50%;
left: 50%;
width: 27rem;
height: 35rem;
height: 36rem;
transform: translate(-50%, -50%);
background: $auth-containers;
z-index: 1;
@ -92,7 +92,17 @@
.signup-form .input-box input:focus ~ i {
height: 2.6rem;
}
.signup-form .error-msg {
color: $error-color;
margin-top: 1rem;
height: 1rem;
}
.signup-form .loading {
margin-top: 4.5rem;
margin-left: auto;
margin-right: auto;
margin-bottom: calc(1.5rem - 10px);
}
.signup-form input[type="submit"] {
margin-top: 3.5rem;
width: 100%;

1
style/theme.scss
View File

@ -12,6 +12,7 @@ $play-grad-start: #0a0533;
$play-grad-end: $accent-color;
$border-color: #7851ed;
$queue-background-color: $play-bar-background-color;
$error-color: red;
$auth-inputs: #796dd4;
$auth-containers: white;