From f4bea8aa335a7d245c53ab18644a5f50c5e65e2d Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Fri, 23 Feb 2024 20:31:25 -0500
Subject: [PATCH] made a simple password visibility toggler 	modified:  
 Cargo.lock 	modified:   Cargo.toml 	modified:   src/pages/signup.rs 
 modified:   style/signup.scss

---
 Cargo.lock          |  10 ++
 Cargo.toml          |   4 +-
 src/pages/signup.rs |  36 ++++--
 style/signup.scss   | 263 +++++++++++++++++++++++---------------------
 4 files changed, 178 insertions(+), 135 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 0f7f1a4..bd38c46 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1296,11 +1296,21 @@ version = "0.0.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098"
 dependencies = [
+ "icondata_ai",
  "icondata_bs",
  "icondata_core",
  "icondata_io",
 ]
 
+[[package]]
+name = "icondata_ai"
+version = "0.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c8fe5fa2eed7715d5388e046d97f09d3baddd155b487454eb9cda3168c79d4b"
+dependencies = [
+ "icondata_core",
+]
+
 [[package]]
 name = "icondata_bs"
 version = "0.0.8"
diff --git a/Cargo.toml b/Cargo.toml
index 93fcd53..bd71485 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -23,7 +23,9 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [
   "BsPauseFill",
   "BsSkipStartFill",
   "BsSkipEndFill",
-  "IoReturnUpBackSharp"
+  "IoReturnUpBackSharp",
+  "AiEyeFilled",
+  "AiEyeInvisibleFilled"
 ] }
 dotenv = { version = "0.15.0", optional = true }
 diesel = { version = "2.1.4", features = ["postgres", "r2d2"], optional = true }
diff --git a/src/pages/signup.rs b/src/pages/signup.rs
index 517ee40..1b79e66 100644
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@@ -1,10 +1,11 @@
-use leptos::leptos_dom::*;
-use leptos::*;
-use leptos_icons::IoIcon::*;
-use leptos_icons::*;
 use crate::auth::signup;
 use crate::models::User;
