PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

added email verification

Browse Source
This commit is contained in:
PxlLoewe
2025-05-30 01:06:28 -07:00
parent 0cebe2b97e
commit b0caf56add
20 changed files with 459 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/hub-server/index.ts
View File

@@ -11,7 +11,7 @@ app.use(cors());
app.use(router);
const port = process.env.HUB_API_PORT || 3000;
const port = process.env.HUB_SERVER_PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});

2
apps/hub-server/modules/mail-templates/Badge.tsx
View File

@@ -13,7 +13,7 @@ const badgeImageMapping = {
export const Badge = ({ badge }: { badge: BADGES }) => (
<img
src={`${process.env.HUB_URL}/badges/${badgeImageMapping[badge]}`}
src={`${process.env.NEXT_PUBLIC_HUB_URL}/badges/${badgeImageMapping[badge]}`}
alt="Badge"
width="80"
style={{ display: "block", margin: "0 auto" }}

235
apps/hub-server/modules/mail-templates/ConfirmEmail.tsx Normal file
View File

@@ -0,0 +1,235 @@
import * as React from "react";
import { User } from "@repo/db";
import { Html, render } from "@react-email/components";
const styles = `
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit;
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0px;
overflow: hidden;
}
.image_block img + div {
display: none;
}
sup,
sub {
font-size: 75%;
line-height: 0;
}
.menu_block.desktop_hide .menu-links span {
mso-hide: all;
}
@media (max-width: 700px) {
.desktop_hide table.icons-inner {
display: inline-block !important;
}
.icons-inner {
text-align: center;
}
.icons-inner td {
margin: 0 auto;
}
}
`;
const Template = ({ user, code }: { user: User; code: string }) => (
<Html lang="de">
<meta content="text/html; charset=utf-8" httpEquiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
type="text/css"
/>
<style>{styles}</style>
<body style={{ backgroundColor: "#FFFFFF", margin: 0, padding: 0 }}>
<table width="100%">
<tbody>
<tr>
<td>
<table align="center" width="680" style={{ margin: "0 auto", color: "#000000" }}>
<tbody>
<tr>
<td style={{ textAlign: "center", paddingTop: "30px" }}>
<img
src={`${process.env.NEXT_PUBLIC_HUB_URL}/mail/var_logo.png`}
alt="Logo"
width="80"
style={{ display: "block", margin: "0 auto" }}
/>
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "24px",
color: "#011936",
padding: "20px 0",
}}
>
<strong>Bestätigung deiner E-Mail-Adresse</strong>
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "30px",
color: "#011936",
}}
>
Hallo {user.firstname},
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "18px",
color: "#011936",
padding: "20px",
}}
>
Klicke auf den folgenden Link, um deinen Account zu bestätigen:
</td>
</tr>
<tr>
<td style={{ textAlign: "center", padding: "10px 0" }}>
<a
href={`${process.env.NEXT_PUBLIC_HUB_URL}/settings/email-verification?code=${code}`}
style={{
display: "inline-block",
backgroundColor: "#011936",
color: "#fff",
padding: "12px 32px",
borderRadius: "8px",
textDecoration: "none",
fontSize: "18px",
fontWeight: "bold",
}}
>
E-Mail bestätigen
</a>
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "16px",
color: "#011936",
padding: "10px 0",
}}
>
Oder gehe zu{" "}
<p
style={{
display: "inline",
fontWeight: "bold",
margin: 0,
}}
>
<strong>
{process.env.NEXT_PUBLIC_HUB_URL}/settings/email-verification
</strong>
</p>{" "}
und gib dort deinen Code ein.
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "18px",
color: "#011936",
padding: "20px",
}}
>
Deinen Code lautet: <strong>{code}</strong>
</td>
</tr>
<tr>
<td style={{ textAlign: "center", paddingTop: "20px" }}>
<a
href="https://your-platform.com"
style={{
padding: "10px",
textDecoration: "none",
borderRadius: "20px",
color: "#011936",
}}
>
Impressum
</a>
<span style={{ margin: "0 10px" }}>|</span>
<a
href="https://your-platform.com"
style={{
padding: "10px",
textDecoration: "none",
borderRadius: "20px",
color: "#011936",
}}
>
Datenschutzerklärung
</a>
<span style={{ margin: "0 10px" }}>|</span>
<a
href="https://your-platform.com"
style={{
padding: "10px",
textDecoration: "none",
borderRadius: "20px",
color: "#011936",
}}
>
Knowledgebase
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</Html>
);
export function renderVerificationCode({ user, code }: { user: User; code: string }) {
return render(<Template user={user} code={code} />);
}

22
apps/hub-server/modules/mail-templates/CourseCompleted.tsx
View File

