components/confirm-dialog/confirm-dialog.ts

Functions

Imports

It imports components/dialog/dialog.ts. Imported by components/bulk-bar/bulk-bar.ts, components/confirm-dialog/confirm-dialog.react.tsx, components/flag-list/flag-list.react.tsx, components/flag-list/flag-list.ts, components/moderation-queue/moderation-queue.ts, components/people-roles/people-roles.react.tsx, components/people-roles/people-roles.ts, components/publish-gate/publish-gate.react.tsx, components/publish-gate/publish-gate.ts.

Source

1// The confirm dialog: preview, then perform, for an action that cannot be undone. The shared
2// dialog (components/dialog) as an alert dialog: focus starts on Cancel; a click outside does
3// nothing (so a typed reason is never lost that way); Esc closes unless the action is running;
4// focus goes back to the control that opened it, or to a fallback when that control is gone.
5// The shared dialog does all of that. This module adds what a confirm is: the perform button,
6// the typed-word guard, the reason, and the failure that stays inside with Try again. No
7// framework; the React wrapper reuses the pure functions exported here.
8
9// The generic overlay helpers moved to the shared dialog (components/dialog/dialog.ts). They
10// are re-exported here, so what imported them from this module keeps working.
11import { errorText, isBusy, openDialog, setDialogBusy, uid, wireDialog } from "../dialog/dialog.ts";
12export { errorText, isBackdropClick, isBusy, rememberOpener, returnFocus, uid } from "../dialog/dialog.ts";
13
14// The typed-word guard: case-insensitive, surrounding spaces ignored. No word, no guard.
15export function wordMatches(typed: string, word: string | undefined): boolean {
16  if (!word) return true;
17  return typed.trim().toLowerCase() === word.trim().toLowerCase();
18}
19
20// The typed-word guard as an HTML `pattern`, for the page form with no script: every letter is
21// a class of both cases ("delete" gives [Dd][Ee][Ll][Ee][Tt][Ee]) and anything else is escaped,
22// so the browser's own validation says what wordMatches says. The browser anchors the pattern to
23// the whole value and does not trim, so the page's field allows no surrounding spaces; the
24// server must still check the word, because markup is not a guard.
25export function wordPattern(word: string): string {
26  return Array.from(word.trim())
27    .map((ch) => (/[a-z]/i.test(ch) ? `[${ch.toUpperCase()}${ch.toLowerCase()}]` : ch.replace(/[\^$.*+?()[\]{}|/-]/g, "\\$&")))
28    .join("");
29}
30
31// ---------------------------------------------------------------------------------------
32// The confirm dialog itself.
33
34// Gets the reason the person typed, "" when the dialog asks for none.
35type Perform = (reason: string) => Promise<void>;
36const performs = new WeakMap<HTMLDialogElement, Perform>();
37const performedFlags = new WeakSet<HTMLDialogElement>();
38
39const part = <T extends HTMLElement = HTMLElement>(dialog: HTMLDialogElement, name: string) => dialog.querySelector<T>(`[data-cap-part='${name}']`);
40
41// The reason is read from the field itself, not from a copy of its value, so text the
42// browser filled in without an input event still counts.
43export function reasonOf(dialog: HTMLDialogElement): string {
44  return part<HTMLTextAreaElement>(dialog, "reason")?.value.trim() ?? "";
45}
46
47// Marks the reason field as the thing in error, described by the error box beside it, or
48// clears the mark.
49function markReason(dialog: HTMLDialogElement, invalid: boolean): void {
50  const field = part<HTMLTextAreaElement>(dialog, "reason");
51  if (!field) return;
52  const note = part(dialog, "reason-note")?.id;
53  const errorId = part(dialog, "error")?.id;
54  if (invalid) {
55    field.setAttribute("aria-invalid", "true");
56    const ids = [errorId, note].filter(Boolean).join(" ");
57    if (ids) field.setAttribute("aria-describedby", ids);
58  } else {
59    field.removeAttribute("aria-invalid");
60    if (note) field.setAttribute("aria-describedby", note);
61    else field.removeAttribute("aria-describedby");
62  }
63}
64
65// The perform button stays named for the action. While the guard word is not typed it is
66// aria-disabled, described by the line that says what to type.
67function syncGuard(dialog: HTMLDialogElement): void {
68  const perform = part<HTMLButtonElement>(dialog, "perform");
69  if (!perform || isBusy(dialog)) return;
70  const input = part<HTMLInputElement>(dialog, "typed");
71  const word = input?.dataset.capWord;
72  if (!input || !word) {
73    perform.removeAttribute("aria-disabled");
74    return;
75  }
76  if (wordMatches(input.value, word)) {
77    perform.removeAttribute("aria-disabled");
78    perform.removeAttribute("aria-describedby");
79  } else {
80    perform.setAttribute("aria-disabled", "true");
81    const label = dialog.querySelector<HTMLElement>(`label[for='${CSS.escape(input.id)}']`);
82    if (label?.id) perform.setAttribute("aria-describedby", label.id);
83  }
84}
85
86// Busy: the shared dialog holds Esc, Close, Cancel and the backdrop; the perform button says
87// so too, and the fields stop taking input. aria-disabled rather than disabled, so focus stays
88// on the button that was pressed.
89export function setBusy(dialog: HTMLDialogElement, on: boolean): void {
90  const perform = part<HTMLButtonElement>(dialog, "perform");
91  const input = part<HTMLInputElement>(dialog, "typed");
92  const reason = part<HTMLTextAreaElement>(dialog, "reason");
93  setDialogBusy(dialog, on);
94  if (on) {
95    perform?.setAttribute("aria-busy", "true");
96    perform?.setAttribute("aria-disabled", "true");
97    if (input) input.readOnly = true;
98    if (reason) reason.readOnly = true;
99  } else {
100    perform?.removeAttribute("aria-busy");
101    perform?.removeAttribute("aria-disabled");
102    if (input) input.readOnly = false;
103    if (reason) reason.readOnly = false;
104    syncGuard(dialog);
105  }
106}
107
108// Shows a failure inside the dialog, beside the action: what happened, then Try again.
109export function showError(dialog: HTMLDialogElement, message: string): void {
110  const box = part(dialog, "error");
111  const perform = part<HTMLButtonElement>(dialog, "perform");
112  if (box) {
113    const lead = document.createElement("p");
114    lead.className = "cap-confirm-error-lead";
115    lead.append(glyph(), document.createTextNode("Not done. Nothing was changed."));
116    const why = document.createElement("p");
117    why.textContent = message;
118    box.replaceChildren(lead, why);
119  }
120  if (perform) {
121    if (!perform.dataset.capLabel) perform.dataset.capLabel = perform.textContent ?? "";
122    perform.textContent = "Try again";
123  }
124}
125
126// The reason is empty: say so beside the field, mark the field invalid, and put focus in it.
127// Nothing was tried, so the perform button keeps its name and no "Not done" is shown.
128export function showReasonError(dialog: HTMLDialogElement): void {
129  const box = part(dialog, "error");
130  if (box) {
131    const lead = document.createElement("p");
132    lead.className = "cap-confirm-error-lead";
133    lead.append(glyph(), document.createTextNode("A reason is required."));
134    const why = document.createElement("p");
135    why.textContent = "Type what you are doing and why, then try again. Nothing was changed.";
136    box.replaceChildren(lead, why);
137  }
138  markReason(dialog, true);
139  part<HTMLTextAreaElement>(dialog, "reason")?.focus();
140}
141
142export function clearError(dialog: HTMLDialogElement): void {
143  part(dialog, "error")?.replaceChildren();
144  markReason(dialog, false);
145  const perform = part<HTMLButtonElement>(dialog, "perform");
146  if (perform?.dataset.capLabel) {
147    perform.textContent = perform.dataset.capLabel;
148    delete perform.dataset.capLabel;
149  }
150}
151
152const ERROR_GLYPH = "M5 1h6l4 4v6l-4 4H5l-4-4V5zM7.2 4v5h1.6V4zM7.2 10.4V12h1.6v-1.6z";
153const glyph = () => svgGlyph(ERROR_GLYPH, 14);
154
155// Binds what the perform button does for a dialog written in markup.
156export function bindPerform(dialog: HTMLDialogElement, perform: Perform): void {
157  performs.set(dialog, perform);
158}
159
160// Opens a confirm dialog, remembering the opener. Focus starts on Cancel.
161export function openConfirm(dialog: HTMLDialogElement, opener: Element | null = document.activeElement): void {
162  if (dialog.open) return;
163  if (!wired.has(dialog)) wire(dialog);
164  performedFlags.delete(dialog);
165  syncGuard(dialog);
166  openDialog(dialog, opener, { focus: part<HTMLButtonElement>(dialog, "cancel") });
167}
168
169// True when the last close of this dialog followed a successful perform.
170export function wasPerformed(dialog: HTMLDialogElement): boolean {
171  return performedFlags.has(dialog);
172}
173
174const wired = new WeakMap<HTMLDialogElement, () => void>();
175
176// Wires one dialog: the shared dialog's rules (Cancel, the backdrop that does nothing, Esc held
177// while busy, focus returned on close), then the perform button, the guard and the reason.
178// Returns a function that unwires it. Idempotent for a dialog that is already wired.
179export function wire(dialog: HTMLDialogElement, fallback?: HTMLElement | null): () => void {
180  const had = wired.get(dialog);
181  if (had) return had;
182  if (!dialog.hasAttribute("role")) dialog.setAttribute("role", "alertdialog");
183  const unwireBase = wireDialog(dialog, { returnTo: fallback ?? null });
184  const perform = part<HTMLButtonElement>(dialog, "perform");
185  const input = part<HTMLInputElement>(dialog, "typed");
186  const reason = part<HTMLTextAreaElement>(dialog, "reason");
187  syncGuard(dialog);
188
189  const run = async (e: Event) => {
190    if (isBusy(dialog)) return e.preventDefault();
191    if (perform?.getAttribute("aria-disabled") === "true") {
192      e.preventDefault();
193      input?.focus();
194      return;
195    }
196    // A required reason is never a silently disabled button: the press says what is missing.
197    if (reason && !reasonOf(dialog)) {
198      e.preventDefault();
199      clearError(dialog);
200      showReasonError(dialog);
201      return;
202    }
203    const fn = performs.get(dialog);
204    if (!fn) {
205      // A submit button in a form posts as it would without JavaScript; show busy meanwhile.
206      if (perform?.type === "submit" && perform.form) setBusy(dialog, true);
207      return;
208    }
209    e.preventDefault();
210    clearError(dialog);
211    setBusy(dialog, true);
212    try {
213      await fn(reasonOf(dialog));
214      performedFlags.add(dialog);
215      setBusy(dialog, false);
216      dialog.close("performed");
217    } catch (err) {
218      setBusy(dialog, false);
219      showError(dialog, errorText(err));
220      perform?.focus();
221    }
222  };
223  const onPerform = (e: Event) => void run(e);
224  const onKey = (e: KeyboardEvent) => {
225    // Enter in the guard field performs once the word matches, and never submits a form.
226    if (e.key === "Enter" && e.target === input) {
227      e.preventDefault();
228      if (input && wordMatches(input.value, input.dataset.capWord)) perform?.click();
229    }
230    // Ctrl or Cmd with Enter performs from the reason field; a plain Enter is a new line.
231    if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && e.target === reason) {
232      e.preventDefault();
233      perform?.click();
234    }
235  };
236  const onInput = () => syncGuard(dialog);
237  const onClose = () => {
238    if (input) input.value = "";
239    if (reason) reason.value = "";
240    clearError(dialog);
241    syncGuard(dialog);
242  };
243
244  perform?.addEventListener("click", onPerform);
245  dialog.addEventListener("keydown", onKey);
246  input?.addEventListener("input", onInput);
247  dialog.addEventListener("close", onClose);
248  const off = () => {
249    perform?.removeEventListener("click", onPerform);
250    dialog.removeEventListener("keydown", onKey);
251    input?.removeEventListener("input", onInput);
252    dialog.removeEventListener("close", onClose);
253    unwireBase();
254    wired.delete(dialog);
255  };
256  wired.set(dialog, off);
257  return off;
258}
259
260export interface ConfirmOptions {
261  // Names the action and the object: "Revoke foxhound-driver?"
262  title: string;
263  // An optional first sentence: "This cannot be undone."
264  lead?: string;
265  // What will change, one line each.
266  body: string[];
267  // The perform button's label, named for the action: "Revoke agent".
268  action: string;
269  // For what cannot be recovered: the short word to type ("revoke").
270  typeToConfirm?: string;
271  // Gets the reason when the dialog asks for one.
272  perform: (reason: string) => Promise<void>;
273  cancelLabel?: string;
274  // Where focus goes when the opener has gone. The page's main region by default.
275  returnTo?: HTMLElement | null;
276  // Asks for a reason, required, before the action: the audit row carries it with the change.
277  reason?: { label?: string; note?: string };
278  // The icon tile beside the title (shadcn's Alert Dialog media). Default: shown.
279  media?: boolean;
280}
281
282const MEDIA_GLYPH = "M8 1.5l7 12.5H1zM7.2 6v4h1.6V6zM7.2 10.8v1.4h1.6v-1.4z";
283
284function svgGlyph(d: string, size: number): SVGSVGElement {
285  const ns = "http://www.w3.org/2000/svg";
286  const svg = document.createElementNS(ns, "svg");
287  svg.setAttribute("viewBox", "0 0 16 16");
288  svg.setAttribute("width", String(size));
289  svg.setAttribute("height", String(size));
290  svg.setAttribute("aria-hidden", "true");
291  svg.setAttribute("focusable", "false");
292  const p = document.createElementNS(ns, "path");
293  p.setAttribute("fill", "currentColor");
294  p.setAttribute("fill-rule", "evenodd");
295  p.setAttribute("d", d);
296  svg.append(p);
297  return svg;
298}
299
300// Builds the dialog's markup, exactly the contract on the doc page: an alert dialog of the
301// shared dialog, header (a crit icon tile, the title, the lead as its description), a body
302// (what changes, the reason, the typed word), the error box, and the footer.
303export function buildConfirm(o: ConfirmOptions): HTMLDialogElement {
304  const id = uid("cap-confirm");
305  const dialog = document.createElement("dialog");
306  dialog.className = "cap-dialog";
307  dialog.dataset.cap = "confirm-dialog";
308  dialog.dataset.placement = "center";
309  dialog.dataset.size = "md";
310  dialog.setAttribute("role", "alertdialog");
311  dialog.setAttribute("aria-labelledby", `${id}-title`);
312  const described: string[] = [];
313
314  const header = document.createElement("div");
315  header.className = "cap-dialog-header";
316  if (o.media !== false) {
317    const media = document.createElement("div");
318    media.className = "cap-dialog-media";
319    media.dataset.tone = "crit";
320    media.setAttribute("aria-hidden", "true");
321    media.append(svgGlyph(MEDIA_GLYPH, 16));
322    header.append(media);
323  }
324  const h = document.createElement("h2");
325  h.className = "cap-dialog-title";
326  h.id = `${id}-title`;
327  h.textContent = o.title;
328  header.append(h);
329  if (o.lead) {
330    const p = document.createElement("p");
331    p.className = "cap-dialog-description";
332    p.id = `${id}-desc`;
333    p.textContent = o.lead;
334    header.append(p);
335    described.push(p.id);
336  }
337  dialog.append(header);
338
339  const body = document.createElement("div");
340  body.className = "cap-dialog-body";
341  if (o.body.length) {
342    const ul = document.createElement("ul");
343    ul.id = `${id}-list`;
344    for (const line of o.body) {
345      const li = document.createElement("li");
346      li.textContent = line;
347      ul.append(li);
348    }
349    body.append(ul);
350    described.push(ul.id);
351  }
352
353  if (o.reason) {
354    const wrap = document.createElement("div");
355    wrap.className = "cap-confirm-reason";
356    const label = document.createElement("label");
357    label.htmlFor = `${id}-reason`;
358    label.textContent = o.reason.label ?? "Reason (required)";
359    const area = document.createElement("textarea");
360    area.className = "cap-input";
361    area.id = `${id}-reason`;
362    area.rows = 3;
363    area.setAttribute("aria-required", "true");
364    area.setAttribute("aria-describedby", `${id}-reason-note`);
365    area.dataset.capPart = "reason";
366    const note = document.createElement("p");
367    note.className = "cap-confirm-note";
368    note.id = `${id}-reason-note`;
369    note.dataset.capPart = "reason-note";
370    note.textContent = o.reason.note ?? "Recorded with the change.";
371    wrap.append(label, area, note);
372    body.append(wrap);
373  }
374
375  if (o.typeToConfirm) {
376    const wrap = document.createElement("div");
377    wrap.className = "cap-confirm-typed";
378    const label = document.createElement("label");
379    label.id = `${id}-typed-label`;
380    label.htmlFor = `${id}-typed`;
381    const b = document.createElement("b");
382    b.textContent = o.typeToConfirm;
383    label.append("Type ", b, " to confirm");
384    const input = document.createElement("input");
385    input.className = "cap-input";
386    input.id = `${id}-typed`;
387    input.type = "text";
388    input.autocomplete = "off";
389    input.spellcheck = false;
390    input.setAttribute("autocapitalize", "off");
391    input.dataset.capPart = "typed";
392    input.dataset.capWord = o.typeToConfirm;
393    wrap.append(label, input);
394    body.append(wrap);
395  }
396  if (body.childElementCount) dialog.append(body);
397  if (described.length) dialog.setAttribute("aria-describedby", described.join(" "));
398
399  const error = document.createElement("div");
400  error.className = "cap-confirm-error";
401  error.setAttribute("role", "alert");
402  error.id = `${id}-error`;
403  error.dataset.capPart = "error";
404
405  const footer = document.createElement("div");
406  footer.className = "cap-dialog-footer";
407  footer.dataset.align = "between";
408  const cancel = document.createElement("button");
409  cancel.type = "button";
410  cancel.className = "cap-btn";
411  cancel.dataset.capPart = "cancel";
412  cancel.textContent = o.cancelLabel ?? "Cancel";
413  const perform = document.createElement("button");
414  perform.type = "button";
415  perform.className = "cap-btn";
416  perform.dataset.variant = "danger";
417  perform.dataset.capPart = "perform";
418  perform.textContent = o.action;
419  footer.append(cancel, perform);
420  dialog.append(error, footer);
421  return dialog;
422}
423
424// Builds a confirm dialog, opens it, and resolves true once the action has been performed,
425// false when it was cancelled. The dialog is removed when it closes.
426export function confirm(o: ConfirmOptions): Promise<boolean> {
427  const opener = document.activeElement;
428  const dialog = buildConfirm(o);
429  document.body.append(dialog);
430  bindPerform(dialog, o.perform);
431  const unwire = wire(dialog, o.returnTo);
432  return new Promise((resolve) => {
433    dialog.addEventListener(
434      "close",
435      () => {
436        const done = wasPerformed(dialog);
437        unwire();
438        dialog.remove();
439        resolve(done);
440      },
441      { once: true },
442    );
443    openConfirm(dialog, opener);
444  });
445}
446
447// Attaches to every confirm dialog written in markup under root, and to every trigger
448// [data-cap-confirm-open="<dialog id>"]. Returns a function that detaches them all.
449export function enhance(root: ParentNode = document): () => void {
450  const undo: Array<() => void> = [];
451  for (const dialog of root.querySelectorAll<HTMLDialogElement>("dialog[data-cap='confirm-dialog']:not([data-cap-ready])")) {
452    undo.push(wire(dialog));
453  }
454  for (const trigger of root.querySelectorAll<HTMLElement>("[data-cap-confirm-open]:not([data-cap-ready])")) {
455    trigger.dataset.capReady = "";
456    const onClick = (e: Event) => {
457      const dialog = document.getElementById(trigger.dataset.capConfirmOpen ?? "");
458      if (!(dialog instanceof HTMLDialogElement)) return;
459      e.preventDefault();
460      openConfirm(dialog, trigger);
461    };
462    trigger.addEventListener("click", onClick);
463    undo.push(() => {
464      trigger.removeEventListener("click", onClick);
465      delete trigger.dataset.capReady;
466    });
467  }
468  return () => undo.forEach((f) => f());
469}