-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FEAT: added email tamplets with react-emails
- Loading branch information
Showing
6 changed files
with
2,233 additions
and
334 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,8 @@ | ||
| import { render } from "@react-email/components"; | ||
| import nodemailer from "nodemailer"; | ||
| import RegistrationEmail from "./emails/RegistrationEmail"; | ||
| import RegistrationCompletion from "./emails/RegistrationCompletion"; | ||
|
|
||
| const transporter = nodemailer.createTransport({ | ||
| host: "smtp.mailgun.org", | ||
| port: 587, | ||
|
|
@@ -12,32 +16,40 @@ const transporter = nodemailer.createTransport({ | |
| export async function SendRegistrationVerificationMail({ | ||
| to, | ||
| href, | ||
| firstname, | ||
| }: { | ||
| to: string; | ||
| href: string; | ||
| firstname: string; | ||
| }) { | ||
| const info = await transporter.sendMail({ | ||
| from: `"Devote" <[email protected]>`, | ||
| to: to, | ||
| subject: "Devote Verification", | ||
| html: `<div style='padding: 20px'><div style='font-size: 14px;margin-bottom: 10px;'>Verify Your Devote Registration</div><a href=${href} target='_blank' style='background-color:#1165ed;padding: 8px 12px;border-radius: 10px;font-size: 14px; color: #ffffff;text-decoration: none;font-weight:bold;'>Verify Here</a></div>`, | ||
| subject: "Devote registeration Completion", | ||
| html: render( | ||
| RegistrationEmail({ userFirstname: firstname, resetPasswordLink: href }) | ||
| ), | ||
| }); | ||
| return info; | ||
| } | ||
|
|
||
| export async function SendNormalMail({ | ||
| to, | ||
| message, | ||
| publickey, | ||
| }: { | ||
| to: string; | ||
| message: string; | ||
| publickey: string; | ||
| }) { | ||
| try { | ||
| const info = await transporter.sendMail({ | ||
| from: `"Devote" <[email protected]>`, | ||
| to: to, | ||
| subject: "Verified Voter of Devote", | ||
| text: message, | ||
| subject: "Your Are Verified User Now", | ||
| html: render( | ||
| RegistrationCompletion( | ||
| `${process.env.DEVOTE_DEPLOYMENT_URL}/voteridentity/${publickey}` | ||
| ) | ||
| ), | ||
| }); | ||
| return info; | ||
| } catch (error) { | ||
|
|
||
92 changes: 92 additions & 0 deletions
92
apps/votingsystem/app/lib/emails/RegistrationCompletion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { | ||
| Body, | ||
| Button, | ||
| Container, | ||
| Head, | ||
| Heading, | ||
| Html, | ||
| Img, | ||
| Preview, | ||
| Row, | ||
| Section, | ||
| Text, | ||
| Tailwind, | ||
| } from "@react-email/components"; | ||
| import * as React from "react"; | ||
|
|
||
| export const RegistrationCompletion = (profileurl: string) => { | ||
| return ( | ||
| <Html> | ||
| <Head /> | ||
| <Preview>Devote Welcome</Preview> | ||
| <Tailwind | ||
| config={{ | ||
| theme: { | ||
| extend: { | ||
| colors: { | ||
| brand: "#2250f4", | ||
| offwhite: "#fafbfb", | ||
| }, | ||
| spacing: { | ||
| 0: "0px", | ||
| 20: "20px", | ||
| 45: "45px", | ||
| }, | ||
| }, | ||
| }, | ||
| }} | ||
| > | ||
| <Body className="bg-offwhite text-base font-sans"> | ||
| <Img | ||
| src={`https://static.aaraz.me/devote_logo.png`} | ||
| width="184" | ||
| height="75" | ||
| alt="Netlify" | ||
| className="mx-auto my-20" | ||
| /> | ||
| <Container className="bg-white p-45"> | ||
| <Heading className="text-center my-0 leading-8"> | ||
| Welcome to Devote | ||
| </Heading> | ||
|
|
||
| <Section> | ||
| <Row> | ||
| <Text className="text-base"> | ||
| Congratulations! You are now a verified user of devote & you | ||
| can download your ID certificate from the below link | ||
| </Text> | ||
| <Button | ||
| className="bg-brand text-white rounded-lg py-3 px-[18px]" | ||
| href={process.env.DEVOTE_DEPLOYMENT_URL + "/downloadidentity"} | ||
| target="_blank" | ||
| > | ||
| Download ID Certificate | ||
| </Button> | ||
| <Text className="text-base"> | ||
| Your can see your registration status and detail on below link | ||
| </Text> | ||
| </Row> | ||
| </Section> | ||
|
|
||
| <Section> | ||
| <Button | ||
| className="bg-brand text-white rounded-lg py-3 px-[18px]" | ||
| href={profileurl} | ||
| > | ||
| View Your Info Here | ||
| </Button> | ||
| </Section> | ||
| </Container> | ||
|
|
||
| <Container className="mt-20"> | ||
| <Text className="text-center text-gray-400 mb-45"> | ||
| Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA | ||
| </Text> | ||
| </Container> | ||
| </Body> | ||
| </Tailwind> | ||
| </Html> | ||
| ); | ||
| }; | ||
|
|
||
| export default RegistrationCompletion; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { | ||
| Body, | ||
| Button, | ||
| Container, | ||
| Head, | ||
| Html, | ||
| Img, | ||
| Link, | ||
| Preview, | ||
| Section, | ||
| Text, | ||
| } from "@react-email/components"; | ||
| import * as React from "react"; | ||
|
|
||
| interface RegistrationEmailProps { | ||
| userFirstname: string; | ||
| resetPasswordLink: string; | ||
| } | ||
| export const RegistrationEmail = ({ | ||
| userFirstname, | ||
| resetPasswordLink, | ||
| }: RegistrationEmailProps) => { | ||
| return ( | ||
| <Html> | ||
| <Head /> | ||
| <Preview>Dropbox reset your password</Preview> | ||
| <Body style={main}> | ||
| <Container style={container}> | ||
| <Img | ||
| src={`https://static.aaraz.me/devote_logo.png`} | ||
| width="100" | ||
| height="50" | ||
| alt="Dropbox" | ||
| /> | ||
| <Section> | ||
| <Text style={text}>Hi {userFirstname || "User"},</Text> | ||
| <Text style={text}> | ||
| Your recently initiated identity registration process, To complete | ||
| the registration wallet address is required.The link will take you | ||
| to verification page where you can connect desired wallet account | ||
| to complete the registration. | ||
| </Text> | ||
| <Button style={button} href={resetPasswordLink} target="_blank"> | ||
| Complete Registration | ||
| </Button> | ||
| <Text style={text}> | ||
| The link will expire in 24 hours, so be sure to use it right away. | ||
| </Text> | ||
| <Text style={text}> | ||
| To keep your account secure, please don't forward this email | ||
| to anyone. If the email has expired you can regenerate it{" "} | ||
| <Link style={anchor} href="Url"> | ||
| Here | ||
| </Link> | ||
| </Text> | ||
| <Text style={text}>Happy Voting!</Text> | ||
| </Section> | ||
| </Container> | ||
| </Body> | ||
| </Html> | ||
| ); | ||
| }; | ||
|
|
||
| export default RegistrationEmail; | ||
|
|
||
| const main = { | ||
| backgroundColor: "#f6f9fc", | ||
| padding: "10px 0", | ||
| }; | ||
|
|
||
| const container = { | ||
| backgroundColor: "#ffffff", | ||
| border: "1px solid #f0f0f0", | ||
| padding: "45px", | ||
| }; | ||
|
|
||
| const text = { | ||
| fontSize: "16px", | ||
| fontFamily: | ||
| "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif", | ||
| fontWeight: "300", | ||
| color: "#404040", | ||
| lineHeight: "26px", | ||
| }; | ||
|
|
||
| const button = { | ||
| backgroundColor: "#007ee6", | ||
| borderRadius: "4px", | ||
| color: "#fff", | ||
| fontFamily: "'Open Sans', 'Helvetica Neue', Arial", | ||
| fontSize: "15px", | ||
| textDecoration: "none", | ||
| textAlign: "center" as const, | ||
| display: "block", | ||
| width: "210px", | ||
| padding: "14px 7px", | ||
| cursor: "pointer", | ||
| }; | ||
|
|
||
| const anchor = { | ||
| textDecoration: "underline", | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.