mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-03 17:44:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve verify email redirect flow

Browse source
This commit is contained in:
Milo Schwartz 2024-11-28 00:11:13 -05:00
parent c2cbd7e1a1
commit 5bbf32f6a6
No known key found for this signature in database
18 changed files with 145 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

29
server/emails/templates/VerifyEmailCode.tsx
View file

@ -14,11 +14,13 @@ import * as React from "react";
interface VerifyEmailProps {
username?: string;
verificationCode: string;
verifyLink: string;
}
export const VerifyEmail = ({
username,
verificationCode,
verifyLink,
}: VerifyEmailProps) => {
const previewText = `Verify your email, ${username}`;
@ -26,21 +28,34 @@ export const VerifyEmail = ({
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<Tailwind
config={{
theme: {
extend: {
colors: {
primary: "#F97317",
},
},
},
}}
>
<Body className="font-sans">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
<Heading className="text-2xl font-semibold text-gray-800 text-center">
Verify Your Email
Please verify your email
</Heading>
<Text className="text-base text-gray-700 mt-4">
Hi {username || "there"},
</Text>
<Text className="text-base text-gray-700 mt-2">
You’ve requested to verify your email. Please use
the verification code below:
You’ve requested to verify your email. Please{" "}
<a href={verifyLink} className="text-primary">
click here
</a>{" "}
to verify your email, then enter the following code:
</Text>
<Section className="text-center my-6">
<Text className="inline-block bg-gray-100 text-xl font-bold text-gray-900 py-2 px-4 border border-gray-300 rounded-md">
<Text className="inline-block bg-primary text-xl font-bold text-white py-2 px-4 border border-gray-300 rounded-xl">
{verificationCode}
</Text>
</Section>
@ -59,3 +74,5 @@ export const VerifyEmail = ({
</Html>
);
};
export default VerifyEmail;