fix(site): username validation in forms

oxy · oxy · commit d9b857ba7bed · 2022-05-27T16:45:41.000Z
diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -4,7 +4,7 @@ import { FormikContextType, FormikErrors, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
-import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
 
@@ -15,7 +15,6 @@ export const Language = {
   emailInvalid: "Please enter a valid email address.",
   emailRequired: "Please enter an email address.",
   passwordRequired: "Please enter a password.",
-  usernameRequired: "Please enter a username.",
   createUser: "Create",
   cancel: "Cancel",
 }
@@ -32,7 +31,7 @@ export interface CreateUserFormProps {
 const validationSchema = Yup.object({
   email: Yup.string().trim().email(Language.emailInvalid).required(Language.emailRequired),
   password: Yup.string().required(Language.passwordRequired),
-  username: Yup.string().required(Language.usernameRequired),
+  username: nameValidator(Language.usernameLabel),
 })
 
 export const CreateUserForm: React.FC<CreateUserFormProps> = ({
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -3,7 +3,7 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
@@ -22,7 +22,7 @@ export const Language = {
 
 const validationSchema = Yup.object({
   email: Yup.string().trim().email(Language.emailInvalid).required(Language.emailRequired),
-  username: Yup.string().trim(),
+  username: nameValidator(Language.usernameLabel),
 })
 
 export type AccountFormErrors = FormikErrors<AccountFormValues>
