Add basic form

site/src/components/CreateUserForm/CreateUserForm.stories.tsx

@@ -0,0 +1,22 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"
+
+export default {
+  title: "components/CreateUserForm",
+  component: CreateUserForm,
+  argTypes: {
+    isLoading: "boolean",
+    authErrorMessage: "string",
+    onSubmit: { action: "Submit" },
+  },
+}
+
+const Template: Story<CreateUserFormProps> = (args: CreateUserFormProps) => <CreateUserForm {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  onSubmit: () => {
+    return Promise.resolve()
+  },
+}

site/src/components/CreateUserForm/CreateUserForm.tsx

@@ -0,0 +1,80 @@
+import Button from "@material-ui/core/Button"
+import TextField from "@material-ui/core/TextField"
+import { FormikContextType, useFormik } from "formik"
+import React from "react"
+import * as Yup from "yup"
+import { CreateUserRequest } from "../../api/typesGenerated"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { LoadingButton } from "../LoadingButton/LoadingButton"
+
+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.",
+  usernameRequired: "Please enter a username.",
+  createUser: "Create",
+  cancel: "Cancel",
+}
+
+export interface CreateUserFormProps {
+  onSubmit: (user: CreateUserRequest) => void
+}
+
+const validationSchema = Yup.object({
+  email: Yup.string().trim().email(Language.emailInvalid).required(Language.emailRequired),
+  password: Yup.string().required(),
+  username: Yup.string().required(),
+})
+
+export const CreateUserForm: React.FC<CreateUserFormProps> = ({ onSubmit }) => {
+  const form: FormikContextType<CreateUserRequest> = useFormik<CreateUserRequest>({
+    initialValues: {
+      email: "",
+      password: "",
+      username: "",
+    },
+    validationSchema,
+    onSubmit,
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit}>
+      <TextField
+        {...getFormHelpers<CreateUserRequest>(form, "username")}
+        onChange={onChangeTrimmed(form)}
+        autoFocus
+        autoComplete="username"
+        fullWidth
+        label={Language.usernameLabel}
+        variant="outlined"
+      />
+      <TextField
+        {...getFormHelpers<CreateUserRequest>(form, "email")}
+        onChange={onChangeTrimmed(form)}
+        autoFocus
+        autoComplete="email"
+        fullWidth
+        label={Language.emailLabel}
+        variant="outlined"
+      />
+      <TextField
+        {...getFormHelpers<CreateUserRequest>(form, "password")}
+        autoComplete="current-password"
+        fullWidth
+        id="password"
+        label={Language.passwordLabel}
+        type="password"
+        variant="outlined"
+      />
+      <div>
+        <LoadingButton color="primary" type="submit" variant="contained">
+          {Language.createUser}
+        </LoadingButton>
+        <Button>{Language.cancel}</Button>
+      </div>
+    </form>
+  )
+}

site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

@@ -1,5 +1,12 @@
-import React from "react"
+import { useActor } from "@xstate/react"
+import React, { useContext } from "react"
+import { CreateUserRequest } from "../../../api/typesGenerated"
+import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
+import { XServiceContext } from "../../../xServices/StateContext"
 
 export const CreateUserPage = () => {
-  return <div>"Coming soon!"</div>
+  const xServices = useContext(XServiceContext)
+  const [_, usersSend] = useActor(xServices.usersXService)
+
+  return <CreateUserForm onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })} />
 }