FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 15:36:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web/dialog): Add password option to input

Browse Source
This commit is contained in:
ANTOND
2022-05-02 23:14:27 +02:00
parent 56f178af79
commit 1cb407903f
1 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,12 +7,15 @@ import {
ModalBody, ModalBody,
Box, Box,
Input, Input,
InputGroup,
InputRightElement,
Text, Text,
Button, Button,
Checkbox, Checkbox,
Select, Select,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import React from "react"; import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNuiEvent } from "../../hooks/useNuiEvent"; import { useNuiEvent } from "../../hooks/useNuiEvent";
import { useLocales } from "../../providers/LocaleProvider"; import { useLocales } from "../../providers/LocaleProvider";
import { debugData } from "../../utils/debugData"; import { debugData } from "../../utils/debugData";
@@ -26,6 +29,7 @@ interface Props {
type: RowType; type: RowType;
label: string; label: string;
options?: { value: string; label: string }[]; options?: { value: string; label: string }[];
password?: boolean;
}[]; }[];
} }
@@ -37,7 +41,7 @@ debugData<Props>([
rows: [ rows: [
{ type: "input", label: "Locker number" }, { type: "input", label: "Locker number" },
{ type: "checkbox", label: "Some checkbox" }, { type: "checkbox", label: "Some checkbox" },
{ type: "input", label: "Locker PIN" }, { type: "input", label: "Locker PIN", password: true },
{ type: "checkbox", label: "Some other checkbox" }, { type: "checkbox", label: "Some other checkbox" },
{ {
type: "select", type: "select",
@@ -62,7 +66,11 @@ 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 handleShowPassword = () => setShowPassword(!showPassword);
useNuiEvent<Props>("openDialog", (data) => { useNuiEvent<Props>("openDialog", (data) => {
setShowPassword(false);
setFields(data); setFields(data);
setInputData([]); setInputData([]);
setVisible(true); setVisible(true);
@@ -104,9 +112,26 @@ const InputDialog: React.FC = () => {
{row.type === "input" && ( {row.type === "input" && (
<Box mb={3} key={`input-${index}`} textAlign="left"> <Box mb={3} key={`input-${index}`} textAlign="left">
<Text>{row.label}</Text> <Text>{row.label}</Text>
<Input <InputGroup>
onChange={(e) => handleChange(e.target.value, index)} <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> </Box>
)} )}
{row.type === "checkbox" && ( {row.type === "checkbox" && (