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

package/src/components/Consent/ConsentPanel.tsx

@@ -0,0 +1,162 @@
+/**
+ * The consent screen, without any store or routing in it.
+ *
+ * A relying party sent this browser here to be asked something personal, and
+ * the whole value of asking it *here* rather than on a standalone page is
+ * that it looks like the site the person believes they are signing in to. So
+ * this is ordinary site markup, in the same panel the login page uses.
+ *
+ * Two things it says that the protocol does not require, and both are the
+ * reason the screen exists:
+ *
+ * - **who would be agreeing.** The browser may hold a session the user forgot
+ *   about, and agreeing on behalf of the wrong account is the mistake this
+ *   screen is there to make visible.
+ *
+ * - **what each scope actually releases.** "profile" means nothing to the
+ *   person being asked; "your name, username, website, picture and bio" is
+ *   the real question. The backend sends the claim list, and a scope it does
+ *   not recognise says so rather than being quietly dropped.
+ * @module components/Consent/ConsentPanel
+ */
+import React from 'react';
+import { Container } from '@plone/components';
+import { defineMessages, useIntl } from 'react-intl';
+
+import type { ConsentRequest } from '../../types';
+
+import './ConsentPanel.scss';
+
+const messages = defineMessages({
+  loading: {
+    id: 'Loading the request',
+    defaultMessage: 'Loading the request…',
+  },
+  heading: {
+    id: 'Allow {client} to use your account?',
+    defaultMessage: 'Allow {client} to use your account?',
+  },
+  signedInAs: {
+    id: 'You are signed in as {user}.',
+    defaultMessage: 'You are signed in as {user}.',
+  },
+  willBeAbleTo: {
+    id: 'It will be able to read:',
+    defaultMessage: 'It will be able to read:',
+  },
+  nothingInParticular: {
+    id: 'nothing beyond the fact that you signed in',
+    defaultMessage: 'nothing beyond the fact that you signed in',
+  },
+  allow: { id: 'Allow', defaultMessage: 'Allow' },
+  deny: { id: 'Deny', defaultMessage: 'Deny' },
+  unavailable: {
+    id: 'This authorization request cannot be shown.',
+    defaultMessage:
+      'This authorization request cannot be shown. It may have been sent by ' +
+      'an application this site does not know, or it may have expired — ' +
+      'start again from the application you were signing in to.',
+  },
+});
+
+interface ConsentPanelProps {
+  /** The request being asked about, once it has loaded. */
+  request: ConsentRequest | null;
+  loading: boolean;
+  /** Whether describing the request failed. */
+  error?: unknown;
+  /** Whether an answer is on its way and the browser is leaving. */
+  answering: boolean;
+  onAnswer: (allow: boolean) => void;
+}
+
+const ConsentPanel: React.FC<ConsentPanelProps> = ({
+  request,
+  loading,
+  error,
+  answering,
+  onAnswer,
+}) => {
+  const intl = useIntl();
+
+  if (loading || (!request && !error)) {
+    return (
+      <Container className="identity-consent" role="status">
+        {intl.formatMessage(messages.loading)}
+      </Container>
+    );
+  }
+
+  if (!request) {
+    // No buttons. There is nothing to agree to, and an "Allow" here would be
+    // agreeing to something this page could not describe.
+    return (
+      <Container className="identity-consent">
+        <p className="identity-error" role="alert">
+          {intl.formatMessage(messages.unavailable)}
+        </p>
+      </Container>
+    );
+  }
+
+  // Every claim the request would release, deduplicated across scopes: a
+  // reader wants the list of things, not the list of scopes that happen to
+  // contain them.
+  const claims = Array.from(
+    new Set(request.scopes.flatMap((scope) => scope.claims)),
+  );
+
+  return (
+    <Container className="identity-consent">
+      <h1>
+        {intl.formatMessage(messages.heading, {
+          client: request.client.title,
+        })}
+      </h1>
+      <p className="identity-consent__who identity-note">
+        {intl.formatMessage(messages.signedInAs, {
+          user: request.user.label,
+        })}
+      </p>
+
+      <p>{intl.formatMessage(messages.willBeAbleTo)}</p>
+      {claims.length ? (
+        <ul className="identity-consent__claims">
+          {claims.map((claim) => (
+            <li key={claim}>
+              <code>{claim}</code>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="identity-note">
+          {intl.formatMessage(messages.nothingInParticular)}
+        </p>
+      )}
+
+      <div className="identity-consent__actions">
+        {/* Deny first in the DOM would put it first for a keyboard, and
+            first is where a hurried Enter lands. Allow is the affirmative
+            answer, so it is the one that has to be chosen. */}
+        <button
+          type="button"
+          className="identity-button identity-button--primary"
+          disabled={answering}
+          onClick={() => onAnswer(true)}
+        >
+          {intl.formatMessage(messages.allow)}
+        </button>
+        <button
+          type="button"
+          className="identity-button"
+          disabled={answering}
+          onClick={() => onAnswer(false)}
+        >
+          {intl.formatMessage(messages.deny)}
+        </button>
+      </div>
+    </Container>
+  );
+};
+
+export default ConsentPanel;

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ClientsControlPanel from './ClientsControlPanel';
+import {
+  CLIENTS,
+  KEYRING,
+  LOADED,
+  LOADING,
+  withStore,
+} from '../../stories/fixtures';
+
+const meta: Meta<typeof ClientsControlPanel> = {
+  title: 'Identity/ControlPanel/ClientsControlPanel',
+  component: ClientsControlPanel,
+};
+export default meta;
+
+type Story = StoryObj<typeof ClientsControlPanel>;
+
+const base = {
+  oauthClients: { ...LOADED, data: CLIENTS },
+  signingKeys: { ...LOADED, data: KEYRING },
+  clientCreate: {},
+  clientUpdate: {},
+  clientDelete: {},
+  clientSecretRotate: {},
+  keyRotate: {},
+};
+
+export const Default: Story = { decorators: [withStore(base)] };
+
+export const Loading: Story = {
+  decorators: [withStore({ ...base, oauthClients: { ...LOADING, data: [] } })],
+};
+
+export const RotatingAKey: Story = {
+  decorators: [withStore({ ...base, keyRotate: LOADING })],
+};

package/src/components/ControlPanel/ClientsControlPanel.tsx

@@ -0,0 +1,321 @@
+/**
+ * Control-panel container: store, dispatch, and page chrome around the
+ * clients panel.
+ *
+ * The chrome is the providers panel's chrome, which is Volto's own: a
+ * centred container, and a toolbar carrying the actions that switch what the
+ * page shows -- the signing keys, a registration form, and the way back to
+ * the control-panel listing. Which view is on is decided here rather than in
+ * the panel, because those buttons live here.
+ * @module components/ControlPanel/ClientsControlPanel
+ */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createPortal } from 'react-dom';
+import { Link, useLocation } from 'react-router-dom';
+import { Button, Container } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { toast } from 'react-toastify';
+
+import { Helmet } from '@plone/volto/helpers/Helmet/Helmet';
+import { useClient } from '@plone/volto/hooks/client/useClient';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import addSVG from '@plone/volto/icons/add.svg';
+import backSVG from '@plone/volto/icons/back.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import keySVG from '@plone/volto/icons/key.svg';
+import saveSVG from '@plone/volto/icons/save.svg';
+
+import {
+  createClient,
+  deleteClient,
+  listClients,
+  listKeys,
+  rotateClientSecret,
+  rotateKey,
+  updateClient,
+} from '../../actions';
+import { fromFormData } from '../../helpers/clientSchema';
+import ClientsPanel from './ClientsPanel';
+import type { ClientsView } from './ClientsPanel';
+import type { OAuthClient } from '../../types';
+
+const messages = defineMessages({
+  // The configlet's own title, so the page, the browser tab and the entry in
+  // the control-panel listing all say the same thing.
+  title: { id: 'OAuth clients', defaultMessage: 'OAuth clients' },
+  back: { id: 'Back', defaultMessage: 'Back' },
+  add: { id: 'Register a client', defaultMessage: 'Register a client' },
+  keys: { id: 'Signing keys', defaultMessage: 'Signing keys' },
+  save: { id: 'Save', defaultMessage: 'Save' },
+  cancel: { id: 'Cancel', defaultMessage: 'Cancel' },
+  saved: { id: 'Changes saved', defaultMessage: 'Changes saved' },
+  deleted: { id: 'Client unregistered', defaultMessage: 'Client unregistered' },
+  rotated: { id: 'Signing key rotated', defaultMessage: 'Signing key rotated' },
+  error: { id: 'Error', defaultMessage: 'Error' },
+});
+
+const ClientsControlPanel: React.FC = () => {
+  const intl = useIntl();
+  const isClient = useClient();
+  const { pathname } = useLocation();
+  const dispatch = useDispatch();
+  const formRef = useRef<any>(null);
+
+  const [view, setView] = useState<ClientsView>('list');
+  const [editing, setEditing] = useState<string | null>(null);
+  const [error, setError] = useState<unknown>(null);
+  // Held here rather than read from the store on every render: the secret
+  // must survive the re-listing that follows a create, and it must disappear
+  // when the operator says they have saved it rather than when some other
+  // request happens to resolve.
+  const [minted, setMinted] = useState<OAuthClient | null>(null);
+
+  const clients = useSelector((state: any) => state.oauthClients);
+  const keys = useSelector((state: any) => state.signingKeys);
+  // Served beside the listing, from the interface the client's own storage is
+  // described by, so the form and the records cannot say different things.
+  const clientFormSchema = useSelector(
+    (state: any) => state.clientFormSchema?.data,
+  );
+  const created = useSelector((state: any) => state.clientCreate);
+  const rotated = useSelector((state: any) => state.clientSecretRotate);
+  const updated = useSelector((state: any) => state.clientUpdate);
+  const removed = useSelector((state: any) => state.clientDelete);
+  const keyRotated = useSelector((state: any) => state.keyRotate);
+
+  useEffect(() => {
+    dispatch(listClients());
+    dispatch(listKeys());
+  }, [dispatch]);
+
+  useEffect(() => {
+    const answer = created?.loaded ? created.data : null;
+    if (answer?.secret) {
+      setMinted(answer);
+    }
+  }, [created?.loaded, created?.data]);
+
+  useEffect(() => {
+    const answer = rotated?.loaded ? rotated.data : null;
+    if (answer?.secret) {
+      setMinted(answer);
+    }
+  }, [rotated?.loaded, rotated?.data]);
+
+  const fail = useCallback(
+    (err: any) => {
+      setError(err);
+      toast.error(
+        <Toast
+          error
+          title={intl.formatMessage(messages.error)}
+          content={err?.response?.body?.error?.message ?? String(err)}
+        />,
+      );
+    },
+    [intl],
+  );
+
+  const closeForm = useCallback(() => {
+    setView('list');
+    setEditing(null);
+    setError(null);
+  }, []);
+
+  const succeed = useCallback(
+    (message: string) => {
+      toast.success(<Toast success title={message} />);
+      closeForm();
+      // Re-read rather than patch the local copy: the listing never carries
+      // the secret, and a locally patched entry would.
+      dispatch(listClients());
+    },
+    [closeForm, dispatch],
+  );
+
+  const onSubmit = useCallback(
+    (data: Record<string, unknown>) => {
+      const adding = view === 'add';
+      const payload = fromFormData(data, adding);
+      const action = adding
+        ? createClient(payload)
+        : updateClient(editing as string, payload);
+      (dispatch(action) as any)
+        .then(() => succeed(intl.formatMessage(messages.saved)))
+        .catch(fail);
+    },
+    [dispatch, editing, fail, intl, succeed, view],
+  );
+
+  const onEdit = useCallback((clientId: string) => {
+    setEditing(clientId);
+    setError(null);
+    setView('edit');
+  }, []);
+
+  const onRotateSecret = useCallback(
+    (clientId: string) => {
+      // No toast: the secret itself is what appears, and a success message
+      // over it would be one more thing between the operator and the only
+      // copy they will ever see.
+      (dispatch(rotateClientSecret(clientId)) as any).catch(fail);
+    },
+    [dispatch, fail],
+  );
+
+  const onDelete = useCallback(
+    (clientId: string) => {
+      (dispatch(deleteClient(clientId)) as any)
+        .then(() => succeed(intl.formatMessage(messages.deleted)))
+        .catch(fail);
+    },
+    [dispatch, fail, intl, succeed],
+  );
+
+  const onRotateKey = useCallback(() => {
+    (dispatch(rotateKey()) as any)
+      .then(() => {
+        toast.success(
+          <Toast success title={intl.formatMessage(messages.rotated)} />,
+        );
+        dispatch(listKeys());
+      })
+      .catch(fail);
+  }, [dispatch, fail, intl]);
+
+  const onDismissSecret = useCallback(() => setMinted(null), []);
+
+  const isForm = view === 'add' || view === 'edit';
+
+  return (
+    <div id="page-controlpanel" className="identity-controlpanel">
+      <Helmet title={intl.formatMessage(messages.title)} />
+      <Container>
+        <ClientsPanel
+          schema={clientFormSchema}
+          clients={clients?.data ?? []}
+          keys={keys?.data ?? null}
+          loading={Boolean(clients?.loading)}
+          busy={Boolean(
+            created?.loading ||
+              updated?.loading ||
+              removed?.loading ||
+              rotated?.loading ||
+              keyRotated?.loading,
+          )}
+          minted={minted}
+          view={view}
+          editing={editing}
+          formRef={formRef}
+          error={error}
+          onSubmit={onSubmit}
+          onCancel={closeForm}
+          onEdit={onEdit}
+          onRotateSecret={onRotateSecret}
+          onDelete={onDelete}
+          onRotateKey={onRotateKey}
+          onDismissSecret={onDismissSecret}
+        />
+      </Container>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              isForm ? (
+                <>
+                  <Button
+                    id="toolbar-save"
+                    className="save"
+                    aria-label={intl.formatMessage(messages.save)}
+                    onClick={() => formRef.current?.onSubmit()}
+                  >
+                    <Icon
+                      name={saveSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.save)}
+                    />
+                  </Button>
+                  <Button
+                    className="cancel"
+                    aria-label={intl.formatMessage(messages.cancel)}
+                    onClick={closeForm}
+                  >
+                    <Icon
+                      name={clearSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.cancel)}
+                    />
+                  </Button>
+                </>
+              ) : view === 'keys' ? (
+                <Button
+                  id="toolbar-back-to-clients"
+                  aria-label={intl.formatMessage(messages.title)}
+                  onClick={() => setView('list')}
+                >
+                  <Icon
+                    name={backSVG}
+                    className="circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.title)}
+                  />
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    id="toolbar-keys"
+                    aria-label={intl.formatMessage(messages.keys)}
+                    onClick={() => setView('keys')}
+                  >
+                    <Icon
+                      name={keySVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.keys)}
+                    />
+                  </Button>
+                  <Button
+                    id="toolbar-add"
+                    aria-label={intl.formatMessage(messages.add)}
+                    onClick={() => {
+                      setEditing(null);
+                      setError(null);
+                      setView('add');
+                    }}
+                  >
+                    <Icon
+                      name={addSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.add)}
+                    />
+                  </Button>
+                  {/* A router link, not an anchor: an `href` here left the
+                      toolbar's back button reloading the whole application
+                      to reach a route Volto already has. */}
+                  <Link className="item" to="/controlpanel">
+                    <Icon
+                      name={backSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.back)}
+                    />
+                  </Link>
+                </>
+              )
+            }
+          />,
+          document.getElementById('toolbar') as HTMLElement,
+        )}
+    </div>
+  );
+};
+
+export default ClientsControlPanel;

