From 2b763406087f0f929d240d9ebbdca0d2bf9d9461 Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Fri, 23 Feb 2024 21:03:10 -0500
Subject: [PATCH] changes to login 	modified:   src/pages/login.rs 
 modified:   src/pages/signup.rs 	modified:   style/login.scss 
 modified:   style/signup.scss

---
 src/pages/login.rs  | 21 ++++++++++++++++++-
 src/pages/signup.rs |  1 +
 style/login.scss    | 49 +++++++++++++++++++++++++++------------------
 style/signup.scss   |  6 ++++--
 4 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/pages/login.rs b/src/pages/login.rs
index 60b8a92..8ba0c1e 100644
--- a/src/pages/login.rs
+++ b/src/pages/login.rs
@@ -2,6 +2,7 @@ use crate::auth::login;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::IoIcon::*;
+use leptos_icons::AiIcon::*;
 use leptos_icons::*;
 
 #[component]
@@ -9,6 +10,13 @@ pub fn Login() -> impl IntoView {
     let (username_or_email, set_username_or_email) = create_signal("".to_string());
     let (password, set_password) = create_signal("".to_string());
 
+    let (show_password, set_show_password) = create_signal(false);
+
+    let toggle_password = move |_| {
+        set_show_password.update(|show_password| *show_password = !*show_password);
+        log!("showing password");
+    };
+
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
         ev.prevent_default();
 
@@ -49,7 +57,7 @@ pub fn Login() -> impl IntoView {
                         <i></i>
                     </div>
                     <div class="input-box">
-                        <input class="login-password" type="text" required
+                        <input class="login-password"  type={move || if show_password() { "text" } else { "password"} } required
                         on:input = move |ev| {
                             set_password(event_target_value(&ev));
                             log!("password changed to: {}", password.get());
@@ -57,6 +65,17 @@ pub fn Login() -> impl IntoView {
                         />
                         <span>Password</span>
                         <i></i>
+                        <Show
+                            when=move || {show_password() == false}
+                            fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility">
+                                                  <Icon icon=Icon::from(AiEyeInvisibleFilled) />
+                                               </button> /> }
+                        >
+                            <button on:click=toggle_password class="login-password-visibility">
+                                <Icon icon=Icon::from(AiEyeFilled) />
+                            </button>
+
+                        </Show>
                     </div>
                     <a href="" class="forgot-pw">Forgot Password?</a>
                     <input type="submit" value="Login" />
diff --git a/src/pages/signup.rs b/src/pages/signup.rs
index 1b79e66..8485968 100644
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@@ -92,6 +92,7 @@ pub fn Signup() -> impl IntoView {
                         </Show>
 
                     </div>
+                    
                     <input type="submit" value="Sign Up"  />
                     <span class="go-to-login">
                         Already Have an Account? <a href="/login">Go to Login</a>
diff --git a/style/login.scss b/style/login.scss
index 475a1ad..18bdbf9 100644
--- a/style/login.scss
+++ b/style/login.scss
@@ -1,20 +1,20 @@
-@import 'theme.scss';
+@import "theme.scss";
 
 .login-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 27rem;
-    height: 30rem;
-    transform: translate(-50%, -50%);
-    background: purple;
-    z-index: 1;
-    border-radius: 8px;
-    overflow: hidden;
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 27rem;
+  height: 30rem;
+  transform: translate(-50%, -50%);
+  background: purple;
+  z-index: 1;
+  border-radius: 8px;
+  overflow: hidden;
+}
 
 .login-container .header h1 {
   margin-top: 3rem;
@@ -25,7 +25,7 @@
   width: 75%;
 }
 .login-form .input-box:first-child {
-  margin-top: .5rem;
+  margin-top: 1rem;
 }
 .login-form .input-box {
   position: relative;
@@ -87,7 +87,7 @@
 .login-form .forgot-pw {
   display: inline-flex;
   margin-top: 3px;
-  font-size: .9rem;
+  font-size: 0.9rem;
   cursor: pointer;
   color: #8f8f8f;
   text-decoration: underline;
@@ -110,7 +110,7 @@
 }
 .login-form .go-to-signup {
   color: #8f8f8f;
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
 .login-form .go-to-signup a {
   cursor: pointer;
@@ -133,8 +133,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: .3rem;
+  padding: 0.3rem;
 }
 .login-container .return:hover {
   background-color: rgba(0, 0, 0, 0.4);
 }
+.login-password-visibility {
+  position: absolute;
+  font-size: 1.7rem;
+  top: 28%;
+  right: 5px;
+  z-index: 5;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  color: white;
+}
diff --git a/style/signup.scss b/style/signup.scss
index 1461569..7ca0f10 100644
--- a/style/signup.scss
+++ b/style/signup.scss
@@ -28,7 +28,7 @@
   margin-top: 3rem;
 }
 .signup-form .input-box:first-child {
-  margin-top: 1rem;
+  margin-top: 0.7rem;
 }
 .signup-form .input-box input {
   position: relative;
@@ -126,7 +126,6 @@
 .signup-container .return:hover {
   background-color: rgba(0, 0, 0, 0.4);
 }
-
 .password-visibility {
   position: absolute;
   font-size: 1.7rem;
@@ -138,3 +137,6 @@
   background-color: transparent;
   color: white;
 }
+.pw-requirements {
+  font-size: 0.7rem;
+}