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

75 lines
2.3 KiB
TypeScript
Raw Normal View History

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,
2025-01-05 00:06:24 -05:00
EmailSignature,
2025-01-04 20:22:01 -05:00
EmailText
} from "./components/Email";
interface Props {
email: string;
enabled: boolean;
}
export const TwoFactorAuthNotification = ({ email, enabled }: Props) => {
const previewText = `Two-Factor Authentication has been ${enabled ? "enabled" : "disabled"}`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
2025-01-04 20:22:01 -05:00
<Tailwind config={themeColors}>
<Body className="font-sans">
2025-01-04 20:22:01 -05:00
<EmailContainer>
<EmailLetterHead />
2025-01-04 20:22:01 -05:00
<EmailHeading>
Two-Factor Authentication{" "}
{enabled ? "Enabled" : "Disabled"}
2025-01-04 20:22:01 -05:00
</EmailHeading>
<EmailGreeting>Hi {email || "there"},</EmailGreeting>
<EmailText>
This email confirms that Two-Factor Authentication
has been successfully{" "}
{enabled ? "enabled" : "disabled"} on your account.
2025-01-04 20:22:01 -05:00
</EmailText>
{enabled ? (
2025-01-04 20:22:01 -05:00
<EmailText>
With Two-Factor Authentication enabled, your
account is now more secure. Please ensure you
keep your authentication method safe.
2025-01-04 20:22:01 -05:00
</EmailText>
) : (
2025-01-04 20:22:01 -05:00
<EmailText>
With Two-Factor Authentication disabled, your
account may be less secure. We recommend
enabling it to protect your account.
2025-01-04 20:22:01 -05:00
</EmailText>
)}
2025-01-04 20:22:01 -05:00
<EmailFooter>
2025-01-05 00:06:24 -05:00
<EmailSignature />
2025-01-04 20:22:01 -05:00
</EmailFooter>
</EmailContainer>
</Body>
</Tailwind>
</Html>
);
};
export default TwoFactorAuthNotification;