components/confirm-dialog/confirm-dialog.react.tsx

Functions

Imports

It imports components/confirm-dialog/confirm-dialog.ts, components/dialog/dialog.react.tsx. Imported by components/content/content.react.tsx.

Source

1import { useEffect, useId, useRef, useState, type ReactNode } from "react";
2import { Dialog, DialogDescription, DialogFooter, DialogHeader, DialogMedia, DialogTitle, DialogBody } from "../dialog/dialog.react.tsx";
3import { errorText, wordMatches, wordPattern } from "./confirm-dialog.ts";
4
5const ERROR_GLYPH = <path fill="currentColor" fillRule="evenodd" d="M5 1h6l4 4v6l-4 4H5l-4-4V5zM7.2 4v5h1.6V4zM7.2 10.4V12h1.6v-1.6z" />;
6const MEDIA_GLYPH = <path fill="currentColor" fillRule="evenodd" d="M8 1.5l7 12.5H1zM7.2 6v4h1.6V6zM7.2 10.8v1.4h1.6v-1.4z" />;
7
8export interface ConfirmDialogProps {
9  open: boolean;
10  // Names the action and the object: "Revoke foxhound-driver?"
11  title: string;
12  // An optional first sentence: "This cannot be undone."
13  lead?: ReactNode;
14  // What will change, one line each.
15  body: string[];
16  // The perform button's label, named for the action: "Revoke agent".
17  action: string;
18  // For what cannot be recovered: the short word to type ("revoke").
19  typeToConfirm?: string;
20  // Asks for a reason, required, before the action. perform receives it.
21  reason?: { label?: string; note?: string };
22  perform: (reason: string) => Promise<void>;
23  // Called once per close, with true when the action was performed.
24  onClose: (performed: boolean) => void;
25  cancelLabel?: string;
26  // Where focus goes when the opener has gone; the page's main region by default.
27  returnTo?: HTMLElement | null;
28  // The icon tile beside the title. Default: shown.
29  media?: boolean;
30}
31
32type Failure = { text: string; field: boolean };
33
34export function ConfirmDialog(props: ConfirmDialogProps) {
35  const { open, title, lead, body, action, typeToConfirm, reason: reasonOpt, perform, onClose, cancelLabel = "Cancel", returnTo, media = true } = props;
36  const id = useId();
37  const dlg = useRef<HTMLDialogElement>(null);
38  const cancelRef = useRef<HTMLButtonElement>(null);
39  const performRef = useRef<HTMLButtonElement>(null);
40  const typedRef = useRef<HTMLInputElement>(null);
41  const reasonRef = useRef<HTMLTextAreaElement>(null);
42  const performed = useRef(false);
43  const [busy, setBusy] = useState(false);
44  // field: the error is about the reason field itself, so the field is marked invalid.
45  const [error, setError] = useState<Failure | null>(null);
46  const [typed, setTyped] = useState("");
47  const [reason, setReason] = useState("");
48  const matched = wordMatches(typed, typeToConfirm);
49
50  // A fresh dialog each time it opens.
51  useEffect(() => {
52    if (!open) return;
53    performed.current = false;
54    setError(null);
55    setTyped("");
56    setReason("");
57  }, [open]);
58
59  const run = async () => {
60    if (busy) return;
61    if (!matched) {
62      typedRef.current?.focus();
63      return;
64    }
65    // Read from the field as well as from state, so a value the browser filled in without
66    // an input event still counts.
67    const why = (reasonRef.current?.value ?? reason).trim();
68    if (reasonOpt && !why) {
69      setError({ text: "Type what you are doing and why, then try again. Nothing was changed.", field: true });
70      reasonRef.current?.focus();
71      return;
72    }
73    setBusy(true);
74    setError(null);
75    try {
76      await perform(why);
77      performed.current = true;
78      setBusy(false);
79      dlg.current?.close("performed");
80    } catch (e) {
81      setBusy(false);
82      setError({ text: errorText(e), field: false });
83      performRef.current?.focus();
84    }
85  };
86
87  const guardOff = !!typeToConfirm && !matched;
88  const failed = error != null && !error.field;
89  const hasBody = body.length > 0 || !!reasonOpt || !!typeToConfirm;
90  const described = [lead ? `${id}-desc` : null, body.length > 0 ? `${id}-list` : null].filter(Boolean).join(" ") || undefined;
91
92  return (
93    <Dialog
94      ref={dlg}
95      open={open}
96      onOpenChange={() => {
97        setTyped("");
98        setReason("");
99        setError(null);
100        onClose(performed.current);
101      }}
102      alert
103      size="md"
104      busy={busy}
105      returnTo={returnTo}
106      initialFocus={cancelRef}
107      aria-describedby={described}
108    >
109      <DialogHeader>
110        {media && (
111          <DialogMedia tone="crit">
112            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
113              {MEDIA_GLYPH}
114            </svg>
115          </DialogMedia>
116        )}
117        <DialogTitle>{title}</DialogTitle>
118        {lead ? <DialogDescription id={`${id}-desc`}>{lead}</DialogDescription> : null}
119      </DialogHeader>
120      {hasBody && (
121        <DialogBody>
122          {body.length > 0 && (
123            <ul id={`${id}-list`}>
124              {body.map((line) => (
125                <li key={line}>{line}</li>
126              ))}
127            </ul>
128          )}
129          {reasonOpt && (
130            <div className="cap-confirm-reason">
131              <label htmlFor={`${id}-reason`}>{reasonOpt.label ?? "Reason (required)"}</label>
132              <textarea
133                ref={reasonRef}
134                className="cap-input"
135                id={`${id}-reason`}
136                rows={3}
137                aria-required="true"
138                aria-invalid={error?.field || undefined}
139                aria-describedby={error?.field ? `${id}-error ${id}-reason-note` : `${id}-reason-note`}
140                readOnly={busy}
141                data-cap-part="reason"
142                value={reason}
143                onChange={(e) => setReason(e.target.value)}
144                onKeyDown={(e) => {
145                  // Ctrl or Cmd with Enter performs; a plain Enter is a new line.
146                  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
147                    e.preventDefault();
148                    void run();
149                  }
150                }}
151              />
152              <p className="cap-confirm-note" id={`${id}-reason-note`} data-cap-part="reason-note">
153                {reasonOpt.note ?? "Recorded with the change."}
154              </p>
155            </div>
156          )}
157          {typeToConfirm && (
158            <div className="cap-confirm-typed">
159              <label id={`${id}-typed-label`} htmlFor={`${id}-typed`}>
160                Type <b>{typeToConfirm}</b> to confirm
161              </label>
162              <input
163                ref={typedRef}
164                className="cap-input"
165                id={`${id}-typed`}
166                type="text"
167                autoComplete="off"
168                autoCapitalize="off"
169                spellCheck={false}
170                readOnly={busy}
171                data-cap-part="typed"
172                data-cap-word={typeToConfirm}
173                value={typed}
174                onChange={(e) => setTyped(e.target.value)}
175                onKeyDown={(e) => {
176                  if (e.key !== "Enter") return;
177                  e.preventDefault();
178                  if (matched) void run();
179                }}
180              />
181            </div>
182          )}
183        </DialogBody>
184      )}
185      <div className="cap-confirm-error" role="alert" id={`${id}-error`} data-cap-part="error">
186        {error && (
187          <>
188            <p className="cap-confirm-error-lead">
189              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
190                {ERROR_GLYPH}
191              </svg>
192              {error.field ? "A reason is required." : "Not done. Nothing was changed."}
193            </p>
194            <p>{error.text}</p>
195          </>
196        )}
197      </div>
198      <DialogFooter align="between">
199        <button ref={cancelRef} type="button" className="cap-btn" data-cap-part="cancel" aria-disabled={busy || undefined}>
200          {cancelLabel}
201        </button>
202        <button
203          ref={performRef}
204          type="button"
205          className="cap-btn"
206          data-variant="danger"
207          data-cap-part="perform"
208          aria-busy={busy || undefined}
209          aria-disabled={busy || guardOff || undefined}
210          aria-describedby={guardOff ? `${id}-typed-label` : undefined}
211          onClick={() => void run()}
212        >
213          {failed ? "Try again" : action}
214        </button>
215      </DialogFooter>
216    </Dialog>
217  );
218}
219
220export interface ConfirmPageProps {
221  // Where the form posts, and the fields it carries with it (the intent, the ids, a return address).
222  action: string;
223  method?: "post" | "get";
224  // A list value is one hidden field per item, under one name (the ticked `ids`).
225  hidden?: Record<string, string | readonly string[]>;
226  // Names the action and the object: "Delete foxhound.app?"
227  title: string;
228  lead?: ReactNode;
229  // What will change, one line each, from the server's own preview.
230  body?: string[];
231  // The perform button's label, named for the action: "Delete site".
232  action_label?: string;
233  // Where Cancel goes: a link, so it works with no script.
234  cancelHref: string;
235  cancelLabel?: string;
236  // For what cannot be recovered: the short word to type. Checked by the browser (required and
237  // pattern) and again by the server.
238  typeToConfirm?: string;
239  // Asks for a reason, required, that the audit row carries. Posted as `reason`.
240  reason?: { label?: string; note?: string };
241  // What the server found wrong the last time (the typed word did not match, no reason): shown in
242  // the alert box beside the buttons, so the page works with no script.
243  error?: ReactNode;
244  // The icon tile beside the title. Default: shown.
245  media?: boolean;
246  // `h1` when the confirmation is the whole page, `h2` when it sits under one.
247  headingLevel?: "h1" | "h2";
248}
249
250// The confirmation as a form in the page, for a server that answers a destructive request with
251// its own page and works with no script. Pure markup, so a server render and the browser agree.
252export function ConfirmPage({ action, method = "post", hidden, title, lead, body = [], action_label = "Confirm", cancelHref, cancelLabel = "Cancel", typeToConfirm, reason, error, media = true, headingLevel = "h1" }: ConfirmPageProps) {
253  const id = useId().replace(/[^a-zA-Z0-9]/g, "");
254  const Heading = headingLevel;
255  const described = [lead ? `${id}-desc` : null, body.length ? `${id}-list` : null].filter(Boolean).join(" ") || undefined;
256  const hasBody = body.length > 0 || !!reason || !!typeToConfirm;
257  return (
258    <form className="cap-confirm-page" data-cap="confirm-page" action={action} method={method} role="group" aria-labelledby={`${id}-title`} aria-describedby={described}>
259      {Object.entries(hidden ?? {}).flatMap(([k, v]) => (typeof v === "string" ? [v] : v).map((one, i) => <input key={`${k}-${i}`} type="hidden" name={k} value={one} />))}
260      <div className="cap-dialog-header">
261        {media ? (
262          <div className="cap-dialog-media" data-tone="crit" aria-hidden="true">
263            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
264              {MEDIA_GLYPH}
265            </svg>
266          </div>
267        ) : null}
268        <Heading className="cap-dialog-title" id={`${id}-title`}>
269          {title}
270        </Heading>
271        {lead ? (
272          <p className="cap-dialog-description" id={`${id}-desc`}>
273            {lead}
274          </p>
275        ) : null}
276      </div>
277      {hasBody ? (
278        <div className="cap-dialog-body">
279          {body.length ? (
280            <ul id={`${id}-list`}>
281              {body.map((line) => (
282                <li key={line}>{line}</li>
283              ))}
284            </ul>
285          ) : null}
286          {reason ? (
287            <div className="cap-confirm-reason">
288              <label htmlFor={`${id}-reason`}>{reason.label ?? "Reason (required)"}</label>
289              <textarea className="cap-input" id={`${id}-reason`} name="reason" rows={3} required aria-describedby={`${id}-reason-note`} />
290              <p className="cap-confirm-note" id={`${id}-reason-note`}>
291                {reason.note ?? "Recorded with the change."}
292              </p>
293            </div>
294          ) : null}
295          {typeToConfirm ? (
296            <div className="cap-confirm-typed">
297              <label htmlFor={`${id}-typed`}>
298                Type <b>{typeToConfirm}</b> to confirm
299              </label>
300              <input className="cap-input" id={`${id}-typed`} name="confirm" required pattern={wordPattern(typeToConfirm)} title={`Type ${typeToConfirm}`} autoComplete="off" spellCheck={false} />
301            </div>
302          ) : null}
303        </div>
304      ) : null}
305      <div className="cap-confirm-error" role="alert">
306        {error ? (
307          <>
308            <b className="cap-confirm-error-lead">Not done. Nothing was changed.</b> {error}
309          </>
310        ) : null}
311      </div>
312      <div className="cap-dialog-footer" data-align="between">
313        <a className="cap-btn" href={cancelHref}>
314          {cancelLabel}
315        </a>
316        <button type="submit" className="cap-btn" data-variant="danger">
317          {action_label}
318        </button>
319      </div>
320    </form>
321  );
322}