mise a jour du frontend

frontend/app/components/Contact.tsx

@@ -64,40 +64,105 @@ export default function ContactComponent() {
         </div>
 
         {data?.email ? (
-          <form action={`mailto:${data.email}`} method="post" encType="text/plain" className="stack">
-            <div>
-              <label htmlFor="name">Votre nom</label>
-              <input id="name" name="Nom" type="text" required />
-            </div>
-
-            <div>
-              <label htmlFor="email">Votre email</label>
-              <input id="email" name="Email" type="email" required />
-            </div>
-
-            <div>
-              <label htmlFor="subject">Sujet</label>
-              <input id="subject" name="Sujet" type="text" placeholder="Prise de contact" />
-            </div>
-
-            <div>
-              <label htmlFor="message">Message</label>
-              <textarea id="message" name="Message" required />
-            </div>
-
-            <div className="btn-group">
-              <button type="submit" className="btn btn--primary btn--pill">
-                Envoyer
-              </button>
-              <button type="reset" className="btn btn--ghost">
-                Réinitialiser
-              </button>
-            </div>
-          </form>
+          <ContactForm />
         ) : (
           <p className="u-muted">Une erreur est survenue. Vous pouvez tout de même me contacter directement par email : <a href="mailto:violet.anthony90@gmail.com">Me joindre par email</a></p>
         )}
       </div>
     </div>
   );
-}
+}
+
+function ContactForm() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (!name || !email || !message) {
+      setError("Veuillez remplir les champs requis.");
+      return;
+    }
+
+    setStatus("loading");
+    try {
+      const res = await fetch("/api/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email, subject, message }),
+      });
+
+      if (!res.ok) {
+        const txt = await res.text();
+        throw new Error(txt || "Erreur lors de l'envoi du message");
+      }
+
+      setStatus("success");
+      setName("");
+      setEmail("");
+      setSubject("");
+      setMessage("");
+    } catch (err: any) {
+      setStatus("error");
+      setError(err?.message || "Une erreur est survenue.");
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="stack" noValidate>
+      <div>
+        <label htmlFor="name">Votre nom</label>
+        <input id="name" name="name" type="text" required value={name} onChange={(e) => setName(e.target.value)} />
+      </div>
+
+      <div>
+        <label htmlFor="email">Votre email</label>
+        <input id="email" name="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
+      </div>
+
+      <div>
+        <label htmlFor="subject">Sujet</label>
+        <input id="subject" name="subject" type="text" placeholder="Prise de contact" value={subject} onChange={(e) => setSubject(e.target.value)} />
+      </div>
+
+      <div>
+        <label htmlFor="message">Message</label>
+        <textarea id="message" name="message" required value={message} onChange={(e) => setMessage(e.target.value)} />
+      </div>
+
+      {status === "success" ? (
+        <p className="u-success">Votre message a bien été envoyé. Merci !</p>
+      ) : null}
+      {status === "error" && error ? (
+        <p className="u-error">{error}</p>
+      ) : null}
+
+      <div className="btn-group">
+        <button type="submit" className="btn btn--primary btn--pill" disabled={status === "loading"}>
+          {status === "loading" ? "Envoi…" : "Envoyer"}
+        </button>
+        <button
+          type="button"
+          className="btn btn--ghost"
+          onClick={() => {
+            setName("");
+            setEmail("");
+            setSubject("");
+            setMessage("");
+            setError(null);
+            setStatus("idle");
+          }}
+          disabled={status === "loading"}
+        >
+          Réinitialiser
+        </button>
+      </div>
+    </form>
+  );
+}