feat: social auth account linking

2026-06-02 22:55:09 +05:30
parent 086f1dd8aa
commit ec67ddf852
6 changed files with 675 additions and 177 deletions
@@ -0,0 +1,161 @@
+"use client";
+
+/**
+ * AddEmailModal — centred portal dialog with a single email input for
+ * users who signed up via OAuth and never shared an address. Mirrors
+ * the ChangePasswordModal pattern so the look and feel matches.
+ *
+ * On success: closes itself and updates the auth-provider's user so the
+ * rest of the app immediately sees the new email. The BFF stores the
+ * address as unverified and fires a verification link to it; the user
+ * sees that as the existing "verify your email" banner on the next
+ * render.
+ *
+ * Entry points:
+ *   • VerifyEmailBanner — top-of-page "Add an email" button
+ *   • /settings → Authentication → Add your email row
+ */
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { auth, AuthError } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function AddEmailModal({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const { setUser } = useAuth();
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Blank slate every time the modal opens.
+  useEffect(() => {
+    if (open) return;
+    setEmail("");
+    setError(null);
+    setSubmitting(false);
+  }, [open]);
+
+  // Esc-to-close.
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  // Body scroll-lock while open.
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  if (!open || typeof document === "undefined") return null;
+
+  async function onSubmit(e: React.SyntheticEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      const updated = await auth.setEmail(email);
+      setUser(updated);
+      onClose();
+    } catch (err) {
+      setError(err instanceof AuthError ? err.message : "Could not save email.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return createPortal(
+    <>
+      <div
+        className="fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
+        onClick={onClose}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="add-email-title"
+        className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
+      >
+        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
+          <header className="flex items-center justify-between px-5 py-4 border-b border-border">
+            <h2
+              id="add-email-title"
+              className="font-[family-name:var(--font-title)] font-semibold text-xl text-foreground"
+            >
+              Add your email
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
+              aria-label="Close"
+            >
+              <X className="size-4" />
+            </button>
+          </header>
+
+          <form onSubmit={onSubmit} className="px-5 py-5 space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Add an email to enable password recovery and notifications.
+              We&apos;ll send a verification link to confirm it&apos;s yours.
+            </p>
+            <div className="space-y-1.5">
+              <Label htmlFor="ae-email">Email address</Label>
+              <Input
+                id="ae-email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+              />
+            </div>
+
+            {error ? (
+              <p className="text-sm text-destructive">{error}</p>
+            ) : null}
+
+            <div className="flex items-center justify-end gap-2 pt-1">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={onClose}
+                className="h-10 px-4 text-sm"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={submitting || email.trim() === ""}
+                className="h-10 px-4 text-sm"
+              >
+                {submitting ? "Saving…" : "Save email"}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>,
+    document.body,
+  );
+}