Skip to content

Commit d34116e

Browse files
speaker-enderspeaker-ender
committed
refactor: password editing [ENG-2430]
1 parent 868acf5 commit d34116e

File tree

1 file changed

+81
-58
lines changed
  • clients/admin-ui/src/features/common/form

1 file changed

+81
-58
lines changed

‎clients/admin-ui/src/features/common/form/inputs.tsx‎

Lines changed: 81 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
Button,
77
ChakraBox as Box,
88
ChakraCode as Code,
9-
ChakraFlex as Flex,
9+
ChakraFlex,
1010
ChakraFormControl as FormControl,
1111
ChakraFormErrorMessage as FormErrorMessage,
1212
ChakraFormErrorMessageProps as FormErrorMessageProps,
@@ -25,6 +25,7 @@ import {
2525
ChakraVStack as VStack,
2626
DefaultOptionType,
2727
EyeIcon,
28+
Flex,
2829
Switch,
2930
SwitchProps,
3031
} from "fidesui";
@@ -88,50 +89,72 @@ export const TextInput = forwardRef(
8889
isPassword,
8990
inputRightElement,
9091
size,
92+
isDisabled,
9193
...props
9294
}: InputProps & {
9395
isPassword: boolean;
9496
inputRightElement?: React.ReactNode;
9597
},
9698
ref,
9799
) => {
100+
const [, meta, { setValue }] = useField(props.name ?? "");
98101
const [type, setType] = useState<"text" | "password">(
99102
isPassword ? "password" : "text",
100103
);
104+
const [disabled, setDisabled] = useState(
105+
isDisabled || (isPassword && !!meta.initialValue && !meta.touched),
106+
);
101107

102108
const handleClickReveal = () =>
103109
setType(type === "password" ? "text" : "password");
104110

111+
const handleClickEdit = () => {
112+
setValue(undefined);
113+
setDisabled(false);
114+
};
115+
105116
return (
106-
<InputGroup size={size ?? "sm"}>
107-
<Input
108-
{...props}
109-
ref={ref as LegacyRef<HTMLInputElement> | undefined}
110-
type={type}
111-
pr={isPassword ? "10" : "3"}
112-
background="white"
113-
focusBorderColor="primary.600"
114-
/>
115-
{inputRightElement ? (
116-
<InputRightElement pr={2}>{inputRightElement}</InputRightElement>
117-
) : null}
118-
{isPassword ? (
119-
<InputRightElement pr="2">
120-
<Button
121-
size="small"
122-
type="text"
123-
aria-label="Reveal/Hide Secret"
124-
icon={
125-
<EyeIcon
126-
boxSize="full"
127-
color={type === "password" ? "gray.400" : "gray.700"}
128-
/>
129-
}
130-
onClick={handleClickReveal}
131-
/>
132-
</InputRightElement>
133-
) : null}
134-
</InputGroup>
117+
<Flex className="w-full" gap="small" justify="center" align="center">
118+
<InputGroup size={size ?? "sm"}>
119+
<Input
120+
{...props}
121+
isDisabled={disabled}
122+
ref={ref as LegacyRef<HTMLInputElement> | undefined}
123+
type={type}
124+
pr={isPassword ? "10" : "3"}
125+
background="white"
126+
focusBorderColor="primary.600"
127+
/>
128+
{inputRightElement ? (
129+
<InputRightElement pr={2}>{inputRightElement}</InputRightElement>
130+
) : null}
131+
{isPassword && (!meta?.initialValue || meta?.touched) && (
132+
<InputRightElement pr="2">
133+
<Button
134+
size="small"
135+
type="text"
136+
aria-label="Reveal/Hide Secret"
137+
icon={
138+
<EyeIcon
139+
boxSize="full"
140+
color={type === "password" ? "gray.400" : "gray.700"}
141+
/>
142+
}
143+
onClick={handleClickReveal}
144+
/>
145+
</InputRightElement>
146+
)}
147+
</InputGroup>
148+
{isPassword && !!meta?.initialValue && (
149+
<Button
150+
onClick={handleClickEdit}
151+
disabled={!disabled}
152+
aria-label="Edit Secret"
153+
>
154+
Edit
155+
</Button>
156+
)}
157+
</Flex>
135158
);
136159
},
137160
);
@@ -208,20 +231,20 @@ export const CustomTextInput = ({
208231
{label ? (
209232
<Label htmlFor={props.id || props.name}>{label}</Label>
210233
) : null}
211-
<Flex alignItems="center">
212-
<Flex flexDir="column" flexGrow={1} mr="2">
234+
<ChakraFlex alignItems="center">
235+
<ChakraFlex flexDir="column" flexGrow={1} mr="2">
213236
{innerInput}
214237
<ErrorMessage
215238
isInvalid={isInvalid}
216239
message={meta.error}
217240
fieldName={field.name}
218241
/>
219-
</Flex>
242+
</ChakraFlex>
220243
<InfoTooltip
221244
label={tooltip}
222245
className={isInvalid ? "mt-2 self-start" : undefined}
223246
/>
224-
</Flex>
247+
</ChakraFlex>
225248
</Grid>
226249
</FormControl>
227250
);
@@ -230,7 +253,7 @@ export const CustomTextInput = ({
230253
<FormControl isInvalid={isInvalid} isRequired={isRequired}>
231254
<VStack alignItems="start">
232255
{label ? (
233-
<Flex alignItems="center">
256+
<ChakraFlex alignItems="center">
234257
<Label
235258
htmlFor={props.id || props.name}
236259
fontSize={size ?? "xs"}
@@ -240,7 +263,7 @@ export const CustomTextInput = ({
240263
{label}
241264
</Label>
242265
<InfoTooltip label={tooltip} />
243-
</Flex>
266+
</ChakraFlex>
244267
) : null}
245268
{innerInput}
246269
<ErrorMessage
@@ -311,17 +334,17 @@ export const CustomTextArea = ({
311334
if (!label) {
312335
return (
313336
<FormControl isInvalid={isInvalid} isRequired={isRequired}>
314-
<Flex>
315-
<Flex flexDir="column" flexGrow={1}>
337+
<ChakraFlex>
338+
<ChakraFlex flexDir="column" flexGrow={1}>
316339
{innerTextArea}
317340
<ErrorMessage
318341
isInvalid={isInvalid}
319342
message={meta.error}
320343
fieldName={field.name}
321344
/>
322-
</Flex>
345+
</ChakraFlex>
323346
<InfoTooltip label={tooltip} />
324-
</Flex>
347+
</ChakraFlex>
325348
</FormControl>
326349
);
327350
}
@@ -331,30 +354,30 @@ export const CustomTextArea = ({
331354
<FormControl isInvalid={isInvalid} isRequired={isRequired}>
332355
<Grid templateColumns="1fr 3fr">
333356
{label ? <FormLabel>{label}</FormLabel> : null}
334-
<Flex>
335-
<Flex flexDir="column" flexGrow={1} mr={2}>
357+
<ChakraFlex>
358+
<ChakraFlex flexDir="column" flexGrow={1} mr={2}>
336359
{innerTextArea}
337360
<ErrorMessage
338361
isInvalid={isInvalid}
339362
message={meta.error}
340363
fieldName={field.name}
341364
/>
342-
</Flex>
365+
</ChakraFlex>
343366
<InfoTooltip label={tooltip} />
344-
</Flex>
367+
</ChakraFlex>
345368
</Grid>
346369
</FormControl>
347370
);
348371
}
349372
return (
350373
<FormControl isInvalid={isInvalid} isRequired={isRequired}>
351374
<VStack alignItems="start">
352-
<Flex alignItems="center">
375+
<ChakraFlex alignItems="center">
353376
<Label htmlFor={props.id || props.name} fontSize="xs" my={0} mr={1}>
354377
{label}
355378
</Label>
356379
<InfoTooltip label={tooltip} />
357-
</Flex>
380+
</ChakraFlex>
358381
{innerTextArea}
359382
<ErrorMessage
360383
isInvalid={isInvalid}
@@ -433,13 +456,13 @@ export const CustomSwitch = ({
433456
if (variant === "switchFirst") {
434457
return (
435458
<FormControl isInvalid={isInvalid}>
436-
<Flex alignItems="center">
459+
<ChakraFlex alignItems="center">
437460
{innerSwitch}
438461
<Label htmlFor={props.id || props.name} my={0} fontSize="sm" mr={2}>
439462
{label}
440463
</Label>
441464
<InfoTooltip label={tooltip} />
442-
</Flex>
465+
</ChakraFlex>
443466
</FormControl>
444467
);
445468
}
@@ -514,12 +537,12 @@ export const CustomClipboardCopy = ({
514537
{label ? (
515538
<Label htmlFor={props.id || props.name}>{label}</Label>
516539
) : null}
517-
<Flex alignItems="center">
518-
<Flex flexDir="column" flexGrow={1} mr="2">
540+
<ChakraFlex alignItems="center">
541+
<ChakraFlex flexDir="column" flexGrow={1} mr="2">
519542
{innerInput}
520-
</Flex>
543+
</ChakraFlex>
521544
<InfoTooltip label={tooltip} />
522-
</Flex>
545+
</ChakraFlex>
523546
</Grid>
524547
</FormControl>
525548
);
@@ -528,12 +551,12 @@ export const CustomClipboardCopy = ({
528551
<FormControl>
529552
<VStack alignItems="start">
530553
{label ? (
531-
<Flex alignItems="center">
554+
<ChakraFlex alignItems="center">
532555
<Label htmlFor={props.id || props.name} fontSize="xs" my={0} mr={1}>
533556
{label}
534557
</Label>
535558
<InfoTooltip label={tooltip} />
536-
</Flex>
559+
</ChakraFlex>
537560
) : null}
538561
{innerInput}
539562
</VStack>
@@ -568,12 +591,12 @@ export const CustomDatePicker = ({
568591
<FormControl isRequired={isRequired} isInvalid={isInvalid}>
569592
<VStack align="start">
570593
{!!label && (
571-
<Flex align="center">
594+
<ChakraFlex align="center">
572595
<Label htmlFor={props.id || name} fontSize="xs" my={0} mr={1}>
573596
{label}
574597
</Label>
575598
{!!tooltip && <InfoTooltip label={tooltip} />}
576-
</Flex>
599+
</ChakraFlex>
577600
)}
578601
<Input
579602
type="date"
@@ -624,12 +647,12 @@ export const CustomDateTimeInput = ({
624647
<FormControl isRequired={isRequired} isInvalid={isInvalid}>
625648
<VStack align="start">
626649
{!!label && (
627-
<Flex align="center">
650+
<ChakraFlex align="center">
628651
<Label htmlFor={fieldId} fontSize="xs" my={0} mr={1}>
629652
{label}
630653
</Label>
631654
{!!tooltip && <InfoTooltip label={tooltip} />}
632-
</Flex>
655+
</ChakraFlex>
633656
)}
634657
<Input
635658
type="datetime-local"

0 commit comments

Comments
 (0)