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 [visible, setVisible] = React.useState(false);
const { locale } = useLocales(); const { locale } = useLocales();
const [showPassword, setShowPassword] = React.useState(false); const [passwordStates, setShowPassword] = React.useState<Array<boolean>>([]);
const handleShowPassword = () => setShowPassword(!showPassword); const handleShowPassword = (index: number) => {
setShowPassword({
...passwordStates, [index]: !passwordStates[index]
})
}
useNuiEvent<Props>("openDialog", (data) => { useNuiEvent<Props>("openDialog", (data) => {
setShowPassword(false); setShowPassword([]);
setFields(data); setFields(data);
setInputData([]); setInputData([]);
setVisible(true); setVisible(true);
@@ -115,16 +119,16 @@ const InputDialog: React.FC = () => {
<InputGroup> <InputGroup>
<Input <Input
onChange={(e) => handleChange(e.target.value, index)} onChange={(e) => handleChange(e.target.value, index)}
type={!row.password || showPassword ? 'text' : 'password'} type={!row.password || passwordStates[index] ? 'text' : 'password'}
/> />
{row.password && ( {row.password && (
<InputRightElement <InputRightElement
cursor="pointer" cursor="pointer"
onClick={handleShowPassword} onClick={() => handleShowPassword(index)}
children={ children={
<FontAwesomeIcon <FontAwesomeIcon
fixedWidth fixedWidth
icon={showPassword ? "eye" : "eye-slash"} icon={passwordStates[index] ? "eye" : "eye-slash"}
fontSize="1em" fontSize="1em"
style={{ paddingRight: 8 }} style={{ paddingRight: 8 }}
/> />