components/people-roles/people-roles.react.tsx

Functions

Imports

It imports components/confirm-dialog/confirm-dialog.ts, components/field/field.ts, components/menu/menu.react.tsx, components/people-roles/people-roles.ts, components/status/status.react.tsx. No module of this repo imports it.

Source

1import { useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
2import { enhance as enhanceFields } from "../field/field.ts";
3import { confirm } from "../confirm-dialog/confirm-dialog.ts";
4import { FormMenu } from "../menu/menu.react.tsx";
5import { Glyph, type Tone } from "../status/status.react.tsx";
6import {
7  REASON_MISSING,
8  accessText,
9  actionText,
10  cloudflareText,
11  confirmRemove,
12  dayText,
13  endHelp,
14  endsSoon,
15  removeBody,
16  removeTarget,
17  rowActions,
18  syncText,
19  tallyText,
20  timeText,
21  type HistoryEntry,
22  type PersonRow,
23  type TitleOption,
24} from "./people-roles.ts";
25
26export type { HistoryEntry, PersonRow, TitleOption };
27
28export interface PeopleData {
29  // The app's name as the heading reads it: "Lab members".
30  heading: string;
31  // One line under the heading: "You manage Lab workers."
32  lead?: string;
33  people: PersonRow[];
34  // The titles the viewer may give, below their own layer and within their permissions.
35  titles: TitleOption[];
36  // People whose review is open, with the date their access ends. Empty or absent: no review.
37  review?: { endDate: string; people: Array<Pick<PersonRow, "email" | "name" | "title" | "renewTo">> };
38  // One person's history, when the address asks for it (`?person=`).
39  history?: { email: string; name: string; entries: HistoryEntry[] };
40  // The person whose title is being changed (`?change=`).
41  changing?: string;
42  // The answer to the last post.
43  result?: { ok: boolean; text: string };
44}
45
46export interface PeopleRolesProps {
47  data: PeopleData;
48  // Where every form posts. Each carries `intent`: add, change_title, renew, remove, retry, review.
49  action: string;
50  // Today, for "ends in 5 days". Defaults to now.
51  now?: number;
52  // Builds the address that opens a person's history or change-title row. Defaults to `?person=` and `?change=`.
53  hrefFor?: (kind: "person" | "change", email: string) => string;
54  // Where Close goes, from a history or a change-title row. Defaults to "?".
55  closeHref?: string;
56  // Runs a post in place instead of a page load. The page shows `data.result` when it comes back.
57  onIntent?: (intent: string, fields: FormData) => void | Promise<void>;
58  // The `h` level of the heading. The cards and the history use the next one down.
59  headingLevel?: 2 | 3;
60}
61
62const TONE: Record<PersonRow["sync"], Tone> = { ready: "ok", waiting: "info", failed: "crit" };
63const HISTORY_TONE: Record<HistoryEntry["cloudflare"], Tone> = { accepted: "ok", pending: "info", failed: "crit" };
64
65function defaultHref(kind: "person" | "change", email: string): string {
66  return `?${kind}=${encodeURIComponent(email)}`;
67}
68
69function Hidden({ fields }: { fields: Record<string, string> }) {
70  return (
71    <>
72      {Object.entries(fields).map(([k, v]) => (
73        <input key={k} type="hidden" name={k} value={v} />
74      ))}
75    </>
76  );
77}
78
79export function PeopleRoles({ data, action, now = Date.now(), hrefFor = defaultHref, closeHref = "?", onIntent, headingLevel = 2 }: PeopleRolesProps) {
80  const id = useId().replace(/[^a-zA-Z0-9]/g, "");
81  const H = `h${headingLevel}` as "h2" | "h3";
82  const Sub = `h${headingLevel + 1}` as "h3" | "h4";
83  const live = data.people.filter((p) => p.status === "active").length;
84  const root = useRef<HTMLElement>(null);
85  // The add and change-title forms check their fields beside each field.
86  useEffect(() => (root.current ? enhanceFields(root.current) : undefined), [data.changing, data.titles.length]);
87
88  // Every form in the page posts through here: Remove asks first, and with `onIntent` the
89  // app runs the post in place instead of the browser loading a page.
90  const onSubmitCapture = (e: FormEvent<HTMLElement>) => {
91    const form = e.target as HTMLFormElement;
92    const submitter = (e.nativeEvent as SubmitEvent).submitter as HTMLButtonElement | null;
93    const fields = new FormData(form, submitter);
94    const intent = String(fields.get("intent") ?? "");
95    // A form with a wrong field is the field component's to answer, beside the field.
96    if (!form.checkValidity()) return;
97    if (intent === "remove" && fields.get("confirmed") !== "yes") {
98      e.preventDefault();
99      void (onIntent ? confirmRemoveInPlace(form, onIntent) : confirmRemove(form));
100      return;
101    }
102    if (!onIntent || e.defaultPrevented) return;
103    e.preventDefault();
104    void onIntent(intent, fields);
105  };
106
107  return (
108    <section className="cap-people" data-cap="people-roles" aria-labelledby={`${id}-h`} onSubmitCapture={onSubmitCapture} ref={root}>
109      <div className="cap-people-head">
110        <H id={`${id}-h`}>{data.heading}</H>
111        <p className="cap-people-count">
112          {live} {live === 1 ? "person has" : "people have"} access
113        </p>
114      </div>
115      {data.lead ? <p className="cap-people-lead">{data.lead}</p> : null}
116      {data.result ? (
117        <p className="cap-people-result" role={data.result.ok ? "status" : "alert"} data-tone={data.result.ok ? "ok" : "crit"}>
118          <span className="cap-status" data-tone={data.result.ok ? "ok" : "crit"}>
119            <Glyph name={data.result.ok ? "ok" : "crit"} />
120            <span className="cap-sr-only">{data.result.ok ? "Done:" : "Not done:"}</span>
121          </span>
122          <span>{data.result.text}</span>
123        </p>
124      ) : null}
125
126      {data.review && data.review.people.length ? <Review id={id} Sub={Sub} review={data.review} action={action} /> : null}
127
128      <div className="cap-table-wrap" role="region" aria-labelledby={`${id}-h`} tabIndex={0}>
129        <table className="cap-table cap-people-table">
130          <thead>
131            <tr>
132              <th scope="col">Person</th>
133              <th scope="col">Title</th>
134              <th scope="col">Access</th>
135              <th scope="col">Cloudflare</th>
136              <th scope="col">
137                <span className="cap-sr-only">Actions</span>
138              </th>
139            </tr>
140          </thead>
141          <tbody>
142            {data.people.map((p) => (
143              <PersonRows key={p.email} p={p} now={now} action={action} titles={data.titles} changing={data.changing === p.email} hrefFor={hrefFor} closeHref={closeHref} />
144            ))}
145          </tbody>
146        </table>
147      </div>
148
149      {data.history ? <History id={id} Sub={Sub} history={data.history} closeHref={closeHref} /> : null}
150
151      {data.titles.length ? <AddForm id={id} Sub={Sub} titles={data.titles} action={action} /> : null}
152    </section>
153  );
154}
155
156// Asks, then hands the post to the app with `confirmed=yes`.
157function confirmRemoveInPlace(form: HTMLFormElement, onIntent: NonNullable<PeopleRolesProps["onIntent"]>): Promise<boolean> {
158  const { name, email } = removeTarget(form);
159  return confirm({
160    title: `Remove ${name}?`,
161    body: removeBody(name, email),
162    action: "Remove",
163    returnTo: form.closest<HTMLElement>("[data-cap='people-roles']"),
164    perform: async () => {
165      const fields = new FormData(form);
166      fields.set("intent", "remove");
167      fields.set("confirmed", "yes");
168      await onIntent("remove", fields);
169    },
170  });
171}
172
173interface RowProps {
174  p: PersonRow;
175  now: number;
176  action: string;
177  titles: TitleOption[];
178  changing: boolean;
179  hrefFor: (kind: "person" | "change", email: string) => string;
180  closeHref: string;
181}
182
183function PersonRows({ p, now, action, titles, changing, hrefFor, closeHref }: RowProps) {
184  const soon = endsSoon(p, now);
185  const who = (
186    <span className="cap-sr-only">
187      {" "}
188      for {p.name}
189    </span>
190  );
191  const editId = `pr-change-${p.email.replace(/[^a-zA-Z0-9]/g, "-")}`;
192  const { primary, items } = rowActions(p, titles.length > 0, changing ? closeHref : hrefFor("change", p.email), hrefFor("person", p.email));
193  return (
194    <>
195      <tr data-status={p.status} data-email={p.email} data-name={p.name}>
196        <th scope="row" className="cap-people-who">
197          <span className="cap-people-name">
198            {p.name}
199            {p.you ? (
200              <span className="cap-pill cap-people-you" data-variant="secondary">
201                You
202              </span>
203            ) : null}
204          </span>
205          <span className="cap-people-email cap-mono">{p.email}</span>
206        </th>
207        <td>{p.title}</td>
208        <td>
209          <span className="cap-people-end" data-soon={soon ? "" : undefined}>
210            {soon ? <Glyph name="warn" /> : null}
211            {accessText(p, now)}
212          </span>
213        </td>
214        <td className="cap-people-sync">
215          <span className="cap-status" data-tone={TONE[p.sync]}>
216            <Glyph name={p.sync === "waiting" ? "running" : TONE[p.sync]} />
217            {syncText(p)}
218          </span>
219          {p.sync === "failed" && p.syncError ? <span className="cap-people-sync-error">{p.syncError}</span> : null}
220        </td>
221        <td className="cap-people-actions">
222          <div className="cap-people-acts">
223            {primary ? (
224              <form method="post" action={action}>
225                <Hidden fields={{ intent: primary.intent, email: p.email }} />
226                <button type="submit" className="cap-btn" data-size="sm">
227                  {primary.label}
228                  {who}
229                </button>
230              </form>
231            ) : null}
232            {p.manageable ? (
233              <FormMenu label="Actions" aria-label={`Actions for ${p.name}`} action={action} hidden={{ email: p.email }} items={items} />
234            ) : (
235              <a className="cap-btn" data-size="sm" href={hrefFor("person", p.email)}>
236                History{who}
237              </a>
238            )}
239          </div>
240        </td>
241      </tr>
242      {changing ? <ChangeRow id={editId} p={p} titles={titles} action={action} closeHref={closeHref} /> : null}
243    </>
244  );
245}
246
247function ChangeRow({ id, p, titles, action, closeHref }: { id: string; p: PersonRow; titles: TitleOption[]; action: string; closeHref: string }) {
248  const first = useRef<HTMLSelectElement>(null);
249  useEffect(() => first.current?.focus(), []);
250  const others = titles.filter((t) => t.label !== p.title);
251  return (
252    <tr className="cap-people-edit" id={id}>
253      <td colSpan={5}>
254        <form className="cap-people-change" data-cap="field" method="post" action={action} aria-label={`Change ${p.name}'s title`}>
255          <Hidden fields={{ intent: "change_title", email: p.email }} />
256          <div className="cap-field">
257            <label className="cap-field-label" htmlFor={`${id}-title`}>
258              New title for {p.name}
259            </label>
260            <div className="cap-select-wrap" data-cap="select" data-native="">
261              <select ref={first} className="cap-select" id={`${id}-title`} name="title" required>
262                {others.map((t) => (
263                  <option key={t.value} value={t.value}>
264                    {t.label}
265                  </option>
266                ))}
267              </select>
268            </div>
269          </div>
270          <div className="cap-field">
271            <label className="cap-field-label" htmlFor={`${id}-reason`}>
272              Reason{" "}
273              <span className="cap-field-required" aria-hidden="true">
274                Required
275              </span>
276            </label>
277            <p className="cap-field-help" id={`${id}-reason-h`}>
278              One line, recorded with the change.
279            </p>
280            <input className="cap-input" id={`${id}-reason`} name="reason" required autoComplete="off" maxLength={200} aria-describedby={`${id}-reason-e ${id}-reason-h`} data-error-value-missing={REASON_MISSING} />
281            <p className="cap-field-error" id={`${id}-reason-e`} hidden></p>
282          </div>
283          <div className="cap-people-change-actions">
284            <button type="submit" className="cap-btn" data-variant="primary">
285              Change title
286            </button>
287            <a className="cap-btn" href={closeHref}>
288              Cancel
289            </a>
290          </div>
291        </form>
292      </td>
293    </tr>
294  );
295}
296
297function Review({ id, Sub, review, action }: { id: string; Sub: "h3" | "h4"; review: NonNullable<PeopleData["review"]>; action: string }) {
298  const [answers, setAnswers] = useState<Record<string, string>>({});
299  const keep = Object.values(answers).filter((v) => v === "keep").length;
300  const removeCount = Object.values(answers).filter((v) => v === "remove").length;
301  const open = review.people.length - keep - removeCount;
302  return (
303    <form className="cap-people-card cap-people-review" data-variant="review" method="post" action={action} aria-labelledby={`${id}-rv`}>
304      <Hidden fields={{ intent: "review" }} />
305      <Sub id={`${id}-rv`}>Still on your team?</Sub>
306      <p className="cap-people-lead">
307        These people's access ends on {dayText(review.endDate)}. Keep or remove each. Anyone not answered loses access on that date.
308      </p>
309      <div className="cap-people-review-list">
310        {review.people.map((p, i) => (
311          <fieldset key={p.email} className="cap-people-review-item">
312            <legend>
313              {p.name} <span className="cap-people-review-who">{p.title}</span>
314            </legend>
315            <label className="cap-check">
316              <input type="radio" name={`answer-${i}`} value="keep" onChange={() => setAnswers((a) => ({ ...a, [p.email]: "keep" }))} /> Keep{p.renewTo ? `, until ${dayText(p.renewTo)}` : ""}
317            </label>
318            <label className="cap-check">
319              <input type="radio" name={`answer-${i}`} value="remove" onChange={() => setAnswers((a) => ({ ...a, [p.email]: "remove" }))} /> Remove
320            </label>
321            <input type="hidden" name={`email-${i}`} value={p.email} />
322          </fieldset>
323        ))}
324      </div>
325      <div className="cap-people-review-foot">
326        <button type="submit" className="cap-btn" data-variant="primary">
327          Save review
328        </button>
329        <p className="cap-people-tally" data-cap-part="tally" aria-live="polite">
330          {tallyText(keep, removeCount, open)}
331        </p>
332      </div>
333    </form>
334  );
335}
336
337function History({ id, Sub, history, closeHref }: { id: string; Sub: "h3" | "h4"; history: NonNullable<PeopleData["history"]>; closeHref: string }) {
338  return (
339    <section className="cap-people-history" aria-labelledby={`${id}-hi`}>
340      <div className="cap-people-history-head">
341        <Sub id={`${id}-hi`}>History for {history.name}</Sub>
342        <a className="cap-btn" data-size="sm" href={closeHref}>
343          Close history
344        </a>
345      </div>
346      {history.entries.length ? (
347        <ol className="cap-people-history-list">
348          {history.entries.map((e) => (
349            <li key={`${e.at}-${e.action}`} className="cap-people-history-item">
350              <time className="cap-people-history-when" dateTime={e.at}>
351                {timeText(e.at)}
352              </time>
353              <div>
354                <p className="cap-people-history-what">{actionText(e)}</p>
355                <span className="cap-people-history-by">By {e.by}</span>
356                {e.reason ? <span className="cap-people-history-reason">Reason: {e.reason}</span> : null}
357              </div>
358              <span className="cap-status" data-tone={HISTORY_TONE[e.cloudflare]}>
359                <Glyph name={e.cloudflare === "pending" ? "running" : HISTORY_TONE[e.cloudflare]} />
360                {cloudflareText(e)}
361              </span>
362            </li>
363          ))}
364        </ol>
365      ) : (
366        <p className="cap-people-lead">No changes recorded yet.</p>
367      )}
368    </section>
369  );
370}
371
372function AddForm({ id, Sub, titles, action }: { id: string; Sub: "h3" | "h4"; titles: TitleOption[]; action: string }) {
373  const [title, setTitle] = useState(titles[0]?.value ?? "");
374  const chosen = titles.find((t) => t.value === title) ?? titles[0];
375  const [end, setEnd] = useState(chosen?.defaultEnd ?? "");
376  useEffect(() => {
377    if (!chosen?.defaultEnd) return;
378    setEnd((v) => (!v || v > (chosen.defaultEnd as string) ? (chosen.defaultEnd as string) : v));
379  }, [chosen?.defaultEnd]);
380  const expires = !!chosen?.defaultEnd;
381  return (
382    <form className="cap-people-card cap-people-add" data-cap="field" method="post" action={action} aria-labelledby={`${id}-add`}>
383      <Hidden fields={{ intent: "add" }} />
384      <Sub id={`${id}-add`}>Add a person</Sub>
385      <div className="cap-people-add-fields">
386        <Field id={`${id}-email`} label="Email" help="The address they sign in with. Cloudflare emails them a code.">
387          <input className="cap-input" id={`${id}-email`} name="email" type="email" required autoComplete="off" spellCheck={false} aria-describedby={`${id}-email-e ${id}-email-h`} data-error-value-missing="Type their email." data-error-type-mismatch="Type a full email, such as name@example.edu." />
388        </Field>
389        <Field id={`${id}-name`} label="Name">
390          <input className="cap-input" id={`${id}-name`} name="name" required autoComplete="off" aria-describedby={`${id}-name-e`} data-error-value-missing="Type their name." />
391        </Field>
392        <Field id={`${id}-title`} label="Title">
393          <div className="cap-select-wrap" data-cap="select" data-native="">
394            <select className="cap-select" id={`${id}-title`} name="title" required value={title} onChange={(e) => setTitle(e.target.value)}>
395              {titles.map((t) => (
396                <option key={t.value} value={t.value} data-end={t.defaultEnd ?? ""}>
397                  {t.label}
398                </option>
399              ))}
400            </select>
401          </div>
402        </Field>
403        <Field id={`${id}-end`} label="Access ends" help={endHelp(chosen?.defaultEnd ?? null)} helpPart="end-help" hidden={!expires}>
404          <input className="cap-input" id={`${id}-end`} name="end_date" type="date" required={expires} disabled={!expires} max={chosen?.defaultEnd ?? undefined} value={end} onChange={(e) => setEnd(e.target.value)} aria-describedby={`${id}-end-e ${id}-end-h`} data-error-value-missing="Choose the date their access ends." data-error-range-overflow="Choose a date no later than the end of the term." />
405        </Field>
406      </div>
407      <div className="cap-people-add-foot">
408        <button type="submit" className="cap-btn" data-variant="primary">
409          Add person
410        </button>
411        <p className="cap-people-tally">They can sign in once Cloudflare confirms, usually within a minute.</p>
412      </div>
413    </form>
414  );
415}
416
417function Field({ id, label, help, helpPart, hidden, children }: { id: string; label: string; help?: string; helpPart?: string; hidden?: boolean; children: ReactNode }) {
418  return (
419    <div className="cap-field" hidden={hidden}>
420      <label className="cap-field-label" htmlFor={id}>
421        {label}{" "}
422        <span className="cap-field-required" aria-hidden="true">
423          Required
424        </span>
425      </label>
426      {help ? (
427        <p className="cap-field-help" id={`${id}-h`} data-cap-part={helpPart}>
428          {help}
429        </p>
430      ) : null}
431      {children}
432      <p className="cap-field-error" id={`${id}-e`} hidden></p>
433    </div>
434  );
435}