@agent-native/core 0.164.4 → 0.164.12

package/corpus/templates/slides/app/components/editor/RequestDeckAccessDialog.tsx

@@ -0,0 +1,101 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconLogin2 } from "@tabler/icons-react";
+import type { FormEvent } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+
+export interface RequestDeckAccessDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  signInHref: string;
+  email: string;
+  onEmailChange: (email: string) => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  isSubmitting: boolean;
+  error?: string | null;
+}
+
+export function RequestDeckAccessDialog({
+  open,
+  onOpenChange,
+  signInHref,
+  email,
+  onEmailChange,
+  onSubmit,
+  isSubmitting,
+  error,
+}: RequestDeckAccessDialogProps) {
+  const t = useT();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("deckEditor.requestAccessDialogTitle")}</DialogTitle>
+          <DialogDescription>
+            {t("deckEditor.requestAccessDialogDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          <Button asChild className="w-full gap-2">
+            <a href={signInHref}>
+              <IconLogin2 className="size-4" aria-hidden="true" />
+              {t("deckEditor.requestAccessSignIn")}
+            </a>
+          </Button>
+
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <Separator className="flex-1" />
+            <span>{t("deckEditor.requestAccessOr")}</span>
+            <Separator className="flex-1" />
+          </div>
+
+          <form className="grid gap-3" onSubmit={onSubmit}>
+            <div className="grid gap-2">
+              <Label htmlFor="private-deck-request-email">
+                {t("deckEditor.requestAccessEmailLabel")}
+              </Label>
+              <Input
+                id="private-deck-request-email"
+                type="email"
+                inputMode="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(event) => onEmailChange(event.target.value)}
+                placeholder={t("deckEditor.requestAccessEmailPlaceholder")}
+                aria-invalid={Boolean(error)}
+              />
+              <p className="text-xs text-muted-foreground">
+                {t("deckEditor.requestAccessEmailHint")}
+              </p>
+            </div>
+
+            {error ? (
+              <p className="text-sm text-destructive" role="alert">
+                {error}
+              </p>
+            ) : null}
+
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting
+                ? t("deckEditor.requestingAccess")
+                : t("deckEditor.requestAccessWithEmail")}
+            </Button>
+          </form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/slides/app/hooks/use-deck-access.ts

@@ -12,6 +12,7 @@ export type DeckAccessStatusResponse = {
   viewerName: string | null;
   role: "owner" | "viewer" | "commenter" | "editor" | "admin" | null;
   visibility: "private" | "org" | "public" | null;
+  accessRequestToken?: string;
 };
 
 export function useDeckAccessStatus(deckId?: string) {
@@ -44,8 +45,10 @@ function showActionError(message: string) {
 }
 
 export function useRequestDeckAccess() {
-  return useActionMutation<RequestDeckAccessResult, { deckId: string }>(
-    "request-deck-access",
-    { onError: showActionError("Failed to request access") },
-  );
+  return useActionMutation<
+    RequestDeckAccessResult,
+    { accessRequestToken?: string; deckId: string; requesterEmail?: string }
+  >("request-deck-access", {
+    onError: showActionError("Failed to request access"),
+  });
 }

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -554,20 +554,16 @@ const messages = {
   },
   deckEditor: {
     lookingForDeck: "Looking for this deck",
-    teamAccessCheckFailed: "Couldn't check team access",
     joinTeamToOpen: "Join your team to open this deck",
     deckUnavailable: "Deck unavailable",
     checkingSharedAccess:
       "Checking whether this presentation is shared with your account.",
-    verifySharedAccessFailed:
-      "We couldn't verify whether this presentation is shared with your account. Try again to reload team access and the deck.",
     joinTeamDescription:
       "This link points to a team presentation. Join the team shown above and the deck will open here automatically.",
     deckUnavailableDescription:
       "This deck may have been removed, or your account does not have access to it.",
-    privateDeckTitle: "This deck is private",
-    privateDeckDescription:
-      "Ask the owner for access to open this deck. They’ll be notified when you send a request.",
+    privateDeckTitle: "You don't have access to this deck",
+    privateDeckDescription: "Request access and the owner will be notified.",
     signedInAs: "You're signed in as",
     accessRequestSentDescription:
       "The owner has been notified. You can open this deck once access is granted.",
@@ -577,6 +573,33 @@ const messages = {
     accessRequestSent: "Request sent",
     requestAccess: "Request access",
     signInToRequestAccess: "Sign in to request access",
+    requestAccessDialogTitle: "Request access",
+    requestAccessDialogDescription:
+      "Sign in, or enter the email address the owner should share this deck with.",
+    requestAccessSignIn: "Sign in or sign up",
+    requestAccessOr: "or",
+    requestAccessEmailLabel: "Email address",
+    requestAccessEmailPlaceholder: "you@example.com",
+    requestAccessEmailHint:
+      "After access is granted, sign in with this email to view the deck.",
+    requestAccessWithEmail: "Request with email",
+    requestAccessEmailRequired: "Enter a valid email address.",
+    requestingAccess: "Requesting access...",
+    accessRequestSentWithEmail:
+      "The deck owner was asked to share this deck with {{email}}.",
+    accessRequestFailed: "Couldn't request access. Try again.",
+    accessApprovalTitle: "Access granted",
+    accessApprovalAlreadyTitle: "Access already granted",
+    accessApprovalMessage: "{{email}} can now open this deck.",
+    accessApprovalAlreadyMessage: "{{email}} already has access to this deck.",
+    accessApprovalErrorTitle: "Couldn't grant access",
+    accessApprovalInvalid: "This access request is invalid or expired.",
+    accessApprovalSignInTitle: "Sign in to allow access",
+    accessApprovalSignInMessage:
+      "Sign in as the deck owner or an admin to approve this request.",
+    accessApprovalOpenDeck: "Open deck",
+    accessApprovalSignIn: "Sign in",
+    accessApprovalLoading: "Granting access...",
     backToDecks: "Back to Decks",
     tryAgain: "Try again",
     imageUploadFailed: "Image upload failed",

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -20,18 +20,14 @@ import {
   useSensors,
   DragEndEvent,
 } from "@dnd-kit/core";
-import {
-  IconAt,
-  IconArrowLeft,
-  IconLock,
-  IconLoader2,
-  IconLogin2,
-  IconRefresh,
-  IconUserPlus,
-  IconUsersGroup,
-} from "@tabler/icons-react";
 import { nanoid } from "nanoid";
-import { useState, useCallback, useRef, useEffect } from "react";
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  type FormEvent,
+} from "react";
 import {
   useBlocker,
   useNavigate,
@@ -51,6 +47,7 @@ import { canExportPptxFromServer } from "@/components/editor/ExportMenu";
 import GeneratingSlidePreview from "@/components/editor/GeneratingSlidePreview";
 import HistoryPanel from "@/components/editor/HistoryPanel";
 import ImageGenPanel from "@/components/editor/ImageGenPanel";
+import { MissingDeckAccessPane } from "@/components/editor/MissingDeckAccessPane";
 import { QuestionFlow } from "@/components/editor/QuestionFlow";
 import SlideEditor from "@/components/editor/SlideEditor";
 import { TweaksPanel } from "@/components/editor/TweaksPanel";
@@ -78,7 +75,6 @@ import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import {
   useDeckAccessStatus,
   useRequestDeckAccess,
-  type DeckAccessStatusResponse,
 } from "@/hooks/use-deck-access";
 import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 import { useDeckPresence } from "@/hooks/use-deck-presence";
@@ -121,147 +117,9 @@ import { shortcutLabel } from "@/lib/utils";
 
 type EditorSidePanel = "comments" | null;
 
-function MissingDeckAccessPane({
-  accessStatus,
-  accessStatusError,
-  accessStatusLoading,
-  hasTeamJoinOption,
-  orgLoading,
-  orgError,
-  requestAccessPending,
-  accessRequestSent,
-  accessRequestNotified,
-  signedIn,
-  viewerEmail,
-  refreshing,
-  onRequestAccess,
-  onSignIn,
-  onRetry,
-  onBack,
-}: {
-  accessStatus: DeckAccessStatusResponse | null;
-  accessStatusError: boolean;
-  accessStatusLoading: boolean;
-  hasTeamJoinOption: boolean;
-  orgLoading: boolean;
-  orgError: boolean;
-  requestAccessPending: boolean;
-  accessRequestSent: boolean;
-  accessRequestNotified: boolean;
-  signedIn: boolean;
-  viewerEmail: string | null;
-  refreshing: boolean;
-  onRequestAccess: () => void;
-  onSignIn: () => void;
-  onRetry: () => void;
-  onBack: () => void;
-}) {
-  const t = useT();
-  const privateDeck = Boolean(
-    accessStatus?.exists &&
-    !accessStatus.hasAccess &&
-    accessStatus.visibility === "private",
-  );
-  const checkingAccess = !privateDeck && (accessStatusLoading || orgLoading);
-  const accessCheckFailed = accessStatusError || orgError;
-  const Icon =
-    privateDeck || (!hasTeamJoinOption && !checkingAccess && !accessCheckFailed)
-      ? IconLock
-      : IconUsersGroup;
-  const title = checkingAccess
-    ? t("deckEditor.lookingForDeck")
-    : privateDeck
-      ? t("deckEditor.privateDeckTitle")
-      : accessCheckFailed
-        ? t("deckEditor.teamAccessCheckFailed")
-        : hasTeamJoinOption
-          ? t("deckEditor.joinTeamToOpen")
-          : t("deckEditor.deckUnavailable");
-  const description = checkingAccess
-    ? t("deckEditor.checkingSharedAccess")
-    : privateDeck
-      ? t("deckEditor.privateDeckDescription")
-      : accessCheckFailed
-        ? t("deckEditor.verifySharedAccessFailed")
-        : hasTeamJoinOption
-          ? t("deckEditor.joinTeamDescription")
-          : t("deckEditor.deckUnavailableDescription");
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-10">
-      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-sm">
-        <div className="mb-4 flex items-center gap-3">
-          <div className="flex size-10 items-center justify-center rounded-md border border-border bg-background text-muted-foreground">
-            <Icon className="size-5" />
-          </div>
-          <div className="min-w-0">
-            <h1 className="text-base font-semibold text-foreground">{title}</h1>
-          </div>
-        </div>
-        <p className="text-sm leading-6 text-muted-foreground">{description}</p>
-        {privateDeck && viewerEmail ? (
-          <div className="mt-4 flex items-center gap-2 rounded-md border border-border bg-muted/35 px-3 py-2 text-sm">
-            <IconAt className="size-4 shrink-0 text-muted-foreground" />
-            <span className="min-w-0 truncate text-muted-foreground">
-              {t("deckEditor.signedInAs")}{" "}
-              <span className="font-medium text-foreground">{viewerEmail}</span>
-            </span>
-          </div>
-        ) : null}
-        {privateDeck && accessRequestSent ? (
-          <div className="mt-3 rounded-md border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300">
-            {t(
-              accessRequestNotified
-                ? "deckEditor.accessRequestSentDescription"
-                : "deckEditor.accessRequestRecordedDescription",
-            )}
-          </div>
-        ) : null}
-        <div className="mt-5 flex flex-col gap-2">
-          {privateDeck ? (
-            <Button
-              type="button"
-              onClick={signedIn ? onRequestAccess : onSignIn}
-              disabled={requestAccessPending || accessRequestSent}
-            >
-              {requestAccessPending ? (
-                <IconLoader2 className="size-4 animate-spin" />
-              ) : signedIn ? (
-                <IconUserPlus className="size-4" />
-              ) : (
-                <IconLogin2 className="size-4" />
-              )}
-              {requestAccessPending
-                ? t("deckEditor.requestAccessPending")
-                : accessRequestSent
-                  ? t("deckEditor.accessRequestSent")
-                  : signedIn
-                    ? t("deckEditor.requestAccess")
-                    : t("deckEditor.signInToRequestAccess")}
-            </Button>
-          ) : null}
-          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-            <Button type="button" variant="outline" onClick={onBack}>
-              <IconArrowLeft className="size-4" />
-              {t("deckEditor.backToDecks")}
-            </Button>
-            <Button
-              type="button"
-              variant={privateDeck ? "ghost" : "default"}
-              onClick={onRetry}
-              disabled={refreshing || checkingAccess}
-            >
-              <IconRefresh
-                className={refreshing ? "size-4 animate-spin" : "size-4"}
-              />
-              {t("deckEditor.tryAgain")}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+type AccessRequestCapability =
+  | { available: true; token: string }
+  | { available: false };
 
 // The Cmd/Ctrl+C-then-V slide-duplicate shortcut can only tell "this key
 // event targets the slide rail/canvas" apart from "focus fell back to
@@ -390,6 +248,13 @@ export default function DeckEditor() {
     string | null
   >(null);
   const [accessRequestNotified, setAccessRequestNotified] = useState(false);
+  const [requestAccessDialogOpen, setRequestAccessDialogOpen] = useState(false);
+  const [requesterEmail, setRequesterEmail] = useState("");
+  const [requestAccessDialogError, setRequestAccessDialogError] = useState<
+    string | null
+  >(null);
+  const [accessRequestRefreshPending, setAccessRequestRefreshPending] =
+    useState(false);
   const [checkedDeckAccessKey, setCheckedDeckAccessKey] = useState<
     string | null
   >(null);
@@ -609,23 +474,122 @@ export default function DeckEditor() {
   }, [refetchOrg, reloadDecks]);
 
   const openSignIn = useCallback(() => {
-    window.location.href = buildSignInReturnHref();
-  }, []);
+    window.location.href = buildSignInReturnHref({
+      returnTo: id ? `/deck/${encodeURIComponent(id)}` : "/",
+    });
+  }, [id]);
 
-  const requestDeckAccess = useCallback(() => {
-    if (!id) return;
-    requestDeckAccessMutation.mutate(
-      { deckId: id },
-      {
-        onSuccess: (result) => {
-          setAccessRequestSentDeckId(id);
-          setAccessRequestNotified(result.notifiedOwner);
-          toast.success(result.message);
-          if (result.alreadyHasAccess) void reloadDecks();
+  const getFreshAccessRequestCapability =
+    useCallback(async (): Promise<AccessRequestCapability> => {
+      setAccessRequestRefreshPending(true);
+      try {
+        const result = await deckAccessStatusQuery.refetch();
+        const token = result.isSuccess
+          ? result.data?.accessRequestToken
+          : undefined;
+        return token ? { available: true, token } : { available: false };
+      } catch (error) {
+        console.warn(
+          "[slides] deck access request capability refresh failed:",
+          error,
+        );
+        return { available: false };
+      } finally {
+        setAccessRequestRefreshPending(false);
+      }
+    }, [deckAccessStatusQuery]);
+
+  const submitDeckAccessRequest = useCallback(
+    async (guestEmail?: string) => {
+      if (!id) return;
+      const normalizedGuestEmail = guestEmail?.trim() || undefined;
+      setRequestAccessDialogError(null);
+      const accessRequestCapability = normalizedGuestEmail
+        ? await getFreshAccessRequestCapability()
+        : { available: false as const };
+      if (normalizedGuestEmail && !accessRequestCapability.available) {
+        setRequestAccessDialogError(t("deckEditor.accessRequestFailed"));
+        return;
+      }
+      const accessRequestToken =
+        normalizedGuestEmail && accessRequestCapability.available
+          ? accessRequestCapability.token
+          : undefined;
+      requestDeckAccessMutation.mutate(
+        {
+          deckId: id,
+          ...(accessRequestToken ? { accessRequestToken } : {}),
+          ...(normalizedGuestEmail
+            ? { requesterEmail: normalizedGuestEmail }
+            : {}),
         },
-      },
-    );
-  }, [id, reloadDecks, requestDeckAccessMutation]);
+        {
+          onSuccess: (result) => {
+            setAccessRequestSentDeckId(id);
+            setAccessRequestNotified(result.notifiedOwner);
+            if (normalizedGuestEmail) setRequestAccessDialogOpen(false);
+            toast.success(
+              normalizedGuestEmail
+                ? t("deckEditor.accessRequestSentWithEmail", {
+                    email: normalizedGuestEmail,
+                  })
+                : result.message,
+            );
+            if (result.alreadyHasAccess) void reloadDecks();
+          },
+          onError: (error: unknown) => {
+            if (!normalizedGuestEmail) return;
+            setRequestAccessDialogError(
+              error instanceof Error && error.message
+                ? error.message.replace(/^Action [\w-]+ failed:\s*/, "")
+                : t("deckEditor.accessRequestFailed"),
+            );
+          },
+        },
+      );
+    },
+    [
+      getFreshAccessRequestCapability,
+      id,
+      reloadDecks,
+      requestDeckAccessMutation,
+      t,
+    ],
+  );
+
+  const requestDeckAccess = useCallback(() => {
+    void submitDeckAccessRequest();
+  }, [submitDeckAccessRequest]);
+
+  const submitGuestAccessRequest = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      const email = requesterEmail.trim();
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setRequestAccessDialogError(t("deckEditor.requestAccessEmailRequired"));
+        return;
+      }
+      void submitDeckAccessRequest(email);
+    },
+    [requesterEmail, submitDeckAccessRequest, t],
+  );
+
+  const requestAccessDialogOpenChange = useCallback(
+    (open: boolean) => {
+      setRequestAccessDialogOpen(open);
+      if (!open) {
+        setRequestAccessDialogError(null);
+        return;
+      }
+      setRequestAccessDialogError(null);
+      void getFreshAccessRequestCapability().then((capability) => {
+        if (!capability.available) {
+          setRequestAccessDialogError(t("deckEditor.accessRequestFailed"));
+        }
+      });
+    },
+    [getFreshAccessRequestCapability, t],
+  );
 
   useEffect(() => {
     if (accessRequestSentDeckId && accessRequestSentDeckId !== id) {
@@ -1412,13 +1376,27 @@ export default function DeckEditor() {
         hasTeamJoinOption={hasTeamJoinOption}
         orgLoading={orgLoading}
         orgError={orgError || loadError}
-        requestAccessPending={requestDeckAccessMutation.isPending}
+        requestAccessPending={
+          requestDeckAccessMutation.isPending || accessRequestRefreshPending
+        }
         accessRequestSent={accessRequestSentDeckId === id}
         accessRequestNotified={accessRequestNotified}
+        requestAccessDialogOpen={requestAccessDialogOpen}
+        requesterEmail={requesterEmail}
+        requestAccessDialogError={requestAccessDialogError}
         signedIn={Boolean(session) && !sessionLoading}
+        signInHref={buildSignInReturnHref({
+          returnTo: id ? `/deck/${encodeURIComponent(id)}` : "/",
+        })}
         viewerEmail={session?.email ?? deckAccessStatus?.viewerEmail ?? null}
         refreshing={retryingMissingDeck}
         onRequestAccess={requestDeckAccess}
+        onRequestAccessDialogOpenChange={requestAccessDialogOpenChange}
+        onRequesterEmailChange={(email) => {
+          setRequesterEmail(email);
+          setRequestAccessDialogError(null);
+        }}
+        onSubmitGuestAccessRequest={submitGuestAccessRequest}
         onSignIn={openSignIn}
         onRetry={() => void retryOpenDeck()}
         onBack={() => navigate("/")}