added email verification

2025-05-30 01:06:28 -07:00
parent 0cebe2b97e
commit b0caf56add
20 changed files with 459 additions and 232 deletions
--- a/apps/dispatch-server/modules/socketJWTmiddleware.ts
+++ b/apps/dispatch-server/modules/socketJWTmiddleware.ts
@@ -1,12 +1,8 @@
 import { ExtendedError, Server, Socket } from "socket.io";
 import { prisma } from "@repo/db";
-if (!process.env.DISPATCH_APP_TOKEN)
-	throw new Error("DISPATCH_APP_TOKEN is not defined");
+if (!process.env.DISPATCH_APP_TOKEN) throw new Error("DISPATCH_APP_TOKEN is not defined");

-export const jwtMiddleware = async (
-	socket: Socket,
-	next: (err?: ExtendedError) => void,
-) => {
+export const jwtMiddleware = async (socket: Socket, next: (err?: ExtendedError) => void) => {
 	try {
 		const { uid } = socket.handshake.auth;
 		if (!uid) return new Error("Authentication error");
--- a/apps/dispatch/app/dispatch/layout.tsx
+++ b/apps/dispatch/app/dispatch/layout.tsx
@@ -19,6 +19,10 @@ export default async function RootLayout({
 	if (!session) {
 		redirect("/login");
 	}
+
+	if (!session.user.emailVerified)
+		return <Error title="E-Mail-Adresse nicht verifiziert" statusCode={403} />;
+
 	if (!session.user.permissions.includes("DISPO"))
 		return <Error title="Zugriff verweigert" statusCode={403} />;
 	return (
--- a/apps/dispatch/app/pilot/layout.tsx
+++ b/apps/dispatch/app/pilot/layout.tsx
@@ -19,6 +19,10 @@ export default async function RootLayout({
 	if (!session) {
 		redirect("/login");
 	}
+	if (!session.user.emailVerified) {
+		return <Error title="E-Mail-Adresse nicht verifiziert" statusCode={403} />;
+	}
+
 	if (!session.user.permissions.includes("PILOT"))
 		return <Error title="Zugriff verweigert" statusCode={403} />;
 	return (
--- a/apps/hub-server/index.ts
+++ b/apps/hub-server/index.ts
@@ -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}`);
 });
--- a/apps/hub-server/modules/mail-templates/Badge.tsx
+++ b/apps/hub-server/modules/mail-templates/Badge.tsx
@@ -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" }}
--- a/apps/hub-server/modules/mail-templates/ConfirmEmail.tsx
+++ b/apps/hub-server/modules/mail-templates/ConfirmEmail.tsx
@@ -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} />);
+}
--- a/apps/hub-server/modules/mail-templates/CourseCompleted.tsx
+++ b/apps/hub-server/modules/mail-templates/CourseCompleted.tsx
@@ -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} />);
 }
--- a/apps/hub-server/modules/mail.ts
+++ b/apps/hub-server/modules/mail.ts
@@ -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) {
--- a/apps/hub-server/routes/mail.ts
+++ b/apps/hub-server/routes/mail.ts
@@ -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;
--- a/apps/hub-server/tsconfig.json
+++ b/apps/hub-server/tsconfig.json
@@ -6,6 +6,6 @@
 		"baseUrl": ".",
 		"jsx": "react"
 	},
-	"include": ["**/*.ts", "./index.ts"],
+	"include": ["**/*.ts", "./index.ts", "modules/mail-templates/VerificationCode.tsx"],
 	"exclude": ["node_modules", "dist"]
 }
--- a/apps/hub/app/(app)/_components/Logbook.tsx
+++ b/apps/hub/app/(app)/_components/Logbook.tsx
@@ -1,66 +0,0 @@
-import SortableTable from "../../_components/Table";
-
-export default async () => {
-	const columns = [
-		{
-			header: "Station",
-			accessorKey: "publicId",
-		},
-		{
-			header: "Einsatz Start",
-			accessorKey: "firstname",
-		},
-		{
-			header: "Einsatz Ende",
-			accessorKey: "lastname",
-		},
-		{
-			header: "Flugzeit",
-			accessorKey: "email",
-		},
-	];
-
-	const data: any[] = [
-		{
-			publicId: "Station 1",
-			firstname: "01.01.2021 12:00",
-			lastname: "01.01.2021 13:04",
-			email: "01h 04m",
-		},
-		{
-			publicId: "Station 1",
-			firstname: "01.01.2021 12:00",
-			lastname: "01.01.2021 13:04",
-			email: "01h 04m",
-		},
-		{
-			publicId: "Station 1",
-			firstname: "01.01.2021 12:00",
-			lastname: "01.01.2021 13:04",
-			email: "01h 04m",
-		},
-		{
-			publicId: "Station 1",
-			firstname: "01.01.2021 12:00",
-			lastname: "01.01.2021 13:04",
-			email: "01h 04m",
-		},
-		{
-			publicId: "Station 1",
-			firstname: "01.01.2021 12:00",
-			lastname: "01.01.2021 13:04",
-			email: "01h 04m",
-		},
-	];
-
-	return (
-		<>
-			<SortableTable
-				data={data}
-				columns={columns}
-				showEditButton={false} // Set to true if you want to show edit buttons
-				prismaModel="user" // Pass the prisma model if needed
-			/>
-		</>
-	);
-};
--- a/apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx
+++ b/apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx
@@ -25,13 +25,14 @@ import {
 } from "@radix-ui/react-icons";
 import { Button } from "../../../../../_components/ui/Button";
 import { Select } from "../../../../../_components/ui/Select";
-import { UserSchema } from "@repo/db/zod";
+import { UserOptionalDefaults, UserOptionalDefaultsSchema, UserSchema } from "@repo/db/zod";
 import { useRouter } from "next/navigation";
 import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
 import { cn } from "../../../../../../helper/cn";
 import { ChartBarBigIcon, Check, Eye, PlaneIcon, Timer, X } from "lucide-react";
 import Link from "next/link";
 import { ColumnDef } from "@tanstack/react-table";
+import { Error } from "_components/Error";

 interface ProfileFormProps {
 	user: User;
@@ -39,15 +40,20 @@ interface ProfileFormProps {

 export const ProfileForm: React.FC<ProfileFormProps> = ({ user }: ProfileFormProps) => {
 	const [isLoading, setIsLoading] = useState(false);
-	const form = useForm<User>({
-		defaultValues: user,
-		resolver: zodResolver(UserSchema),
+	const form = useForm<UserOptionalDefaults>({
+		defaultValues: {
+			...user,
+			emailVerified: user.emailVerified ?? undefined,
+		},
+		resolver: zodResolver(UserOptionalDefaultsSchema),
 	});
+	if (!user) return <Error title="User not found" statusCode={404} />;
 	return (
 		<form
 			className="card-body"
 			onSubmit={form.handleSubmit(async (values) => {
 				setIsLoading(true);
+				if (!values.id) return;
 				await editUser(values.id, values);
 				form.reset(values);
 				setIsLoading(false);
@@ -108,6 +114,11 @@ export const ProfileForm: React.FC<ProfileFormProps> = ({ user }: ProfileFormPro
 				{form.formState.errors.email && (
 					<p className="text-error">{form.formState.errors.email?.message}</p>
 				)}
+
+				<label className="label">
+					<input type="checkbox" {...form.register("emailVerified")} className="checkbox" />
+					Email bestätigt
+				</label>
 				<Select
 					isMulti
 					form={form}
--- a/apps/hub/app/(app)/admin/user/action.ts
+++ b/apps/hub/app/(app)/admin/user/action.ts
@@ -15,9 +15,7 @@ export const editUser = async (id: string, data: Prisma.UserUpdateInput) => {
 export const resetPassword = async (id: string) => {
 	const array = new Uint8Array(8);
 	crypto.getRandomValues(array);
-	const password = Array.from(array, (byte) =>
-		("0" + (byte % 36).toString(36)).slice(-1),
-	).join("");
+	const password = Array.from(array, (byte) => ("0" + (byte % 36).toString(36)).slice(-1)).join("");
 	const hashedPassword = await bcrypt.hash(password, 12);

 	const user = await prisma.user.update({
@@ -52,3 +50,57 @@ export const deletePilotHistory = async (id: number) => {
 		},
 	});
 };
+
+export const CheckEmailCode = async (userId: string, code: string) => {
+	const user = await prisma.user.findUnique({
+		where: {
+			id: userId,
+		},
+		select: {
+			emailVerificationToken: true,
+			emailVerificationExpiresAt: true,
+		},
+	});
+	if (!user) {
+		return { error: "Nutzer nicht gefunden" };
+	}
+	if (user.emailVerificationToken !== code || !user.emailVerificationExpiresAt) {
+		return { error: "Falscher Code" };
+	}
+	if (user.emailVerificationExpiresAt < new Date()) {
+		return { error: "Code ist nicht mehr gültig" };
+	}
+
+	await prisma.user.update({
+		where: {
+			id: userId,
+		},
+		data: {
+			emailVerified: true,
+			emailVerificationToken: null,
+			emailVerificationExpiresAt: null,
+		},
+	});
+	return {
+		message: "Email bestätigt!",
+	};
+};
+
+export const sendVerificationLink = async (userId: string) => {
+	const code = Math.floor(10000 + Math.random() * 90000).toString();
+
+	const user = await prisma.user.update({
+		where: {
+			id: userId,
+		},
+		data: {
+			emailVerificationToken: code,
+			emailVerificationExpiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000), // 24 hours
+		},
+	});
+
+	await sendMailByTemplate(user.email, "email-verification", {
+		user: user,
+		code,
+	});
+};
--- a/apps/hub/app/(app)/page.tsx
+++ b/apps/hub/app/(app)/page.tsx
@@ -1,21 +1,23 @@
-import Logbook from "./_components/Logbook";
 import { ArrowRight, NotebookText } from "lucide-react";
 import Link from "next/link";
 import Events from "./_components/Events";
 import { Stats } from "./_components/Stats";
 import { Badges } from "./_components/Badges";
+import { getServerSession } from "api/auth/[...nextauth]/auth";
+import { EmailVerification } from "_components/EmailVerification";

 export default async function Home({
 	searchParams,
 }: {
 	searchParams: Promise<{ stats?: "pilot" | "dispo" }>;
 }) {
+	const session = await getServerSession();
 	const { stats } = await searchParams;
 	const view = stats || "pilot";
 	return (
 		<div>
+			{!session?.user.emailVerified && <EmailVerification />}
 			<Stats stats={view} />
-
 			<div className="grid grid-cols-6 gap-4">
 				<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
 					<div className="card-body">
@@ -27,7 +29,6 @@ export default async function Home({
 								Zum vollständigen Logbook <ArrowRight className="w-4 h-4" />
 							</Link>
 						</h2>
-						<Logbook />
 					</div>
 				</div>
 				<Badges />
--- a/apps/hub/app/(app)/settings/email-verification/page.tsx
+++ b/apps/hub/app/(app)/settings/email-verification/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+import { CheckEmailCode } from "(app)/admin/user/action";
+import { Check } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+export default function Page() {
+	const session = useSession();
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const paramsCode = searchParams.get("code");
+	const [code, setCode] = useState(paramsCode || "");
+	return (
+		<div className="card bg-base-200 shadow-xl mb-4 ">
+			<div className="card-body">
+				<p className="text-2xl font-semibold text-left flex items-center gap-2">
+					<Check className="w-5 h-5" /> Email Bestätigung
+				</p>
+				<div className="flex justify-center gap-3 w-full">
+					<input
+						className="input flex-1"
+						placeholder="code"
+						value={code}
+						onChange={(e) => setCode(e.target.value)}
+					/>
+					<button
+						className="btn btn-primary"
+						onClick={async () => {
+							const res = await CheckEmailCode(session.data?.user.id || "", code);
+							if (res.error) {
+								toast.error(res.error);
+							} else {
+								toast.success(res.message || "Email erfolgreich bestätigt!");
+								router.push("/");
+							}
+						}}
+						disabled={!session.data?.user.email || !code}
+					>
+						Bestätigen
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/hub/app/_components/EmailVerification.tsx
+++ b/apps/hub/app/_components/EmailVerification.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { useSession } from "next-auth/react";
+import toast from "react-hot-toast";
+import { sendVerificationLink } from "(app)/admin/user/action";
+import { TriangleAlert } from "lucide-react";
+import { useState } from "react";
+import { Button } from "_components/ui/Button";
+
+export const EmailVerification = () => {
+	const session = useSession();
+	const [loading, setLoading] = useState(false);
+	return (
+		<div role="alert" className="alert alert-warning">
+			<TriangleAlert />
+			<div>
+				<h3 className="font-bold">Email Addresse nicht bestätigt!</h3>
+				<div className="text-xs">
+					Wenn deine Email Addresse nicht bestätigt ist kannst du dich nicht Verbinden
+				</div>
+			</div>
+			<Button
+				isLoading={loading}
+				className="btn btn-sm"
+				onClick={async () => {
+					setLoading(true);
+					if (!session.data?.user?.id) return;
+					await sendVerificationLink(session.data.user.id); // Replace "userId" with the actual user ID
+					toast.success("Verifizierungslink gesendet! Bitte prüfe deine E-Mails.");
+					setLoading(false);
+				}}
+			>
+				Link senden
+			</Button>
+		</div>
+	);
+};
--- a/apps/hub/app/_components/Nav.tsx
+++ b/apps/hub/app/_components/Nav.tsx
@@ -76,9 +76,13 @@ export const HorizontalNav = () => (
 		<div className="flex items-center ml-auto">
 			<ul className="flex space-x-2 px-1">
 				<li>
-					<Link href={process.env.NEXT_PUBLIC_DISPATCH_URL || "#!"} rel="noopener noreferrer">
+					<a
+						href={process.env.NEXT_PUBLIC_DISPATCH_URL || "#!"}
+						rel="noopener noreferrer"
+						target="_blank"
+					>
 						<button className="btn btn-sm btn-outline btn-primary">Zur Leitstelle</button>
-					</Link>
+					</a>
 				</li>
 				<li>
 					<Link href="/logout">
--- a/apps/hub/app/_components/ui/Nav.tsx
+++ b/apps/hub/app/_components/ui/Nav.tsx
@@ -1,87 +0,0 @@
-import {
-  HomeIcon,
-  PersonIcon,
-  GearIcon,
-  ExitIcon,
-  LockClosedIcon,
-  RocketIcon,
-} from "@radix-ui/react-icons";
-import Link from "next/link";
-
-export const VerticalNav = () => {
-  return (
-    <div className="w-64 bg-base-300 p-4 rounded-lg shadow-md">
-      <ul className="menu">
-        <li>
-          <Link href="/">
-            <HomeIcon /> Dashboard
-          </Link>
-        </li>
-        <li>
-          <Link href="/profile">
-            <PersonIcon /> Profil
-          </Link>
-        </li>
-        <li>
-          <Link href="/events">
-            <RocketIcon />
-            Events & Kurse
-          </Link>
-        </li>
-        <li>
-          <details open>
-            <summary>
-              <LockClosedIcon />
-              Admin
-            </summary>
-            <ul>
-              <li>
-                <Link href="/admin/user">Benutzer</Link>
-              </li>
-              <li>
-                <Link href="/admin/station">Stationen</Link>
-              </li>
-              <li>
-                <Link href="/admin/event">Events</Link>
-              </li>
-            </ul>
-          </details>
-        </li>
-        <li>
-          <Link href="/settings">
-            <GearIcon />
-            Einstellungen
-          </Link>
-        </li>
-      </ul>
-    </div>
-  );
-};
-
-export const HorizontalNav = () => (
-  <div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
-    <div className="flex-1">
-      <a className="btn btn-ghost normal-case text-xl">
-        Virtual Air Rescue - HUB
-      </a>
-    </div>
-    <div className="flex-none">
-      <ul className="flex space-x-2 px-1">
-        <li>
-          <Link href="/">
-            <button className="btn btn-sm btn-outline btn-info">
-              Zur Leitstelle
-            </button>
-          </Link>
-        </li>
-        <li>
-          <Link href="/logout">
-            <button className="btn btn-sm">
-              <ExitIcon /> Logout
-            </button>
-          </Link>
-        </li>
-      </ul>
-    </div>
-  </div>
-);
--- a/apps/hub/helper/mail.ts
+++ b/apps/hub/helper/mail.ts
@@ -1,8 +1,4 @@
-export const sendMail = async (
-	email: string,
-	subject: string,
-	html: string,
-) => {
+export const sendMail = async (email: string, subject: string, html: string) => {
 	await fetch(`${process.env.NEXT_PUBLIC_HUB_SERVER_URL}/mail/send`, {
 		method: "POST",
 		headers: { "Content-Type": "application/json" },
@@ -17,13 +13,11 @@ export const sendMail = async (

 export const sendMailByTemplate = async (
 	email: string,
-	template: "password-change" | "course-completed",
+	template: "password-change" | "course-completed" | "email-verification",
 	data: any,
 ) => {
 	try {
-		const res = await fetch(
-			`${process.env.NEXT_PUBLIC_HUB_SERVER_URL}/mail/template/${template}`,
-			{
+		const res = await fetch(`${process.env.NEXT_PUBLIC_HUB_SERVER_URL}/mail/template/${template}`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },

@@ -31,8 +25,7 @@ export const sendMailByTemplate = async (
 				to: email,
 				data,
 			}),
-			},
-		);
+		});
 		console.log(res);
 	} catch (error) {
 		console.error("Error sending mail:", error);
--- a/packages/database/prisma/schema/user.prisma
+++ b/packages/database/prisma/schema/user.prisma
@@ -28,13 +28,17 @@ model User {
    password  String
    vatsimCid Int?   @map(name: "vatsim_cid")
    moodleId  Int?   @map(name: "moodle_id")
-    emailVerified DateTime? @map(name: "email_verified")

    // Settings:
    settingsNtfyRoom  String? @map(name: "settings_ntfy_room")
    settingsMicDevice String? @map(name: "settings_mic_device")
    settingsMicVolume Int?    @map(name: "settings_mic_volume")

+    // email Verification:
+    emailVerificationToken     String?   @map(name: "email_verification_token")
+    emailVerificationExpiresAt DateTime? @map(name: "email_verification_expires_at")
+    emailVerified              Boolean?  @default(false)
+
    image                 String?
    badges                BADGES[]                @default([])
    permissions           PERMISSION[]            @default([])