Add back trim

presleyp · presleyp · commit 73df2da3c57f · 2022-03-24T19:42:50.000Z
diff --git a/site/src/components/Form/index.ts b/site/src/components/Form/index.ts
@@ -6,7 +6,7 @@ export * from "./FormDropdownField"
 export * from "./FormTextField"
 export * from "./FormTitle"
 
-export  function getFormHelpers<T>(form: FormikContextType<T>, name: keyof T) {
+export function getFormHelpers<T>(form: FormikContextType<T>, name: keyof T) {
     const touched = form.touched[name]
     const errors = form.errors[name]
     return {
@@ -16,3 +16,10 @@ export  function getFormHelpers<T>(form: FormikContextType<T>, name: keyof T) {
       helperText: touched && errors
     }
   }
+
+export function onChangeTrimmed<T>(form: FormikContextType<T>) {
+  return (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.target.value = event?.target?.value?.trim()
+    form.handleChange(event)
+  }
+}
diff --git a/site/src/components/SignIn/SignInForm.tsx b/site/src/components/SignIn/SignInForm.tsx
@@ -7,7 +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"
+import { getFormHelpers, onChangeTrimmed } from "../Form"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)
@@ -71,6 +71,7 @@ export const SignInForm: React.FC<SignInFormProps> = ({ isLoading, authErrorMess
       <form onSubmit={form.handleSubmit}>
         <TextField
           {...getFormHelpers<BuiltInAuthFormValues>(form, "email")}
+          onChange={onChangeTrimmed(form)}
           autoFocus
           autoComplete="email"
           className={styles.loginTextField}