package/src/components/ControlPanel/ClientsPanel.scss

@@ -0,0 +1,21 @@
+/**
+ * The OAuth client control panel.
+ *
+ * Almost nothing, for the same reason the providers panel is almost nothing:
+ * the table, the form and the toolbar are Volto's own, and styling them here
+ * is how a control panel stops looking like the others. What is left is the
+ * key ring, which is a list rather than a table.
+ */
+.identity-clients__keys {
+  ul {
+    padding: 0;
+    margin: 0 0 var(--identity-gap);
+    list-style: none;
+  }
+}
+
+.identity-clients__disabled,
+.identity-clients__keys-warning {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import ClientsPanel from './ClientsPanel';
+import {
+  CLIENTS,
+  KEYRING,
+  MINTED_CLIENT,
+  withStore,
+} from '../../stories/fixtures';
+
+const meta: Meta<typeof ClientsPanel> = {
+  title: 'Identity/ControlPanel/ClientsPanel',
+  component: ClientsPanel,
+  args: {
+    clients: CLIENTS,
+    keys: KEYRING,
+    loading: false,
+    busy: false,
+    minted: null,
+    view: 'list',
+    editing: null,
+    formRef: React.createRef(),
+    onSubmit: () => {},
+    onCancel: () => {},
+    onEdit: () => {},
+    onRotateSecret: () => {},
+    onDelete: () => {},
+    onRotateKey: () => {},
+    onDismissSecret: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ClientsPanel>;
+
+/**
+ * Volto's `Form` is a connected component, so the two form views need a
+ * store above them even though this schema asks nothing of it.
+ */
+const withForm = withStore({});
+
+/** Who may log in *to* this site. The add action lives in the toolbar. */
+export const Registered: Story = {};
+
+export const Empty: Story = { args: { clients: [] } };
+
+export const Loading: Story = { args: { loading: true, clients: [] } };
+
+export const Busy: Story = { args: { busy: true } };
+
+/** Straight after registering one: the secret is readable exactly now. */
+export const SecretJustMinted: Story = { args: { minted: MINTED_CLIENT } };
+
+/** The registration form, reached from the toolbar's add button. */
+export const Registering: Story = {
+  args: { view: 'add' },
+  decorators: [withForm],
+};
+
+/** The same form over a stored client, minus what cannot be changed. */
+export const Editing: Story = {
+  args: { view: 'edit', editing: CLIENTS[0].client_id },
+  decorators: [withForm],
+};
+
+/** The ring its tokens are signed with, behind its own toolbar button. */
+export const Keys: Story = { args: { view: 'keys' } };
+
+/** A site whose server layer is installed but has never signed anything. */
+export const NoKeysYet: Story = { args: { view: 'keys', keys: null } };