From 1cb407903fc5a226156486e0e9df2b5d424fb2a3 Mon Sep 17 00:00:00 2001
From: ANTOND <71350868+antond15@users.noreply.github.com>
Date: Mon, 2 May 2022 23:14:27 +0200
Subject: [PATCH 1/3] feat(web/dialog): Add password option to input

---
 web/src/features/dialog/InputDialog.tsx | 33 ++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index add0bc8..2df0dc0 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -7,12 +7,15 @@ import {
   ModalBody,
   Box,
   Input,
+  InputGroup,
+  InputRightElement,
   Text,
   Button,
   Checkbox,
   Select,
 } from "@chakra-ui/react";
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNuiEvent } from "../../hooks/useNuiEvent";
 import { useLocales } from "../../providers/LocaleProvider";
 import { debugData } from "../../utils/debugData";
@@ -26,6 +29,7 @@ interface Props {
     type: RowType;
     label: string;
     options?: { value: string; label: string }[];
+    password?: boolean;
   }[];
 }
 
@@ -37,7 +41,7 @@ debugData<Props>([
       rows: [
         { type: "input", label: "Locker number" },
         { type: "checkbox", label: "Some checkbox" },
-        { type: "input", label: "Locker PIN" },
+        { type: "input", label: "Locker PIN", password: true },
         { type: "checkbox", label: "Some other checkbox" },
         {
           type: "select",
@@ -62,7 +66,11 @@ const InputDialog: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
   const { locale } = useLocales();
 
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handleShowPassword = () => setShowPassword(!showPassword);
+
   useNuiEvent<Props>("openDialog", (data) => {
+    setShowPassword(false);
     setFields(data);
     setInputData([]);
     setVisible(true);
@@ -104,9 +112,26 @@ const InputDialog: React.FC = () => {
                 {row.type === "input" && (
                   <Box mb={3} key={`input-${index}`} textAlign="left">
                     <Text>{row.label}</Text>
-                    <Input
-                      onChange={(e) => handleChange(e.target.value, index)}
-                    />
+                    <InputGroup>
+                      <Input
+                        onChange={(e) => handleChange(e.target.value, index)}
+                        type={!row.password || showPassword ? 'text' : 'password'}
+                      />
+                      {row.password && (
+                        <InputRightElement
+                          cursor="pointer"
+                          onClick={handleShowPassword}
+                          children={
+                            <FontAwesomeIcon
+                              fixedWidth
+                              icon={showPassword ? "eye" : "eye-slash"}
+                              fontSize="1em"
+                              style={{ paddingRight: 8 }}
+                            />
+                          }
+                        />
+                      )}
+                    </InputGroup>
                   </Box>
                 )}
                 {row.type === "checkbox" && (

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 2/3] 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 }}
                             />

From 6b7d24c71bfb9077c8857916ae689cb484547e7d Mon Sep 17 00:00:00 2001
From: ANTOND <71350868+antond15@users.noreply.github.com>
Date: Tue, 3 May 2022 01:03:02 +0200
Subject: [PATCH 3/3] refactor(web/dialog): Use conventional naming

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

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