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

Add loading and error messages to signup page

Browse Source
This commit is contained in:
Ethan Girouard 2024-11-23 00:57:29 -05:00
parent 930618dcad
commit ede248d961
Signed by: eta357
GPG Key ID: 7BCDC36DFD11C146
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/signup.rs
View File

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

14
style/signup.scss
View File

@ -17,7 +17,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 27rem; width: 27rem;
height: 35rem; height: 36rem;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: $auth-containers; background: $auth-containers;
z-index: 1; z-index: 1;
@ -92,7 +92,17 @@
.signup-form .input-box input:focus ~ i { .signup-form .input-box input:focus ~ i {
height: 2.6rem; 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"] { .signup-form input[type="submit"] {
margin-top: 3.5rem; margin-top: 3.5rem;
width: 100%; width: 100%;