migrate to blitzjs

app/auth/pages/forgot-password.tsx

@@ -0,0 +1,52 @@
+import { BlitzPage, useMutation } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import { ForgotPassword } from "../validations"
+import forgotPassword from "../../auth/mutations/forgot-password"
+
+const ForgotPasswordPage: BlitzPage = () => {
+	const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword)
+
+	return (
+		<div>
+			<h1>Forgot your password?</h1>
+
+			{isSuccess ? (
+				<div>
+					<h2>Request Submitted</h2>
+					<p>
+						If your email is in our system, you will receive instructions to reset your
+						password shortly.
+					</p>
+				</div>
+			) : (
+				<Form
+					submitText="Send Reset Password Instructions"
+					schema={ForgotPassword}
+					initialValues={{ email: "" }}
+					onSubmit={async (values) => {
+						try {
+							await forgotPasswordMutation(values)
+						} catch (error) {
+							return {
+								[FORM_ERROR]:
+									"Sorry, we had an unexpected error. Please try again.",
+							}
+						}
+					}}
+				>
+					<LabeledTextField name="email" label="Email" placeholder="Email" />
+				</Form>
+			)}
+		</div>
+	)
+}
+
+ForgotPasswordPage.redirectAuthenticatedTo = "/"
+ForgotPasswordPage.getLayout = (page) => (
+	<BaseLayout title="Forgot Your Password?">{page}</BaseLayout>
+)
+
+export default ForgotPasswordPage

app/auth/pages/login.tsx

@@ -0,0 +1,26 @@
+import { useRouter, BlitzPage } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { LoginForm } from "../components/login-form"
+
+const LoginPage: BlitzPage = () => {
+	const router = useRouter()
+
+	return (
+		<div>
+			<LoginForm
+				onSuccess={() => {
+					const next = router.query.next
+						? decodeURIComponent(router.query.next as string)
+						: "/"
+					router.push(next)
+				}}
+			/>
+		</div>
+	)
+}
+
+LoginPage.redirectAuthenticatedTo = "/"
+LoginPage.getLayout = (page) => <BaseLayout title="Log In">{page}</BaseLayout>
+
+export default LoginPage

app/auth/pages/reset-password.tsx

@@ -0,0 +1,65 @@
+import { BlitzPage, useRouterQuery, Link, useMutation, Routes } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import { ResetPassword } from "../validations"
+import resetPassword from "../../auth/mutations/reset-password"
+
+const ResetPasswordPage: BlitzPage = () => {
+	const query = useRouterQuery()
+	const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword)
+
+	return (
+		<div>
+			<h1>Set a New Password</h1>
+
+			{isSuccess ? (
+				<div>
+					<h2>Password Reset Successfully</h2>
+					<p>
+						Go to the <Link href={Routes.Home()}>homepage</Link>
+					</p>
+				</div>
+			) : (
+				<Form
+					submitText="Reset Password"
+					schema={ResetPassword}
+					initialValues={{
+						password: "",
+						passwordConfirmation: "",
+						token: query.token as string,
+					}}
+					onSubmit={async (values) => {
+						try {
+							await resetPasswordMutation(values)
+						} catch (error) {
+							if (error.name === "ResetPasswordError") {
+								return {
+									[FORM_ERROR]: error.message,
+								}
+							} else {
+								return {
+									[FORM_ERROR]:
+										"Sorry, we had an unexpected error. Please try again.",
+								}
+							}
+						}
+					}}
+				>
+					<LabeledTextField name="password" label="New Password" type="password" />
+					<LabeledTextField
+						name="passwordConfirmation"
+						label="Confirm New Password"
+						type="password"
+					/>
+				</Form>
+			)}
+		</div>
+	)
+}
+
+ResetPasswordPage.redirectAuthenticatedTo = "/"
+ResetPasswordPage.getLayout = (page) => <BaseLayout title="Reset Your Password">{page}</BaseLayout>
+
+export default ResetPasswordPage

app/auth/pages/signup.tsx

@@ -0,0 +1,19 @@
+import { useRouter, BlitzPage, Routes } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { SignupForm } from "../components/signup-form"
+
+const SignupPage: BlitzPage = () => {
+	const router = useRouter()
+
+	return (
+		<div>
+			<SignupForm onSuccess={() => router.push(Routes.Home())} />
+		</div>
+	)
+}
+
+SignupPage.redirectAuthenticatedTo = "/"
+SignupPage.getLayout = (page) => <BaseLayout title="Sign Up">{page}</BaseLayout>
+
+export default SignupPage