Add association meetings and GDPR settings

src/components/ImageConsentForm.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+export function ImageConsentForm({
+  saveAction,
+  defaultName,
+  compact = false,
+}: {
+  saveAction: (formData: FormData) => Promise<void>;
+  defaultName: string;
+  compact?: boolean;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [drawing, setDrawing] = useState(false);
+  const [signature, setSignature] = useState("");
+  const [error, setError] = useState("");
+
+  function point(event: React.PointerEvent<HTMLCanvasElement>) {
+    const canvas = canvasRef.current;
+    if (!canvas) return null;
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: ((event.clientX - rect.left) / rect.width) * canvas.width,
+      y: ((event.clientY - rect.top) / rect.height) * canvas.height,
+    };
+  }
+
+  function draw(event: React.PointerEvent<HTMLCanvasElement>) {
+    if (!drawing) return;
+    const p = point(event);
+    const ctx = canvasRef.current?.getContext("2d");
+    if (!p || !ctx) return;
+    ctx.lineTo(p.x, p.y);
+    ctx.strokeStyle = "#13324F";
+    ctx.lineWidth = 3;
+    ctx.lineCap = "round";
+    ctx.stroke();
+    setSignature(canvasRef.current?.toDataURL("image/png") ?? "");
+  }
+
+  function start(event: React.PointerEvent<HTMLCanvasElement>) {
+    const p = point(event);
+    const ctx = canvasRef.current?.getContext("2d");
+    if (!p || !ctx) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    ctx.beginPath();
+    ctx.moveTo(p.x, p.y);
+    setDrawing(true);
+  }
+
+  function clear() {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (canvas && ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setSignature("");
+    setError("");
+  }
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    const submitter = (event.nativeEvent as SubmitEvent).submitter as HTMLButtonElement | null;
+    if (submitter?.value === "accepted" && !signature) {
+      event.preventDefault();
+      setError("Signez dans le cadre pour valider l'autorisation.");
+    }
+  }
+
+  return (
+    <form
+      action={saveAction}
+      onSubmit={onSubmit}
+      style={{
+        background: compact ? "#fff" : "#F6F2E8",
+        border: "1px solid #e6dcc6",
+        borderRadius: 16,
+        padding: compact ? 18 : 24,
+      }}
+    >
+      <input type="hidden" name="signaturePng" value={signature} />
+      <div style={{ display: "grid", gap: 14 }}>
+        <div>
+          <label className="field-label">Nom du signataire</label>
+          <input name="signatoryName" defaultValue={defaultName} className="field" required />
+        </div>
+
+        <div style={{ color: "#6c6150", fontSize: 13.5, lineHeight: 1.65 }}>
+          J'autorise l'association Plein R à utiliser mon image dans les supports liés à la vie
+          associative: site internet, réseaux sociaux et supports imprimés. Autorisation gratuite,
+          valable 5 ans, sans vente à des tiers. Je peux retirer mon accord à tout moment.
+        </div>
+
+        <div>
+          <label className="field-label">Signature</label>
+          <canvas
+            ref={canvasRef}
+            width={760}
+            height={190}
+            onPointerDown={start}
+            onPointerMove={draw}
+            onPointerUp={() => setDrawing(false)}
+            onPointerCancel={() => setDrawing(false)}
+            style={{
+              width: "100%",
+              height: compact ? 120 : 150,
+              display: "block",
+              touchAction: "none",
+              background: "#fff",
+              border: "1px dashed #d6c9ad",
+              borderRadius: 12,
+            }}
+          />
+          <button
+            type="button"
+            onClick={clear}
+            style={{
+              marginTop: 8,
+              border: "none",
+              background: "transparent",
+              color: "#9a6638",
+              fontSize: 12.5,
+              fontWeight: 700,
+              cursor: "pointer",
+            }}
+          >
+            Effacer la signature
+          </button>
+          {error && <div style={{ color: "#d8472b", fontSize: 12.5, marginTop: 4 }}>{error}</div>}
+        </div>
+
+        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
+          <button
+            type="submit"
+            name="decision"
+            value="accepted"
+            style={{
+              border: "none",
+              background: "#13324F",
+              color: "#fff",
+              fontWeight: 800,
+              borderRadius: 10,
+              padding: "11px 17px",
+              cursor: "pointer",
+            }}
+          >
+            J'autorise et je signe
+          </button>
+          <button
+            type="submit"
+            name="decision"
+            value="refused"
+            style={{
+              border: "1px solid #e0c3bb",
+              background: "#fff",
+              color: "#d8472b",
+              fontWeight: 800,
+              borderRadius: 10,
+              padding: "11px 17px",
+              cursor: "pointer",
+            }}
+          >
+            Je refuse
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}