رفع فلو دعوت عضو: لینک کلیک‌پذیر و صفحهٔ پذیرش دعوت

لینک دعوت هم کلیک‌پذیر نبود و هم کار نمی‌کرد؛ چهار نقص هم‌زمان: - `invite_url` نسبی بود (`/accept-invite?token=…`) و host نداشت → حالا از `settings.app_url` آدرس مطلق ساخته می‌شود. - صفحهٔ `/accept-invite` در اپ Next وجود نداشت → ۴۰۴. - هیچ اندپوینت پذیرش دعوت در بک‌اند نبود؛ `InviteRepository.mark_accepted` نوشته شده بود ولی هرگز صدا زده نمی‌شد، پس توکن مصرف نمی‌شد. - در تنظیمات، لینک به‌صورت متن ساده در `<p>` رندر می‌شد. بک‌اند: - روتر `app/interfaces/http/routers/invites.py`: `GET /api/invites/{token}` (پیش‌نمایش) و `POST /api/invites/accept`. عمداً زیر `/organizations/{org_id}` نیست: دعوت‌شونده هنوز عضو نیست و `get_org_context` ردش می‌کند، پس خود توکن مجوز است. accept ایدمپوتنت است. - `AuditAction.MEMBER_JOIN = "member.join"`. - رفع باگ نهفته: `Invite.is_expired()` بین `expires_at` خوانده‌شده از SQLite (naive) و `utcnow()` (aware) خطای مقایسه می‌داد. طبق قرارداد موجود پروژه (`_aware` در `adapters/agy.py`)، در `repositories/identity.py` تابع `_aware` اضافه و روی `expires_at`/`accepted_at` اعمال شد. فرانت: - صفحهٔ `app/accept-invite/page.tsx` با پیش‌نمایش سازمان/نقش و پذیرش؛ پس از پذیرش `setActiveOrganization` می‌کند تا در همان سازمان لند کند. - قراردادهای `InvitePreview`/`AcceptInviteResult` و کلاینت `previewInvite`/`acceptInvite`. - `login`/`signup` پارامتر `?next=` را می‌فهمند (فقط same-origin) تا توکن دعوت در مسیر احراز هویت گم نشود. - `settings`: لینک به `<a>` واقعی + دکمهٔ «کپی لینک». تست: `tests/test_invites.py` (۶) و `src/test/accept-invite.test.tsx` (۵). بک‌اند ۲۵۲ سبز + ruff/mypy تمیز؛ فرانت ۶۱ سبز + tsc/eslint تمیز.
2026-10-13 17:47:26 +03:30
parent da5a2a5d1a
commit e56f105db3
13 changed files with 815 additions and 12 deletions
@@ -39,6 +39,7 @@ const AUDIT_LABELS: Record<string, string> = {
  "organization.create": "ساخت سازمان",
  "organization.delete": "حذف سازمان",
  "member.invite": "دعوت عضو",
+  "member.join": "پیوستن عضو",
  "member.role_change": "تغییر نقش",
  "member.remove": "حذف عضو",
  "employee.create": "ساخت کارمند",
@@ -63,6 +64,20 @@ const AUDIT_LABELS: Record<string, string> = {

 type Tab = "members" | "audit";

+/** Matches ``INVITE_TTL_DAYS`` in the API so the hint cannot drift. */
+const INVITE_TTL_DAYS = 14;
+
+/**
+ * The API returns an absolute invite URL. Older invites (created before the API
+ * started building one) carry a bare path, so fall back to the current origin —
+ * that keeps the anchor clickable either way.
+ */
+function absoluteInviteUrl(url: string): string {
+  if (/^https?:\/\//i.test(url)) return url;
+  if (typeof window === "undefined") return url;
+  return `${window.location.origin}${url.startsWith("/") ? url : `/${url}`}`;
+}
+
 export default function SettingsPage() {
  const { activeOrganization } = useSession();
  const orgId = activeOrganization?.id ?? null;
@@ -79,6 +94,7 @@ export default function SettingsPage() {
  const [inviting, setInviting] = React.useState(false);
  const [inviteError, setInviteError] = React.useState<string | null>(null);
  const [lastInvite, setLastInvite] = React.useState<Invite | null>(null);
+  const [copied, setCopied] = React.useState(false);

  const [busyMemberId, setBusyMemberId] = React.useState<string | null>(null);
  const [pendingRemove, setPendingRemove] = React.useState<Member | null>(null);
@@ -124,6 +140,7 @@ export default function SettingsPage() {
    if (!orgId) return;
    setInviteError(null);
    setLastInvite(null);
+    setCopied(false);
    setInviting(true);
    try {
      const invite = await api.createInvite(orgId, { email: email.trim(), role: inviteRole });
@@ -136,6 +153,19 @@ export default function SettingsPage() {
    }
  };

+  const copyInviteLink = async (url: string) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard can be blocked (insecure context, denied permission). The
+      // link is rendered as a real anchor above, so the user can still copy it
+      // by hand — no need to surface an error for this.
+      setCopied(false);
+    }
+  };
+
  const onChangeRole = async (member: Member, role: Role) => {
    if (!orgId) return;
    setBusyMemberId(member.id);
@@ -319,9 +349,24 @@ export default function SettingsPage() {
                  <p className="text-xs text-slate-400">
                    دعوت برای <span className="ltr-inline">{lastInvite.email}</span> ساخته شد.
                  </p>
-                  <p className="ltr-inline mt-1 break-all text-xs text-accent">
-                    {lastInvite.invite_url}
-                  </p>
+                  <a
+                    href={absoluteInviteUrl(lastInvite.invite_url)}
+                    className="ltr-inline mt-1 block break-all text-xs text-accent hover:underline"
+                  >
+                    {absoluteInviteUrl(lastInvite.invite_url)}
+                  </a>
+                  <div className="mt-2 flex items-center gap-2">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => void copyInviteLink(absoluteInviteUrl(lastInvite.invite_url))}
+                    >
+                      {copied ? "کپی شد" : "کپی لینک"}
+                    </Button>
+                    <span className="text-xs text-slate-500">
+                      لینک یک‌بارمصرف است و تا {INVITE_TTL_DAYS} روز اعتبار دارد.
+                    </span>
+                  </div>
                </div>
              )}
            </Card>
@@ -0,0 +1,233 @@
+"use client";
+
+/**
+ * Invite redemption screen.
+ *
+ * Lives outside the ``(app)`` group on purpose: the invitee is not a member of
+ * anything yet, so the authenticated shell would bounce them to /login before
+ * they could accept. Here we render a standalone card, and only ask for a
+ * session when there is actually an invite to redeem.
+ */
+
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import * as React from "react";
+import type { InvitePreview } from "@agy/contracts";
+import {
+  Badge,
+  Button,
+  Card,
+  CardHint,
+  CardTitle,
+  ErrorState,
+  LoadingState,
+} from "@agy/ui";
+import { ApiError, api } from "@/lib/api";
+import { useSession } from "@/lib/session";
+
+const ROLE_LABELS: Record<string, string> = {
+  owner: "مالک",
+  admin: "مدیر",
+  manager: "سرپرست",
+  member: "عضو",
+  viewer: "بیننده",
+};
+
+function Centered({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center p-5">
+      <div className="w-full max-w-sm">{children}</div>
+    </div>
+  );
+}
+
+function AcceptInviteCard() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const token = params.get("token") ?? "";
+  const { ready, user, refresh, setActiveOrganization } = useSession();
+
+  const [preview, setPreview] = React.useState<InvitePreview | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [accepting, setAccepting] = React.useState(false);
+
+  // The invitee may not have an account yet; after they sign in or sign up we
+  // send them straight back here so the token is not lost.
+  const nextPath = `/accept-invite?token=${encodeURIComponent(token)}`;
+
+  React.useEffect(() => {
+    if (!ready) return;
+    if (!token || !user) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    api
+      .previewInvite(token)
+      .then((result) => {
+        if (!cancelled) setPreview(result);
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof ApiError ? err.message : "دریافت اطلاعات دعوت‌نامه ناموفق بود.");
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [ready, token, user]);
+
+  const onAccept = async () => {
+    setError(null);
+    setAccepting(true);
+    try {
+      const result = await api.acceptInvite(token);
+      // Land the invitee inside the organization they just joined rather than
+      // whichever tenant happened to be active before.
+      setActiveOrganization(result.organization_id);
+      await refresh();
+      router.replace("/dashboard");
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "پذیرش دعوت‌نامه ناموفق بود.");
+    } finally {
+      setAccepting(false);
+    }
+  };
+
+  if (!ready) {
+    return (
+      <Centered>
+        <Card className="anim-rise">
+          <LoadingState label="در حال آماده‌سازی نشست…" />
+        </Card>
+      </Centered>
+    );
+  }
+
+  if (!token) {
+    return (
+      <Centered>
+        <Card className="anim-rise">
+          <CardTitle>لینک دعوت ناقص است</CardTitle>
+          <CardHint>
+            توکن دعوت در آدرس وجود ندارد. لینک کامل را از فرستنده دوباره بگیرید.
+          </CardHint>
+          <div className="mt-5">
+            <Link href="/dashboard" className="text-xs text-accent hover:underline">
+              بازگشت به داشبورد
+            </Link>
+          </div>
+        </Card>
+      </Centered>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Centered>
+        <Card className="anim-rise">
+          <CardTitle>دعوت به یک سازمان</CardTitle>
+          <CardHint>
+            برای پذیرش این دعوت باید وارد شوید. اگر هنوز حساب ندارید، با همان ایمیلی که
+            دعوت‌نامه برایش ارسال شده ثبت‌نام کنید.
+          </CardHint>
+          <div className="mt-5 flex gap-2">
+            <Link href={`/login?next=${encodeURIComponent(nextPath)}`} className="flex-1">
+              <Button className="w-full">ورود</Button>
+            </Link>
+            <Link href={`/signup?next=${encodeURIComponent(nextPath)}`} className="flex-1">
+              <Button variant="secondary" className="w-full">
+                ثبت‌نام
+              </Button>
+            </Link>
+          </div>
+        </Card>
+      </Centered>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Centered>
+        <Card className="anim-rise">
+          <LoadingState label="در حال بررسی دعوت‌نامه…" />
+        </Card>
+      </Centered>
+    );
+  }
+
+  if (error || !preview) {
+    return (
+      <Centered>
+        <Card className="anim-rise">
+          <ErrorState
+            title="دعوت‌نامه قابل استفاده نیست"
+            message={error ?? "اطلاعات دعوت‌نامه در دسترس نیست."}
+          />
+          <div className="mt-5">
+            <Link href="/dashboard" className="text-xs text-accent hover:underline">
+              بازگشت به داشبورد
+            </Link>
+          </div>
+        </Card>
+      </Centered>
+    );
+  }
+
+  return (
+    <Centered>
+      <Card className="anim-rise">
+        <CardTitle>دعوت به {preview.organization_name}</CardTitle>
+        <CardHint>
+          برای <span className="ltr-inline">{preview.email}</span> با نقش{" "}
+          {ROLE_LABELS[preview.role] ?? preview.role} دعوت شده‌اید.
+        </CardHint>
+
+        <div className="mt-4 flex items-center gap-2">
+          <Badge tone="info">{ROLE_LABELS[preview.role] ?? preview.role}</Badge>
+          {preview.already_member && <Badge tone="neutral">شما از قبل عضو هستید</Badge>}
+        </div>
+
+        <div className="mt-5">
+          <Button className="w-full" loading={accepting} onClick={onAccept}>
+            {preview.already_member ? "ورود به سازمان" : "پذیرش دعوت"}
+          </Button>
+        </div>
+
+        <p className="mt-4 text-xs text-slate-400">
+          با حساب دیگری وارد شده‌اید؟{" "}
+          <Link
+            href={`/login?next=${encodeURIComponent(nextPath)}`}
+            className="text-accent hover:underline"
+          >
+            تعویض حساب
+          </Link>
+        </p>
+      </Card>
+    </Centered>
+  );
+}
+
+export default function AcceptInvitePage() {
+  // `useSearchParams` forces the route to be client-rendered; Next requires a
+  // Suspense boundary around it so the static shell can still be emitted.
+  return (
+    <React.Suspense
+      fallback={
+        <Centered>
+          <Card>
+            <LoadingState label="در حال بارگذاری…" />
+          </Card>
+        </Centered>
+      }
+    >
+      <AcceptInviteCard />
+    </React.Suspense>
+  );
+}
@@ -7,6 +7,17 @@ import { Button, Card, CardHint, CardTitle, ErrorState, Field } from "@agy/ui";
 import { ApiError } from "@/lib/api";
 import { useSession } from "@/lib/session";

+/**
+ * Where to land after authenticating. Only same-origin paths are honoured, so a
+ * crafted `?next=https://evil.example` cannot turn the login screen into an
+ * open redirect.
+ */
+function nextDestination(fallback: string): string {
+  if (typeof window === "undefined") return fallback;
+  const next = new URLSearchParams(window.location.search).get("next");
+  return next && next.startsWith("/") && !next.startsWith("//") ? next : fallback;
+}
+
 export default function LoginPage() {
  const router = useRouter();
  const { login, user, ready } = useSession();
@@ -14,9 +25,16 @@ export default function LoginPage() {
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [submitting, setSubmitting] = React.useState(false);
+  // Read once on mount so the "no account?" link carries the invite token along.
+  const [nextPath, setNextPath] = React.useState<string | null>(null);

  React.useEffect(() => {
-    if (ready && user) router.replace("/dashboard");
+    const next = new URLSearchParams(window.location.search).get("next");
+    setNextPath(next && next.startsWith("/") && !next.startsWith("//") ? next : null);
+  }, []);
+
+  React.useEffect(() => {
+    if (ready && user) router.replace(nextDestination("/dashboard"));
  }, [ready, user, router]);

  const onSubmit = async (event: React.FormEvent) => {
@@ -25,7 +43,7 @@ export default function LoginPage() {
    setSubmitting(true);
    try {
      await login(email, password);
-      router.replace("/dashboard");
+      router.replace(nextDestination("/dashboard"));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "ورود ناموفق بود.");
    } finally {
@@ -68,7 +86,10 @@ export default function LoginPage() {

        <p className="mt-4 text-xs text-slate-400">
          حساب ندارید؟{" "}
-          <Link href="/signup" className="text-accent hover:underline">
+          <Link
+            href={nextPath ? `/signup?next=${encodeURIComponent(nextPath)}` : "/signup"}
+            className="text-accent hover:underline"
+          >
            ثبت‌نام کنید
          </Link>
        </p>
@@ -7,6 +7,17 @@ import { Button, Card, CardHint, CardTitle, ErrorState, Field } from "@agy/ui";
 import { ApiError } from "@/lib/api";
 import { useSession } from "@/lib/session";

+/**
+ * Where to land after signing up. Only same-origin paths are honoured, so a
+ * crafted `?next=https://evil.example` cannot turn the form into an open
+ * redirect.
+ */
+function nextDestination(fallback: string): string {
+  if (typeof window === "undefined") return fallback;
+  const next = new URLSearchParams(window.location.search).get("next");
+  return next && next.startsWith("/") && !next.startsWith("//") ? next : fallback;
+}
+
 export default function SignupPage() {
  const router = useRouter();
  const { signup } = useSession();
@@ -15,6 +26,13 @@ export default function SignupPage() {
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [submitting, setSubmitting] = React.useState(false);
+  // Read once on mount so the "already registered?" link carries the invite token.
+  const [nextPath, setNextPath] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const next = new URLSearchParams(window.location.search).get("next");
+    setNextPath(next && next.startsWith("/") && !next.startsWith("//") ? next : null);
+  }, []);

  const onSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
@@ -22,7 +40,7 @@ export default function SignupPage() {
    setSubmitting(true);
    try {
      await signup(email, password, name);
-      router.replace("/onboarding");
+      router.replace(nextDestination("/onboarding"));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "ثبت‌نام ناموفق بود.");
    } finally {
@@ -73,7 +91,10 @@ export default function SignupPage() {

        <p className="mt-4 text-xs text-slate-400">
          قبلاً ثبت‌نام کرده‌اید؟{" "}
-          <Link href="/login" className="text-accent hover:underline">
+          <Link
+            href={nextPath ? `/login?next=${encodeURIComponent(nextPath)}` : "/login"}
+            className="text-accent hover:underline"
+          >
            ورود
          </Link>
        </p>
@@ -134,6 +134,17 @@ export const api = {
      method: "POST",
      body,
    }),
+  // Redeeming an invite is intentionally *not* org-scoped: the invitee is not a
+  // member yet, so the token is what authorizes the call.
+  previewInvite: (token: string) =>
+    apiRequest<import("@agy/contracts").InvitePreview>(
+      `/api/invites/${encodeURIComponent(token)}`,
+    ),
+  acceptInvite: (token: string) =>
+    apiRequest<import("@agy/contracts").AcceptInviteResult>("/api/invites/accept", {
+      method: "POST",
+      body: { token },
+    }),
  updateMember: (
    orgId: string,
    memberId: string,
@@ -0,0 +1,153 @@
+/**
+ * The accept-invite screen is the only place an invited user can turn a link
+ * into a membership, so its states matter: missing token, signed out, preview
+ * failure, and the happy path.
+ */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  class FakeApiError extends Error {
+    constructor(
+      readonly status: number,
+      readonly code: string,
+      message: string,
+    ) {
+      super(message);
+    }
+  }
+  return {
+    FakeApiError,
+    session: {
+      ready: true,
+      user: null as { id: string; email: string } | null,
+      refresh: vi.fn(async () => {}),
+      setActiveOrganization: vi.fn(),
+    },
+    replace: vi.fn(),
+    previewInvite: vi.fn(),
+    acceptInvite: vi.fn(),
+    token: "tok-123",
+  };
+});
+
+vi.mock("next/navigation", () => ({
+  useSearchParams: () => new URLSearchParams(`token=${mocks.token}`),
+  useRouter: () => ({ replace: mocks.replace }),
+}));
+
+vi.mock("next/link", () => ({
+  default: ({
+    href,
+    children,
+    className,
+  }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+  }) => (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock("@/lib/session", () => ({ useSession: () => mocks.session }));
+
+vi.mock("@/lib/api", () => ({
+  ApiError: mocks.FakeApiError,
+  api: {
+    previewInvite: mocks.previewInvite,
+    acceptInvite: mocks.acceptInvite,
+  },
+}));
+
+import AcceptInvitePage from "@/app/accept-invite/page";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.token = "tok-123";
+  mocks.session.ready = true;
+  mocks.session.user = null;
+});
+
+describe("accept-invite", () => {
+  it("asks a signed-out visitor to authenticate and keeps the token in the link", () => {
+    render(<AcceptInvitePage />);
+
+    expect(screen.getByText("دعوت به یک سازمان")).toBeInTheDocument();
+    const login = screen.getByRole("link", { name: "ورود" });
+    // Losing the token here would strand the invitee on the dashboard.
+    expect(decodeURIComponent(login.getAttribute("href") ?? "")).toBe(
+      "/login?next=/accept-invite?token=tok-123",
+    );
+  });
+
+  it("shows the organization and role to the signed-in invitee", async () => {
+    mocks.session.user = { id: "u1", email: "newbie@example.com" };
+    mocks.previewInvite.mockResolvedValue({
+      organization_id: "org-1",
+      organization_name: "Acme",
+      email: "newbie@example.com",
+      role: "manager",
+      expires_at: "2026-01-01T00:00:00Z",
+      already_member: false,
+    });
+
+    render(<AcceptInvitePage />);
+
+    expect(await screen.findByText("دعوت به Acme")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "پذیرش دعوت" })).toBeInTheDocument();
+    expect(mocks.previewInvite).toHaveBeenCalledWith("tok-123");
+  });
+
+  it("surfaces the server's reason when the invite is unusable", async () => {
+    mocks.session.user = { id: "u1", email: "newbie@example.com" };
+    mocks.previewInvite.mockRejectedValue(
+      new mocks.FakeApiError(
+        403,
+        "permission_denied",
+        "این دعوت‌نامه برای ایمیل دیگری صادر شده است.",
+      ),
+    );
+
+    render(<AcceptInvitePage />);
+
+    expect(await screen.findByText("دعوت‌نامه قابل استفاده نیست")).toBeInTheDocument();
+    expect(screen.getByText(/برای ایمیل دیگری/)).toBeInTheDocument();
+  });
+
+  it("reports a missing token instead of calling the API", () => {
+    mocks.token = "";
+    render(<AcceptInvitePage />);
+
+    expect(screen.getByText("لینک دعوت ناقص است")).toBeInTheDocument();
+    expect(mocks.previewInvite).not.toHaveBeenCalled();
+  });
+
+  it("activates the joined organization and redirects after accepting", async () => {
+    mocks.session.user = { id: "u1", email: "newbie@example.com" };
+    mocks.previewInvite.mockResolvedValue({
+      organization_id: "org-1",
+      organization_name: "Acme",
+      email: "newbie@example.com",
+      role: "member",
+      expires_at: "2026-01-01T00:00:00Z",
+      already_member: false,
+    });
+    mocks.acceptInvite.mockResolvedValue({
+      organization_id: "org-1",
+      organization_name: "Acme",
+      role: "member",
+    });
+
+    render(<AcceptInvitePage />);
+    fireEvent.click(await screen.findByRole("button", { name: "پذیرش دعوت" }));
+
+    await waitFor(() => expect(mocks.acceptInvite).toHaveBeenCalledWith("tok-123"));
+    // Landing in the new tenant, not whichever one was active before.
+    await waitFor(() => expect(mocks.session.setActiveOrganization).toHaveBeenCalledWith("org-1"));
+    await waitFor(() => expect(mocks.replace).toHaveBeenCalledWith("/dashboard"));
+  });
+});