style login form

app/auth/pages/sign-in.tsx

@@ -1,23 +1,61 @@
 import type { BlitzPage } from "blitz";
-import { useRouter, Routes } from "blitz";
+import { useRouter, Routes, AuthenticationError, Link, useMutation } from "blitz";
 
 import BaseLayout from "../../core/layouts/base-layout";
-import { LoginForm } from "../components/login-form";
+import { AuthForm as Form, FORM_ERROR } from "../components/auth-form";
+import { Login } from "../validations";
+import { LabeledTextField } from "../components/labeled-text-field";
+import login from "../mutations/login";
 
 const SignIn: BlitzPage = () => {
 	const router = useRouter();
+	const [loginMutation] = useMutation(login);
 
 	return (
-		<div>
-			<LoginForm
-				onSuccess={() => {
+		<Form
+			texts={{
+				title: "Welcome back!",
+				subtitle: (
+					<>
+						Need an account?&nbsp;
+						<Link href={Routes.SignUp()}>
+							<a className="font-medium text-primary-600 hover:text-primary-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+								Create yours for free
+							</a>
+						</Link>
+					</>
+				),
+				submit: "Sign in",
+			}}
+			schema={Login}
+			initialValues={{ email: "", password: "" }}
+			onSubmit={async (values) => {
+				try {
+					await loginMutation(values);
 					const next = router.query.next
 						? decodeURIComponent(router.query.next as string)
 						: Routes.Messages();
 					router.push(next);
-				}}
+				} catch (error: any) {
+					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" type="email" />
+			<LabeledTextField
+				name="password"
+				label="Password"
+				placeholder="Password"
+				type="password"
+				showForgotPasswordLabel
 			/>
-		</div>
+		</Form>
 	);
 };