use maizzle for email templating, starting with reset password email

app/auth/components/auth-form.tsx

@@ -84,7 +84,7 @@ export function AuthForm<S extends z.ZodType<any, any>>({
 								type="submit"
 								disabled={ctx.formState.isSubmitting}
 								className={clsx(
-									"w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-150 ease-in-out",
+									"w-full flex justify-center py-2 px-4 border border-transparent text-base font-medium rounded-md text-white focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-150 ease-in-out",
 									{
 										"bg-primary-400 cursor-not-allowed": ctx.formState.isSubmitting,
 										"bg-primary-600 hover:bg-primary-700": !ctx.formState.isSubmitting,

app/auth/mutations/forgot-password.ts

@@ -4,7 +4,7 @@ import db, { User } from "../../../db";
 import { forgotPasswordMailer } from "../../../mailers/forgot-password-mailer";
 import { ForgotPassword } from "../validations";
 
-const RESET_PASSWORD_TOKEN_EXPIRATION_IN_HOURS = 4;
+const RESET_PASSWORD_TOKEN_EXPIRATION_IN_HOURS = 24;
 
 export default resolver.pipe(resolver.zod(ForgotPassword), async ({ email }) => {
 	const user = await db.user.findFirst({ where: { email: email.toLowerCase() } });
@@ -36,5 +36,11 @@ async function updatePassword(user: User | null) {
 			sentTo: user.email,
 		},
 	});
-	await forgotPasswordMailer({ to: user.email, token }).send();
+	await (
+		await forgotPasswordMailer({
+			to: user.email,
+			token,
+			userName: user.fullName,
+		})
+	).send();
 }

app/auth/pages/forgot-password.tsx

@@ -1,26 +1,27 @@
 import type { BlitzPage } from "blitz";
 import { Routes, useMutation } from "blitz";
 
-import BaseLayout from "../../core/layouts/base-layout";
+import BaseLayout from "app/core/layouts/base-layout";
 import { AuthForm as Form, FORM_ERROR } from "../components/auth-form";
 import { LabeledTextField } from "../components/labeled-text-field";
 import { ForgotPassword } from "../validations";
-import forgotPassword from "../../auth/mutations/forgot-password";
+import forgotPassword from "app/auth/mutations/forgot-password";
 
 const ForgotPasswordPage: BlitzPage = () => {
-	const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword);
+	const [forgotPasswordMutation, { isSuccess, reset }] = useMutation(forgotPassword);
 
 	return (
 		<Form
 			texts={{
 				title: isSuccess ? "Request submitted" : "Forgot your password?",
 				subtitle: "",
-				submit: isSuccess ? "" : "Send reset password instructions",
+				submit: isSuccess ? "" : "Send reset password link",
 			}}
 			schema={ForgotPassword}
 			initialValues={{ email: "" }}
 			onSubmit={async (values) => {
 				try {
+					reset();
 					await forgotPasswordMutation(values);
 				} catch (error: any) {
 					return {
@@ -30,7 +31,9 @@ const ForgotPasswordPage: BlitzPage = () => {
 			}}
 		>
 			{isSuccess ? (
-				<p>If your email is in our system, you will receive instructions to reset your password shortly.</p>
+				<p className="text-center">
+					If your email is in our system, you will receive instructions to reset your password shortly.
+				</p>
 			) : (
 				<LabeledTextField name="email" label="Email" />
 			)}
@@ -40,6 +43,6 @@ const ForgotPasswordPage: BlitzPage = () => {
 
 ForgotPasswordPage.redirectAuthenticatedTo = Routes.Messages();
 
-ForgotPasswordPage.getLayout = (page) => <BaseLayout title="Forgot Your Password?">{page}</BaseLayout>;
+ForgotPasswordPage.getLayout = (page) => <BaseLayout title="Reset password">{page}</BaseLayout>;
 
 export default ForgotPasswordPage;

app/auth/pages/reset-password.tsx

@@ -56,7 +56,7 @@ const ResetPasswordPage: BlitzPage = () => {
 
 ResetPasswordPage.redirectAuthenticatedTo = Routes.Messages();
 
-ResetPasswordPage.getLayout = (page) => <BaseLayout title="Reset Your Password">{page}</BaseLayout>;
+ResetPasswordPage.getLayout = (page) => <BaseLayout title="Reset password">{page}</BaseLayout>;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
 	if (!context.query.token) {

app/auth/pages/sign-in.tsx

@@ -55,6 +55,6 @@ const SignIn: BlitzPage = () => {
 
 SignIn.redirectAuthenticatedTo = Routes.Messages();
 
-SignIn.getLayout = (page) => <BaseLayout title="Sign In">{page}</BaseLayout>;
+SignIn.getLayout = (page) => <BaseLayout title="Sign in">{page}</BaseLayout>;
 
 export default SignIn;

app/auth/pages/sign-up.tsx

@@ -55,6 +55,6 @@ SignUp.redirectAuthenticatedTo = ({ session }) => {
 	return Routes.Messages();
 };
 
-SignUp.getLayout = (page) => <BaseLayout title="Sign Up">{page}</BaseLayout>;
+SignUp.getLayout = (page) => <BaseLayout title="Sign up">{page}</BaseLayout>;
 
 export default SignUp;