fosrl.pangolin/server/emails/templates/ResetPasswordCode.tsx

74 lines
2.1 KiB
TypeScript
Raw Normal View History

2024-12-22 16:59:30 -05:00
import {
Body,
Head,
Html,
Preview,
Tailwind
} from "@react-email/components";
import * as React from "react";
2025-01-04 20:22:01 -05:00
import { themeColors } from "./lib/theme";
import {
EmailContainer,
EmailFooter,
EmailGreeting,
EmailHeading,
EmailLetterHead,
EmailSection,
EmailText
} from "./components/Email";
import CopyCodeBox from "./components/CopyCodeBox";
2024-12-22 16:59:30 -05:00
interface Props {
email: string;
code: string;
link: string;
}
export const ResetPasswordCode = ({ email, code, link }: Props) => {
const previewText = `Your password reset code is ${code}`;
2024-12-22 16:59:30 -05:00
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
2025-01-04 20:22:01 -05:00
<Tailwind config={themeColors}>
2024-12-22 16:59:30 -05:00
<Body className="font-sans">
2025-01-04 20:22:01 -05:00
<EmailContainer>
<EmailLetterHead />
<EmailHeading>Password Reset Request</EmailHeading>
<EmailGreeting>Hi {email || "there"},</EmailGreeting>
2025-01-04 20:22:01 -05:00
<EmailText>
2024-12-22 16:59:30 -05:00
Youve requested to reset your password. Please{" "}
<a href={link} className="text-primary">
click here
</a>{" "}
2024-12-22 17:27:09 -05:00
and follow the instructions to reset your password,
or manually enter the following code:
2025-01-04 20:22:01 -05:00
</EmailText>
<EmailSection>
<CopyCodeBox text={code} />
</EmailSection>
<EmailText>
2024-12-22 16:59:30 -05:00
If you didnt request this, you can safely ignore
this email.
2025-01-04 20:22:01 -05:00
</EmailText>
<EmailFooter>
2024-12-22 17:27:09 -05:00
Best regards,
<br />
Fossorial
2025-01-04 20:22:01 -05:00
</EmailFooter>
</EmailContainer>
2024-12-22 16:59:30 -05:00
</Body>
</Tailwind>
</Html>
);
};
export default ResetPasswordCode;