@plone-collective/volto-identity 1.0.0-alpha.1

package/src/components/ControlPanel/ClientsPanel.test.tsx

@@ -0,0 +1,267 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import React from 'react';
+
+import ClientsPanel from './ClientsPanel';
+import type { OAuthClient, SigningKeyRing } from '../../types';
+
+const CLIENT: OAuthClient = {
+  '@id': '/@identity-clients/app',
+  client_id: 'app',
+  title: 'Example App',
+  redirect_uris: ['https://app.example.org/cb'],
+  grant_types: ['authorization_code'],
+  scope: ['openid', 'profile'],
+  auth_method: 'client_secret_post',
+  public: false,
+  enabled: true,
+  service_user: '',
+};
+
+const PUBLIC_CLIENT: OAuthClient = {
+  ...CLIENT,
+  '@id': '/@identity-clients/spa',
+  client_id: 'spa',
+  title: 'Single Page App',
+  auth_method: 'none',
+  public: true,
+};
+
+const KEYS: SigningKeyRing = {
+  '@id': '/@identity-keys',
+  algorithm: 'RS256',
+  ring_size: 3,
+  jwks_uri: 'https://id.example.org/@@oauth-jwks',
+  items_total: 2,
+  items: [
+    { kid: 'newest-kid', active: true },
+    { kid: 'older-kid', active: false },
+  ],
+};
+
+/**
+ * The `add` and `edit` views are not rendered here: they are Volto's `Form`,
+ * which needs a store and a router this renderer does not provide. What they
+ * put on the wire is `helpers/clientSchema`'s own test, and how they look is
+ * the stories'.
+ */
+function renderPanel(
+  props: Partial<React.ComponentProps<typeof ClientsPanel>> = {},
+) {
+  const handlers = {
+    onSubmit: vi.fn(),
+    onCancel: vi.fn(),
+    onEdit: vi.fn(),
+    onRotateSecret: vi.fn(),
+    onDelete: vi.fn(),
+    onRotateKey: vi.fn(),
+    onDismissSecret: vi.fn(),
+  };
+  render(
+    <ClientsPanel
+      clients={[CLIENT]}
+      keys={KEYS}
+      loading={false}
+      busy={false}
+      minted={null}
+      view="list"
+      editing={null}
+      formRef={React.createRef()}
+      {...handlers}
+      {...props}
+    />,
+  );
+  return handlers;
+}
+
+/** Accept the delete confirmation without a real dialog. */
+/**
+ * Answer the confirmation dialog.
+ *
+ * These used to stub `window.confirm`, which is the tell that the panel was
+ * asking with a browser dialog: a test had to reach past the component to a
+ * global to get at the code behind it. The question is part of the page now,
+ * so answering it is a click.
+ *
+ * @param answer Whether to go through with it.
+ */
+function answerConfirmation(answer: boolean) {
+  const action = answer ? 'confirm' : 'cancel';
+  // Queried off the document rather than the render container: the dialog is
+  // a portal, so it is mounted beside the panel rather than inside it.
+  const button = document.querySelector(`[data-action="${action}"]`);
+  fireEvent.click(button!);
+}
+
+/**
+ * Whether the confirmation is on screen.
+ *
+ * @returns Whether the dialog is mounted.
+ */
+function asking(): boolean {
+  return Boolean(document.querySelector('[data-action="confirm"]'));
+}
+
+describe('ClientsPanel', () => {
+  it('lists the registered clients', () => {
+    renderPanel();
+
+    expect(screen.getByText('Example App')).toBeTruthy();
+    expect(screen.getByText('app')).toBeTruthy();
+  });
+
+  it('says nothing is registered when nothing is', () => {
+    renderPanel({ clients: [] });
+
+    expect(screen.getByText(/No clients are registered/)).toBeTruthy();
+  });
+
+  it('shows a loading state', () => {
+    renderPanel({ loading: true });
+
+    expect(screen.getByRole('status').textContent).toContain('Loading clients');
+  });
+
+  it('distinguishes a public client from a confidential one', () => {
+    renderPanel({ clients: [CLIENT, PUBLIC_CLIENT] });
+
+    expect(screen.getByText(/Public \(PKCE required\)/)).toBeTruthy();
+    expect(screen.getByText('Confidential')).toBeTruthy();
+  });
+
+  it('shows what a client may do, not only what it is called', () => {
+    renderPanel();
+
+    expect(screen.getByText('authorization_code')).toBeTruthy();
+    // Comma-separated, the way the grants beside them read. The record holds
+    // a list now, and rendering it straight would run the scopes together.
+    expect(screen.getByText('openid, profile')).toBeTruthy();
+  });
+
+  it('opens the edit form for a client', () => {
+    const { onEdit } = renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit' }));
+
+    expect(onEdit).toHaveBeenCalledWith('app');
+  });
+
+  it('offers no secret rotation for a public client', () => {
+    renderPanel({ clients: [PUBLIC_CLIENT] });
+
+    expect(screen.queryByRole('button', { name: 'Rotate secret' })).toBeNull();
+  });
+
+  it('rotates a confidential client secret', () => {
+    const { onRotateSecret } = renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Rotate secret' }));
+
+    expect(onRotateSecret).toHaveBeenCalledWith('app');
+  });
+
+  it('warns that disabling also refuses existing tokens', () => {
+    renderPanel({ clients: [{ ...CLIENT, enabled: false }] });
+
+    expect(screen.getByText(/existing access tokens are refused/)).toBeTruthy();
+  });
+
+  it('asks before unregistering rather than doing it', () => {
+    const { onDelete } = renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Unregister' }));
+
+    expect(asking()).toBe(true);
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  it('unregisters a client once it is confirmed', () => {
+    const { onDelete } = renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Unregister' }));
+    answerConfirmation(true);
+
+    expect(onDelete).toHaveBeenCalledWith('app');
+  });
+
+  it('unregisters nothing when the confirmation is declined', () => {
+    const { onDelete } = renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Unregister' }));
+    answerConfirmation(false);
+
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  it('shows a freshly minted secret over the listing', () => {
+    renderPanel({ minted: { ...CLIENT, secret: 's3cr3t' } });
+
+    expect(screen.getByRole('alertdialog')).toBeTruthy();
+    expect(screen.getByDisplayValue('s3cr3t')).toBeTruthy();
+  });
+
+  it('shows no secret when none was minted', () => {
+    renderPanel();
+
+    expect(screen.queryByRole('alertdialog')).toBeNull();
+  });
+
+  it('disables every action while a request is in flight', () => {
+    renderPanel({ busy: true });
+
+    expect(
+      (screen.getByRole('button', { name: 'Unregister' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+
+  it('keeps the key ring out of the listing', () => {
+    renderPanel();
+
+    expect(screen.queryByText('newest-kid')).toBeNull();
+  });
+
+  it('describes the signing ring without any key material', () => {
+    renderPanel({ view: 'keys' });
+
+    expect(screen.getByText('newest-kid')).toBeTruthy();
+    expect(screen.getByText(/2 of 3 in the ring/)).toBeTruthy();
+  });
+
+  it('says which key is signing', () => {
+    renderPanel({ view: 'keys' });
+
+    expect(screen.getByText(/— signing/)).toBeTruthy();
+    expect(screen.getByText(/verifying only/)).toBeTruthy();
+  });
+
+  it('warns what rotating past the ring bound costs', () => {
+    renderPanel({ view: 'keys' });
+
+    expect(
+      screen.getByText(/invalidate tokens\s+still in flight/),
+    ).toBeTruthy();
+  });
+
+  it('rotates the signing key', () => {
+    const { onRotateKey } = renderPanel({ view: 'keys' });
+
+    fireEvent.click(screen.getByText('Rotate signing key'));
+
+    expect(onRotateKey).toHaveBeenCalled();
+  });
+
+  it('does not render the key section before it has loaded', () => {
+    renderPanel({ view: 'keys', keys: null });
+
+    expect(screen.getByText(/Loading keys/)).toBeTruthy();
+  });
+
+  it('does not offer a rotation while one is in flight', () => {
+    renderPanel({ view: 'keys', busy: true });
+
+    expect(
+      (screen.getByText('Rotate signing key') as HTMLButtonElement).disabled,
+    ).toBe(true);
+  });
+});

package/src/components/ControlPanel/ClientsPanel.tsx

@@ -0,0 +1,386 @@
+/**
+ * The OAuth client control panel, without store or routing.
+ *
+ * Shaped after the providers panel, which is itself shaped after Volto's
+ * own: a table of what exists, the add and save actions in the toolbar
+ * rather than inline, and the form rendered by Volto's `Form` from a schema.
+ * Nothing here lays out an input.
+ *
+ * Which of the three views is on screen is the container's decision, because
+ * the toolbar buttons that switch between them live there. This renders the
+ * one it is given.
+ * @module components/ControlPanel/ClientsPanel
+ */
+import React from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Button, Segment, Table } from 'semantic-ui-react';
+
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Form } from '@plone/volto/components/manage/Form';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import pencilSVG from '@plone/volto/icons/pencil.svg';
+import refreshSVG from '@plone/volto/icons/refresh.svg';
+
+import { clientSchema, toFormData } from '../../helpers/clientSchema';
+import type { JsonSchema, OAuthClient, SigningKeyRing } from '../../types';
+import SecretReveal from './SecretReveal';
+
+import './ClientsPanel.scss';
+import ConfirmModal from './ConfirmModal';
+
+const messages = defineMessages({
+  loading: { id: 'Loading clients', defaultMessage: 'Loading clients…' },
+  registered: {
+    id: 'Registered clients',
+    defaultMessage: 'Registered clients',
+  },
+  type: { id: 'Type', defaultMessage: 'Type' },
+  publicClient: {
+    id: 'Public (PKCE required)',
+    defaultMessage: 'Public (PKCE required)',
+  },
+  confidential: { id: 'Confidential', defaultMessage: 'Confidential' },
+  grants: { id: 'Grants', defaultMessage: 'Grants' },
+  scope: { id: 'Scope', defaultMessage: 'Scope' },
+  edit: { id: 'Edit', defaultMessage: 'Edit' },
+  rotateSecret: { id: 'Rotate secret', defaultMessage: 'Rotate secret' },
+  unregister: { id: 'Unregister', defaultMessage: 'Unregister' },
+  confirmDelete: {
+    id: 'Unregister this client?',
+    defaultMessage:
+      'Unregister this client? Every token already minted for it stops ' +
+      'being accepted at once.',
+  },
+  noClients: {
+    id: 'No clients are registered yet.',
+    defaultMessage: 'No clients are registered yet.',
+  },
+  add: { id: 'Register a client', defaultMessage: 'Register a client' },
+  columnTitle: { id: 'Title', defaultMessage: 'Title' },
+  columnId: { id: 'Client ID', defaultMessage: 'Client ID' },
+  columnEnabled: { id: 'Enabled', defaultMessage: 'Enabled' },
+  columnActions: { id: 'Actions', defaultMessage: 'Actions' },
+  yes: { id: 'Yes', defaultMessage: 'Yes' },
+  no: { id: 'No', defaultMessage: 'No' },
+  disabledNotice: {
+    id: 'Disabled. Its existing access tokens are refused as well.',
+    defaultMessage:
+      'Disabled. Its existing access tokens are refused as well: the ' +
+      'audience is checked against this registry on every request.',
+  },
+  signingKeys: { id: 'Signing keys', defaultMessage: 'Signing keys' },
+  ring: {
+    id: '{total} of {size} in the ring, signing with {algorithm}.',
+    defaultMessage:
+      '{total} of {size} in the ring, signing with {algorithm}. Public keys ' +
+      'are published at {jwks}.',
+  },
+  signing: { id: 'signing', defaultMessage: 'signing' },
+  verifyingOnly: {
+    id: 'verifying only',
+    defaultMessage: 'verifying only',
+  },
+  rotateKey: {
+    id: 'Rotate signing key',
+    defaultMessage: 'Rotate signing key',
+  },
+  ringWarning: {
+    id: 'Older keys stay in the ring so tokens already issued keep verifying.',
+    defaultMessage:
+      'Older keys stay in the ring so tokens already issued keep verifying. ' +
+      'The ring holds {size}; rotating more than that within one ' +
+      'access-token lifetime will invalidate tokens still in flight.',
+  },
+  loadingKeys: { id: 'Loading keys', defaultMessage: 'Loading keys…' },
+});
+
+/** Which of the panel's three views is on screen. */
+export type ClientsView = 'list' | 'add' | 'edit' | 'keys';
+
+interface ClientsPanelProps {
+  clients: OAuthClient[];
+  /**
+   * The form's schema, as the backend serialized it from `IClientRecords`.
+   *
+   * Optional so a page talking to a backend that predates it, or one whose
+   * request failed, renders an empty form rather than crashing on
+   * `schema.fieldsets`.
+   */
+  schema?: JsonSchema;
+  keys: SigningKeyRing | null;
+  loading: boolean;
+  busy: boolean;
+  /** The client whose secret was just minted, if any. */
+  minted: OAuthClient | null;
+  view: ClientsView;
+  /** The client being edited, when the view is `edit`. */
+  editing: string | null;
+  /** Handed to `Form`, so the toolbar's Save can submit it. */
+  formRef: React.RefObject<any>;
+  /** A failed request, rendered by `Form` above the fields. */
+  error?: unknown;
+  onSubmit: (data: Record<string, unknown>) => void;
+  onCancel: () => void;
+  onEdit: (clientId: string) => void;
+  onRotateSecret: (clientId: string) => void;
+  onDelete: (clientId: string) => void;
+  onRotateKey: () => void;
+  onDismissSecret: () => void;
+}
+
+/** What a cell shows when the client has nothing for that column. */
+const NOTHING = '—';
+
+const ClientsPanel: React.FC<ClientsPanelProps> = ({
+  clients,
+  schema,
+  keys,
+  loading,
+  busy,
+  minted,
+  view,
+  editing,
+  formRef,
+  error,
+  onSubmit,
+  onCancel,
+  onEdit,
+  onRotateSecret,
+  onDelete,
+  onRotateKey,
+  onDismissSecret,
+}) => {
+  const intl = useIntl();
+  const current = editing
+    ? clients.find((client) => client.client_id === editing)
+    : undefined;
+  const adding = view === 'add';
+
+  const [confirming, setConfirming] = React.useState<string | null>(null);
+
+  const confirmDelete = (clientId: string) => {
+    setConfirming(clientId);
+  };
+
+  const onConfirmDelete = () => {
+    const clientId = confirming;
+    setConfirming(null);
+    if (!clientId) {
+      return;
+    }
+    onDelete(clientId);
+  };
+
+  const modal = (
+    <ConfirmModal
+      open={confirming !== null}
+      header={confirming ?? ''}
+      content={intl.formatMessage(messages.confirmDelete)}
+      onCancel={() => setConfirming(null)}
+      onConfirm={onConfirmDelete}
+    />
+  );
+
+  if (view === 'keys') {
+    return (
+      <Segment.Group raised className="identity-clients">
+        {modal}
+        <Segment className="primary">
+          {intl.formatMessage(messages.signingKeys)}
+        </Segment>
+        <Segment className="identity-clients__keys">
+          {keys ? (
+            <>
+              <p>
+                <FormattedMessage
+                  {...messages.ring}
+                  values={{
+                    total: keys.items_total,
+                    size: keys.ring_size,
+                    algorithm: keys.algorithm,
+                    jwks: <a href={keys.jwks_uri}>{keys.jwks_uri}</a>,
+                  }}
+                />
+              </p>
+              <ul>
+                {keys.items.map((key) => (
+                  <li key={key.kid} data-kid={key.kid}>
+                    <code>{key.kid}</code>
+                    {key.active ? (
+                      <strong> — {intl.formatMessage(messages.signing)}</strong>
+                    ) : (
+                      ` — ${intl.formatMessage(messages.verifyingOnly)}`
+                    )}
+                  </li>
+                ))}
+              </ul>
+              <button
+                type="button"
+                className="identity-button"
+                disabled={busy}
+                onClick={onRotateKey}
+              >
+                {intl.formatMessage(messages.rotateKey)}
+              </button>
+              <p className="identity-clients__keys-warning identity-note">
+                {intl.formatMessage(messages.ringWarning, {
+                  size: keys.ring_size,
+                })}
+              </p>
+            </>
+          ) : (
+            <p role="status">{intl.formatMessage(messages.loadingKeys)}</p>
+          )}
+        </Segment>
+      </Segment.Group>
+    );
+  }
+
+  if (view === 'add' || view === 'edit') {
+    return (
+      <Form
+        ref={formRef}
+        // An add form and an edit form ask for different fields, and `Form`
+        // seeds an add form's defaults in its constructor -- once, from the
+        // schema it mounted with. Keyed so switching between them remounts
+        // rather than carrying the previous form's state into the next.
+        key={adding ? 'add' : editing ?? 'edit'}
+        title={
+          adding
+            ? intl.formatMessage(messages.add)
+            : current?.title || current?.client_id
+        }
+        schema={clientSchema(schema, adding, intl)}
+        formData={toFormData(adding ? undefined : current)}
+        requestError={error}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        hideActions
+      />
+    );
+  }
+
+  return (
+    <Segment.Group raised className="identity-clients">
+      {modal}
+      <Segment className="primary">
+        {intl.formatMessage(messages.registered)}
+      </Segment>
+      <Segment>
+        {minted ? (
+          <SecretReveal client={minted} onDismiss={onDismissSecret} />
+        ) : null}
+        {loading ? (
+          <p role="status">{intl.formatMessage(messages.loading)}</p>
+        ) : clients.length ? (
+          <Table selectable compact>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  {intl.formatMessage(messages.columnTitle)}
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  {intl.formatMessage(messages.columnId)}
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  {intl.formatMessage(messages.type)}
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  {intl.formatMessage(messages.grants)}
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  {intl.formatMessage(messages.scope)}
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  {intl.formatMessage(messages.columnEnabled)}
+                </Table.HeaderCell>
+                <Table.HeaderCell textAlign="right">
+                  {intl.formatMessage(messages.columnActions)}
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {clients.map((client) => (
+                <Table.Row key={client['@id']} data-client={client.client_id}>
+                  <Table.Cell>
+                    {client.title || client.client_id}
+                    {client.enabled ? null : (
+                      <p
+                        className="identity-clients__disabled identity-note"
+                        role="status"
+                      >
+                        {intl.formatMessage(messages.disabledNotice)}
+                      </p>
+                    )}
+                  </Table.Cell>
+                  <Table.Cell>
+                    <code>{client.client_id}</code>
+                  </Table.Cell>
+                  <Table.Cell>
+                    {intl.formatMessage(
+                      client.public
+                        ? messages.publicClient
+                        : messages.confidential,
+                    )}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {client.grant_types.join(', ') || NOTHING}
+                  </Table.Cell>
+                  <Table.Cell>{client.scope.join(', ') || NOTHING}</Table.Cell>
+                  <Table.Cell>
+                    {intl.formatMessage(
+                      client.enabled ? messages.yes : messages.no,
+                    )}
+                  </Table.Cell>
+                  <Table.Cell textAlign="right">
+                    <Button
+                      basic
+                      icon
+                      disabled={busy}
+                      aria-label={intl.formatMessage(messages.edit)}
+                      title={intl.formatMessage(messages.edit)}
+                      onClick={() => onEdit(client.client_id)}
+                    >
+                      <Icon name={pencilSVG} size="20px" />
+                    </Button>
+                    {/* A public client has no secret to rotate: PKCE is
+                        what stands in for one. */}
+                    {client.public ? null : (
+                      <Button
+                        basic
+                        icon
+                        disabled={busy}
+                        aria-label={intl.formatMessage(messages.rotateSecret)}
+                        title={intl.formatMessage(messages.rotateSecret)}
+                        onClick={() => onRotateSecret(client.client_id)}
+                      >
+                        <Icon name={refreshSVG} size="20px" />
+                      </Button>
+                    )}
+                    <Button
+                      basic
+                      icon
+                      data-action="delete"
+                      disabled={busy}
+                      aria-label={intl.formatMessage(messages.unregister)}
+                      title={intl.formatMessage(messages.unregister)}
+                      onClick={() => confirmDelete(client.client_id)}
+                    >
+                      <Icon name={deleteSVG} size="20px" />
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        ) : (
+          <p className="identity-clients__empty identity-note">
+            {intl.formatMessage(messages.noClients)}
+          </p>
+        )}
+      </Segment>
+    </Segment.Group>
+  );
+};
+
+export default ClientsPanel;

package/src/components/ControlPanel/ConfirmModal.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ConfirmModal from './ConfirmModal';
+
+const meta: Meta<typeof ConfirmModal> = {
+  title: 'Identity/ControlPanel/ConfirmModal',
+  component: ConfirmModal,
+  args: {
+    open: true,
+    header: 'GitHub',
+    content:
+      'Deleting this provider removes its configuration. The identities ' +
+      'linked through it are account data and are kept.',
+    onCancel: () => {},
+    onConfirm: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ConfirmModal>;
+
+/** Deleting a provider, which is what this replaced a browser dialog for. */
+export const Delete: Story = {};
+
+/** A different verb, for an action that is destructive but is not a delete. */
+export const Withdraw: Story = {
+  args: {
+    header: 'Example App',
+    content: 'Example App will no longer have access to your account.',
+    confirmLabel: 'Withdraw access',
+  },
+};
+
+/** Not being asked. */
+export const Closed: Story = { args: { open: false } };