navigation to home page after login and signup

src/pages/login.rs

@@ -4,7 +4,6 @@ use leptos::*;
 use leptos_icons::AiIcon::*;
 use leptos_icons::IoIcon::*;
 use leptos_icons::*;
-use leptos_router::*;
 
 #[component]
 pub fn Login() -> impl IntoView {
@@ -18,16 +17,12 @@ pub fn Login() -> impl IntoView {
         log!("showing password");
     };
 
-    let navigate = leptos_router::use_navigate();
-
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
         ev.prevent_default();
 
         let username_or_email1 = username_or_email.get();
         let password1 = password.get();
 
-        let mut success: bool = false;
-
         spawn_local(async move {
             let login_result = login(username_or_email1, password1).await;
             if let Err(err) = login_result {
@@ -36,15 +31,12 @@ pub fn Login() -> impl IntoView {
             } else if let Ok(true) = login_result {
                 // Redirect to the login page
                 log!("Logged in Successfully!");
-                success = true;
+                leptos_router::use_navigate()("/", Default::default());
+                log!("Navigated to home page after login");
             } else if let Ok(false) = login_result {
                 log!("Invalid username or password");
             }
         });
-        if success {
-            navigate("/", Default::default());
-            log!("navigated to home after login");
-        }
     };
 
     view! {

src/pages/signup.rs

@@ -31,10 +31,8 @@ pub fn Signup() -> impl IntoView {
             password: Some(password.get()),
             created_at: None,
         };
-
-        let mut success: bool = false;
-
         log!("new user: {:?}", new_user);
+
         spawn_local(async move {
             if let Err(err) = signup(new_user).await {
                 // Handle the error here, e.g., log it or display to the user
@@ -42,13 +40,10 @@ pub fn Signup() -> impl IntoView {
             } else {
                 // Redirect to the login page
                 log!("Signed up successfully!");
-                success = true;
+                leptos_router::use_navigate()("/", Default::default());
+                log!("Navigated to home page after signup")
             }
         });
-        if success {
-            navigate("/", Default::default());
-            log!("navigated to home after signup");
-        }
     };
 
     view! {
@@ -100,7 +95,7 @@ pub fn Signup() -> impl IntoView {
                     </div>
                     <input type="submit" value="Sign Up"  />
                     <span class="go-to-login">
-                        Already Have an Account? <a href="/login">Go to Login</a>
+                        Already Have an Account? <a href="/login" class="link" >Go to Login</a>
                     </span>
                 </form>
             </div>

style/login.scss

@@ -10,7 +10,7 @@
   width: 27rem;
   height: 30rem;
   transform: translate(-50%, -50%);
-  background: purple;
+  background: $auth-containers;
   z-index: 1;
   border-radius: 8px;
   overflow: hidden;

style/signup.scss

@@ -10,7 +10,7 @@
   width: 27rem;
   height: 35rem;
   transform: translate(-50%, -50%);
-  background: purple;
+  background: $auth-containers;
   z-index: 1;
   border-radius: 8px;
   overflow: hidden;
@@ -61,7 +61,7 @@
 }
 .signup-form .input-box input:valid ~ span,
 .signup-form .input-box input:focus ~ span {
-  color: #2c1308;
+  color: #a8a2b0;
   font-size: 1rem;
   transform: translateY(-30px);
   font-weight: 400;
@@ -72,7 +72,7 @@
   bottom: 0;
   width: 100%;
   height: 2px;
-  background: #907163;
+  background: $auth-inputs;
   border-radius: 4px;
   overflow: hidden;
   transition: 0.5s;
@@ -100,12 +100,12 @@
   color: #8f8f8f;
   font-size: 0.9rem;
 }
-.signup-form .go-to-login span {
+.signup-form .go-to-login a {
   cursor: pointer;
   color: #8f8f8f;
   text-decoration: underline;
 }
-.signup-form .go-to-login span:hover {
+.signup-form .go-to-login a:hover {
   color: #fff;
   transition: all 0.2s;
 }

style/theme.scss

@@ -7,3 +7,5 @@ $play-bar-background-color: #212121;
 $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
 
+$auth-inputs: #86659e;
+$auth-containers: #ccc9d1;