devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made it so, when using the batch code generator, it sends e-mails to everyone

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-03 20:24:34 +01:00
parent 07e73b0d88
commit 1ccb9555b6
10 changed files with 323 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Low/Button.tsx
View File

@@ -46,7 +46,7 @@ export default function Button({
type={type}
onClick={onClick}
className={clsx(
"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer",
className,
colorClassNames[color][variant],
)}

42
src/email/index.ts Normal file
View File

@@ -0,0 +1,42 @@
import nodemailer from "nodemailer";
import hbs from "nodemailer-express-handlebars";
import path from "path";
interface MailOptions {
from: string;
to: string[];
subject: string;
template: string;
context: object;
}
export function prepareMailer(): nodemailer.Transporter {
const transport = nodemailer.createTransport({
host: process.env.SMTP_HOST,
auth: {
user: process.env.MAIL_USER!,
pass: process.env.MAIL_PASS!,
},
});
const handlebarOptions: hbs.NodemailerExpressHandlebarsOptions = {
viewEngine: {
partialsDir: path.resolve("src/email/templates"),
defaultLayout: "src/email/templates/main",
},
viewPath: path.resolve("src/email/templates"),
};
transport.use("compile", hbs(handlebarOptions));
return transport;
}
export function prepareMailOptions(context: object, to: string[], subject: string, template: string): MailOptions {
return {
from: process.env.MAIL_USER!,
to,
subject,
template,
context,
};
}

BIN
src/email/templates/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/email/templates/logo_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

26
src/email/templates/main.handlebars Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<div style="background-color: #ffffff; color: #353338;"
class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base" class="text-base">
<img src="/logo_title.png" class="w-48 h-48 self-center" />
<div>
<span>Hello future {{type}} of <b>EnCoach</b>,</span><br />
<span>You have been invited to register at <a href="https://encoach.com">EnCoach</a> to become a
{{type}}!</span><br />
<span>Please use the following code when registering:</span>
</div>
<span class="self-center p-4 px-12 text-lg text-[#]" style="background-color: #D5D9F0; color: #353338">
<b>{{code}}</b>
</span>
<div>
<span>Thanks, <br /> Your EnCoach team</span>
</div>
</div>
</html>

4
src/email/templates/main.handlebars.json Normal file
View File

@@ -0,0 +1,4 @@
{
"type": "student",
"code": "123a"
}

21
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -10,6 +10,7 @@ import {useFilePicker} from "use-file-picker";
export default function BatchCodeGenerator() {
const [emails, setEmails] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(false);
const {openFilePicker, filesContent} = useFilePicker({
accept: ".txt",
multiple: false,
@@ -35,11 +36,12 @@ export default function BatchCodeGenerator() {
const uid = new ShortUniqueId();
const codes = emails.map(() => uid.randomUUID(6));
setIsLoading(true);
axios
.post("/api/code", {type, codes})
.post("/api/code", {type, codes, emails})
.then(({data, status}) => {
if (data.ok) {
toast.success(`Successfully generated ${capitalize(type)} codes!`, {toastId: "success"});
toast.success(`Successfully generated ${capitalize(type)} codes and they have been notified by e-mail!`, {toastId: "success"});
return;
}
@@ -54,25 +56,28 @@ export default function BatchCodeGenerator() {
}
toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
});
})
.finally(() => setIsLoading(false));
};
return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<label className="font-normal text-base text-mti-gray-dim">Choose a .txt file containing e-mails</label>
<Button onClick={openFilePicker}>{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}</Button>
<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
</Button>
<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
<div className="grid grid-cols-2 gap-4">
<Button className="w-48" variant="outline" onClick={() => generateCode("student")} disabled={emails.length === 0}>
<Button className="w-48" variant="outline" onClick={() => generateCode("student")} disabled={emails.length === 0 || isLoading}>
Student
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")} disabled={emails.length === 0}>
<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")} disabled={emails.length === 0 || isLoading}>
Teacher
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("admin")} disabled={emails.length === 0}>
<Button className="w-48" variant="outline" onClick={() => generateCode("admin")} disabled={emails.length === 0 || isLoading}>
Admin
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("owner")} disabled={emails.length === 0}>
<Button className="w-48" variant="outline" onClick={() => generateCode("owner")} disabled={emails.length === 0 || isLoading}>
Owner
</Button>
</div>

26
src/pages/api/code.ts
View File

@@ -7,6 +7,7 @@ import {sessionOptions} from "@/lib/session";
import {Type} from "@/interfaces/user";
import {PERMISSIONS} from "@/constants/userPermissions";
import {uuidv4} from "@firebase/util";
import {prepareMailer, prepareMailOptions} from "@/email";
const db = getFirestore(app);
@@ -18,7 +19,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
return;
}
const {type, codes} = req.body as {type: Type; codes: string[]};
const {type, codes, emails} = req.body as {type: Type; codes: string[]; emails?: string[]};
const permission = PERMISSIONS.generateCode[type];
if (!permission.includes(req.session.user.type)) {
@@ -26,10 +27,27 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
return;
}
for (const code of codes) {
const codePromises = codes.map(async (code, index) => {
const codeRef = doc(db, "codes", uuidv4());
await setDoc(codeRef, {type, code});
}
res.status(200).json({ok: true});
if (emails && emails.length > index) {
const transport = prepareMailer();
const mailOptions = prepareMailOptions(
{
type,
code,
},
[emails[index]],
"EnCoach Registration",
"main",
);
await transport.sendMail(mailOptions);
}
});
Promise.all(codePromises).then(() => {
res.status(200).json({ok: true});
});
}