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

package/src/components/ControlPanel/SecretReveal.tsx

@@ -0,0 +1,105 @@
+/**
+ * The one moment a client secret exists.
+ *
+ * The server stores a scrypt hash and cannot read the secret back, so this is
+ * shown once — at registration or rotation — and never again. That makes it
+ * the one place in this add-on where dismissing a panel loses something
+ * irrecoverable, so it says so plainly and does not close itself.
+ * @module components/ControlPanel/SecretReveal
+ */
+import React, { useState } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import type { OAuthClient } from '../../types';
+
+import './SecretReveal.scss';
+
+const messages = defineMessages({
+  heading: {
+    id: 'Secret for {clientId}',
+    defaultMessage: 'Secret for {clientId}',
+  },
+  notice: {
+    id: 'This is the only time this secret is shown.',
+    defaultMessage:
+      'This is the only time this secret is shown. It is stored hashed and ' +
+      'cannot be read back; if it is lost, rotate it.',
+  },
+  secretFor: {
+    id: 'Client secret for {clientId}',
+    defaultMessage: 'Client secret for {clientId}',
+  },
+  copy: { id: 'Copy', defaultMessage: 'Copy' },
+  copied: { id: 'Copied', defaultMessage: 'Copied' },
+  dismiss: { id: 'I have saved it', defaultMessage: 'I have saved it' },
+});
+
+interface SecretRevealProps {
+  client: OAuthClient;
+  onDismiss: () => void;
+}
+
+const SecretReveal: React.FC<SecretRevealProps> = ({ client, onDismiss }) => {
+  const intl = useIntl();
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(client.secret ?? '');
+      setCopied(true);
+    } catch {
+      // A browser that refuses clipboard access is not an error worth
+      // reporting: the secret is on screen and selectable, which is the
+      // fallback anyway.
+      setCopied(false);
+    }
+  };
+
+  return (
+    <section
+      className="identity-secret"
+      role="alertdialog"
+      aria-labelledby="identity-secret-heading"
+    >
+      <h3 id="identity-secret-heading">
+        <FormattedMessage
+          {...messages.heading}
+          values={{ clientId: <code>{client.client_id}</code> }}
+        />
+      </h3>
+
+      {/* The server's own notice when it sent one: it knows what it did --
+          minted or rotated -- and this does not. */}
+      <p className="identity-secret__notice">
+        {client.notice ?? intl.formatMessage(messages.notice)}
+      </p>
+
+      <div className="identity-secret__value">
+        {/* Read-only rather than plain text so it can be selected and copied
+            with the keyboard by somebody not using a mouse. */}
+        <input
+          type="text"
+          readOnly
+          value={client.secret ?? ''}
+          aria-label={intl.formatMessage(messages.secretFor, {
+            clientId: client.client_id,
+          })}
+          onFocus={(event) => event.currentTarget.select()}
+        />
+        <button type="button" className="identity-button" onClick={copy}>
+          {intl.formatMessage(copied ? messages.copied : messages.copy)}
+        </button>
+      </div>
+
+      <button
+        type="button"
+        className="identity-button identity-secret__dismiss"
+        onClick={onDismiss}
+      >
+        {intl.formatMessage(messages.dismiss)}
+      </button>
+    </section>
+  );
+};
+
+export default SecretReveal;

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import React from 'react';
+
+import UserAccount from './UserAccount';
+import { USER_ACCOUNT_PATH } from '../../config/routes';
+import {
+  FAILED,
+  LOADED,
+  USER_ACCOUNT,
+  withStore,
+} from '../../stories/fixtures';
+
+/**
+ * The page a Manager reaches from the users control panel.
+ *
+ * Rendered at its own route rather than mounted bare: the page reads the
+ * userid off the path, which is the whole reason it is a route and not the
+ * modal it used to be.
+ */
+const atRoute = (Story: () => React.ReactNode) => (
+  <MemoryRouter initialEntries={['/controlpanel/users/erico/account']}>
+    <Route path={USER_ACCOUNT_PATH} render={() => <>{Story()}</>} />
+  </MemoryRouter>
+);
+
+const meta: Meta<typeof UserAccount> = {
+  title: 'Identity/ControlPanel/UserAccount',
+  component: UserAccount,
+  decorators: [atRoute],
+};
+export default meta;
+
+type Story = StoryObj<typeof UserAccount>;
+
+export const Default: Story = {
+  decorators: [withStore({ userAccount: { ...LOADED, data: USER_ACCOUNT } })],
+};
+
+export const Loading: Story = {
+  decorators: [
+    withStore({
+      userAccount: { loading: true, loaded: false, error: null, data: null },
+    }),
+  ],
+};
+
+/**
+ * Arrived from another user's page, before this one's answer is in.
+ *
+ * One slice in the store holds one account, so the previous user is still in
+ * it -- and rendering their identities under this person's name is the one
+ * mistake this page must not make.
+ */
+export const AnotherUserStillInTheStore: Story = {
+  decorators: [
+    withStore({
+      userAccount: {
+        ...LOADED,
+        data: { ...USER_ACCOUNT, userid: 'somebody-else' },
+      },
+    }),
+  ],
+};
+
+/** A Manager without the permission, or a userid that is not there. */
+export const Refused: Story = {
+  decorators: [withStore({ userAccount: { ...FAILED, data: null } })],
+};

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

