feedback

ocadotechnology · Jul 2, 2024 · c06281b · c06281b
1 parent 4be39e8
commit c06281b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 28 deletions.
diff --git a/src/components/form/PasswordField.tsx b/src/components/form/PasswordField.tsx
@@ -6,49 +6,65 @@ import { IconButton, InputAdornment } from "@mui/material"
 import { useState, type FC } from "react"
 import { string as YupString } from "yup"
 
+import RepeatField, { type RepeatFieldProps } from "./RepeatField"
 import TextField, { type TextFieldProps } from "./TextField"
 
 export type PasswordFieldProps = Omit<
   TextFieldProps,
   "type" | "name" | "schema" | "autoComplete"
 > &
-  Partial<Pick<TextFieldProps, "name" | "schema">>
+  Partial<Pick<TextFieldProps, "name" | "schema">> & {
+    withRepeatField?: boolean
+    repeatFieldProps?: Omit<RepeatFieldProps, "name" | "type">
+  }
 
 const PasswordField: FC<PasswordFieldProps> = ({
   name = "password",
   label = "Password",
   placeholder = "Enter your password",
   schema = YupString(),
   InputProps = {},
+  withRepeatField = false,
+  repeatFieldProps = {},
   ...otherTextFieldProps
 }) => {
   const [isVisible, setIsVisible] = useState(false)
 
+  const type = isVisible ? "text" : "password"
+  const endAdornment = (
+    <InputAdornment position="end">
+      <IconButton
+        onClick={() => {
+          setIsVisible(previousIsVisible => !previousIsVisible)
+        }}
+        edge="end"
+      >
+        {isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+      </IconButton>
+    </InputAdornment>
+  )
+
   return (
-    <TextField
-      autoComplete="off"
-      type={isVisible ? "text" : "password"}
-      name={name}
-      label={label}
-      schema={schema}
-      placeholder={placeholder}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton
-              onClick={() => {
-                setIsVisible(previousIsVisible => !previousIsVisible)
-              }}
-              edge="end"
-            >
-              {isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
-            </IconButton>
-          </InputAdornment>
-        ),
-        ...InputProps,
-      }}
-      {...otherTextFieldProps}
-    />
+    <>
+      <TextField
+        autoComplete="off"
+        type={type}
+        name={name}
+        label={label}
+        schema={schema}
+        placeholder={placeholder}
+        InputProps={{ endAdornment, ...InputProps }}
+        {...otherTextFieldProps}
+      />
+      {withRepeatField && (
+        <RepeatField
+          name={name}
+          type={type}
+          {...repeatFieldProps}
+          InputProps={{ endAdornment, ...repeatFieldProps.InputProps }}
+        />
+      )}
+    </>
   )
 }
 

diff --git a/src/components/form/RepeatField.tsx b/src/components/form/RepeatField.tsx
@@ -16,7 +16,6 @@ export type RepeatFieldProps = Omit<
   | "helperText"
   | "defaultValue"
   | "required"
-  | "type"
 > & {
   name: string
 }
@@ -26,6 +25,7 @@ const RepeatField: FC<RepeatFieldProps> = ({
   name,
   label,
   placeholder,
+  type = "text",
   ...otherTextFieldProps
 }) => {
   const [value, setValue] = useState("")
@@ -34,7 +34,7 @@ const RepeatField: FC<RepeatFieldProps> = ({
 
   const fieldConfig: FieldConfig = {
     name: repeatName,
-    type: "text",
+    type,
     validate: schemaToFieldValidator(
       yup
         .string()
@@ -55,7 +55,7 @@ const RepeatField: FC<RepeatFieldProps> = ({
         return (
           <TextField
             required
-            type="text"
+            type={type}
             label={label ?? `Repeat ${name.replace("_", " ")}`}
             placeholder={
               placeholder ?? `Enter your ${name.replace("_", " ")} again`