From 99b1130e29e771284abc1ea58d34c4abf3079389 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 13 Jul 2024 15:02:26 -0400
Subject: [PATCH] Refactored password visibility state and added small css fix

---
 Client/src/Components/Inputs/Field/index.css              | 6 +++---
 Client/src/Components/Inputs/Field/index.jsx              | 8 ++++----
 Client/src/Components/TabPanels/Account/PasswordPanel.jsx | 7 -------
 Client/src/Pages/Demo/Demo.jsx                            | 2 --
 Client/src/Pages/Login/index.jsx                          | 4 ----
 Client/src/Pages/Register/index.jsx                       | 5 -----
 Client/src/Pages/SetNewPassword/index.jsx                 | 6 ------
 7 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index e4f53147f..3a8904b27 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -36,16 +36,16 @@
 .field .MuiInputBase-root:has(.MuiInputAdornment-root) {
   padding-right: var(--env-var-spacing-1-minus);
 }
-.field .MuiInputBase-root:has(.MuiInputAdornment-root > .MuiButtonBase-root) {
+.field .MuiInputBase-root:has(.copy.MuiInputAdornment-root > .MuiButtonBase-root) {
   padding-right: 0;
 }
-.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root {
+.field .MuiInputBase-root .copy.MuiInputAdornment-root .MuiButtonBase-root {
   padding: 0 var(--env-var-spacing-1-minus);
   font-size: var(--env-var-font-size-medium);
   border-radius: 0;
   height: 34px;
 }
-.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root svg {
+.field .MuiInputBase-root .copy.MuiInputAdornment-root .MuiButtonBase-root svg {
   width: 20px;
   height: 20px;
   margin-right: 5px;
diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 8f84dbfec..9d2509e29 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -19,8 +19,6 @@ const Field = ({
   label,
   isRequired,
   isOptional,
-  isVisible,
-  setVisibility,
   hasCopy,
   autoComplete,
   placeholder,
@@ -38,6 +36,8 @@ const Field = ({
     setTimeout(() => setCopy(false), 1000);
   };
 
+  const [isVisible, setVisible] = useState(false);
+
   return (
     <Stack gap={theme.gap.xs} className={`field field-${type}`}>
       {label && (
@@ -75,7 +75,7 @@ const Field = ({
               <InputAdornment position="end">
                 <IconButton
                   aria-label="toggle password visibility"
-                  onClick={() => setVisibility((show) => !show)}
+                  onClick={() => setVisible((show) => !show)}
                   tabIndex={-1}
                   sx={{
                     color: theme.palette.section.borderColor,
@@ -94,7 +94,7 @@ const Field = ({
               </InputAdornment>
             ) : (
               hasCopy && (
-                <InputAdornment position="end">
+                <InputAdornment className="copy" position="end">
                   <Button
                     level="tertiary"
                     label={copy ? "Copied" : "Copy"}
diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
index a19ec4552..0eb961caf 100644
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -35,7 +35,6 @@ const PasswordPanel = () => {
     confirm: "",
   });
   const [errors, setErrors] = useState({});
-  const [showPassword, setShowPassword] = useState(false); // password visibility
 
   const handleChange = (event) => {
     const { value, id } = event.target;
@@ -125,8 +124,6 @@ const PasswordPanel = () => {
             id="edit-current-password"
             placeholder="Enter your current password"
             autoComplete="current-password"
-            isVisible={showPassword}
-            setVisibility={setShowPassword}
             value={localData.password}
             onChange={handleChange}
             error={errors[idToName["edit-current-password"]]}
@@ -141,8 +138,6 @@ const PasswordPanel = () => {
             id="edit-new-password"
             placeholder="Enter your new password"
             autoComplete="new-password"
-            isVisible={showPassword}
-            setVisibility={setShowPassword}
             value={localData.newPassword}
             onChange={handleChange}
             error={errors[idToName["edit-new-password"]]}
@@ -157,8 +152,6 @@ const PasswordPanel = () => {
             id="edit-confirm-password"
             placeholder="Reenter your new password"
             autoComplete="new-password"
-            isVisible={showPassword}
-            setVisibility={setShowPassword}
             value={localData.confirm}
             onChange={handleChange}
             error={errors[idToName["edit-confirm-password"]]}
diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
index 408df416d..9d687f2e8 100644
--- a/Client/src/Pages/Demo/Demo.jsx
+++ b/Client/src/Pages/Demo/Demo.jsx
@@ -507,8 +507,6 @@ const Demo = () => {
           type="password"
           label="Password"
           isRequired={true}
-          isVisible={visibility}
-          setVisibility={setVisibility}
           placeholder="Create a password"
         />
         <Field
diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx
index 17a4da146..de71cfb3b 100644
--- a/Client/src/Pages/Login/index.jsx
+++ b/Client/src/Pages/Login/index.jsx
@@ -110,8 +110,6 @@ const Login = () => {
     navigate("/register");
   };
 
-  const [visibility, setVisibility] = useState(false);
-
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
@@ -142,8 +140,6 @@ const Login = () => {
             type="password"
             id="login-password-input"
             label="Password"
-            isVisible={visibility}
-            setVisibility={setVisibility}
             placeholder="Enter your password"
             autoComplete="current-password"
             onChange={handleInput}
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index 85dd6f61b..c24084ce8 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -117,7 +117,6 @@ const Register = () => {
     }
   };
 
-  const [visibility, setVisibility] = useState(false);
 
   return (
     <div className="register-page">
@@ -173,8 +172,6 @@ const Register = () => {
             id="register-password-input"
             label="Password"
             isRequired={true}
-            isVisible={visibility}
-            setVisibility={setVisibility}
             placeholder="Create a password"
             autoComplete="current-password"
             error={errors.password}
@@ -187,8 +184,6 @@ const Register = () => {
             id="register-confirm-input"
             label="Confirm password"
             isRequired={true}
-            isVisible={visibility}
-            setVisibility={setVisibility}
             placeholder="Confirm your password"
             autoComplete="current-password"
             error={errors.confirm}
diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx
index 8518a8a79..c06787b17 100644
--- a/Client/src/Pages/SetNewPassword/index.jsx
+++ b/Client/src/Pages/SetNewPassword/index.jsx
@@ -63,8 +63,6 @@ const SetNewPassword = () => {
     }
   }, [form]);
 
-  const [visibility, setVisibility] = useState(false);
-
   const { token } = useParams();
   return (
     <div className="set-new-password-page">
@@ -90,8 +88,6 @@ const SetNewPassword = () => {
             id="register-password-input"
             label="Password"
             isRequired={true}
-            isVisible={visibility}
-            setVisibility={setVisibility}
             placeholder="••••••••"
             onChange={handleInput}
             error={errors.password}
@@ -102,8 +98,6 @@ const SetNewPassword = () => {
             id="confirm-password-input"
             label="Confirm password"
             isRequired={true}
-            isVisible={visibility}
-            setVisibility={setVisibility}
             placeholder="••••••••"
             onChange={handleInput}
             error={errors.confirm}