app/routes/workspace.members.tsx

Functions

Imports

It imports app/lab/actor.server.ts, app/lab/members.server.ts, app/lib/context.ts. No module of this repo imports it.

Source

1import { Form, data } from "react-router";
2import { MANAGE_MEMBERS, can } from "@dustinedwards/site-runtime/members";
3import { Banner } from "capsomer/react/banner";
4import { Button } from "capsomer/react/button";
5import { Field } from "capsomer/react/field";
6import { Panel } from "capsomer/react/panel";
7import { PeopleRoles } from "capsomer/react/people-roles";
8
9import { PageHead } from "capsomer/react/page-head";
10import { labActorContext } from "~/lab/actor.server";
11import { membersAction, membersPage } from "~/lab/members.server";
12import { getEnv } from "~/lib/context";
13import type { Route } from "./+types/workspace.members";
14
15export function meta() {
16  return [{ title: "Members · Lab" }, { name: "robots", content: "noindex" }];
17}
18
19const PRIVATE = { "cache-control": "private, no-store" };
20
21/** A page a person cannot use is a 404, so a Lab worker learns nothing from its address. */
22function requireManager(actor: Parameters<typeof can>[0]) {
23  if (!can(actor, MANAGE_MEMBERS)) throw data("Not found.", { status: 404, headers: PRIVATE });
24}
25
26export async function loader({ context, request }: Route.LoaderArgs) {
27  const actor = context.get(labActorContext);
28  requireManager(actor);
29  const page = await membersPage(getEnv(context), actor, new URL(request.url), Date.now());
30  return data(page, { headers: PRIVATE });
31}
32
33export async function action({ context, request }: Route.ActionArgs) {
34  const actor = context.get(labActorContext);
35  requireManager(actor);
36  const result = await membersAction(getEnv(context), actor, await request.formData(), Date.now());
37  return data(result, { headers: PRIVATE });
38}
39
40export default function LabMembers({ loaderData, actionData }: Route.ComponentProps) {
41  const { people, terms, canEditTerms, syncNotice } = loaderData;
42  const confirm = actionData?.confirm;
43  return (
44    <>
45      <PageHead
46        title="Members"
47        lead="Who may sign in to the lab. Adding a person here puts them on the lab's Cloudflare Access list; removing them takes them off."
48      />
49      {syncNotice ? (
50        <Banner tone="warn" title="Cloudflare Access is not synced">
51          {syncNotice}
52        </Banner>
53      ) : null}
54      {confirm ? (
55        <Panel title={`Remove ${confirm.name}?`}>
56          <p>
57            They are refused on their next request, taken off the lab&apos;s Cloudflare Access list and their seat is freed. Their
58            row stays, marked removed, so their runs and edits keep their name.
59          </p>
60          <Form method="post" reloadDocument>
61            <input type="hidden" name="intent" value="remove" />
62            <input type="hidden" name="email" value={confirm.email} />
63            <input type="hidden" name="confirmed" value="yes" />
64            <Button type="submit" variant="danger">
65              Remove {confirm.name}
66            </Button>{" "}
67            <a className="cap-btn" href="/lab/members">
68              Cancel
69            </a>
70          </Form>
71        </Panel>
72      ) : null}
73      <PeopleRoles data={{ ...people, ...(actionData?.result ? { result: actionData.result } : {}) }} action="/lab/members" closeHref="/lab/members" />
74      {canEditTerms ? (
75        <Panel title="Semester end dates">
76          <Form method="post" reloadDocument>
77            <input type="hidden" name="intent" value="set_terms" />
78            <Field label="End dates" help="YYYY-MM-DD, separated by commas. A Lab worker's or Lab manager's access ends on the first of these after the day they are added or renewed.">
79              <input className="cap-input" name="terms" defaultValue={terms.join(", ")} />
80            </Field>
81            <Button type="submit">Save dates</Button>
82          </Form>
83        </Panel>
84      ) : null}
85    </>
86  );
87}