-
+use leptos::ev::input;
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_icons::AiIcon::*;
+use leptos_icons::IoIcon::*;
+use leptos_icons::*;
 
 #[component]
 pub fn Signup() -> impl IntoView {
@@ -12,6 +13,13 @@ pub fn Signup() -> impl IntoView {
     let (email, set_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();
         let new_user = User {
@@ -33,7 +41,7 @@ pub fn Signup() -> impl IntoView {
         });
     };
 
-    view!{
+    view! {
         <div class="page-container">
             <div class="signup-container">
                 <a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
@@ -63,7 +71,7 @@ pub fn Signup() -> impl IntoView {
                         <i></i>
                     </div>
                     <div class="input-box">
-                        <input class="signup-password" type="text" required
+                        <input class="signup-password" type={move || if show_password() { "text" } else { "password"} } required style="width: 90%;"
                         on:input = move |ev| {
                             set_password(event_target_value(&ev));
                             log!("password changed to: {}", password.get());
@@ -71,6 +79,18 @@ pub fn Signup() -> impl IntoView {
                         />
                         <span>Password</span>
                         <i></i>
+                        <Show
+                            when=move || {show_password() == false}
+                            fallback=move || view!{ <button on:click=toggle_password class="password-visibility">
+                                                  <Icon icon=Icon::from(AiEyeInvisibleFilled) />
+                                               </button> /> }
+                        >
+                            <button on:click=toggle_password class="password-visibility">
+                                <Icon icon=Icon::from(AiEyeFilled) />
+                            </button>
+
+                        </Show>
+
                     </div>
                     <input type="submit" value="Sign Up"  />
                     <span class="go-to-login">
@@ -80,4 +100,4 @@ pub fn Signup() -> impl IntoView {
             </div>
         </div>
     }
-}
\ No newline at end of file
+}
diff --git a/style/signup.scss b/style/signup.scss
index cd45ab6..1461569 100644
--- a/style/signup.scss
+++ b/style/signup.scss
@@ -1,129 +1,140 @@
-@import 'theme.scss';
+@import "theme.scss";
 
 .signup-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 27rem;
-    height: 35rem;
-    transform: translate(-50%, -50%);
-    background: purple;
-    z-index: 1;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-  .signup-container .header h1 {
-    margin-top: 3rem;
-    font-size: 2.5rem;
-    color: #2c1308;
-  }
-  .signup-container .signup-form {
-    width: 80%;
-  }
-  .signup-form .input-box {
-    position: relative;
-    margin-top: 3rem;
-  }
-  .signup-form .input-box:first-child {
-    margin-top: 1rem;
-  }
-  .signup-form .input-box input {
-    position: relative;
-    width: 100%;
-    max-width: 34vw;
-    padding: 17px 0px 10px;
-    background: transparent;
-    outline: none;
-    border: none;
-    box-shadow: none;
-    color: #23242a;
-    font-size: 1.1em;
-    font-family: "Roboto", sans-serif;
-    font-weight: 400;
-    letter-spacing: 0px;
-    text-indent: 10px;
-    vertical-align: middle;
-    z-index: 10;
-    color: #fff;
-  }
-  .signup-form .input-box span {
-    position: absolute;
-    left: 0;
-    padding: 15px 0px 10px;
-    pointer-events: none;
-    color: #907163;
-    font-size: 1.19em;
-    letter-spacing: 0.5px;
-    transition: 0.5s;
-  }
-  .signup-form .input-box input:valid ~ span,
-  .signup-form .input-box input:focus ~ span {
-    color: #2c1308;
-    font-size: 1rem;
-    transform: translateY(-30px);
-    font-weight: 400;
-  }
-  .signup-form .input-box i {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    background: #907163;
-    border-radius: 4px;
-    overflow: hidden;
-    transition: 0.5s;
-    pointer-events: none;
-  }
-  
-  .signup-form .input-box input:valid ~ i,
-  .signup-form .input-box input:focus ~ i {
-    height: 2.6rem;
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 27rem;
+  height: 35rem;
+  transform: translate(-50%, -50%);
+  background: purple;
+  z-index: 1;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.signup-container .header h1 {
+  margin-top: 3rem;
+  font-size: 2.5rem;
+  color: #2c1308;
+}
+.signup-container .signup-form {
+  width: 80%;
+}
+.signup-form .input-box {
+  position: relative;
+  margin-top: 3rem;
+}
+.signup-form .input-box:first-child {
+  margin-top: 1rem;
+}
+.signup-form .input-box input {
+  position: relative;
+  width: 100%;
+  max-width: 34vw;
+  padding: 17px 0px 10px;
+  background: transparent;
+  outline: none;
+  border: none;
+  box-shadow: none;
+  color: #23242a;
+  font-size: 1.1em;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  letter-spacing: 0px;
+  text-indent: 10px;
+  vertical-align: middle;
+  z-index: 10;
+  color: #fff;
+}
+.signup-form .input-box span {
+  position: absolute;
+  left: 0;
+  padding: 15px 0px 10px;
+  pointer-events: none;
+  color: #907163;
+  font-size: 1.19em;
+  letter-spacing: 0.5px;
+  transition: 0.5s;
+}
+.signup-form .input-box input:valid ~ span,
+.signup-form .input-box input:focus ~ span {
+  color: #2c1308;
+  font-size: 1rem;
+  transform: translateY(-30px);
+  font-weight: 400;
+}
+.signup-form .input-box i {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background: #907163;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: 0.5s;
+  pointer-events: none;
+}
 
-  .signup-form input[type="submit"] {
-    margin-top: 3.5rem;
-    width: 100%;
-    height: 45px;
-    border: none;
-    border-radius: 8px;
-    color: rgb(210, 207, 207);
-    cursor: pointer;
-    font-size: 1.1rem;
-    font-weight: 600;
-    background-color: #582b17;
-  }
-  .signup-form .go-to-login {
-    color: #8f8f8f;
-    font-size: 0.9rem;
-  }
-  .signup-form .go-to-login span {
-    cursor: pointer;
-    color: #8f8f8f;
-    text-decoration: underline;
-  }
-  .signup-form .go-to-login span:hover {
-    color: #fff;
-    transition: all 0.2s;
-  }
-  .signup-container .return {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    font-size: 1.8rem;
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: .3rem;
-  }
-  .signup-container .return:hover {
-    background-color: rgba(0, 0, 0, 0.4);
-  }
-  
\ No newline at end of file
+.signup-form .input-box input:valid ~ i,
+.signup-form .input-box input:focus ~ i {
+  height: 2.6rem;
+}
+
+.signup-form input[type="submit"] {
+  margin-top: 3.5rem;
+  width: 100%;
+  height: 45px;
+  border: none;
+  border-radius: 8px;
+  color: rgb(210, 207, 207);
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 600;
+  background-color: #582b17;
+}
+.signup-form .go-to-login {
+  color: #8f8f8f;
+  font-size: 0.9rem;
+}
+.signup-form .go-to-login span {
+  cursor: pointer;
+  color: #8f8f8f;
+  text-decoration: underline;
+}
+.signup-form .go-to-login span:hover {
+  color: #fff;
+  transition: all 0.2s;
+}
+.signup-container .return {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  font-size: 1.8rem;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3rem;
+}
+.signup-container .return:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.password-visibility {
+  position: absolute;
+  font-size: 1.7rem;
+  top: 28%;
+  right: 5px;
+  z-index: 5;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  color: white;
+}