Added CSRF & YouTube and dark mode

frontend/components/contact.tsx

@@ -1,9 +1,71 @@
+"use client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { ApiResponse } from "@/hooks/use-api";
+import { API_URL } from "@/lib/constants";
+import { useEffect, useState } from "react";
+
+interface FormData {
+	firstname: string;
+	lastname: string;
+	email: string;
+	subject: string;
+	message: string;
+}
 
 const Contact = () => {
+	const [formData, setFormData] = useState<FormData>({
+		firstname: "",
+		lastname: "",
+		subject: "",
+		email: "",
+		message: "",
+	});
+
+	const [csrfToken, setCsrfToken] = useState("");
+
+	const handleChange = (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		console.log(e.currentTarget);
+		setFormData({
+			...formData,
+			[e.currentTarget.name]: e.currentTarget.value,
+		});
+	};
+
+	useEffect(() => {
+		const fetchCsrfToken = async () => {
+			try {
+				const response = await fetch(`${API_URL}/csrf-token`, {
+					credentials: "include",
+				});
+				const data: ApiResponse<{ csrf: string }> =
+					await response.json();
+				if (data.data) setCsrfToken(data.data.csrf);
+			} catch (e: any) {
+				console.log(e);
+			}
+		};
+
+		fetchCsrfToken();
+	}, []);
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		const res = await fetch(`${API_URL}/contact`, {
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRF-Token": csrfToken,
+			},
+			method: "POST",
+			body: JSON.stringify(formData),
+			credentials: "include",
+		});
+	};
+
 	return (
 		<section className="py-32">
 			<div className="p-4">
@@ -38,50 +100,75 @@ const Contact = () => {
 							</ul>
 						</div>
 					</div>
-					<div className="mx-auto flex max-w-screen-md flex-col gap-6 rounded-lg border p-10">
+					<form
+						onSubmit={handleSubmit}
+						className="mx-auto flex max-w-screen-md flex-col gap-6 rounded-lg border p-10"
+					>
 						<div className="flex gap-4">
 							<div className="grid w-full items-center gap-1.5">
 								<Label htmlFor="firstname">Prénom</Label>
 								<Input
+									value={formData.firstname}
+									onChange={handleChange}
 									type="text"
 									id="firstname"
+									name="firstname"
 									placeholder="Prénom"
+									required
 								/>
 							</div>
 							<div className="grid w-full items-center gap-1.5">
 								<Label htmlFor="lastname">Nom de famille</Label>
 								<Input
+									value={formData.lastname}
+									onChange={handleChange}
 									type="text"
 									id="lastname"
+									name="lastname"
 									placeholder="Nom de famille"
+									required
 								/>
 							</div>
 						</div>
 						<div className="grid w-full items-center gap-1.5">
 							<Label htmlFor="email">Email</Label>
 							<Input
+								value={formData.email}
+								onChange={handleChange}
 								type="email"
 								id="email"
+								name="email"
 								placeholder="Email"
+								required
 							/>
 						</div>
 						<div className="grid w-full items-center gap-1.5">
 							<Label htmlFor="subject">Objet</Label>
 							<Input
+								value={formData.subject}
+								onChange={handleChange}
 								type="text"
 								id="subject"
+								name="subject"
 								placeholder="Objet"
+								required
 							/>
 						</div>
 						<div className="grid w-full gap-1.5">
 							<Label htmlFor="message">Message</Label>
 							<Textarea
+								value={formData.message}
+								onChange={handleChange}
 								placeholder="Écrivez votre message ici."
 								id="message"
+								name="message"
+								required
 							/>
 						</div>
-						<Button className="w-full">Envoyer</Button>
-					</div>
+						<Button type="submit" className="w-full">
+							Envoyer
+						</Button>
+					</form>
 				</div>
 			</div>
 		</section>