From 38f5ecbdf2a9542e0e42b5299618538fc28a2762 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 17 May 2024 15:51:34 +0530
Subject: [PATCH] [WEB-1330] chore: show password toggle improvement (#4471)

* chore: show password toggle improvement

* fix: merge conflict
---
 admin/components/instance/setup-form.tsx    | 24 +++++++++++++--------
 web/components/onboarding/profile-setup.tsx | 24 +++++++++++++--------
 web/pages/accounts/reset-password.tsx       | 24 +++++++++++++--------
 web/pages/accounts/set-password.tsx         | 24 +++++++++++++--------
 4 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/admin/components/instance/setup-form.tsx b/admin/components/instance/setup-form.tsx
index f854683e9..2d18ea283 100644
--- a/admin/components/instance/setup-form.tsx
+++ b/admin/components/instance/setup-form.tsx
@@ -64,13 +64,19 @@ export const InstanceSetupForm: FC = (props) => {
   const errorCode = searchParams.get("error_code") || undefined;
   const errorMessage = searchParams.get("error_message") || undefined;
   // state
-  const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
 
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
 
@@ -228,7 +234,7 @@ export const InstanceSetupForm: FC = (props) => {
                 className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
-                type={showPassword ? "text" : "password"}
+                type={showPassword.password ? "text" : "password"}
                 inputSize="md"
                 placeholder="New password..."
                 value={formData.password}
@@ -237,12 +243,12 @@ export const InstanceSetupForm: FC = (props) => {
                 onFocus={() => setIsPasswordInputFocused(true)}
                 onBlur={() => setIsPasswordInputFocused(false)}
               />
-              {showPassword ? (
+              {showPassword.password ? (
                 <button
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(false)}
+                  onClick={() => handleShowPassword("password")}
                 >
                   <EyeOff className="h-4 w-4" />
                 </button>
@@ -251,7 +257,7 @@ export const InstanceSetupForm: FC = (props) => {
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(true)}
+                  onClick={() => handleShowPassword("password")}
                 >
                   <Eye className="h-4 w-4" />
                 </button>
@@ -269,7 +275,7 @@ export const InstanceSetupForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                type={showPassword ? "text" : "password"}
+                type={showPassword.retypePassword ? "text" : "password"}
                 id="confirm_password"
                 name="confirm_password"
                 inputSize="md"
@@ -280,12 +286,12 @@ export const InstanceSetupForm: FC = (props) => {
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
               />
-              {showPassword ? (
+              {showPassword.retypePassword ? (
                 <button
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(false)}
+                  onClick={() => handleShowPassword("retypePassword")}
                 >
                   <EyeOff className="h-4 w-4" />
                 </button>
@@ -294,7 +300,7 @@ export const InstanceSetupForm: FC = (props) => {
                   type="button"
                   tabIndex={-1}
                   className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(true)}
+                  onClick={() => handleShowPassword("retypePassword")}
                 >
                   <Eye className="h-4 w-4" />
                 </button>
diff --git a/web/components/onboarding/profile-setup.tsx b/web/components/onboarding/profile-setup.tsx
index 005ad898b..f6a254007 100644
--- a/web/components/onboarding/profile-setup.tsx
+++ b/web/components/onboarding/profile-setup.tsx
@@ -87,7 +87,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
   const [isRemoving, setIsRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
   // hooks
   const { resolvedTheme } = useTheme();
   // store hooks
@@ -112,6 +115,9 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     mode: "onChange",
   });
 
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
   const handleSetPassword = async (password: string) => {
     const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
     await authService.setPassword(token, { password });
@@ -415,7 +421,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                       render={({ field: { value, onChange, ref } }) => (
                         <div className="relative flex items-center rounded-md">
                           <Input
-                            type={showPassword ? "text" : "password"}
+                            type={showPassword.password ? "text" : "password"}
                             name="password"
                             value={value}
                             onChange={onChange}
@@ -426,15 +432,15 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                             onFocus={() => setIsPasswordInputFocused(true)}
                             onBlur={() => setIsPasswordInputFocused(false)}
                           />
-                          {showPassword ? (
+                          {showPassword.password ? (
                             <EyeOff
                               className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                              onClick={() => setShowPassword(false)}
+                              onClick={() => handleShowPassword("password")}
                             />
                           ) : (
                             <Eye
                               className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                              onClick={() => setShowPassword(true)}
+                              onClick={() => handleShowPassword("password")}
                             />
                           )}
                         </div>
@@ -458,7 +464,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                       render={({ field: { value, onChange, ref } }) => (
                         <div className="relative flex items-center rounded-md">
                           <Input
-                            type={showPassword ? "text" : "password"}
+                            type={showPassword.retypePassword ? "text" : "password"}
                             name="confirm_password"
                             value={value}
                             onChange={onChange}
@@ -467,15 +473,15 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                             placeholder="Confirm password..."
                             className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                           />
-                          {showPassword ? (
+                          {showPassword.retypePassword ? (
                             <EyeOff
                               className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                              onClick={() => setShowPassword(false)}
+                              onClick={() => handleShowPassword("retypePassword")}
                             />
                           ) : (
                             <Eye
                               className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                              onClick={() => setShowPassword(true)}
+                              onClick={() => handleShowPassword("retypePassword")}
                             />
                           )}
                         </div>
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 46c8a40bf..ee076c6c8 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -45,7 +45,10 @@ const ResetPasswordPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { uidb64, token, email } = router.query;
   // states
-  const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
   const [resetFormData, setResetFormData] = useState<TResetPasswordFormValues>({
     ...defaultValues,
     email: email ? email.toString() : "",
@@ -57,6 +60,9 @@ const ResetPasswordPage: NextPageWithLayout = () => {
   // hooks
   const { resolvedTheme } = useTheme();
 
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
   const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
     setResetFormData((prev) => ({ ...prev, [key]: value }));
 
@@ -129,7 +135,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                 </label>
                 <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                   <Input
-                    type={showPassword ? "text" : "password"}
+                    type={showPassword.password ? "text" : "password"}
                     name="password"
                     value={resetFormData.password}
                     onChange={(e) => handleFormChange("password", e.target.value)}
@@ -141,15 +147,15 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                     onBlur={() => setIsPasswordInputFocused(false)}
                     autoFocus
                   />
-                  {showPassword ? (
+                  {showPassword.password ? (
                     <EyeOff
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(false)}
+                      onClick={() => handleShowPassword("password")}
                     />
                   ) : (
                     <Eye
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(true)}
+                      onClick={() => handleShowPassword("password")}
                     />
                   )}
                 </div>
@@ -161,7 +167,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                 </label>
                 <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                   <Input
-                    type={showPassword ? "text" : "password"}
+                    type={showPassword.retypePassword ? "text" : "password"}
                     name="confirm_password"
                     value={resetFormData.confirm_password}
                     onChange={(e) => handleFormChange("confirm_password", e.target.value)}
@@ -170,15 +176,15 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                     onFocus={() => setIsRetryPasswordInputFocused(true)}
                     onBlur={() => setIsRetryPasswordInputFocused(false)}
                   />
-                  {showPassword ? (
+                  {showPassword.retypePassword ? (
                     <EyeOff
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(false)}
+                      onClick={() => handleShowPassword("retypePassword")}
                     />
                   ) : (
                     <Eye
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(true)}
+                      onClick={() => handleShowPassword("retypePassword")}
                     />
                   )}
                 </div>
diff --git a/web/pages/accounts/set-password.tsx b/web/pages/accounts/set-password.tsx
index c6f331b3c..e170b24d0 100644
--- a/web/pages/accounts/set-password.tsx
+++ b/web/pages/accounts/set-password.tsx
@@ -47,7 +47,10 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { email } = router.query;
   // states
-  const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
   const [passwordFormData, setPasswordFormData] = useState<TResetPasswordFormValues>({
     ...defaultValues,
     email: email ? email.toString() : "",
@@ -65,6 +68,9 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
   }, [csrfToken]);
 
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
   const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
     setPasswordFormData((prev) => ({ ...prev, [key]: value }));
 
@@ -142,7 +148,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                 </label>
                 <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                   <Input
-                    type={showPassword ? "text" : "password"}
+                    type={showPassword.password ? "text" : "password"}
                     name="password"
                     value={passwordFormData.password}
                     onChange={(e) => handleFormChange("password", e.target.value)}
@@ -154,15 +160,15 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                     onBlur={() => setIsPasswordInputFocused(false)}
                     autoFocus
                   />
-                  {showPassword ? (
+                  {showPassword.password ? (
                     <EyeOff
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(false)}
+                      onClick={() => handleShowPassword("password")}
                     />
                   ) : (
                     <Eye
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(true)}
+                      onClick={() => handleShowPassword("password")}
                     />
                   )}
                 </div>
@@ -174,7 +180,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                 </label>
                 <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                   <Input
-                    type={showPassword ? "text" : "password"}
+                    type={showPassword.retypePassword ? "text" : "password"}
                     name="confirm_password"
                     value={passwordFormData.confirm_password}
                     onChange={(e) => handleFormChange("confirm_password", e.target.value)}
@@ -183,15 +189,15 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                     onFocus={() => setIsRetryPasswordInputFocused(true)}
                     onBlur={() => setIsRetryPasswordInputFocused(false)}
                   />
-                  {showPassword ? (
+                  {showPassword.retypePassword ? (
                     <EyeOff
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(false)}
+                      onClick={() => handleShowPassword("retypePassword")}
                     />
                   ) : (
                     <Eye
                       className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                      onClick={() => setShowPassword(true)}
+                      onClick={() => handleShowPassword("retypePassword")}
                     />
                   )}
                 </div>