@@ -0,0 +1,117 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../testing';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import React from 'react';
+
+import UserAccount from './UserAccount';
+import { USER_ACCOUNT_PATH } from '../../config/routes';
+import { USER_ACCOUNT } from '../../stories/fixtures';
+
+// Chrome around the panel rather than anything this test is about, and it
+// reads store slices this page does not own. `vi.mock` is hoisted above the
+// imports, so it takes effect despite sitting below them.
+vi.mock('@plone/volto/components/manage/Toolbar/Toolbar', () => ({
+  default: () => null,
+}));
+
+function renderAt(userid: string, userAccount: any) {
+  const state = { userAccount };
+  const dispatched: any[] = [];
+  const store = {
+    getState: () => state,
+    dispatch: (action: any) => {
+      dispatched.push(action);
+      return action;
+    },
+    subscribe: () => () => {},
+  };
+  render(
+    <Provider store={store as any}>
+      <MemoryRouter initialEntries={[`/controlpanel/users/${userid}/account`]}>
+        <Route path={USER_ACCOUNT_PATH} component={UserAccount} />
+      </MemoryRouter>
+    </Provider>,
+  );
+  return { dispatched };
+}
+
+const LOADED = { loading: false, loaded: true, error: null };
+
+describe('UserAccount', () => {
+  beforeEach(() => {
+    const toolbar = document.createElement('div');
+    toolbar.id = 'toolbar';
+    document.body.appendChild(toolbar);
+  });
+
+  afterEach(() => {
+    document.getElementById('toolbar')?.remove();
+  });
+
+  it('asks for the account named in the route', () => {
+    // The whole point of the route: the page knows who it is about without a
+    // row having fetched them first, which is what makes it linkable.
+    const { dispatched } = renderAt('erico', {
+      ...LOADED,
+      data: USER_ACCOUNT,
+    });
+
+    const paths = dispatched
+      .filter((action) => action?.request?.path)
+      .map((action) => action.request.path);
+    expect(paths.some((path: string) => path.includes('erico'))).toBe(true);
+  });
+
+  it('escapes the userid exactly once on the way back out', () => {
+    // A userid is whatever the provider minted, and this one has to survive
+    // the round trip through a path segment. react-router half decodes the
+    // parameter -- `%20` becomes a space, `%2F` does not -- so handing it
+    // straight to an action that escapes what it is given encodes the `%` a
+    // second time and asks for a userid nobody has.
+    const { dispatched } = renderAt(encodeURIComponent('a b/c'), {
+      ...LOADED,
+      data: null,
+    });
+
+    const paths = dispatched
+      .filter((action) => action?.request?.path)
+      .map((action) => action.request.path);
+    expect(paths).toContain(`/@user-account/${encodeURIComponent('a b/c')}`);
+    expect(paths.some((path: string) => path.includes('%25'))).toBe(false);
+  });
+
+  it('shows the account it was given', () => {
+    renderAt('erico', { ...LOADED, data: USER_ACCOUNT });
+
+    expect(screen.getByRole('tab', { name: 'Sign-in methods' })).toBeTruthy();
+    expect(screen.getByText('GitHub')).toBeTruthy();
+  });
+
+  it('names the person the page is about', () => {
+    renderAt('erico', { ...LOADED, data: USER_ACCOUNT });
+
+    expect(document.body.textContent).toContain('Érico Andrei');
+  });
+
+  it('waits rather than showing the last user that was opened', () => {
+    // One slice in the store holds one account. Arriving from another user's
+    // page leaves their answer in it, and rendering that under this person's
+    // name is the one mistake this page must not make.
+    renderAt('someone-else', { ...LOADED, data: USER_ACCOUNT });
+
+    expect(screen.queryByText('GitHub')).toBeNull();
+    expect(screen.getByRole('status')).toBeTruthy();
+  });
+
+  it('reports a refusal rather than waiting for ever', () => {
+    renderAt('erico', {
+      loading: false,
+      loaded: false,
+      error: { status: 403 },
+      data: null,
+    });
+
+    expect(screen.getByRole('alert')).toBeTruthy();
+  });
+});

