feat:UX and fix drinkkaart payment logic

apps/web/src/routes/login.tsx

@@ -15,13 +15,24 @@ import { authClient } from "@/lib/auth-client";
 import { orpc } from "@/utils/orpc";
 
 export const Route = createFileRoute("/login")({
+	validateSearch: (search: Record<string, unknown>) => {
+		const signup =
+			search.signup === "1" || search.signup === "true" ? "1" : undefined;
+		const email = typeof search.email === "string" ? search.email : undefined;
+		// Only return defined keys so redirects without search still typecheck
+		return {
+			...(signup !== undefined && { signup }),
+			...(email !== undefined && { email }),
+		} as { signup?: "1"; email?: string };
+	},
 	component: LoginPage,
 });
 
 function LoginPage() {
 	const navigate = useNavigate();
-	const [isSignup, setIsSignup] = useState(false);
-	const [email, setEmail] = useState("");
+	const search = Route.useSearch();
+	const [isSignup, setIsSignup] = useState(() => search.signup === "1");
+	const [email, setEmail] = useState(() => search.email ?? "");
 	const [password, setPassword] = useState("");
 	const [name, setName] = useState("");
 
@@ -49,13 +60,12 @@ function LoginPage() {
 		},
 		onSuccess: () => {
 			toast.success("Succesvol ingelogd!");
-			// Check role and redirect
 			authClient.getSession().then((session) => {
 				const user = session.data?.user as { role?: string } | undefined;
 				if (user?.role === "admin") {
 					navigate({ to: "/admin" });
 				} else {
-					navigate({ to: "/" });
+					navigate({ to: "/account" });
 				}
 			});
 		},
@@ -85,11 +95,7 @@ function LoginPage() {
 			return result.data;
 		},
 		onSuccess: () => {
-			toast.success("Account aangemaakt! Wacht op goedkeuring van een admin.");
-			setIsSignup(false);
-			setName("");
-			setEmail("");
-			setPassword("");
+			navigate({ to: "/account", search: { welkom: "1" } });
 		},
 		onError: (error) => {
 			toast.error(`Registratie mislukt: ${error.message}`);
@@ -119,13 +125,15 @@ function LoginPage() {
 		requestAdminMutation.mutate(undefined);
 	};
 
-	// If already logged in as admin, redirect
+	// If already logged in, redirect to appropriate page
 	if (sessionQuery.data?.data?.user) {
 		const user = sessionQuery.data.data.user as { role?: string };
 		if (user.role === "admin") {
 			navigate({ to: "/admin" });
-			return null;
+		} else {
+			navigate({ to: "/account" });
 		}
+		return null;
 	}
 
 	const isLoggedIn = !!sessionQuery.data?.data?.user;
@@ -134,51 +142,64 @@ function LoginPage() {
 		| undefined;
 
 	return (
-		<div className="flex min-h-screen items-center justify-center bg-[#214e51] px-4">
-			<Card className="w-full max-w-md border-white/10 bg-white/5">
+		<div className="flex min-h-[calc(100dvh-2.75rem)] items-center justify-center overflow-y-auto px-4 py-8 sm:min-h-[calc(100dvh-3.5rem)]">
+			<Card className="my-auto w-full max-w-md border-white/10 bg-white/5">
 				<CardHeader className="text-center">
 					<CardTitle className="font-['Intro',sans-serif] text-3xl text-white">
 						{isLoggedIn
-							? "Admin Toegang"
+							? `Welkom, ${user?.name}`
 							: isSignup
 								? "Account Aanmaken"
 								: "Inloggen"}
 					</CardTitle>
 					<CardDescription className="text-white/60">
 						{isLoggedIn
-							? `Welkom, ${user?.name}`
+							? "Je bent al ingelogd"
 							: isSignup
-								? "Maak een account aan om toegang te krijgen"
-								: "Log in om toegang te krijgen tot het admin dashboard"}
+								? "Maak een gratis account aan voor je Drinkkaart en inschrijving"
+								: "Log in om je account te bekijken"}
 					</CardDescription>
 				</CardHeader>
 				<CardContent>
 					{isLoggedIn ? (
 						<div className="space-y-4">
-							<div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4">
-								<p className="text-center text-yellow-200">
-									Je bent ingelogd maar hebt geen admin toegang.
-								</p>
-							</div>
+							{/* Primary CTA: go to account */}
 							<Button
-								onClick={handleRequestAdmin}
-								disabled={requestAdminMutation.isPending}
+								onClick={() => navigate({ to: "/account" })}
 								className="w-full bg-white text-[#214e51] hover:bg-white/90"
 							>
-								{requestAdminMutation.isPending
-									? "Bezig..."
-									: "Vraag Admin Toegang Aan"}
+								Ga naar mijn account
 							</Button>
+
+							{/* Secondary: request admin access */}
+							<div className="rounded-lg border border-white/10 bg-white/5 p-4">
+								<p className="mb-3 text-center text-sm text-white/60">
+									Admin-toegang aanvragen?
+								</p>
+								<Button
+									onClick={handleRequestAdmin}
+									disabled={requestAdminMutation.isPending}
+									variant="outline"
+									className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+								>
+									{requestAdminMutation.isPending
+										? "Bezig..."
+										: "Vraag Admin Toegang Aan"}
+								</Button>
+							</div>
+
 							<Button
-								onClick={() => authClient.signOut()}
+								onClick={() =>
+									authClient.signOut().then(() => navigate({ to: "/" }))
+								}
 								variant="outline"
-								className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+								className="w-full border-white/20 bg-transparent text-white/60 hover:bg-white/10 hover:text-white"
 							>
 								Uitloggen
 							</Button>
 							<Link
 								to="/"
-								className="block text-center text-sm text-white/60 hover:text-white"
+								className="block text-center text-sm text-white/40 hover:text-white"
 							>
 								← Terug naar website
 							</Link>