migrate to blitzjs

app/auth/components/login-form.tsx

@@ -0,0 +1,61 @@
+import { AuthenticationError, Link, useMutation, Routes } from "blitz"
+
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import login from "../../../app/auth/mutations/login"
+import { Login } from "../validations"
+
+type LoginFormProps = {
+	onSuccess?: () => void
+}
+
+export const LoginForm = (props: LoginFormProps) => {
+	const [loginMutation] = useMutation(login)
+
+	return (
+		<div>
+			<h1>Login</h1>
+
+			<Form
+				submitText="Login"
+				schema={Login}
+				initialValues={{ email: "", password: "" }}
+				onSubmit={async (values) => {
+					try {
+						await loginMutation(values)
+						props.onSuccess?.()
+					} catch (error) {
+						if (error instanceof AuthenticationError) {
+							return { [FORM_ERROR]: "Sorry, those credentials are invalid" }
+						} else {
+							return {
+								[FORM_ERROR]:
+									"Sorry, we had an unexpected error. Please try again. - " +
+									error.toString(),
+							}
+						}
+					}
+				}}
+			>
+				<LabeledTextField name="email" label="Email" placeholder="Email" />
+				<LabeledTextField
+					name="password"
+					label="Password"
+					placeholder="Password"
+					type="password"
+				/>
+				<div>
+					<Link href={Routes.ForgotPasswordPage()}>
+						<a>Forgot your password?</a>
+					</Link>
+				</div>
+			</Form>
+
+			<div style={{ marginTop: "1rem" }}>
+				Or <Link href={Routes.SignupPage()}>Sign Up</Link>
+			</div>
+		</div>
+	)
+}
+
+export default LoginForm

app/auth/components/signup-form.tsx

@@ -0,0 +1,49 @@
+import { useMutation } from "blitz"
+
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import signup from "../../auth/mutations/signup"
+import { Signup } from "../validations"
+
+type SignupFormProps = {
+	onSuccess?: () => void
+}
+
+export const SignupForm = (props: SignupFormProps) => {
+	const [signupMutation] = useMutation(signup)
+
+	return (
+		<div>
+			<h1>Create an Account</h1>
+
+			<Form
+				submitText="Create Account"
+				schema={Signup}
+				initialValues={{ email: "", password: "" }}
+				onSubmit={async (values) => {
+					try {
+						await signupMutation(values)
+						props.onSuccess?.()
+					} catch (error) {
+						if (error.code === "P2002" && error.meta?.target?.includes("email")) {
+							// This error comes from Prisma
+							return { email: "This email is already being used" }
+						} else {
+							return { [FORM_ERROR]: error.toString() }
+						}
+					}
+				}}
+			>
+				<LabeledTextField name="email" label="Email" placeholder="Email" />
+				<LabeledTextField
+					name="password"
+					label="Password"
+					placeholder="Password"
+					type="password"
+				/>
+			</Form>
+		</div>
+	)
+}
+
+export default SignupForm