Add Discord verification option for users without email

src/components/auth/discord-verify-form.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { linkDiscordId } from "@/actions/link-discord";
+
+export function DiscordVerifyForm() {
+  const [discordId, setDiscordId] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, setIsPending] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+    setIsPending(true);
+    try {
+      const result = await linkDiscordId(discordId);
+      if (result === null) {
+        setSuccess(true);
+      } else {
+        setError(result);
+      }
+    } catch {
+      setError("Er is een fout opgetreden");
+    } finally {
+      setIsPending(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="rounded-md p-4 text-center" style={{ backgroundColor: "#14532d", color: "white" }}>
+        <p className="text-lg font-bold mb-1">Geverifieerd!</p>
+        <p className="text-sm opacity-90">Je Discord account is gekoppeld en je account is geverifieerd.</p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+      {error && (
+        <div className="p-3 rounded-md text-sm" style={{ backgroundColor: "#ef4444", color: "white" }}>
+          {error}
+        </div>
+      )}
+
+      <p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+        Open Discord, ga naar <strong>Instellingen → Geavanceerd → Ontwikkelaarsmodus</strong> (aan).
+        Klik met rechts op je eigen naam en kies <strong>ID kopiëren</strong>. Plak dat hier:
+      </p>
+
+      <div className="flex gap-2">
+        <input
+          type="text"
+          placeholder="Plak je Discord ID hier"
+          value={discordId}
+          onChange={(e) => setDiscordId(e.target.value)}
+          className="flex-1 focus:ring-0 border-4 rounded text-sm px-3 py-2"
+          style={{
+            backgroundColor: "var(--color-background)",
+            color: "var(--color-text)",
+            borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+          }}
+          required
+        />
+        <button
+          type="submit"
+          disabled={isPending}
+          className="rounded px-4 py-2 text-white font-semibold whitespace-nowrap"
+          style={{ backgroundColor: "#5865F2", border: "2px solid #7983F5" }}
+        >
+          {isPending ? "Bezig..." : "Verifiëren"}
+        </button>
+      </div>
+    </form>
+  );
+}

src/components/auth/register-form.tsx

@@ -99,10 +99,12 @@ export function RegisterForm({
                   color: "var(--color-text)",
                   borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
                 }}
-                required
               />
             </fieldset>
           </div>
+          <p className="text-xs mt-1" style={{ color: "var(--color-text-muted)" }}>
+            Geen e-mail? Je kunt later via Discord verifiëren.
+          </p>
         </div>
 
         {/* Password & Confirm */}