From 5c6b08445a23dec087fbb90aa4c5276a7737a941 Mon Sep 17 00:00:00 2001
From: ANTOND <71350868+antond15@users.noreply.github.com>
Date: Tue, 3 May 2022 00:19:02 +0200
Subject: [PATCH] fix(web/dialog): Handle multiple password states

---
 web/src/features/dialog/InputDialog.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index 2df0dc0..2d71eeb 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -66,11 +66,15 @@ const InputDialog: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
   const { locale } = useLocales();
 
-  const [showPassword, setShowPassword] = React.useState(false);
-  const handleShowPassword = () => setShowPassword(!showPassword);
+  const [passwordStates, setShowPassword] = React.useState<Array<boolean>>([]);
+  const handleShowPassword = (index: number) => {
+    setShowPassword({
+      ...passwordStates, [index]: !passwordStates[index]
+    })
+  }
 
   useNuiEvent<Props>("openDialog", (data) => {
-    setShowPassword(false);
+    setShowPassword([]);
     setFields(data);
     setInputData([]);
     setVisible(true);
@@ -115,16 +119,16 @@ const InputDialog: React.FC = () => {
                     <InputGroup>
                       <Input
                         onChange={(e) => handleChange(e.target.value, index)}
-                        type={!row.password || showPassword ? 'text' : 'password'}
+                        type={!row.password || passwordStates[index] ? 'text' : 'password'}
                       />
                       {row.password && (
                         <InputRightElement
                           cursor="pointer"
-                          onClick={handleShowPassword}
+                          onClick={() => handleShowPassword(index)}
                           children={
                             <FontAwesomeIcon
                               fixedWidth
-                              icon={showPassword ? "eye" : "eye-slash"}
+                              icon={passwordStates[index] ? "eye" : "eye-slash"}
                               fontSize="1em"
                               style={{ paddingRight: 8 }}
                             />