package/src/components/ControlPanel/UserAccount.tsx

@@ -0,0 +1,125 @@
+/**
+ * One user's account, as a page in the control panel.
+ *
+ * The store and the routing around `UserAccountPanel`, which is the same
+ * split every other page here uses: the panel renders what it is given, this
+ * decides who it is about and asks for them.
+ *
+ * The userid comes off the route rather than from a row's props, which is the
+ * whole reason this exists. As a modal the panel could only ever be opened
+ * from the row that fetched it -- so it could not be linked to, bookmarked,
+ * opened in a new tab or reached with the back button, and an administrator
+ * comparing two accounts had to close one to open the other.
+ * @module components/ControlPanel/UserAccount
+ */
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useLocation, useParams } from 'react-router-dom';
+import { createPortal } from 'react-dom';
+import { Container, Segment } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+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 backSVG from '@plone/volto/icons/back.svg';
+
+import { getUserAccount } from '../../actions';
+import UserAccountPanel from './UserAccountPanel';
+
+/**
+ * The userid a route match carries, as the userid it names.
+ *
+ * `useParams` hands back a segment react-router has only half decoded: it
+ * turns `%20` into a space but leaves `%2F` alone, since a decoded slash
+ * would no longer be one segment. `getUserAccount` escapes what it is given,
+ * so passing that through unchanged encodes the `%` a second time and asks
+ * the backend for a userid nobody has.
+ *
+ * @param value The raw route parameter.
+ * @returns The userid, or the value unchanged when it is not valid escaping
+ *   -- a userid may legitimately contain a bare `%`, and refusing to render
+ *   the page over it would be worse than asking for it verbatim.
+ */
+export function decodeUserid(value: string): string {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+const messages = defineMessages({
+  title: { id: 'Account', defaultMessage: 'Account' },
+  back: { id: 'Back', defaultMessage: 'Back' },
+});
+
+/** Where the listing this page is reached from lives. */
+const USERS_CONTROLPANEL = '/controlpanel/users';
+
+const UserAccount: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const isClient = useClient();
+  const { pathname } = useLocation();
+  const params = useParams<{ userid: string }>();
+  const userid = params.userid ? decodeUserid(params.userid) : params.userid;
+
+  const request = useSelector((state: any) => state.userAccount);
+
+  useEffect(() => {
+    if (userid) {
+      (dispatch as any)(getUserAccount(userid));
+    }
+  }, [dispatch, userid]);
+
+  // The slice holds one account at a time, and arriving here from another
+  // user's page means last user's answer is still in it. Rendering that under
+  // this person's name is the one mistake this page must not make -- so an
+  // answer about somebody else is treated as no answer yet.
+  const account = request?.data?.userid === userid ? request.data : null;
+  const loading = Boolean(request?.loading) || (!account && !request?.error);
+
+  // The account carries a name; until it arrives the userid is what we have,
+  // and it is what the administrator clicked.
+  const heading = account?.fullname || userid;
+
+  return (
+    // The chrome Volto's own control-panel pages have: a centring container,
+    // a titled panel, and the toolbar with a way back to the listing.
+    <Container id="page-user-account">
+      <Helmet title={`${intl.formatMessage(messages.title)} — ${heading}`} />
+      <Segment.Group raised>
+        <Segment className="primary">{heading}</Segment>
+        <Segment>
+          <UserAccountPanel
+            account={account}
+            loading={loading}
+            error={request?.error}
+          />
+        </Segment>
+      </Segment.Group>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to={USERS_CONTROLPANEL} className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar') as HTMLElement,
+        )}
+    </Container>
+  );
+};
+
+export default UserAccount;

