feat:admin

apps/web/src/components/homepage/EventRegistrationForm.tsx

@@ -1,6 +1,9 @@
 "use client";
 
+import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
+import { toast } from "sonner";
+import { orpc } from "@/utils/orpc";
 
 export default function EventRegistrationForm() {
 	const [formData, setFormData] = useState({
@@ -12,9 +15,34 @@ export default function EventRegistrationForm() {
 		experience: "",
 	});
 
+	const submitMutation = useMutation({
+		...orpc.submitRegistration.mutationOptions(),
+		onSuccess: () => {
+			toast.success("Registratie succesvol!");
+			setFormData({
+				firstName: "",
+				lastName: "",
+				email: "",
+				phone: "",
+				artForm: "",
+				experience: "",
+			});
+		},
+		onError: (error) => {
+			toast.error(`Er is iets misgegaan: ${error.message}`);
+		},
+	});
+
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault();
-		console.log("Form submitted:", formData);
+		submitMutation.mutate({
+			firstName: formData.firstName,
+			lastName: formData.lastName,
+			email: formData.email,
+			phone: formData.phone || undefined,
+			artForm: formData.artForm,
+			experience: formData.experience || undefined,
+		});
 	};
 
 	const handleChange = (
@@ -57,6 +85,7 @@ export default function EventRegistrationForm() {
 									value={formData.firstName}
 									onChange={handleChange}
 									placeholder="Jouw voornaam"
+									required
 									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 								/>
 							</div>
@@ -75,6 +104,7 @@ export default function EventRegistrationForm() {
 									value={formData.lastName}
 									onChange={handleChange}
 									placeholder="Jouw achternaam"
+									required
 									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 								/>
 							</div>
@@ -96,6 +126,7 @@ export default function EventRegistrationForm() {
 									value={formData.email}
 									onChange={handleChange}
 									placeholder="jouw@email.nl"
+									required
 									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 								/>
 							</div>
@@ -134,6 +165,7 @@ export default function EventRegistrationForm() {
 								value={formData.artForm}
 								onChange={handleChange}
 								placeholder="Muziek, Theater, Dans, etc."
+								required
 								className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 							/>
 						</div>
@@ -164,9 +196,10 @@ export default function EventRegistrationForm() {
 					<div className="mt-auto flex flex-col items-center gap-4 pt-12">
 						<button
 							type="submit"
-							className="bg-white px-12 py-4 font-['Intro',sans-serif] text-2xl text-[#214e51] transition-all hover:scale-105 hover:bg-gray-100"
+							disabled={submitMutation.isPending}
+							className="bg-white px-12 py-4 font-['Intro',sans-serif] text-2xl text-[#214e51] transition-all hover:scale-105 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
 						>
-							Bevestigen
+							{submitMutation.isPending ? "Bezig..." : "Bevestigen"}
 						</button>
 
 						<p className="text-center font-['Intro',sans-serif] text-sm text-white/60">

apps/web/src/components/homepage/Footer.tsx

@@ -1,4 +1,21 @@
+"use client";
+
+import { Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { authClient } from "@/lib/auth-client";
+
 export default function Footer() {
+	const [isAdmin, setIsAdmin] = useState(false);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		authClient.getSession().then((session) => {
+			const user = session.data?.user as { role?: string } | undefined;
+			setIsAdmin(user?.role === "admin");
+			setIsLoading(false);
+		});
+	}, []);
+
 	return (
 		<footer className="snap-section relative z-40 flex h-[250px] flex-col items-center justify-center bg-[#d09035]">
 			<div className="text-center">
@@ -21,6 +38,14 @@ export default function Footer() {
 					<a href="/contact" className="transition-colors hover:text-white">
 						Contact
 					</a>
+					{!isLoading && isAdmin && (
+						<>
+							<span className="text-white/40">|</span>
+							<Link to="/admin" className="transition-colors hover:text-white">
+								Admin
+							</Link>
+						</>
+					)}
 				</div>
 
 				<div className="mt-6 font-['Intro',sans-serif] text-white/50 text-xs">