added footer links, added email alias check

apps/hub/app/(app)/settings/_components/forms.tsx

@@ -23,16 +23,29 @@ import toast from "react-hot-toast";
 import { UserOptionalDefaults, UserOptionalDefaultsSchema } from "@repo/db/zod";
 import { Bell, Plane } from "lucide-react";
 import Link from "next/link";
+import { sendVerificationLink } from "(app)/admin/user/action";
 
 export const ProfileForm = ({ user }: { user: User }): React.JSX.Element => {
 	const schema = z.object({
 		firstname: z.string().min(2).max(30),
 		lastname: z.string().min(2).max(30),
-		email: z.string().email({
-			message: "Bitte gebe eine gültige E-Mail Adresse ein",
-		}),
+		email: z
+			.string()
+			.email({
+				message: "Bitte gebe eine gültige E-Mail Adresse ein",
+			})
+			.refine(
+				(value) => {
+					// Regex to check for email aliases like + or %
+					const emailAliasRegex = /[+%]/;
+					return !emailAliasRegex.test(value);
+				},
+				{
+					message: "Email-Aliase (wie + oder %) sind nicht erlaubt",
+				},
+			),
 		settingsHideLastname: z.boolean(),
-		emailVerified: z.boolean(),
+		emailVerified: z.boolean().optional(),
 	});
 	const [isLoading, setIsLoading] = useState(false);
 	type IFormInput = z.infer<typeof schema>;
@@ -46,6 +59,7 @@ export const ProfileForm = ({ user }: { user: User }): React.JSX.Element => {
 		},
 		resolver: zodResolver(schema),
 	});
+	console.log(form.formState.errors);
 	return (
 		<form
 			className="card-body"
@@ -53,13 +67,20 @@ export const ProfileForm = ({ user }: { user: User }): React.JSX.Element => {
 				setIsLoading(true);
 				await updateUser(values);
 				form.reset(values);
+				if (user.email !== values.email) {
+					await sendVerificationLink(user.id);
+					toast.success(
+						"Deine E-Mail Addresse hat sich geändert, wir haben die einen Link gesendet!",
+					);
+				} else {
+					toast.success("Deine Änderungen wurden gespeichert!", {
+						style: {
+							background: "var(--color-base-100)",
+							color: "var(--color-base-content)",
+						},
+					});
+				}
 				setIsLoading(false);
-				toast.success("Deine Änderungen wurden gespeichert!", {
-					style: {
-						background: "var(--color-base-100)",
-						color: "var(--color-base-content)",
-					},
-				});
 			})}
 		>
 			<h2 className="card-title">
@@ -105,12 +126,13 @@ export const ProfileForm = ({ user }: { user: User }): React.JSX.Element => {
 						<EnvelopeClosedIcon /> E-Mail
 					</span>
 					<input
-						{...form.register("email")}
+						value={form.watch("email")}
 						type="text"
 						className="input input-bordered w-full"
-						defaultValue={user.email}
 						onChange={(e) => {
-							form.setValue("email", e.target.value.trim());
+							form.setValue("email", e.target.value.trim(), {
+								shouldDirty: true,
+							});
 							form.setValue("emailVerified", false);
 						}}
 						placeholder="E-Mail"

apps/hub/app/(app)/settings/email-verification/page.tsx

@@ -1,56 +0,0 @@
-"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 { useEffect, 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 || "");
-
-	useEffect(() => {
-		if (!paramsCode) return;
-		verifyCode(paramsCode);
-	}, [paramsCode])
-
-	async function verifyCode(code: string) {
-		if (!session.data?.user.email || !code) return;
-		const res = await CheckEmailCode(session.data?.user.id || "", code);
-		if (res.error) {
-		  toast.error(res.error);
-		} else {
-		  toast.success(res.message || "E-Mail erfolgreich bestätigt!");
-		  router.push("/");
-		}
-	  }
-	  
-	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" /> E-Mail Bestätigung
-				</p>
-				<div className="flex justify-center gap-3 w-full">
-					<input
-						className="input flex-1"
-						placeholder="Bestätigungscode"
-						value={code}
-						onChange={(e) => setCode(e.target.value)}
-					/>
-					<button
-						className="btn btn-primary"
-						onClick={() => verifyCode(code)}
-						disabled={!session.data?.user.email || !code}
-					>
-						Bestätigen
-					</button>
-				</div>
-			</div>
-		</div>
-	);
-}