components/people-roles/people-roles.ts

Functions

Imports

It imports components/confirm-dialog/confirm-dialog.ts, components/field/field.ts, components/menu/menu.ts, components/time/time.ts. Imported by components/people-roles/people-roles.react.tsx.

Source

1// The members page's behaviour and the words it shows. Every action is a form post, so the
2// page works with no script; this module adds what a form cannot do alone: the confirm
3// before a removal, the add form's end date following the chosen title, and the review's
4// running tally. The rules (who may manage whom, what may be granted, which end dates are
5// allowed) live in the app's server, in site-runtime's `./members`; this module only shows
6// what the server already decided.
7
8import { confirm } from "../confirm-dialog/confirm-dialog.ts";
9import { enhance as enhanceFields } from "../field/field.ts";
10import { enhance as enhanceMenus } from "../menu/menu.ts";
11import { DAY } from "../time/time.ts";
12
13// One person as the page shows them. The server fills `manageable` and `renewTo` from
14// site-runtime's checkChange and defaultEndDate, so the page never offers what it would refuse.
15export interface PersonRow {
16  email: string;
17  name: string;
18  // The title's label, as the app names it: "Lab worker".
19  title: string;
20  // YYYY-MM-DD in UTC, or null for a title that does not expire.
21  endDate: string | null;
22  status: "active" | "expired" | "removed";
23  // Whether the allow list in Cloudflare matches this row yet.
24  sync: "ready" | "waiting" | "failed";
25  // Cloudflare's answer when it refused, in its words.
26  syncError?: string;
27  // The viewer may renew, change and remove this person.
28  manageable: boolean;
29  // Renew sets this end date; null when the title does not expire.
30  renewTo?: string | null;
31  // The row is the viewer's own.
32  you?: boolean;
33  // When the row was removed or expired, YYYY-MM-DD.
34  endedOn?: string;
35}
36
37export interface TitleOption {
38  // The title's id, posted as `title`.
39  value: string;
40  label: string;
41  // The default end date for someone given this title today, or null if it does not expire.
42  defaultEnd: string | null;
43}
44
45export interface HistoryEntry {
46  // ISO time.
47  at: string;
48  // Who made the change, as a name or an actor id.
49  by: string;
50  action: "add" | "change_title" | "renew" | "remove" | "expire" | "review_keep";
51  // The title before and after, and the end date after, where the action has them.
52  fromTitle?: string;
53  toTitle?: string;
54  endDate?: string | null;
55  reason?: string;
56  cloudflare: "accepted" | "pending" | "failed";
57  cloudflareError?: string;
58}
59
60const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
61// How long before an end date the row shows that it ends soon, matching the review (21 days).
62export const SOON_DAYS = 21;
63
64export const REASON_MISSING = "Type a reason. It is recorded with the change.";
65
66// "18 Dec 2026", from a YYYY-MM-DD date, in UTC.
67export function dayText(date: string): string {
68  const t = new Date(`${date}T00:00:00Z`);
69  return `${t.getUTCDate()} ${MONTHS[t.getUTCMonth()]} ${t.getUTCFullYear()}`;
70}
71
72// "2 Oct 2026, 14:52 UTC", from an ISO time.
73export function timeText(iso: string): string {
74  const t = new Date(iso);
75  const hh = String(t.getUTCHours()).padStart(2, "0");
76  const mm = String(t.getUTCMinutes()).padStart(2, "0");
77  return `${t.getUTCDate()} ${MONTHS[t.getUTCMonth()]} ${t.getUTCFullYear()}, ${hh}:${mm} UTC`;
78}
79
80// Whole days from `now` until the end of the end date (0 on the end date itself).
81export function daysLeft(endDate: string, now: number): number {
82  return Math.floor((Date.parse(`${endDate}T00:00:00Z`) + DAY - 1 - now) / DAY);
83}
84
85// The Access column's words.
86export function accessText(p: Pick<PersonRow, "endDate" | "status" | "endedOn">, now: number): string {
87  if (p.status === "removed") return p.endedOn ? `Removed ${dayText(p.endedOn)}` : "Removed";
88  if (p.status === "expired") return `Ended ${dayText(p.endedOn ?? (p.endDate as string))}`;
89  if (p.endDate === null) return "Does not expire";
90  const left = daysLeft(p.endDate, now);
91  if (left === 0) return `Ends today, ${dayText(p.endDate)}`;
92  if (left <= SOON_DAYS) return `Ends ${dayText(p.endDate)}, in ${left} day${left === 1 ? "" : "s"}`;
93  return `Ends ${dayText(p.endDate)}`;
94}
95
96// Whether the end date is close enough to mark (the review is open).
97export function endsSoon(p: Pick<PersonRow, "endDate" | "status">, now: number): boolean {
98  return p.status === "active" && p.endDate !== null && daysLeft(p.endDate, now) <= SOON_DAYS;
99}
100
101// The Cloudflare column's words. A removed or expired person is "Ready" once Cloudflare has
102// taken them off, so the column always answers "does Cloudflare match this row yet".
103export function syncText(p: Pick<PersonRow, "sync" | "status">): string {
104  if (p.sync === "waiting") return "Waiting for Cloudflare";
105  if (p.sync === "failed") return "Cloudflare refused";
106  return p.status === "active" ? "Ready: they can sign in" : "Ready: signed out";
107}
108
109// One history line's words.
110export function actionText(e: HistoryEntry): string {
111  const until = e.endDate ? `, until ${dayText(e.endDate)}` : "";
112  switch (e.action) {
113    case "add":
114      return `Added as ${e.toTitle}${until}`;
115    case "change_title":
116      return `Title changed from ${e.fromTitle} to ${e.toTitle}`;
117    case "renew":
118      return `Renewed${until}`;
119    case "review_keep":
120      return `Kept at review${until}`;
121    case "remove":
122      return "Removed";
123    case "expire":
124      return "Access ended on the end date";
125  }
126}
127
128export function cloudflareText(e: Pick<HistoryEntry, "cloudflare" | "cloudflareError">): string {
129  if (e.cloudflare === "accepted") return "Cloudflare accepted";
130  if (e.cloudflare === "pending") return "Waiting for Cloudflare";
131  return e.cloudflareError ? `Cloudflare refused: ${e.cloudflareError}` : "Cloudflare refused";
132}
133
134// The add form's help line under the end date.
135export function endHelp(defaultEnd: string | null): string {
136  return defaultEnd ? `Defaults to the end of the term, ${dayText(defaultEnd)}. You can choose an earlier date.` : "This title does not expire.";
137}
138
139// The review's running count.
140export function tallyText(keep: number, remove: number, open: number): string {
141  const parts = [`${keep} to keep`, `${remove} to remove`];
142  if (open) parts.push(`${open} not answered`);
143  return `${parts.join(", ")}.`;
144}
145
146// The removal's confirm, from the server's own words: who, and what follows.
147export function removeBody(name: string, email: string): string[] {
148  return [`${name} is refused on their next request.`, `${email} comes off the allow list and their Cloudflare seat is freed.`, "Their row stays, marked removed, so their work keeps their name."];
149}
150
151// Who a removal is for, from the row the form sits in (or the form's own data).
152export function removeTarget(form: HTMLFormElement): { name: string; email: string } {
153  const row = form.closest<HTMLElement>("tr[data-email]");
154  const email = row?.dataset.email ?? form.dataset.email ?? (form.elements.namedItem("email") as HTMLInputElement | null)?.value ?? "";
155  return { name: row?.dataset.name ?? form.dataset.name ?? email, email };
156}
157
158// Asks before a removal; on Remove, posts the form with `intent=remove` and `confirmed=yes`.
159// Without script the form posts without `confirmed` and the server answers with the confirm page.
160export async function confirmRemove(form: HTMLFormElement): Promise<boolean> {
161  const { name, email } = removeTarget(form);
162  return confirm({
163    title: `Remove ${name}?`,
164    body: removeBody(name, email),
165    action: "Remove",
166    returnTo: form.closest<HTMLElement>("[data-cap='people-roles']"),
167    perform: async () => {
168      setHidden(form, "intent", "remove");
169      setHidden(form, "confirmed", "yes");
170      form.submit();
171    },
172  });
173}
174
175function setHidden(form: HTMLFormElement, name: string, value: string): void {
176  let input = form.querySelector<HTMLInputElement>(`input[type='hidden'][name='${name}']`);
177  if (!input) {
178    input = document.createElement("input");
179    input.type = "hidden";
180    input.name = name;
181    form.append(input);
182  }
183  input.value = value;
184}
185
186export interface RowAction {
187  // The menu item's value, posted as `intent`, or a link's key.
188  value: string;
189  label: string;
190  href?: string;
191  danger?: boolean;
192}
193
194// What a row offers: one action inline (Retry while Cloudflare has not caught up, else Renew),
195// and the rest in its Actions menu. A person the viewer may not manage gets neither.
196export function rowActions(
197  p: Pick<PersonRow, "manageable" | "status" | "sync" | "renewTo">,
198  canChangeTitle: boolean,
199  changeHref: string,
200  historyHref: string,
201): { primary: { intent: string; label: string } | null; items: RowAction[] } {
202  if (!p.manageable) return { primary: null, items: [] };
203  const renew = p.status !== "removed" && p.renewTo ? { intent: "renew", label: `Renew to ${dayText(p.renewTo)}` } : null;
204  const retry = p.sync !== "ready" ? { intent: "retry", label: "Retry" } : null;
205  const primary = retry ?? renew;
206  const items: RowAction[] = [];
207  if (renew && primary !== renew) items.push({ value: renew.intent, label: renew.label });
208  if (p.status === "active" && canChangeTitle) items.push({ value: "change", label: "Change title", href: changeHref });
209  items.push({ value: "history", label: "History", href: historyHref });
210  if (p.status !== "removed") items.push({ value: "remove", label: "Remove", danger: true });
211  return { primary, items };
212}
213
214// Moves the add form's end date to the chosen title's default: its value and its latest
215// allowed date, or hides the field for a title that does not expire.
216export function followTitle(form: HTMLFormElement): void {
217  const select = form.querySelector<HTMLSelectElement>("select[name='title']");
218  const end = form.querySelector<HTMLInputElement>("input[name='end_date']");
219  const field = end?.closest<HTMLElement>(".cap-field");
220  const help = field?.querySelector<HTMLElement>("[data-cap-part='end-help']");
221  if (!select || !end || !field) return;
222  const option = select.selectedOptions[0];
223  const fallback = option?.dataset.end ?? "";
224  if (!fallback) {
225    field.hidden = true;
226    end.disabled = true;
227    end.value = "";
228    end.removeAttribute("max");
229  } else {
230    field.hidden = false;
231    end.disabled = false;
232    end.max = fallback;
233    if (!end.value || end.value > fallback) end.value = fallback;
234  }
235  if (help) help.textContent = endHelp(fallback || null);
236}
237
238// Counts the review's answers into its tally line.
239export function updateTally(form: HTMLFormElement): void {
240  const tally = form.querySelector<HTMLElement>("[data-cap-part='tally']");
241  if (!tally) return;
242  let keep = 0;
243  let remove = 0;
244  let open = 0;
245  for (const set of form.querySelectorAll<HTMLFieldSetElement>("fieldset.cap-people-review-item")) {
246    const chosen = set.querySelector<HTMLInputElement>("input[type='radio']:checked");
247    if (!chosen) open++;
248    else if (chosen.value === "remove") remove++;
249    else keep++;
250  }
251  tally.textContent = tallyText(keep, remove, open);
252}
253
254// Attaches to every [data-cap="people-roles"] under root that is not attached yet. Returns a
255// function that detaches them all.
256export function enhance(root: ParentNode = document): () => void {
257  const undo: Array<() => void> = [];
258  for (const el of root.querySelectorAll<HTMLElement>("[data-cap='people-roles']:not([data-cap-ready])")) {
259    el.dataset.capReady = "";
260    // The add and change-title forms check their own fields (a required reason, an email).
261    const fieldsOff = enhanceFields(el);
262    // Each row's Actions menu: Esc, the arrow keys, closing on a press outside.
263    const menusOff = enhanceMenus(el);
264    for (const form of el.querySelectorAll<HTMLFormElement>("form.cap-people-add")) followTitle(form);
265    for (const form of el.querySelectorAll<HTMLFormElement>("form.cap-people-review")) updateTally(form);
266
267    const onSubmit = (e: SubmitEvent) => {
268      const by = e.submitter as HTMLButtonElement | null;
269      if (by?.name !== "intent" || by.value !== "remove") return;
270      e.preventDefault();
271      void confirmRemove(e.target as HTMLFormElement);
272    };
273    const onChange = (e: Event) => {
274      const input = e.target as HTMLElement;
275      const add = input.closest<HTMLFormElement>("form.cap-people-add");
276      if (add && input.matches("select[name='title']")) followTitle(add);
277      const review = input.closest<HTMLFormElement>("form.cap-people-review");
278      if (review) updateTally(review);
279    };
280    el.addEventListener("submit", onSubmit);
281    el.addEventListener("change", onChange);
282    undo.push(() => {
283      el.removeEventListener("submit", onSubmit);
284      el.removeEventListener("change", onChange);
285      fieldsOff();
286      menusOff();
287      delete el.dataset.capReady;
288    });
289  }
290  return () => undo.forEach((f) => f());
291}