package/src/components/ControlPanel/UserAccountPanel.scss

@@ -0,0 +1,38 @@
+/**
+ * One account's sign-in methods, addresses and recent activity.
+ *
+ * Three lists with the same rhythm, so an account with one provider and one
+ * with four read as the same panel.
+ */
+.identity-account {
+  h3 {
+    margin: var(--identity-gap) 0 4px;
+    font-size: 1.05em;
+  }
+}
+
+.identity-account__list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    padding: 6px 0;
+    border-bottom: var(--identity-border);
+    gap: 8px;
+  }
+}
+
+.identity-account__title {
+  font-weight: 600;
+}
+
+.identity-account__badge {
+  padding: 2px 8px;
+  border: var(--identity-border);
+  border-radius: 10px;
+  font-size: 0.85em;
+}

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import UserAccountPanel from './UserAccountPanel';
+import { USER_ACCOUNT } from '../../stories/fixtures';
+
+const meta: Meta<typeof UserAccountPanel> = {
+  title: 'Identity/ControlPanel/UserAccountPanel',
+  component: UserAccountPanel,
+  args: { account: USER_ACCOUNT, loading: false },
+};
+export default meta;
+
+type Story = StoryObj<typeof UserAccountPanel>;
+
+/** An account with two providers and a verified address. */
+export const Linked: Story = {};
+
+/** A password account: nothing linked, and nothing wrong with that. */
+export const PasswordOnly: Story = {
+  args: {
+    account: { ...USER_ACCOUNT, identities: [], events: [], events_total: 0 },
+  },
+};
+
+/**
+ * An identity against a provider somebody turned off.
+ *
+ * This is what a "broken login" report actually looks like from here, and
+ * without the badge it reads as nothing at all.
+ */
+export const DisabledProvider: Story = {
+  args: {
+    account: {
+      ...USER_ACCOUNT,
+      identities: [{ ...USER_ACCOUNT.identities[0], provider_enabled: false }],
+    },
+  },
+};
+
+/** A provider deleted out from under a stored identity. */
+export const RemovedProvider: Story = {
+  args: {
+    account: {
+      ...USER_ACCOUNT,
+      identities: [
+        {
+          ...USER_ACCOUNT.identities[0],
+          provider_configured: false,
+          provider_enabled: false,
+        },
+      ],
+    },
+  },
+};
+
+/**
+ * Nothing in the retained log.
+ *
+ * Not the same as never signing in: the log is bounded per user, so a dormant
+ * account has had its entries dropped.
+ */
+export const Dormant: Story = {
+  args: {
+    account: {
+      ...USER_ACCOUNT,
+      last_authenticated: null,
+      events: [],
+      events_total: 0,
+    },
+  },
+};
+
+export const Loading: Story = { args: { account: null, loading: true } };
+
+export const Refused: Story = {
+  args: { account: null, loading: false, error: { status: 403 } },
+};