use maizzle for email templating, starting with reset password email

This commit is contained in:
m5r
2021-10-26 23:34:21 +02:00
parent 3f279634b6
commit 514dae3ebb
25 changed files with 6069 additions and 508 deletions

View File

@ -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;

View File

@ -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) {

View File

@ -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;

View File

@ -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;