import FormHelperText from "@material-ui/core/FormHelperText" import TextField from "@material-ui/core/TextField" import { FormikContextType, FormikErrors, useFormik } from "formik" import { FC } from "react" import * as Yup from "yup" import * as TypesGen from "../../api/typesGenerated" import { getFormHelpers, nameValidator, onChangeTrimmed, } from "../../util/formUtils" import { FormFooter } from "../FormFooter/FormFooter" import { FullPageForm } from "../FullPageForm/FullPageForm" import { Stack } from "../Stack/Stack" export const Language = { emailLabel: "Email", passwordLabel: "Password", usernameLabel: "Username", emailInvalid: "Please enter a valid email address.", emailRequired: "Please enter an email address.", passwordRequired: "Please enter a password.", createUser: "Create", cancel: "Cancel", } export interface CreateUserFormProps { onSubmit: (user: TypesGen.CreateUserRequest) => void onCancel: () => void formErrors?: FormikErrors isLoading: boolean error?: string myOrgId: string } const validationSchema = Yup.object({ email: Yup.string() .trim() .email(Language.emailInvalid) .required(Language.emailRequired), password: Yup.string().required(Language.passwordRequired), username: nameValidator(Language.usernameLabel), }) export const CreateUserForm: FC< React.PropsWithChildren > = ({ onSubmit, onCancel, formErrors, isLoading, error, myOrgId }) => { const form: FormikContextType = useFormik({ initialValues: { email: "", password: "", username: "", organization_id: myOrgId, }, validationSchema, onSubmit, }) const getFieldHelpers = getFormHelpers( form, formErrors, ) return (
{error && {error}}
) }