Refactored password visibility state and added small css fix

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;

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"}

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"]]}

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

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}

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}

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}