Add util for form props

presleyp · presleyp · commit 918dd80bfc2f · 2022-03-24T19:18:54.000Z
diff --git a/site/src/components/Form/index.ts b/site/src/components/Form/index.ts
@@ -1,5 +1,18 @@
+import { FormikContextType } from "formik/dist/types"
+
 export * from "./FormCloseButton"
 export * from "./FormSection"
 export * from "./FormDropdownField"
 export * from "./FormTextField"
 export * from "./FormTitle"
+
+export  function getFormHelpers<T>(form: FormikContextType<T>, name: keyof T) {
+    const touched = form.touched[name]
+    const errors = form.errors[name]
+    return {
+      ...form.getFieldProps(name),
+      id: name,
+      error: touched && Boolean(errors),
+      helperText: touched && errors
+    }
+  }
diff --git a/site/src/components/SignIn/SignInForm.tsx b/site/src/components/SignIn/SignInForm.tsx
@@ -7,6 +7,7 @@ import { Welcome } from "./Welcome"
 import FormHelperText from "@material-ui/core/FormHelperText"
 import { LoadingButton } from "./../Button"
 import TextField from "@material-ui/core/TextField"
+import { getFormHelpers } from "../Form"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)
@@ -69,19 +70,16 @@ export const SignInForm: React.FC<SignInFormProps> = ({ isLoading, authErrorMess
       <Welcome />
       <form onSubmit={form.handleSubmit}>
         <TextField
-          {...form.getFieldProps("email")}
+          {...getFormHelpers<BuiltInAuthFormValues>(form, "email")}
           autoFocus
           autoComplete="email"
           className={styles.loginTextField}
-          error={form.touched.email && Boolean(form.errors.email)}
           fullWidth
-          helperText={form.touched.email && form.errors.email}
-          id="email"
           label={LANGUAGE.emailLabel}
           variant="outlined"
         />
         <TextField
-          {...form.getFieldProps("password")}
+          {...getFormHelpers<BuiltInAuthFormValues>(form, "password")}
           autoComplete="current-password"
           className={styles.loginTextField}
           fullWidth
