@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/styled/work/WorkInviteAccept.tsx

@@ -1,11 +1,17 @@
-import { useState } from "react";
-import { CheckCircle2, FolderOpen } from "lucide-react";
-import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { Fragment, useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import { FolderOpen } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { usePublicAuth } from "../../../contexts/PublicAuthContext";
-import { ACCESS_TOKEN_KEY } from "../../../contexts/PublicAuthContext";
-import { PUBLIC_REFRESH_TOKEN_KEY } from "../../../client/tokenStorage";
 import { Loading } from "../Loading";
-import { useAcceptWorkInvite, useWorkInvite } from "../../headless/work/useWorkPortal";
+import {
+  rememberSignupEmail,
+  useAcceptWorkInvite,
+  useWorkInvite,
+} from "../../headless/work/useWorkPortal";
+import { usePortalButtons } from "../portal/shared";
+import { requestAppInstall } from "../../headless/siteApp/appPrompts";
 
 export interface WorkInviteAcceptProps {
   /** Invite token from the email link (read from search params by the shell). */
@@ -13,96 +19,163 @@ export interface WorkInviteAcceptProps {
   /** Project id from the email link. */
   projectId?: string;
   /** Base path for a project in the portal. The project link is
-   * `${projectHrefBase}/${projectId}`. Defaults to `/i/work/projects`. */
+   * `${projectHrefBase}/${projectId}`. Defaults to `internalPath("account/projects")`. */
   projectHrefBase?: string;
-  /** Href to the portal login (shown on an invalid/expired link). */
+  /** The portal login. A `redirect` back to this invite is appended. Defaults to
+   * `internalPath("login")`. */
   loginHref?: string;
+  /** The standard signup page. A `redirect` back to this invite is appended.
+   * Defaults to `internalPath("signup")`. */
+  signupHref?: string;
 }
 
 const msg = (e: unknown) => (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+const status = (e: unknown) => (e as { response?: { status?: number } })?.response?.status;
+
+/** Where the token waits while the person signs up or signs in (this tab only). */
+const stashKey = (projectId: string) => `forge:work-invite:${projectId}`;
+
+const readStash = (projectId?: string): string | undefined => {
+  if (!projectId || typeof window === "undefined") return undefined;
+  try {
+    return window.sessionStorage.getItem(stashKey(projectId)) ?? undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+const writeStash = (projectId: string, token: string): boolean => {
+  try {
+    window.sessionStorage.setItem(stashKey(projectId), token);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const clearStash = (projectId: string) => {
+  try {
+    window.sessionStorage.removeItem(stashKey(projectId));
+  } catch {
+    // Storage unavailable: nothing was stashed.
+  }
+};
+
+/**
+ * A translated sentence with some of its placeholders rendered in bold.
+ *
+ * The bundle holds the WHOLE sentence (`"You're signed in as {email}."`), so a
+ * translator can move the address wherever the language needs it. The
+ * placeholders are then swapped for nodes here instead of being filled as text.
+ */
+function Rich({ text, values }: { text: string; values: Record<string, string> }) {
+  const parts = text.split(/(\{[a-z_]+\})/g);
+  return (
+    <>
+      {parts.map((part, i) => {
+        const name = /^\{([a-z_]+)\}$/.exec(part)?.[1];
+        if (name && values[name] !== undefined) return <strong key={i}>{values[name]}</strong>;
+        return <Fragment key={i}>{part}</Fragment>;
+      })}
+    </>
+  );
+}
 
 /**
- * Branded, AUTH-AWARE client-invite accept page. Shows who invited the client
- * to which project, then:
- *   • already signed in as the invited person → "View project" (no password),
- *   • signed in as someone else → accept as the invited person (set password),
- *   • not signed in → set a password to accept (mints a portal session).
- * On accept it persists the returned session token and navigates to the
- * project. Theme tokens only — it inherits the artist's site styling.
+ * Branded, AUTH-AWARE client-invite accept page.
+ *
+ * The invite never creates an account or sets a password: the link lands on the
+ * creator's own site, where page scripts can read it. So:
+ *   - signed in AS the invited address: "Open project" accepts and opens it,
+ *   - signed in as someone else: sign out and sign in as the invited address,
+ *   - not signed in, address has an account: sign in, then come back here,
+ *   - not signed in, no account yet: the normal signup (which verifies the
+ *     address with an emailed code), prefilled with the invited address, then
+ *     back here.
+ *
+ * The token is read once, kept in component state and this tab's session
+ * storage, and removed from the address bar so analytics fired later on the
+ * page never see it. Theme tokens only, so it inherits the artist's styling.
  */
 export function WorkInviteAccept({
-  token,
+  token: tokenProp,
   projectId,
-  projectHrefBase = "/i/work/projects",
-  loginHref = "/i/login",
+  projectHrefBase = internalPath("account/projects"),
+  loginHref = internalPath("login"),
+  signupHref = internalPath("signup"),
 }: WorkInviteAcceptProps) {
-  const theme = useForgeTheme();
-  const { isAuthenticated, user } = usePublicAuth();
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  const { isAuthenticated, user, logout } = usePublicAuth();
+
+  // Read once: the URL is about to lose it, and a re-render must not.
+  const [token] = useState<string | undefined>(() => tokenProp ?? readStash(projectId));
+  const [stashed, setStashed] = useState(false);
   const { data: invite, isLoading, isError } = useWorkInvite(token, projectId);
   const acceptInvite = useAcceptWorkInvite();
-
-  const [password, setPassword] = useState("");
-  const [confirm, setConfirm] = useState("");
   const [error, setError] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
+  useEffect(() => {
+    if (!token || !projectId || typeof window === "undefined") return;
+    setStashed(writeStash(projectId, token));
+    try {
+      const url = new URL(window.location.href);
+      if (url.searchParams.has("token")) {
+        url.searchParams.delete("token");
+        window.history.replaceState(window.history.state, "", `${url.pathname}${url.search}${url.hash}`);
+      }
+    } catch {
+      // A URL the browser cannot parse: leave it alone.
+    }
+  }, [token, projectId]);
+
   const projectHref = `${projectHrefBase}/${projectId}`;
+  // Back to this page after signup or sign-in. The token rides in session
+  // storage when it can, so it never reaches the signup or login page's URL.
+  const backHere = `${internalPath("account/invite")}?project=${encodeURIComponent(projectId ?? "")}${
+    stashed || !token ? "" : `&token=${encodeURIComponent(token)}`
+  }`;
+  const withRedirect = (href: string) =>
+    `${href}${href.includes("?") ? "&" : "?"}redirect=${encodeURIComponent(backHere)}`;
 
-  const card: React.CSSProperties = {
+  const card: CSSProperties = {
     maxWidth: 460,
     margin: "40px auto 0",
     padding: 28,
-    border: `1px solid ${theme.colors.primary}33`,
-    borderRadius: theme.cornerRadius,
-    color: theme.colors.text,
-    background: theme.colors.background,
-  };
-  const input: React.CSSProperties = {
-    width: "100%",
-    height: 42,
-    padding: "8px 12px",
-    borderRadius: theme.cornerRadius,
-    border: `1px solid ${theme.colors.primary}40`,
-    background: "transparent",
-    color: theme.colors.text,
-    outline: "none",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    color: t.text,
+    background: t.background,
+    fontFamily: t.fontFamily,
   };
-  const button: React.CSSProperties = {
-    width: "100%",
-    padding: "11px 14px",
-    borderRadius: theme.cornerRadius,
-    background: theme.colors.primary,
-    color: theme.colors.background,
-    border: "none",
-    fontWeight: 700,
-    cursor: "pointer",
-    textAlign: "center",
-    textDecoration: "none",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
+  const fullWidth: CSSProperties = { ...buttons.primary, width: "100%", minHeight: 44 };
+  const eyebrow: CSSProperties = { fontSize: 14, color: t.muted, fontWeight: 600 };
+  const heading: CSSProperties = {
+    margin: "6px 0 12px",
+    fontFamily: t.headingFontFamily,
+    fontSize: 24,
+    lineHeight: 1.2,
+    fontWeight: 600,
+    color: t.text,
   };
-  const link: React.CSSProperties = { color: theme.colors.primary, textDecoration: "underline" };
-  const eyebrow: React.CSSProperties = {
-    fontSize: 13,
-    color: theme.colors.primary,
-    fontWeight: 700,
-    letterSpacing: 0.3,
-  };
-  const heading: React.CSSProperties = { fontSize: 22, fontWeight: 800, margin: "6px 0 14px" };
-  const sub: React.CSSProperties = { fontSize: 14, color: `${theme.colors.text}b3`, marginBottom: 22 };
+  const sub: CSSProperties = { margin: "0 0 22px", fontSize: 15, lineHeight: 1.5, color: t.muted };
+
+  const signInLink = (
+    <a href={loginHref} style={buttons.quiet}>
+      {tr("forge.work_invite_accept.go_to_sign_in")}
+    </a>
+  );
 
   if (!token || !projectId) {
     return (
       <div style={card} data-testid="work-invite-accept">
         <h1 style={heading} data-testid="work-invite-invalid">
-          Invalid invite link
+          {tr("forge.work_invite_accept.missing_title")}
         </h1>
-        <p style={sub}>This invite link is missing information. Please use the link from your email.</p>
-        <a href={loginHref} style={link}>
-          Go to sign in
-        </a>
+        <p style={sub}>{tr("forge.work_invite_accept.missing_body")}</p>
+        {signInLink}
       </div>
     );
   }
@@ -119,153 +192,140 @@ export function WorkInviteAccept({
     return (
       <div style={card} data-testid="work-invite-accept">
         <h1 style={heading} data-testid="work-invite-invalid">
-          Invite not available
+          {tr("forge.work_invite_accept.unavailable_title")}
         </h1>
-        <p style={sub}>This invite is invalid or has expired. Ask your provider to send a new one.</p>
-        <a href={loginHref} style={link}>
-          Go to sign in
-        </a>
+        <p style={sub}>{tr("forge.work_invite_accept.unavailable_body")}</p>
+        {signInLink}
       </div>
     );
   }
 
   const invitedEmail = invite.email?.toLowerCase() ?? "";
   const currentEmail = (user?.email ?? "").toLowerCase();
-  const signedInAsInvitee = isAuthenticated && currentEmail && currentEmail === invitedEmail;
+  const signedInAsInvitee = isAuthenticated && !!currentEmail && currentEmail === invitedEmail;
+  const signedInAsSomeoneElse = isAuthenticated && !!currentEmail && currentEmail !== invitedEmail;
 
-  const header = (
+  const header: ReactNode = (
     <>
       <div style={eyebrow}>{invite.profileName}</div>
       <h1 style={heading} data-testid="work-invite-heading">
-        You're invited to <span style={{ color: theme.colors.primary }}>{invite.projectName}</span>
+        {tr("forge.work_invite_accept.heading", { project_name: invite.projectName })}
       </h1>
     </>
   );
 
-  // Already signed in AS the invited person → nothing to do but open the project.
+  const errorLine = error ? (
+    <p role="alert" style={{ margin: "0 0 14px", fontSize: 14, color: t.text, fontWeight: 600 }} data-testid="work-invite-error">
+      {error}
+    </p>
+  ) : null;
+
+  // Signed in AS the invited person: accepting links the project, then opens it.
   if (signedInAsInvitee) {
+    const onOpen = async () => {
+      setError("");
+      setSubmitting(true);
+      try {
+        await acceptInvite.mutateAsync({ token, projectId });
+      } catch (err) {
+        // 404: the invite was already used, and this account already has the
+        // project. Anything else is a real failure to show.
+        if (status(err) !== 404) {
+          setError(msg(err) || tr("forge.work_invite_accept.generic_error"));
+          setSubmitting(false);
+          return;
+        }
+      }
+      clearStash(projectId);
+      // Rides the session to the project page, where the site app offers itself.
+      requestAppInstall("invite_accepted");
+      window.location.assign(projectHref);
+    };
     return (
       <div style={card} data-testid="work-invite-accept">
         {header}
         <p style={sub}>
-          <CheckCircle2 size={16} style={{ verticalAlign: "-2px", color: theme.colors.primary }} /> You're signed in as{" "}
-          <strong>{invite.email}</strong>. You already have access.
+          <Rich text={tr("forge.work_invite_accept.signed_in_as_invitee")} values={{ email: invite.email }} />
         </p>
-        <a href={projectHref} style={button} data-testid="work-invite-view-project">
-          <FolderOpen size={16} /> View project
-        </a>
+        {errorLine}
+        <button
+          type="button"
+          style={{ ...fullWidth, opacity: submitting ? 0.6 : 1 }}
+          disabled={submitting}
+          data-testid="work-invite-view-project"
+          onClick={onOpen}
+        >
+          <FolderOpen size={16} aria-hidden />{" "}
+          {submitting ? tr("forge.work_invite_accept.accepting") : tr("forge.work_invite_accept.view_project")}
+        </button>
       </div>
     );
   }
 
-  /**
-   * The invited address already has a TribeNest account (C10). An invite grants
-   * portal ACCESS; it is not a credential reset for an account whose owner
-   * never asked for one — so there is no password form here, only a sign-in
-   * link. Accepting still runs, to consume the invite and link the contact.
-   */
-  if (invite.requiresExistingLogin) {
+  // Signed in as somebody else: the invite is for one address only.
+  if (signedInAsSomeoneElse) {
     return (
       <div style={card} data-testid="work-invite-accept">
         {header}
         <p style={sub}>
-          <strong>{invite.email}</strong> already has an account. Sign in and the project will be waiting for you.
+          <Rich
+            text={tr("forge.work_invite_accept.signed_in_as_other")}
+            values={{ current_email: user?.email ?? "", invited_email: invite.email }}
+          />
         </p>
         <button
           type="button"
-          style={button}
-          disabled={submitting}
-          data-testid="work-invite-signin"
+          style={fullWidth}
+          data-testid="work-invite-switch-account"
           onClick={async () => {
-            setSubmitting(true);
-            try {
-              // Consumes the invite and links the contact; returns no session.
-              await acceptInvite.mutateAsync({ token, projectId, password: "" });
-            } catch {
-              // Non-fatal: an already-consumed invite still leaves them able to
-              // sign in, which is the whole instruction on this screen.
-            }
-            window.location.assign(loginHref);
+            await logout();
+            window.location.assign(invite.needsAccount ? withRedirect(signupHref) : withRedirect(loginHref));
           }}
         >
-          Go to sign in
+          {tr("forge.work_invite_accept.switch_account", { email: invite.email })}
         </button>
       </div>
     );
   }
 
-  const onAccept = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    if (password.length < 8) {
-      setError("Password must be at least 8 characters.");
-      return;
-    }
-    if (password !== confirm) {
-      setError("Passwords don't match.");
-      return;
-    }
-    setSubmitting(true);
-    try {
-      const result = await acceptInvite.mutateAsync({ token, projectId, password });
-      if (result.requiresLogin || !result.token) {
-        // The address turned out to already have an account — no session is
-        // issued for it (C10). Send them to sign in.
-        window.location.assign(loginHref);
-        return;
-      }
-      // Persist the fresh portal session (access + rotating refresh token) and
-      // hard-navigate so the auth context re-initializes as the invited client.
-      localStorage.setItem(ACCESS_TOKEN_KEY, result.token);
-      if (result.refreshToken) localStorage.setItem(PUBLIC_REFRESH_TOKEN_KEY, result.refreshToken);
-      window.location.assign(projectHref);
-    } catch (err) {
-      setError(msg(err) || "Something went wrong. Please try again.");
-      setSubmitting(false);
-    }
-  };
+  // Not signed in, and the address has no account: the normal signup first.
+  if (invite.needsAccount) {
+    return (
+      <div style={card} data-testid="work-invite-accept">
+        {header}
+        <p style={sub}>
+          <Rich text={tr("forge.work_invite_accept.create_account_intro")} values={{ email: invite.email }} />
+        </p>
+        <button
+          type="button"
+          style={fullWidth}
+          data-testid="work-invite-signup"
+          onClick={() => {
+            rememberSignupEmail(invite.email);
+            window.location.assign(withRedirect(signupHref));
+          }}
+        >
+          {tr("forge.work_invite_accept.create_account")}
+        </button>
+        <p style={{ ...sub, margin: "16px 0 0", fontSize: 14 }}>
+          <a href={withRedirect(loginHref)} style={buttons.quiet} data-testid="work-invite-signin">
+            {tr("forge.work_invite_accept.have_account")}
+          </a>
+        </p>
+      </div>
+    );
+  }
 
+  // Not signed in, and the address already has an account: sign in, come back.
   return (
     <div style={card} data-testid="work-invite-accept">
       {header}
       <p style={sub}>
-        {isAuthenticated && currentEmail && currentEmail !== invitedEmail ? (
-          <>
-            You're signed in as <strong>{user?.email}</strong>, but this invite is for <strong>{invite.email}</strong>.
-            Set a password to continue as {invite.email}.
-          </>
-        ) : (
-          <>
-            Set a password for <strong>{invite.email}</strong> to access your client portal.
-          </>
-        )}
+        <Rich text={tr("forge.work_invite_accept.existing_account")} values={{ email: invite.email }} />
       </p>
-      {error && (
-        <p style={{ color: "#ef4444", marginBottom: 14, fontSize: 14 }} data-testid="work-invite-error">
-          {error}
-        </p>
-      )}
-      <form onSubmit={onAccept} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
-        <input
-          type="password"
-          placeholder="Create a password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          style={input}
-          data-testid="work-invite-password"
-        />
-        <input
-          type="password"
-          placeholder="Confirm password"
-          value={confirm}
-          onChange={(e) => setConfirm(e.target.value)}
-          style={input}
-          data-testid="work-invite-confirm"
-        />
-        <button type="submit" disabled={submitting} style={button} data-testid="work-invite-submit">
-          {submitting ? "Accepting…" : "Accept invite"}
-        </button>
-      </form>
+      <a href={withRedirect(loginHref)} style={fullWidth} data-testid="work-invite-signin">
+        {tr("forge.work_invite_accept.go_to_sign_in")}
+      </a>
     </div>
   );
 }