FM / accept-invite

/home/techb158/balavpn.abdallabala.com/src/app/accept-invite/

/home/techb158/balavpn.abdallabala.com/src/app/accept-invite

Name	Size	Mode	Actions
page.jsx	3479	0644	edit dl rm

Edit: /home/techb158/balavpn.abdallabala.com/src/app/accept-invite/page.jsx (3479B)

"use client";
import { Suspense, useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";

function AcceptInviteForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get("token");

const [displayName, setDisplayName] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);

useEffect(() => {
    if (!token) setError("No invitation token provided. Check your invite link.");
  }, [token]);

async function handleSubmit(event) {
    event.preventDefault();
    setError("");
    setLoading(true);
    try {
      const res = await fetch("/api/auth/accept-invite", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token, displayName: displayName || undefined })
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to accept invitation");
      }
      setDone(true);
      setTimeout(() => router.push("/login"), 2000);
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  }

if (done) {
    return (
      <div className="panel" style={{ maxWidth: 420, width: "100%", padding: 32, textAlign: "center" }}>
        <div style={{ fontSize: 48, marginBottom: 16 }}>🎉</div>
        <h2>Invitation accepted!</h2>
        <p className="muted">Redirecting to login...</p>
      </div>
    );
  }

return (
    <div className="panel" style={{ maxWidth: 420, width: "100%", padding: 32 }}>
      <div className="brand" style={{ fontSize: 24, marginBottom: 24, textAlign: "center" }}>COSMIC AI-Risk SaaS</div>
      <h2 style={{ marginBottom: 8 }}>Accept invitation</h2>
      <p className="muted" style={{ marginBottom: 24 }}>You've been invited to join a team.</p>
      {error && (
        <div style={{ background: "var(--blocked-soft)", color: "var(--blocked)", padding: "8px 12px", borderRadius: 8, marginBottom: 16, fontSize: 14 }}>{error}</div>
      )}
      {token ? (
        <form onSubmit={handleSubmit}>
          <div style={{ marginBottom: 24 }}>
            <label style={{ display: "block", marginBottom: 4, fontSize: 14, fontWeight: 600 }}>Your name</label>
            <input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder="Jane Doe"
              style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--line)", fontSize: 16, boxSizing: "border-box" }} />
          </div>
          <button type="submit" className="button primary" style={{ width: "100%", padding: "12px 24px", fontSize: 16 }} disabled={loading}>
            {loading ? "Accepting..." : "Accept invitation"}
          </button>
        </form>
      ) : (
        <p style={{ color: "var(--muted)", textAlign: "center" }}>
          <a href="/signup" style={{ color: "var(--green)" }}>Create a new account instead</a>
        </p>
      )}
    </div>
  );
}

export default function AcceptInvitePage() {
  return (
    <main className="shell" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
      <Suspense fallback={<div className="panel" style={{ maxWidth: 420, width: "100%", padding: 32, textAlign: "center" }}><div className="spinner" /></div>}>
        <AcceptInviteForm />
      </Suspense>
    </main>
  );
}

cmd: