added email verification

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
-			/>
-		</>
-	);
-};

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}

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,
+	});
+};

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 />

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>
+	);
+}

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>
+	);
+};

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">

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>
-);