diff --git a/docs/design.md b/docs/design.md
index ac59c13..d877357 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -180,7 +180,8 @@ the selected range and a TanStack Charts line (3M per day, 1Y per week, All per
grid, month labels, a dashed hover guide and a tooltip with the date, total and growth), and Telegram groups, Open
reports and Active grants as links on its right (a row under it on mobile, numbers on one baseline, labelled "Groups" rather than "Telegram groups", and without the "To
review" flag); then "Areas": one card per service whose whole surface leads where the rail icon does, with each section
-as a 44px button (two per row on mobile).
+as a 44px button (two per row on mobile). Reports › Open and Signatures › To sign carry the same accent count pill as the
+panel, from the shell's pending counts; nothing at zero or on a failed load.
**States.** While a route loads, its `pendingComponent` renders `PageBar`, `PageContent` and the template's skeleton
(`TableSkeleton`, `CardsSkeleton`, `RecordSkeleton`, `SettingsListSkeleton`, labelled "Loading {things}…"), so nothing
@@ -440,13 +441,22 @@ Rules that the templates above don't imply.
their own icon. The rail and bottom nav show a dot on Reports while any report is open.
- **Signatures**: the request page puts the PDF viewer (pdf.js, so every browser renders the same) beside the
signers, delivery and activity cards; the signer's box is blue and draggable, other pending signers' boxes are dashed.
+ Until their first signature, the signer's card (and "Before you sign" in a batch) offers "Move to another spot", one
+ button per place when there are several ("Signature · p. 2"). It works like the composer's: the next click on any
+ page puts the box there, the viewer's toolbar says so in place of the page counter, and Esc or Cancel stops it.
+ The viewer jumps to a box without scrolling smoothly, and zooming keeps the middle of the view in place.
Signature boxes use the light palette in both themes, because they sit on white paper. "Sign with CIE" opens the
- PoliNetwork eSign's own page in a popup: the PIN is typed there, never in the dashboard. A person appears once
+ PoliNetwork eSign's own page in a popup: the PIN is typed there, never in the dashboard. When that window was closed
+ or PoliNetwork eSign doesn't answer, the dialog's footer primary is "Open the window again" beside "Cancel
+ signature" ("Stop here" once part of a batch is signed), and "Start PoliNetwork eSign" (outline) and "Setup guide" (ghost) sit in the body. A person appears once
however many places they sign: their places are buttons under their name ("Signature · p. 2", "Mark · p. 1") whose
menu switches the kind, moves or removes the place and rings its box on the page; marks have a dashed border.
With several documents waiting, "Sign N together" opens a strip of the documents in the page bar's toolbar row: each
is checked by opening it (a check replaces its number), can be left out, and the primary action stays "Next
document" until all are checked, then becomes "Sign N documents" (one agent window, one PIN).
+ The requests list names whom an in-progress request waits on ("Waiting for X"); To sign has no Status column (every
+ row is the viewer's turn); `?status=` keeps the status segment across Back. The request page shows when each signer
+ whose turn it is was emailed, or why they weren't.
Signatures › Drives (`esign:drives:manage`) has a card per drive with two rules, "Request signatures" and "Be asked
to sign": chips for roles (people icon) and permissions (key icon), an inline picker listing both, a "Default: …"
line while empty, and Save/Discard per drive. Unknown keys show as warning chips. On a new request, signers who may
diff --git a/docs/esign/TRACKER.md b/docs/esign/TRACKER.md
index 71a78e6..396a9c9 100644
--- a/docs/esign/TRACKER.md
+++ b/docs/esign/TRACKER.md
@@ -133,6 +133,10 @@ Legend: ☐ todo · ◐ in progress · ☑ done
- ☐ Create the IdP permission `esign:drives:manage` and grant it to whoever sets drive access (master admins get it).
- ☐ Real-card check that one PIN can make several signatures in a session (`cie-mw`, `opencie`, built-in `cie`).
- ☐ Docs: user guide (install agent, pair CIE), ops (Graph permissions, IdP permissions, env).
+- ☐ Setup step 4 (`src/features/esign/setup-page.tsx`) says the status page "should show that PoliNetwork eSign is
+ running and ready to sign", which fits both v0.3.0 ("The agent is running") and the readiness status page of the next
+ agent release ("Ready to sign" once reader, card and software check out). Once that release is out, the step can
+ quote "Ready to sign".
## Manual steps for the maintainer (cannot be automated here)
@@ -148,8 +152,10 @@ Legend: ☐ todo · ◐ in progress · ☑ done
- ☐ Code signing (pipeline ready, esign PR #4; steps in esign `docs/code-signing.md`):
- macOS: upload `~/dev/polinetwork/.signing/esign/developer-id.csr` as a Developer ID Application certificate on
the PoliNetwork APS Apple account (team 842636PS9J), create an App Store Connect API key, run
- `scripts/setup-macos-signing.sh secrets …`, tag a release.
- - Windows: apply to SignPath Foundation (free for open source), then set the SIGNPATH_* variables and token.
+ `scripts/setup-macos-signing.sh secrets …`, tag a release, then drop the Open Anyway sentence from
+ AGENT_STEPS.macos in src/features/esign/setup-page.tsx.
+ - Windows: apply to SignPath Foundation (free for open source), then set the SIGNPATH_* variables and token, then
+ drop the Run anyway sentence from AGENT_STEPS.windows.
- ☑ Backend released as @polinetwork/backend 1.7.0 (backend#73 merged); admin uses it (vendored copy removed).
## Local end-to-end
@@ -165,6 +171,12 @@ Open `http://localhost:10431/dashboard/esign/requests` (use `localhost`, not `12
## Log
+- 2026-10-21: UX pass (admin `feat/esign-ux-pass`, backend `fix/esign-ux`, agent `fix/sign-page-ux`; not pushed): the
+ signing dialog says how an attempt ended and notices a closed or silent eSign window, jobs and agent windows end on
+ errors a retry can't fix, plus composer, request, batch, setup and Overview polish. Admin follow-ups after the backend
+ release: the lock alert's "by HH:MM" from `signingNow.until`; `lostAccess` on the signer card and the drive-access
+ impact confirmation before saving a sign rule. Open product decisions: `~/dev/polinetwork/esign-ux-decisions-2026-10-21.html` (outside the repo).
+
- 2026-10-17: merged backend#75 (released @polinetwork/backend 1.9.0), sign-agent#6 (released PoliNetwork eSign
v0.2.0) and admin#105; the upload fallback warns signers with several places. Flux rolls out the new images.
diff --git a/docs/esign/contracts.md b/docs/esign/contracts.md
index f1eff8e..8d67c74 100644
--- a/docs/esign/contracts.md
+++ b/docs/esign/contracts.md
@@ -42,6 +42,18 @@ Listens on `127.0.0.1:47321` only. Every request: `Host` must be `127.0.0.1:4732
Allowed origins: `https://admin.polinetwork.org` by default, `http://localhost:*` with `--dev`, or the config file.
+The signing page tells its opener what happened with `postMessage({type: "pn-esign", status, detail?}, origin)`, to the
+dashboard's origin only: `status` is `completed`, `error` or `cancelled`, `detail` the agent error code, or
+`agent_unreachable` when the page can no longer reach the agent behind it. The dashboard polls `esign.jobs.statuses`
+again on every message and acts on a message itself only for `agent_unreachable`, because the agent can't report its own
+death to the backend. Only the next agent release (after v0.3.0) posts `agent_unreachable`: with v0.3.0 and older the
+dashboard doesn't learn that the agent stopped. Agents up to v0.1.x post type `pn-sign-agent`.
+
+The dashboard notices a closed agent window by reading `popup.closed` on every poll. That works only while the two
+windows keep their opener relationship, so neither the dashboard nor the agent page may send a
+`Cross-Origin-Opener-Policy` header: `same-origin` on either side cuts the link, the dashboard then reads the window as
+closed at once, and the page's `window.opener` is gone, so its messages stop too.
+
Providers (tried in order, first with a card present; never falls back once a PIN reached a module or card —
`token.Error.PINSent`):
@@ -63,7 +75,24 @@ Agent → backend (through the dashboard origin, `{origin}/api/esign/agent/…`,
| `POST /api/esign/agent/jobs/{ticket}/fail` | `{code, message?}` | `{status}` — records cancellations / card errors for the dashboard |
Errors: `{error: {code, message}}` with codes `ticket_invalid` (404), `job_expired` (410), `job_done` (409),
-`document_changed` (409), `certificate_invalid` (422), `signer_mismatch` (403), `signature_invalid` (422).
+`job_cancelled` (409: the message names who cancelled or declined the request, else "This signature was cancelled."),
+`job_failed` (409: the message of the error that ended the job), `document_changed` (409), `certificate_invalid` (422),
+`signer_mismatch` (403), `signature_invalid` (422).
+
+The agent, the backend and the dashboard agree on which errors are terminal. A terminal error ends the job: the backend
+moves it to `failed` with the code, whether the agent reported it through `/fail` or the backend raised it itself, and
+the agent shows it without a PIN form. Any other code, an unknown one included, leaves the job open in the backend. A
+retryable error returns to the PIN form in the same agent window. Any other per-document error ends the agent window
+while the backend keeps the job open; once the signer closes that window, the dashboard offers to open it again.
+
+- Terminal, reported by the agent: `pin_locked`, `card_untrusted`, `middleware_missing`, `not_paired`,
+ `certificate_not_found`.
+- Terminal, raised by the backend: `signer_mismatch`, `certificate_invalid`, `signature_invalid`, `document_changed`,
+ `pdf_invalid`, `job_done`, `agent_outdated`.
+- Retryable, back to the PIN form: `pin_incorrect`, `pin_invalid`, `pin_required`, `no_card`, `no_reader`,
+ `card_removed`, `card_unsupported`, `device_error`, `busy`, `backend_unreachable`.
+
+`/fail` on a job that already failed changes nothing and answers `{status: "failed"}`.
## Backend tRPC (`esign.*`)
@@ -80,7 +109,13 @@ browse OneDrive). Requests are visible to their signers and creator.
- `esign.requests.create({title, documentId, signers: [{sub, role, places: [{...placement, kind}]}], ordered, output: {driveId, folderId, fileName}, email?: {to[], message?}})`.
`kind` is `signature` (its own PDF signature) or `mark` (the first signature's mark, drawn in that signature's
update); each signer has 1–20 places, at least one a signature, and appears once in the request.
-- `esign.requests.list({scope: "inbox"|"mine"|"all", status?})`, `esign.requests.get({id})`.
+- `esign.requests.list({scope: "inbox"|"mine"|"all", status?})` → request views. Each of a view's `signers[]` has
+ `lostAccess`: for a pending signer who may no longer sign the documents of one of the request's drives (its "sign"
+ rule changed, or the IdP took a role away), that drive's label; else null. `myTurn` is true when it is the caller's
+ turn and the caller's `lostAccess` is null (`turn` still lists every signer whose turn it is). `inbox` holds the
+ requests where `myTurn` is true, so a request the caller can no longer sign stays reachable under `mine`.
+- `esign.requests.get({id})` → `{request, events, versions, currentDocumentId, signingNow}`. `signingNow` is
+ `{sub, name, until}` while a signer has a signature open, `until` being when it expires at the latest; else null.
- `esign.requests.cancel({id})`, `esign.requests.decline({id, reason})`, `esign.requests.retryDelivery({id})`.
- `esign.drive.access()` (`esign:drives:manage`) → `{drives: [{id, label, request: {roles, permissions}, sign: {roles,
permissions}, updatedBySub, updatedAt}], catalog: {roles: [{key, name}], permissions: [{key, name}]}}`;
@@ -88,9 +123,17 @@ permissions}, updatedBySub, updatedAt}], catalog: {roles: [{key, name}], permiss
empty rule keeps the default (request: `esign:requests:manage`; sign: everyone who signs). `request` covers browsing
the drive, using it in a request and seeing its requests; `sign` covers being chosen as signer and signing. Requests
record `drives` (source and output); `esign.config().drives` and `esign.signers.list()[].drives` are filtered.
+ `esign.drive.accessImpact({driveId, sign})` (`esign:drives:manage`) → `[{id, title, signers: [name]}]`: the requests
+ in progress on that drive with pending signers who may sign under the current rule but not under the proposed `sign`
+ rule (the same empty-rule default); empty when the change strands nobody.
- `esign.jobs.create({items: [{requestId, places?}]})` (1–10, all or none) → `[{requestId, jobId, ticket, expiresAt}]`,
opened together in one agent window; `places` moves the caller's boxes (one position per place) before signing.
- `esign.jobs.statuses({jobIds})`, `esign.jobs.cancel({jobIds})`.
+- `esign.jobs.statuses({jobIds})` → one entry per job:
+ `{jobId, requestId, status, errorCode, errorMessage, expiresAt, seen, signaturesLeft}`. `status` is `pending`,
+ `prepared`, `completed`, `failed` (a terminal error, its code in `errorCode`), `cancelled` or `expired`. A job
+ cancelled because its request was cancelled or declined has `errorCode` `request_cancelled` or `request_declined`,
+ and an `errorMessage` naming who did it (with the reason of a decline).
+- `esign.jobs.cancel({jobIds})`.
Placement: `{page (0-based), x, y, width, height}` as fractions of the displayed page (crop box after rotation),
origin top-left.
diff --git a/src/components/primitives/combobox.tsx b/src/components/primitives/combobox.tsx
index 13fbe89..a3f437f 100644
--- a/src/components/primitives/combobox.tsx
+++ b/src/components/primitives/combobox.tsx
@@ -1,3 +1,4 @@
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"
import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
import { ChevronDown } from "lucide-react"
import type * as React from "react"
@@ -20,24 +21,38 @@ type ComboboxInputProps = ComboboxPrimitive.Input.Props & {
listLabel: string
}
-/** Combobox input: 36px field with a chevron trigger named after the list. */
+/**
+ * Combobox input: 36px field with a chevron trigger named after the list. The field draws the input's focus ring and
+ * anchors the list; the chevron is out of the Tab order, since the arrow keys open the list too.
+ */
export function ComboboxInput({ listLabel, disabled = false, className, ...props }: ComboboxInputProps) {
return (
-
- } {...props} />
+
+ }
+ >
+ } {...props} />
}
disabled={disabled}
+ tabIndex={-1}
aria-label={`Show ${listLabel}`}
className="data-pressed:bg-transparent"
>
-
+
)
}
@@ -46,12 +61,12 @@ export function ComboboxContent({ className, ...props }: React.ComponentProps
}
-/** 36px, 13px item highlighted on `--pn-muted`; selected check on the right. */
+/** 36px, 13px item highlighted on `--pn-hover` (pointer or arrow keys); selected check on the right. */
export function ComboboxItem({ className, ...props }: React.ComponentProps) {
return (
}
-export { Combobox, ComboboxList }
+/**
+ * `Combobox` picks one of a fixed set of items; `Autocomplete` is free text with suggestions. Both take the same
+ * input, content, list, item and empty parts.
+ */
+const Autocomplete = AutocompletePrimitive.Root
+
+export { Autocomplete, Combobox, ComboboxList }
diff --git a/src/components/primitives/index.ts b/src/components/primitives/index.ts
index 497754b..d29ff59 100644
--- a/src/components/primitives/index.ts
+++ b/src/components/primitives/index.ts
@@ -2,7 +2,15 @@ export { AvatarGroup, initialsOf, type AvatarPerson } from "./avatar-group"
export { Chip } from "./chip"
export { ChipOverflow } from "./chip-overflow"
export { ColorSwatchSelect } from "./color-swatch-select"
-export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "./combobox"
+export {
+ Autocomplete,
+ Combobox,
+ ComboboxContent,
+ ComboboxEmpty,
+ ComboboxInput,
+ ComboboxItem,
+ ComboboxList,
+} from "./combobox"
export { ConfirmDialog, dialogFooter, dialogFooterButton, dialogPanel } from "./confirm-dialog"
export { CountBadge } from "./count-badge"
export { DataTable, RowActions, type DataTableColumn, type DataTableError, type TableSort } from "./data-table"
diff --git a/src/components/shell/index.ts b/src/components/shell/index.ts
index 6cef163..7882dcb 100644
--- a/src/components/shell/index.ts
+++ b/src/components/shell/index.ts
@@ -10,6 +10,7 @@ export {
type PendingCounts,
type Section,
sectionFor,
+ sectionPending,
type Service,
serviceById,
type ServiceId,
@@ -33,6 +34,7 @@ export {
useInShell,
useShellFrame,
} from "./page-bar"
+export { PendingCount } from "./panel"
export { ServiceGlyph } from "./service-glyph"
export { DashboardShell, type DashboardShellProps } from "./shell"
export { type Theme, themeToggleLabel, useTheme } from "./theme"
diff --git a/src/components/shell/panel.tsx b/src/components/shell/panel.tsx
index 5fae4e0..235f7d2 100644
--- a/src/components/shell/panel.tsx
+++ b/src/components/shell/panel.tsx
@@ -1,6 +1,7 @@
import { Link } from "@tanstack/react-router"
import { type KeyboardEvent, Suspense, use, useDeferredValue, useLayoutEffect, useRef } from "react"
+import { formatNumber } from "@/lib/format"
import { cn } from "@/lib/utils"
import {
@@ -24,14 +25,14 @@ const itemActiveClass = "bg-(--pn-nav-active) text-(--pn-fg) hover:bg-(--pn-nav-
const itemCurrentClass =
"before:absolute before:inset-y-2.5 before:-left-3 before:w-[3px] before:rounded-r-[3px] before:bg-(--pn-accent-solid)"
-/** Pending reports as a small accent pill next to Reports › Open; zero (or a failed load) renders nothing. */
-function PendingReportsCount({ count: countPromise }: { count: Promise }) {
+/** Pending items (open reports, documents to sign) as a small accent pill; zero, loading or a failed load renders nothing. */
+export function PendingCount({ count: countPromise }: { count: Promise }) {
const count = use(useDeferredValue(countPromise))
if (!count) return null
return (
,
- {count}
+ {formatNumber(count)}
pending
)
@@ -96,7 +97,7 @@ export function SectionItems({ service, match, pending, variant = "panel" }: Sec
/>
{section.title}
-
+
)
diff --git a/src/features/dashboard/overview-page.tsx b/src/features/dashboard/overview-page.tsx
index 525e8a9..f7895b5 100644
--- a/src/features/dashboard/overview-page.tsx
+++ b/src/features/dashboard/overview-page.tsx
@@ -3,7 +3,17 @@ import { ArrowRight, ArrowUp, ChevronRight, Search } from "lucide-react"
import { type ReactNode, Suspense, use, useState } from "react"
import { InlineAlert, LoadingButton, SegmentedControl, useModifierKey } from "@/components/primitives"
-import { type DashboardPath, PageBar, PageContent, type Service, ServiceGlyph, useShellFrame } from "@/components/shell"
+import {
+ type DashboardPath,
+ PageBar,
+ PageContent,
+ PendingCount,
+ type PendingCounts,
+ sectionPending,
+ type Service,
+ ServiceGlyph,
+ useShellFrame,
+} from "@/components/shell"
import { useVisibleServices } from "@/components/shell/use-can"
import { formatNumber } from "@/lib/format"
import { cn } from "@/lib/utils"
@@ -26,10 +36,12 @@ export type OverviewPageProps = {
counts: OverviewCounts
/** Streams in after the counts; the chart area holds its height meanwhile. */
userHistory: Promise
+ /** The shell's streamed counts, shown on the sections that have one. */
+ pending: PendingCounts
}
/** Overview: the search, the Telegram users hero with its chart and side stats, then every service's sections. */
-export function DashboardOverviewPage({ counts, userHistory }: OverviewPageProps) {
+export function DashboardOverviewPage({ counts, userHistory, pending }: OverviewPageProps) {
const router = useRouter()
const [retrying, setRetrying] = useState(false)
const someFailed = Object.values(counts).some((count) => count === null)
@@ -66,7 +78,7 @@ export function DashboardOverviewPage({ counts, userHistory }: OverviewPageProps
) : null}
-
+
@@ -94,7 +106,7 @@ function OverviewSearch() {
}
/** Stream user growth and service counts into the overview hero, with shorter statistic labels on phones. */
-function Hero({ counts, userHistory }: OverviewPageProps) {
+function Hero({ counts, userHistory }: Pick) {
// `short` is the phone label: the hero already sits under "Telegram users", so "Groups" is unambiguous there.
const stats: { label: string; short?: string; value: OverviewCount; to: DashboardPath; flag?: ReactNode }[] = [
{ label: "Telegram groups", short: "Groups", value: counts.telegramGroups, to: "/dashboard/telegram/groups" },
@@ -267,7 +279,7 @@ function chartDescription(points: ReturnType["points"], ran
}
/** Every service the user can open: the whole card leads where its rail icon does, each section is a 44px button. */
-function Areas({ openReports }: { openReports: OverviewCount }) {
+function Areas({ pending }: { pending: PendingCounts }) {
const services = useVisibleServices().filter((service) => service.sections.length > 0)
return (
@@ -276,15 +288,15 @@ function Areas({ openReports }: { openReports: OverviewCount }) {
{services.map((service) => (
-
+
))}
)
}
-/** Link to a service and its sections, including the open-report count when the service is Reports. */
-function AreaCard({ service, openReports }: { service: Service; openReports: OverviewCount }) {
+/** Link to a service and its sections, including the pending count on Reports › Open and Signatures › To sign. */
+function AreaCard({ service, pending }: { service: Service; pending: PendingCounts }) {
const { serviceHref } = useShellFrame()
const wide = service.sections.length > 3
return (
@@ -325,12 +337,9 @@ function AreaCard({ service, openReports }: { service: Service; openReports: Ove
className="size-4.5 shrink-0 text-(--pn-fg-muted) group-hover/section:text-(--pn-fg)"
/>
{section.title}
- {service.id === "reports" && section.id === "open" && openReports ? (
-
- {formatNumber(openReports)}
- open
-
- ) : null}
+
+
+
))}
diff --git a/src/features/esign/batch-page.tsx b/src/features/esign/batch-page.tsx
index a9771db..b63ead6 100644
--- a/src/features/esign/batch-page.tsx
+++ b/src/features/esign/batch-page.tsx
@@ -1,7 +1,7 @@
import { Link, useNavigate } from "@tanstack/react-router"
import { useServerFn } from "@tanstack/react-start"
import { ArrowRight, Check, ExternalLink, FileSignature, Plus, X } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
import { EmptyState, IconButton, InlineAlert, SectionCard } from "@/components/primitives"
import { PageBar, PageContent } from "@/components/shell"
@@ -12,9 +12,11 @@ import { cn } from "@/lib/utils"
import { getEsignDocumentContent } from "./esign.functions"
import { PdfViewer, usePdfBytes } from "./pdf-viewer"
-import { kindsLabel, type Place, pagesLabel, placesLeft } from "./places"
+import { kindsLabel, type Place, pagesLabel, placeAt, placesLeft } from "./places"
+import { MovePlaceButtons, PlacingCancel, placingStatus } from "./placing"
import { SignWithCie } from "./sign-with-cie"
import { SignatureBox } from "./signature-box"
+import { useReloadWhile } from "./use-reload-while"
type Item = Pick & { pdf: EsignPdfInfo | null }
@@ -26,23 +28,67 @@ const BACK = { label: "documents to sign", link: { to: "/dashboard/esign/inbox"
*/
export function EsignBatchPage({ items, more, me }: { items: Item[]; more: number; me: string }) {
const navigate = useNavigate()
+ const contentFn = useServerFn(getEsignDocumentContent)
+ /** PDF contents by document id (a version never changes), so Next opens a document fetched in advance. */
+ const pdfs = useRef(new Map>())
+ const loadPdf = useCallback(
+ (documentId: string) => {
+ let pdf = pdfs.current.get(documentId)
+ if (!pdf) {
+ pdf = contentFn({ data: { documentId } }).then((result) => result.base64)
+ pdfs.current.set(documentId, pdf)
+ // Opening the document again tries again.
+ void pdf.catch((error) => {
+ console.error(error)
+ pdfs.current.delete(documentId)
+ })
+ }
+ return pdf
+ },
+ [contentFn]
+ )
const [activeId, setActiveId] = useState(items[0]?.request.id ?? null)
const [reviewed, setReviewed] = useState>(() => new Set(items[0] ? [items[0].request.id] : []))
const [leftOut, setLeftOut] = useState>(new Set())
/** The viewer's boxes per request, as they drag them. */
const [moved, setMoved] = useState>(new Map())
+ /** The open document's place waiting for a click on its new spot. */
+ const [placing, setPlacing] = useState(null)
// Signed documents leave the batch when the page reloads.
const active = items.find((item) => item.request.id === activeId) ?? items[0]
const included = items.filter((item) => !leftOut.has(item.request.id))
const unchecked = included.filter((item) => !reviewed.has(item.request.id))
+ // Follow documents another signer holds until they finish; reloads keep the review progress and moved boxes.
+ useReloadWhile(
+ included.some((item) => item.signingNow && item.signingNow.sub !== me),
+ 3000
+ )
+
+ const activeDocument = active?.currentDocumentId
+ const nextDocument = unchecked[0]?.currentDocumentId
+ useEffect(() => {
+ if (!activeDocument || !nextDocument) return
+ let cancelled = false
+ // Once the open document has arrived, fetch the one Next opens.
+ loadPdf(activeDocument)
+ .then(() => {
+ if (!cancelled) void loadPdf(nextDocument)
+ })
+ .catch((error) => console.error(error))
+ return () => {
+ cancelled = true
+ }
+ }, [activeDocument, nextDocument, loadPdf])
function open(id: string) {
setActiveId(id)
+ setPlacing(null)
setReviewed((current) => new Set(current).add(id))
}
function toggle(id: string) {
+ if (id === active?.request.id) setPlacing(null)
setLeftOut((current) => {
const next = new Set(current)
if (!next.delete(id)) next.add(id)
@@ -152,8 +198,18 @@ export function EsignBatchPage({ items, more, me }: { items: Item[]; more: numbe
key={active.request.id}
item={active}
me={me}
+ loadPdf={loadPdf}
places={places}
onMove={(next) => setMoved((current) => new Map(current).set(active.request.id, next))}
+ placing={placing}
+ onPlace={(page, x, y) => {
+ const next = places.map((p, at) =>
+ at === placing ? placeAt(p, active.pdf?.pages ?? [], page, x, y) : p
+ )
+ setMoved((current) => new Map(current).set(active.request.id, next))
+ setPlacing(null)
+ }}
+ onCancelPlacing={() => setPlacing(null)}
/>
@@ -208,11 +264,30 @@ export function EsignBatchPage({ items, more, me }: { items: Item[]; more: numbe
? `Check where you sign in each document, moving the blue boxes if needed. ${pluralize(unchecked.length, "document")} left to check.`
: included.length === 1
? "Choose Sign with CIE at the top. You need the card, its PIN and the NFC reader."
- : `All ${included.length} documents checked. Choose Sign at the top: one PIN signs them all. You need the card and the NFC reader.`}
+ : `All ${included.length} documents checked. Choose Sign at the top: one PIN signs them all. You need the card, its PIN and the NFC reader.`}
+
+ First time signing on this computer?{" "}
+ {/* A new tab, because the review progress and moved boxes live only in this page. */}
+
+ Set it up first
+
+ .
+
+ {signer && signer.signaturesDone === 0 && (
+
+
+
+ )}
{active.signingNow && active.signingNow.sub !== me && (
- {active.signingNow.name} is signing this document right now. Leave it out or try again later.
+ {active.signingNow.name} is signing this document right now. Leave it out, or wait: it's ready as
+ soon as they finish.
)}
@@ -227,15 +302,23 @@ export function EsignBatchPage({ items, more, me }: { items: Item[]; more: numbe
function DocumentViewer({
item,
me,
+ loadPdf,
places,
onMove,
+ placing,
+ onPlace,
+ onCancelPlacing,
}: {
item: Item
me: string
+ loadPdf: (documentId: string) => Promise
places: Place[]
onMove: (places: Place[]) => void
+ /** The place waiting for a click on its new spot. */
+ placing: number | null
+ onPlace: (page: number, x: number, y: number) => void
+ onCancelPlacing: () => void
}) {
- const contentFn = useServerFn(getEsignDocumentContent)
const [base64, setBase64] = useState(null)
const [error, setError] = useState(null)
const bytes = usePdfBytes(base64)
@@ -244,9 +327,9 @@ function DocumentViewer({
useEffect(() => {
if (!item.currentDocumentId) return
let cancelled = false
- contentFn({ data: { documentId: item.currentDocumentId } })
- .then((result) => {
- if (!cancelled) setBase64(result.base64)
+ loadPdf(item.currentDocumentId)
+ .then((pdf) => {
+ if (!cancelled) setBase64(pdf)
})
.catch((cause) => {
console.error(cause)
@@ -255,16 +338,24 @@ function DocumentViewer({
return () => {
cancelled = true
}
- }, [item.currentDocumentId, contentFn])
+ }, [item.currentDocumentId, loadPdf])
const mine = request.signers.find((s) => s.sub === me && s.status === "pending")
- const first = mine ? placesLeft(places, mine.signaturesDone)[0] : undefined
+ // Once per document (it remounts for each): following the box as it moves would scroll it away from the pointer.
+ const [focus] = useState(() => {
+ const first = mine ? placesLeft(places, mine.signaturesDone)[0] : undefined
+ return first ? { page: first.page, y: first.y + first.height / 2 } : null
+ })
if (error) return {error}
return (
}
overlay={(page) =>
request.signers.flatMap((signer, index) => {
if (signer.status !== "pending") return []
diff --git a/src/features/esign/drive-browser.tsx b/src/features/esign/drive-browser.tsx
index c06ac8c..144e59d 100644
--- a/src/features/esign/drive-browser.tsx
+++ b/src/features/esign/drive-browser.tsx
@@ -1,6 +1,6 @@
import { useServerFn } from "@tanstack/react-start"
import { ArrowUp, FileText, Folder, LoaderCircle } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
import { IconButton, InlineAlert } from "@/components/primitives"
import { floatingMotion, raisedSurface } from "@/components/primitives/motion"
@@ -24,6 +24,8 @@ type DriveBrowserProps = {
drives: EsignDrive[]
/** The drive opened first, the first one by default. */
initialDriveId?: string
+ /** The folder opened first in the initial drive, its top folder by default; ignored when initialDriveId is not one of drives. */
+ initialFolderId?: string
/** A PDF, with the folder it is in. */
onPickFile?: (item: EsignDriveItem, folder: DriveFolder) => void
onPickFolder?: (folder: DriveFolder) => void
@@ -44,14 +46,18 @@ export function DriveBrowser({
label,
drives,
initialDriveId,
+ initialFolderId,
onPickFile,
onPickFolder,
busyId,
className,
}: DriveBrowserProps) {
const listFn = useServerFn(listEsignDrive)
- const [driveId, setDriveId] = useState(drives.some((d) => d.id === initialDriveId) ? initialDriveId : drives[0]?.id)
- const [folderId, setFolderId] = useState(undefined)
+ const initialDrive = drives.some((d) => d.id === initialDriveId)
+ const [driveId, setDriveId] = useState(initialDrive ? initialDriveId : drives[0]?.id)
+ const [folderId, setFolderId] = useState(initialDrive ? initialFolderId : undefined)
+ /** The initial folder until a listing loads: if it was moved or deleted, the drive's top folder opens instead. */
+ const initialFolder = useRef(folderId)
const drive = drives.find((d) => d.id === driveId)
const [listing, setListing] = useState(null)
const [error, setError] = useState(null)
@@ -64,11 +70,17 @@ export function DriveBrowser({
setError(null)
listFn({ data: { driveId, folderId } })
.then((result) => {
- if (!cancelled) setListing(result)
+ if (cancelled) return
+ initialFolder.current = undefined
+ setListing(result)
})
.catch((cause: unknown) => {
console.error(cause)
- if (!cancelled) setError(cause instanceof Error ? cause.message : "Couldn't open the folder.")
+ if (cancelled) return
+ if (folderId !== undefined && folderId === initialFolder.current) {
+ initialFolder.current = undefined
+ setFolderId(undefined)
+ } else setError(cause instanceof Error ? cause.message : "Couldn't open the folder.")
})
.finally(() => {
if (!cancelled) setLoading(false)
diff --git a/src/features/esign/new-request-page.tsx b/src/features/esign/new-request-page.tsx
index 0832b55..5c64f8d 100644
--- a/src/features/esign/new-request-page.tsx
+++ b/src/features/esign/new-request-page.tsx
@@ -1,9 +1,11 @@
-import { useNavigate, useRouter } from "@tanstack/react-router"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
+import { useBlocker, useNavigate, useRouter } from "@tanstack/react-router"
import { useServerFn } from "@tanstack/react-start"
import {
ArrowDown,
ArrowUp,
ChevronDown,
+ CircleAlert,
Cloud,
FileUp,
MapPin,
@@ -15,16 +17,26 @@ import {
TriangleAlert,
UserPlus,
} from "lucide-react"
-import { type DragEvent, useEffect, useId, useMemo, useRef, useState } from "react"
+import { type DragEvent, type ReactNode, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react"
import {
+ Autocomplete,
checkboxControl,
+ Combobox,
+ ComboboxContent,
+ ComboboxInput,
+ ComboboxItem,
+ ComboboxList,
+ ConfirmDialog,
FormField,
fieldControl,
+ fieldHintId,
+ Hint,
IconButton,
InlineAlert,
LoadingButton,
SectionCard,
+ useFocusAfterRemoval,
} from "@/components/primitives"
import {
Menu,
@@ -50,6 +62,7 @@ import { DriveBrowser, type DriveFolder } from "./drive-browser"
import { getEsignDocumentContent } from "./esign.functions"
import { extractTextAnchors, type PageSize, PdfViewer, sizeOnPage, type TextAnchor, usePdfBytes } from "./pdf-viewer"
import { kindsLabel, type Place, pagesLabel, withSignature } from "./places"
+import { PlacingCancel } from "./placing"
import { YouChip } from "./request-status"
import { createEsignRequest, importEsignDriveDocument, uploadEsignDocument } from "./requests.functions"
import { SignWithCie } from "./sign-with-cie"
@@ -57,8 +70,9 @@ import { type BoxPlacement, SignatureBox } from "./signature-box"
import { useFillHeight } from "./use-fill-height"
type Staged = { id: string; fileName: string; pdf: EsignPdfInfo; folder: DriveFolder | null }
-/** `manual`: the user moved the first box, so a role no longer places it. */
-type SignerDraft = { sub: string; name: string; role: string; places: Place[]; manual: boolean }
+/** `byRole`: the box the signer's role places under its label, until the user moves it. */
+type DraftPlace = Place & { byRole?: true }
+type SignerDraft = { sub: string; name: string; role: string; places: DraftPlace[] }
/** Where the next click on a page puts a box: a signer's existing place, or a new one when `place` is null. */
type Placing = { signer: number; place: number | null }
@@ -69,6 +83,8 @@ const ROLES = ["Presidente", "Vicepresidente", "Segretario", "Tesoriere", "Consi
/** A signature box of 190 × 62 pt, the size of a typical handwritten-signature space. */
const BOX_PT = { width: 190, height: 62 }
const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+/** The folder the last PDF was picked from, `{ driveId, id }`, where the drive browser opens next time. */
+const LAST_FOLDER_KEY = "pn-admin:esign-last-folder"
/** Default places: the last page's bottom, two per row, from the bottom-right corner. */
function defaultPlacement(index: number, pages: PageSize[]): BoxPlacement {
@@ -101,13 +117,38 @@ function placementForRole(role: string, anchors: TextAnchor[], pages: PageSize[]
return { page: anchor.page, x, y, ...size }
}
+/** A folder's name and where it is: "2026" in "OneDrive / Segreteria / Verbali"; a drive's top folder by its drive. */
+function folderLines(folder: DriveFolder, drive: string) {
+ const segments = folder.path.split("/").filter(Boolean)
+ const name = segments.pop()
+ return {
+ name: name ?? drive,
+ place: name === undefined ? "Top folder" : [drive, ...segments].join(" / "),
+ full: `${drive}: /${folder.path}`,
+ }
+}
+
function baseName(fileName: string) {
return fileName.replace(/\.pdf$/i, "")
}
+/**
+ * Moves the signer's role box under the label naming their role. The same signer when there is nothing to move: no
+ * role box, a role the document doesn't name (the box stays where it is), or a box already there.
+ */
+function placeByRole(signer: SignerDraft, anchors: TextAnchor[], pages: PageSize[]): SignerDraft {
+ const at = signer.places.findIndex((p) => p.byRole)
+ const box = signer.places[at]
+ const placed = box ? placementForRole(signer.role, anchors, pages) : null
+ if (!box || !placed) return signer
+ const keys = ["page", "x", "y", "width", "height"] as const
+ if (keys.every((key) => placed[key] === box[key])) return signer
+ return { ...signer, places: signer.places.map((p, i) => (i === at ? { ...placed, kind: p.kind, byRole: true } : p)) }
+}
+
function draftOf(person: EsignProfile, index: number, pages: PageSize[]): SignerDraft {
const where = defaultPlacement(index, pages)
- return { sub: person.sub, name: person.name, role: "", places: [{ ...where, kind: "signature" }], manual: false }
+ return { sub: person.sub, name: person.name, role: "", places: [{ ...where, kind: "signature", byRole: true }] }
}
export function NewEsignRequestPage({
@@ -129,7 +170,16 @@ export function NewEsignRequestPage({
const contentFn = useServerFn(getEsignDocumentContent)
const createFn = useServerFn(createEsignRequest)
const dropFill = useFillHeight()
- const ids = { title: useId(), file: useId(), emails: useId(), message: useId(), search: useId(), roles: useId() }
+ const ids = {
+ title: useId(),
+ file: useId(),
+ fileName: useId(),
+ folderError: useId(),
+ emails: useId(),
+ message: useId(),
+ search: useId(),
+ signersError: useId(),
+ }
const [source, setSource] = useState<"drive" | "upload">(config.drives.length > 0 ? "drive" : "upload")
const [staged, setStaged] = useState(null)
@@ -165,30 +215,74 @@ export function NewEsignRequestPage({
const [search, setSearch] = useState("")
const [title, setTitle] = useState("")
+ const [titleTouched, setTitleTouched] = useState(false)
const [saveToDrive, setSaveToDrive] = useState(config.drives.length > 0)
const [folder, setFolder] = useState(null)
const [choosingFolder, setChoosingFolder] = useState(false)
+ /** Undefined until local storage is read after mount, so the server and the first client render agree. */
+ const [lastFolder, setLastFolder] = useState | null>()
+ useEffect(() => {
+ let stored: Pick | null = null
+ try {
+ stored = JSON.parse(window.localStorage.getItem(LAST_FOLDER_KEY) ?? "null")
+ } catch (error) {
+ console.error(error)
+ }
+ setLastFolder(stored)
+ }, [])
const [fileName, setFileName] = useState("")
+ const [fileNameTouched, setFileNameTouched] = useState(false)
+ const [folderTouched, setFolderTouched] = useState(false)
const [emails, setEmails] = useState("")
const [message, setMessage] = useState("")
const [submitting, setSubmitting] = useState(false)
const [submitError, setSubmitError] = useState(null)
const [createdRequest, setCreatedRequest] = useState(null)
+ /** A submit was blocked: problems fixed with a click (document, signers, folder) show from then on. */
const [attempted, setAttempted] = useState(false)
+ /** Text-field errors on screen: set by a blocked submit, then re-checked when the field loses focus. */
+ const [shown, setShown] = useState<{ title?: string; fileName?: string; email?: string }>({})
+ /** Each blocked submit focuses the first problem once its message has rendered. */
+ const [blockedSubmits, setBlockedSubmits] = useState(0)
+ const form = useRef(null)
+ useEffect(() => {
+ if (blockedSubmits > 0) form.current?.querySelector('[aria-invalid="true"], [data-invalid]')?.focus()
+ }, [blockedSubmits])
+ const submitAlert = useRef(null)
+ useEffect(() => {
+ if (submitError) submitAlert.current?.scrollIntoView({ block: "nearest" })
+ }, [submitError])
const pages = staged?.pdf.pages ?? []
// One drive goes by its own name; several are browsed together under "OneDrive".
const drivesName = config.drives.length === 1 ? config.drives[0].label : "OneDrive"
const driveLabel = (id: string) => config.drives.find((d) => d.id === id)?.label ?? "OneDrive"
+ const output = folder && folderLines(folder, driveLabel(folder.driveId))
+
+ // The labels of the document on screen place the role boxes, including roles typed before they were read.
+ useEffect(() => {
+ if (!staged || anchors.length === 0) return
+ setSigners((current) => {
+ const next = current.map((s) => placeByRole(s, anchors, staged.pdf.pages))
+ return next.some((s, i) => s !== current[i]) ? next : current
+ })
+ }, [anchors, staged])
function adopt(next: Staged, content: string) {
setStaged(next)
setBase64(content)
- setTitle(baseName(next.fileName))
- setFileName(`${baseName(next.fileName)} - firmato.pdf`)
- if (next.folder) setFolder(next.folder)
+ // The same PDF picked again keeps its labels: its bytes aren't read again.
+ if (content !== base64) setAnchors([])
+ const name = baseName(next.fileName)
+ if (!titleTouched || title.trim() === "") setTitle(name)
+ if (!fileNameTouched || fileName.trim() === "") setFileName(`${name} - firmato.pdf`)
+ if (next.folder && (!folderTouched || !folder)) setFolder(next.folder)
+ setShown(({ email }) => ({ email }))
setSigners((current) =>
- current.map((s, i) => ({ ...s, places: [{ ...defaultPlacement(i, next.pdf.pages), kind: "signature" }] }))
+ current.map((s, i) => ({
+ ...s,
+ places: [{ ...defaultPlacement(i, next.pdf.pages), kind: "signature", byRole: true }],
+ }))
)
}
@@ -223,6 +317,14 @@ export function NewEsignRequestPage({
{ id: result.document.id, fileName: result.document.fileName, pdf: result.pdf, folder: from },
content.base64
)
+ const last = { driveId: from.driveId, id: from.id }
+ setLastFolder(last)
+ try {
+ window.localStorage.setItem(LAST_FOLDER_KEY, JSON.stringify(last))
+ } catch (error) {
+ // Remembering the folder is best-effort: the document is already staged.
+ console.error(error)
+ }
} catch (error) {
console.error(error)
setDocError(error instanceof Error ? error.message : "Couldn't open the PDF.")
@@ -231,18 +333,57 @@ export function NewEsignRequestPage({
}
}
+ const signerList = useFocusAfterRemoval("[data-signer-row]")
+ const searchRef = useRef(null)
+ const roleInputs = useRef(new Map())
+ /** The signer just added, whose role takes the focus once their row renders. */
+ const focusRole = useRef(null)
+ useEffect(() => {
+ if (focusRole.current === null) return
+ roleInputs.current.get(focusRole.current)?.focus()
+ focusRole.current = null
+ }, [signers])
+
function addSigner(person: EsignProfile) {
const draft = draftOf(person, signers.length, pages)
setSigners((current) => [...current, draft])
setFocus({ page: draft.places[0].page, y: draft.places[0].y })
setSearch("")
+ focusRole.current = person.sub
}
- function updateSigner(index: number, patch: Partial) {
- setSigners((current) => current.map((s, i) => (i === index ? { ...s, ...patch } : s)))
+ // Placing refers to a signer by position, so it ends when the positions change.
+ function removeSigner(index: number, button: HTMLElement) {
+ if (signers.length === 1) searchRef.current?.focus()
+ else signerList.capture(button, { restore: true })
+ setSigners((current) => current.filter((_, i) => i !== index))
+ setPlacing(null)
}
- function moveSigner(index: number, by: -1 | 1) {
+ const moveButtons = useRef(new Map())
+ function moveButtonRef(key: string) {
+ return (button: HTMLButtonElement | null) => {
+ if (button) moveButtons.current.set(key, button)
+ else moveButtons.current.delete(key)
+ }
+ }
+ /** The signer just moved by the arrow that had the focus, which keeps it once the row lands. */
+ const focusMove = useRef<{ sub: string; by: -1 | 1 } | null>(null)
+ // A layout effect, so the focus is back before the browser drops it from the moved row or the disabled arrow.
+ useLayoutEffect(() => {
+ const moved = focusMove.current
+ if (moved === null) return
+ focusMove.current = null
+ const index = signers.findIndex((s) => s.sub === moved.sub)
+ // The arrow that just disabled itself (first row going up, last going down) hands the focus to the other one.
+ const atEnd = moved.by === -1 ? index === 0 : index === signers.length - 1
+ const up = moved.by === -1 ? !atEnd : atEnd
+ moveButtons.current.get(`${moved.sub}:${up ? "up" : "down"}`)?.focus()
+ }, [signers])
+
+ function moveSigner(index: number, by: -1 | 1, button: HTMLElement) {
+ if (button === document.activeElement) focusMove.current = { sub: signers[index].sub, by }
+ setPlacing(null)
setSigners((current) => {
const next = [...current]
const [item] = next.splice(index, 1)
@@ -251,20 +392,27 @@ export function NewEsignRequestPage({
})
}
- function updatePlaces(index: number, update: (places: Place[]) => Place[], manual = true) {
+ function setRole(index: number, role: string) {
+ const s = signers[index]
+ const next = placeByRole({ ...s, role }, anchors, pages)
+ const placed = next.places.find((p) => p.byRole)
+ if (next.places !== s.places && placed) setFocus({ page: placed.page, y: placed.y })
+ setSigners((current) => current.map((c, i) => (i === index ? next : c)))
+ }
+
+ function updatePlaces(index: number, update: (places: DraftPlace[]) => DraftPlace[]) {
setSigners((current) =>
- current.map((s, i) =>
- i === index ? { ...s, places: withSignature(update(s.places)), manual: s.manual || manual } : s
- )
+ current.map((s, i) => (i === index ? { ...s, places: withSignature(update(s.places)) } : s))
)
}
- function movePlace(index: number, at: number, placement: BoxPlacement) {
- updatePlaces(index, (places) => places.map((p, i) => (i === at ? { ...placement, kind: p.kind } : p)), at === 0)
+ // The box comes back with every field it was given: rebuilt without `byRole`, it no longer follows the role.
+ function movePlace(index: number, at: number, { page, x, y, width, height }: BoxPlacement) {
+ updatePlaces(index, (places) => places.map((p, i) => (i === at ? { page, x, y, width, height, kind: p.kind } : p)))
}
function removePlace(index: number, at: number) {
- updatePlaces(index, (places) => places.filter((_, i) => i !== at), false)
+ updatePlaces(index, (places) => places.filter((_, i) => i !== at))
}
function place(page: number, x: number, y: number) {
@@ -279,14 +427,11 @@ export function NewEsignRequestPage({
}
const at = placing.place
// Clicked places keep reading order (page, then top to bottom), which is also the order they are signed in.
- updatePlaces(
- placing.signer,
- (places) =>
- (at === null
- ? [...places, { ...placement, kind: "signature" as const }]
- : places.map((p, i) => (i === at ? { ...placement, kind: p.kind } : p))
- ).sort((a, b) => a.page - b.page || a.y - b.y || a.x - b.x),
- at === 0
+ updatePlaces(placing.signer, (places) =>
+ (at === null
+ ? [...places, { ...placement, kind: "signature" as const }]
+ : places.map((p, i) => (i === at ? { ...placement, kind: p.kind } : p))
+ ).sort((a, b) => a.page - b.page || a.y - b.y || a.x - b.x)
)
setPlacing(null)
}
@@ -317,15 +462,26 @@ export function NewEsignRequestPage({
.map((e) => e.trim())
.filter(Boolean)
const badEmail = recipients.find((e) => !EMAIL.test(e))
- const problems = [
- !staged && "Choose the document.",
- signers.length === 0 && "Add at least one signer.",
- title.trim() === "" && "Give the request a title.",
- saveToDrive && !folder && "Choose the OneDrive folder.",
- saveToDrive && fileName.trim() === "" && "Name the signed file.",
- badEmail && `“${badEmail}” isn't an email address.`,
- ...outsiders.map((s) => `${s.name} can't sign documents of ${driveLabel(blockedDrive(s.sub) ?? "")}.`),
- ].filter((p): p is string => Boolean(p))
+ const errors = {
+ document: staged ? undefined : "Choose the document.",
+ signers: signers.length > 0 ? undefined : "Add at least one signer.",
+ title: title.trim() === "" ? "Give the request a title." : undefined,
+ folder: saveToDrive && !folder ? "Choose the OneDrive folder." : undefined,
+ fileName: saveToDrive && fileName.trim() === "" ? "Name the signed file." : undefined,
+ email: badEmail ? `“${badEmail}” isn't an email address.` : undefined,
+ }
+ // Signers who may not sign these documents block the request too; their rows say why.
+ const problems = outsiders.length > 0 || Object.values(errors).some(Boolean)
+
+ function revalidate(field: keyof typeof shown) {
+ if (shown[field]) setShown((current) => ({ ...current, [field]: errors[field] }))
+ }
+
+ function showProblems() {
+ setAttempted(true)
+ setShown({ title: errors.title, fileName: errors.fileName, email: errors.email })
+ setBlockedSubmits((count) => count + 1)
+ }
// When the viewer signs first, creating the request and signing it are one step.
const myIndex = signers.findIndex((s) => s.sub === me)
@@ -337,6 +493,21 @@ export function NewEsignRequestPage({
const creating = useRef(false)
+ // "Sign a document" starts with the viewer as signer: that alone is nothing to lose.
+ const untouched =
+ staged === null &&
+ title.trim() === "" &&
+ emails.trim() === "" &&
+ message.trim() === "" &&
+ signers.every((s) => withMe && s.sub === me && s.role.trim() === "")
+ const dirty = createdRequest === null && !untouched
+ // Reads the ref when it runs, so moving to the request just created is never blocked.
+ const leave = useBlocker({
+ shouldBlockFn: () => dirty && created.current === null,
+ enableBeforeUnload: () => dirty && created.current === null,
+ withResolver: true,
+ })
+
async function create(documentId: string) {
if (created.current) return created.current
if (creating.current) return null
@@ -349,7 +520,11 @@ export function NewEsignRequestPage({
title: title.trim(),
documentId,
ordered,
- signers: signers.map((s) => ({ sub: s.sub, role: s.role.trim() || null, places: s.places })),
+ signers: signers.map((s) => ({
+ sub: s.sub,
+ role: s.role.trim() || null,
+ places: s.places.map(({ page, x, y, width, height, kind }) => ({ page, x, y, width, height, kind })),
+ })),
output:
saveToDrive && folder ? { driveId: folder.driveId, folderId: folder.id, fileName: fileName.trim() } : null,
email: recipients.length ? { to: recipients, message: message.trim() || null } : null,
@@ -382,8 +557,7 @@ export function NewEsignRequestPage({
async function submit() {
if (submitting || created.current) return
- setAttempted(true)
- if (problems.length > 0 || !staged) return
+ if (problems || !staged) return showProblems()
setSubmitting(true)
const request = await create(staged.id)
if (!request) return setSubmitting(false)
@@ -394,8 +568,10 @@ export function NewEsignRequestPage({
function createAndSign() {
if (submitting || created.current) return null
- setAttempted(true)
- if (problems.length > 0 || !staged) return null
+ if (problems || !staged) {
+ showProblems()
+ return null
+ }
return create(staged.id).then((request) => (request ? [{ requestId: request.id, title: request.title }] : []))
}
@@ -438,53 +614,51 @@ export function NewEsignRequestPage({
}
/>
-