@@ -79,16 +79,12 @@ const Template = ({ event, user }: { user: User; event: Event }) => (
<tbody>
<tr>
<td>
<table
align="center"
width="680"
style={{ margin: "0 auto", color: "#000000" }}
>
<table align="center" width="680" style={{ margin: "0 auto", color: "#000000" }}>
<tbody>
<tr>
<td style={{ textAlign: "center", paddingTop: "30px" }}>
<img
src={`${process.env.HUB_URL}/mail/var_logo.png`}
src={`${process.env.NEXT_PUBLIC_HUB_URL}/mail/var_logo.png`}
alt="Logo"
width="80"
style={{ display: "block", margin: "0 auto" }}
@@ -114,8 +110,7 @@ const Template = ({ event, user }: { user: User; event: Event }) => (
color: "#011936",
}}
>
Du hast den Kurs <strong>{event.name}</strong>{" "}
abgeschlossen!
Du hast den Kurs <strong>{event.name}</strong> abgeschlossen!
</td>
</tr>
<tr>
@@ -133,8 +128,7 @@ const Template = ({ event, user }: { user: User; event: Event }) => (
color: "#011936",
}}
>
Mit dem Abschluss von Kursen verdienst du dir nach und
nach immer mehr Badges.
Mit dem Abschluss von Kursen verdienst du dir nach und nach immer mehr Badges.
</td>
</tr>
<tr>
@@ -186,12 +180,6 @@ const Template = ({ event, user }: { user: User; event: Event }) => (
</Html>
);
export function renderCourseCompleted({
user,
event,
}: {
user: User;
event: Event;
}) {
export function renderCourseCompleted({ user, event }: { user: User; event: Event }) {
return render(<Template event={event} user={user} />);
}

27
apps/hub-server/modules/mail.ts
View File

@@ -2,16 +2,15 @@ import { Event, User } from "@repo/db";
import nodemailer from "nodemailer";
import { renderCourseCompleted } from "./mail-templates/CourseCompleted";
import { renderPasswordChanged } from "./mail-templates/PasswordChanged";
import { renderVerificationCode } from "./mail-templates/ConfirmEmail";
let transporter: nodemailer.Transporter | null = null;
const initTransporter = () => {
if (!process.env.MAIL_SERVER)
return console.error("MAIL_SERVER is not defined");
if (!process.env.MAIL_SERVER) return console.error("MAIL_SERVER is not defined");
if (!process.env.MAIL_PORT) return console.error("MAIL_PORT is not defined");
if (!process.env.MAIL_USER) return console.error("MAIL_USER is not defined");
if (!process.env.MAIL_PASSWORD)
return console.error("MAIL_PASSWORD is not defined");
if (!process.env.MAIL_PASSWORD) return console.error("MAIL_PASSWORD is not defined");
transporter = nodemailer.createTransport({
host: process.env.MAIL_SERVER,
@@ -32,11 +31,7 @@ const initTransporter = () => {
initTransporter();
export const sendCourseCompletedEmail = async (
to: string,
user: User,
event: Event,
) => {
export const sendCourseCompletedEmail = async (to: string, user: User, event: Event) => {
const emailHtml = await renderCourseCompleted({ user, event });
if (!transporter) {
@@ -46,16 +41,20 @@ export const sendCourseCompletedEmail = async (
sendMail(to, `Kurs ${event.name} erfolgreich abgeschlossen`, emailHtml);
};
export const sendPasswordChanged = async (
to: string,
user: User,
password: string,
) => {
export const sendPasswordChanged = async (to: string, user: User, password: string) => {
const emailHtml = await renderPasswordChanged({ user, password });
await sendMail(to, `Dein Passwort wurde geändert`, emailHtml);
};
export const sendEmailVerification = async (to: string, user: User, code: string) => {
const emailHtml = await renderVerificationCode({
user,
code,
});
await sendMail(to, "Bestätige deine E-Mail-Adresse", emailHtml);
};
export const sendMail = async (to: string, subject: string, html: string) =>
new Promise<void>(async (resolve, reject) => {
if (!transporter) {

8
apps/hub-server/routes/mail.ts
View File

@@ -1,5 +1,5 @@
import { Router } from "express";
import { sendMail } from "modules/mail";
import { sendEmailVerification, sendMail } from "modules/mail";
import { sendPasswordChanged, sendCourseCompletedEmail } from "modules/mail";
const router: Router = Router();
@@ -45,6 +45,12 @@ router.post("/template/:template", async (req, res) => {
}
await sendCourseCompletedEmail(to, data.user, data.event);
break;
case "email-verification":
if (!data.code) {
res.status(400).json({ error: "Missing verification code" });
return;
}
await sendEmailVerification(to, data.user, data.code);
default:
res.status(400).json({ error: "Invalid template" });
return;

2
apps/hub-server/tsconfig.json
View File

@@ -6,6 +6,6 @@
"baseUrl": ".",
"jsx": "react"
},
"include": ["**/*.ts", "./index.ts"],
"include": ["**/*.ts", "./index.ts", "modules/mail-templates/VerificationCode.tsx"],
"exclude": ["node_modules", "dist"]
}