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

Reviewed-on: LibreTunes/LibreTunes#154

src/pages/login.rs

@@ -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>
+                    <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>

src/pages/signup.rs

@@ -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>
+                    <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>

style/login.scss

@@ -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%;

style/signup.scss

@@ -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%;

style/theme.scss

@@ -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;