[820] ui/form: Password input

CHANGELOG.md

@@ -21,6 +21,7 @@ The types of changes are:
 
 * Initial configuration wizard UI view
   * System scanning step: AWS credentials form and initial `generate` API usage.
+* CustomInput type "password" with show/hide icon.
 
 ## [1.7.0](https://github.com/ethyca/fides/compare/1.6.1...1.7.0) - 2022-06-23
 

clients/admin-ui/src/features/common/Icon/Eye.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "EyeIcon",
+  viewBox: "0 0 20 18",
+  d: "M5.55556 8.88886C5.55556 6.434 7.54514 4.44442 10 4.44442C12.4549 4.44442 14.4444 6.434 14.4444 8.88886C14.4444 11.3437 12.4549 13.3333 10 13.3333C7.54514 13.3333 5.55556 11.3437 5.55556 8.88886ZM10 11.6666C11.5347 11.6666 12.7778 10.4236 12.7778 8.88886C12.7778 7.35414 11.5347 6.11108 10 6.11108C9.9757 6.11108 9.95486 6.11108 9.89931 6.11108C9.9757 6.28817 10 6.47567 10 6.66664C10 7.89233 9.00347 8.88886 7.77778 8.88886C7.58681 8.88886 7.39931 8.86456 7.22222 8.78817C7.22222 8.84372 7.22222 8.86456 7.22222 8.85761C7.22222 10.4236 8.46528 11.6666 10 11.6666ZM3.3132 3.9097C4.94792 2.39025 7.19445 1.11108 10 1.11108C12.8056 1.11108 15.0521 2.39025 16.6875 3.9097C18.3125 5.41664 19.3993 7.19095 19.9132 8.46178C20.0278 8.73608 20.0278 9.04164 19.9132 9.31595C19.3993 10.5555 18.3125 12.3298 16.6875 13.868C15.0521 15.3889 12.8056 16.6666 10 16.6666C7.19445 16.6666 4.94792 15.3889 3.3132 13.868C1.6882 12.3298 0.602087 10.5555 0.0854557 9.31595C-0.0284852 9.04164 -0.0284852 8.73608 0.0854557 8.46178C0.602087 7.19095 1.6882 5.41664 3.3132 3.9097ZM10 2.77775C7.73611 2.77775 5.875 3.80553 4.44792 5.12845C3.11111 6.3715 2.1882 7.81595 1.71667 8.88886C2.1882 9.93053 3.11111 11.4062 4.44792 12.6493C5.875 13.9722 7.73611 15 10 15C12.2639 15 14.125 13.9722 15.5521 12.6493C16.8889 11.4062 17.7812 9.93053 18.2847 8.88886C17.7812 7.81595 16.8889 6.3715 15.5521 5.12845C14.125 3.80553 12.2639 2.77775 10 2.77775Z",
+});

clients/admin-ui/src/features/common/Icon/index.tsx

@@ -4,6 +4,7 @@ export { default as ArrowUpLineIcon } from "./ArrowUpLine";
 export { default as AWSLogoIcon } from "./AWSLogo";
 export { default as CloseSolidIcon } from "./CloseSolid";
 export { default as DownloadSolidIcon } from "./DownloadSolid";
+export { default as EyeIcon } from "./Eye";
 export { default as GearIcon } from "./Gear";
 export { default as HorizontalLineIcon } from "./HorizontalLine";
 export { default as ManualSetupIcon } from "./ManualSetup";

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

@@ -4,11 +4,16 @@ import {
   FormErrorMessage,
   FormLabel,
   Grid,
+  IconButton,
   Input,
+  InputGroup,
+  InputRightElement,
 } from "@fidesui/react";
 import { CreatableSelect, Select, Size } from "chakra-react-select";
 import { FieldHookConfig, useField, useFormikContext } from "formik";
+import { useState } from "react";
 
+import { EyeIcon } from "~/features/common/Icon";
 import QuestionTooltip from "~/features/common/QuestionTooltip";
 
 interface InputProps {
@@ -23,22 +28,48 @@ export const CustomTextInput = ({
   ...props
 }: InputProps & FieldHookConfig<string>) => {
   const [field, meta] = useField(props);
-  const { type, placeholder } = props;
+  const { type: initialType, placeholder } = props;
   const isInvalid = !!(meta.touched && meta.error);
+
+  const isPassword = initialType === "password";
+  const [type, setType] = useState<"text" | "password">(
+    isPassword ? "password" : "text"
+  );
+
+  const handleClickReveal = () =>
+    setType(type === "password" ? "text" : "password");
+
   return (
     <FormControl isInvalid={isInvalid}>
       <Grid templateColumns="1fr 3fr">
         <FormLabel htmlFor={props.id || props.name} size="sm">
           {label}
         </FormLabel>
         <Box display="flex" alignItems="center">
-          <Input
-            {...field}
-            type={type}
-            placeholder={placeholder}
-            size="sm"
-            mr="2"
-          />
+          <InputGroup size="sm" mr="2">
+            <Input
+              {...field}
+              type={type}
+              placeholder={placeholder}
+              pr={isPassword ? "10" : "3"}
+            />
+            {isPassword ? (
+              <InputRightElement pr="2">
+                <IconButton
+                  size="xs"
+                  variant="unstyled"
+                  aria-label="Reveal/Hide Secret"
+                  icon={
+                    <EyeIcon
+                      boxSize="full"
+                      color={type === "password" ? "gray.400" : "gray.700"}
+                    />
+                  }
+                  onClick={handleClickReveal}
+                />
+              </InputRightElement>
+            ) : null}
+          </InputGroup>
           {tooltip ? <QuestionTooltip label={tooltip} /> : null}
         </Box>
       </Grid>

clients/admin-ui/src/features/config-wizard/AuthenticateAwsForm.tsx

@@ -129,6 +129,7 @@ const AuthenticateAwsForm = () => {
                 tooltip="AWS Access Key ID is the AWS ID associated with the account you want to use for scanning."
               />
               <CustomTextInput
+                type="password"
                 name="aws_secret_access_key"
                 label="Secret"
                 // "You can find more about creating access keys and secrets on AWS docs here."