FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(web/dialog): Handle multiple password states

Browse Source
This commit is contained in:
ANTOND
2022-05-03 00:19:02 +02:00
parent 1cb407903f
commit 5c6b08445a
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/features/dialog/InputDialog.tsx
View File

@@ -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 }}
/>