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

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import React from 'react';
+import { Table } from 'semantic-ui-react';
+
+import RenderUsers from './RenderUsers';
+
+const ROLES = [{ id: 'Member' }, { id: 'Reviewer' }, { id: 'Manager' }];
+
+const STATE = { users: { update: { loading: false } } };
+
+const STORE = {
+  getState: () => STATE,
+  dispatch: (action: unknown) => action,
+  subscribe: () => () => {},
+} as never;
+
+const USERSCHEMA = {
+  loaded: true,
+  userschema: { properties: {}, fieldsets: [] },
+};
+
+const ALICE = {
+  '@id': 'http://localhost:8080/Plone/@users/alice',
+  id: 'alice',
+  username: 'alice',
+  fullname: 'Alice Liddell',
+  email: 'alice@example.com',
+  roles: ['Member'],
+  source: 'source_users',
+  identities: [],
+  profile_url: null,
+};
+
+/**
+ * One row of {menuselection}`Site Setup --> Users`. The whole point of the
+ * row is in the menu behind the ellipsis, so open it to see anything: Edit
+ * leads to the Profile for a user who has one, and to Volto's
+ * member-properties modal for a user who does not.
+ */
+const meta: Meta<typeof RenderUsers> = {
+  title: 'Identity/Controlpanels/RenderUsers',
+  component: RenderUsers,
+  decorators: [
+    (Story) => (
+      <Provider store={STORE}>
+        <MemoryRouter>
+          <Table compact>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>User name</Table.HeaderCell>
+                {ROLES.map((role) => (
+                  <Table.HeaderCell key={role.id}>{role.id}</Table.HeaderCell>
+                ))}
+                <Table.HeaderCell />
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              <Story />
+            </Table.Body>
+          </Table>
+        </MemoryRouter>
+      </Provider>
+    ),
+  ],
+  args: {
+    user: ALICE as never,
+    roles: ROLES,
+    isUserManager: true,
+    updateUser: () => {},
+    onDelete: () => {},
+    userschema: USERSCHEMA,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof RenderUsers>;
+
+/**
+ * Their fields live in a Profile, so Edit is a link to that Profile's own
+ * edit form — where their actual fields are, rather than the subset
+ * `@userschema` names in a store nothing reads for them.
+ */
+export const BackedByAProfile: Story = {
+  args: {
+    user: {
+      ...ALICE,
+      profile_url: 'http://localhost:8080/Plone/profiles/alice',
+    } as never,
+  },
+};
+
+/**
+ * The site's own `admin`, an account made before the extra was installed, or
+ * any user on a site not running it. Volto's modal, exactly as before.
+ */
+export const NotBackedByAProfile: Story = {};
+
+/**
+ * Roles held through a group are shown as Plone's own icon rather than a
+ * checkbox: they are not this row's to change.
+ */
+export const WithAnInheritedRole: Story = {
+  args: {
+    user: {
+      ...ALICE,
+      profile_url: 'http://localhost:8080/Plone/profiles/alice',
+    } as never,
+    inheritedRole: ['Reviewer'],
+  },
+};

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

@@ -0,0 +1,145 @@
+/**
+ * The shadowed users-control-panel row.
+ *
+ * What is pinned here is the one thing that differs from Volto: where Edit
+ * leads. A user whose fields live in a Profile is edited on that Profile; a
+ * user whose fields live in `portal_memberdata` still gets Volto's modal.
+ * Both halves matter — the second is the site's own `admin`, and any account
+ * that predates the add-on and has not signed in since.
+ *
+ * The Account action is pinned here for the same reason: it is a link to a
+ * route rather than something that opens an overlay in this row, and nothing
+ * else would notice it going back to being a modal.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import React from 'react';
+import { Table } from 'semantic-ui-react';
+
+import RenderUsers, { profileEditUrl } from './RenderUsers';
+import { userAccountUrl } from '../../config/routes';
+
+const ROLES = [{ id: 'Member' }, { id: 'Manager' }];
+
+const USERSCHEMA = {
+  loaded: true,
+  userschema: { properties: {}, fieldsets: [] },
+};
+
+function renderRow(user: Record<string, unknown>) {
+  // One state object, not a fresh literal per call: the component selects
+  // `users.update` out of it, and `useSelector` compares by identity — a new
+  // object every `getState` is an infinite re-render.
+  const state = { users: { update: { loading: false } } };
+  const store = {
+    getState: () => state,
+    dispatch: vi.fn(),
+    subscribe: () => () => {},
+  };
+  return render(
+    <Provider store={store as never}>
+      <MemoryRouter>
+        <Table>
+          <Table.Body>
+            <RenderUsers
+              user={
+                {
+                  '@id': 'http://localhost:8080/Plone/@users/alice',
+                  id: 'alice',
+                  username: 'alice',
+                  fullname: 'Alice Liddell',
+                  roles: [],
+                  source: 'source_users',
+                  identities: [],
+                  profile_url: null,
+                  ...user,
+                } as never
+              }
+              roles={ROLES}
+              isUserManager={true}
+              updateUser={vi.fn()}
+              onDelete={vi.fn()}
+              userschema={USERSCHEMA}
+            />
+          </Table.Body>
+        </Table>
+      </MemoryRouter>
+    </Provider>,
+  );
+}
+
+describe('profileEditUrl', () => {
+  it('is the Profile edit form, app-relative', () => {
+    expect(profileEditUrl('http://localhost:8080/Plone/profiles/alice')).toBe(
+      '/profiles/alice/edit',
+    );
+  });
+
+  it('is nothing for a user with no Profile', () => {
+    // Which is what leaves Volto's member-properties modal in place for
+    // them: the site's own admin, and anyone else with no Profile.
+    expect(profileEditUrl(null)).toBeNull();
+    expect(profileEditUrl(undefined)).toBeNull();
+    expect(profileEditUrl('')).toBeNull();
+  });
+});
+
+describe('RenderUsers', () => {
+  it('links Edit to the Profile when the user has one', () => {
+    // The defect this fixes: the modal edits `portal_memberdata`, which is
+    // not where this user's fields are read from, and shows only the fields
+    // `@userschema` happens to name.
+    renderRow({ profile_url: 'http://localhost:8080/Plone/profiles/alice' });
+
+    const edit = document.querySelector('#edit-user-button');
+
+    expect(edit?.tagName).toBe('A');
+    expect(edit?.getAttribute('href')).toBe('/profiles/alice/edit');
+  });
+
+  it('leaves the modal in place for a user without a Profile', () => {
+    renderRow({ profile_url: null });
+
+    const edit = document.querySelector('#edit-user-button');
+
+    expect(edit).not.toBeNull();
+    expect(edit?.tagName).not.toBe('A');
+  });
+
+  it('still offers Delete either way', () => {
+    // The row keeps working: the change is the destination of one entry, not
+    // the menu it is in.
+    renderRow({ profile_url: 'http://localhost:8080/Plone/profiles/alice' });
+
+    expect(document.querySelector('#delete-user-button')).not.toBeNull();
+  });
+
+  it('shows the user the way the panel always has', () => {
+    renderRow({});
+
+    expect(screen.getByText(/Alice Liddell/)).toBeTruthy();
+  });
+});
+
+describe('the Account action', () => {
+  it('is a link to the account page', () => {
+    // A navigation, so it is an anchor: middle-click, open-in-new-tab and a
+    // visible target in the status bar all work, and none of them do for a
+    // menu item with an onClick that opens a modal.
+    renderRow({ profile_url: null });
+
+    const item = document.querySelector('#user-account-button');
+    expect(item?.tagName).toBe('A');
+    expect(item?.getAttribute('href')).toBe(userAccountUrl('alice'));
+  });
+
+  it('opens nothing in the row itself', () => {
+    renderRow({ profile_url: null });
+
+    fireEvent.click(screen.getByText('Account'));
+
+    expect(document.querySelector('.ui.modal')).toBeNull();
+  });
+});

package/src/components/ControlPanel/RenderUsers.tsx

@@ -0,0 +1,263 @@
+/**
+ * One row of the users control panel, rewritten.
+ *
+ * Takes Volto's place through
+ * `customizations/volto/components/manage/Controlpanels/Users/RenderUsers`,
+ * which is where the reason for shadowing it is written down.
+ *
+ * Not a verbatim copy of `@plone/volto/components/manage/Controlpanels/Users/RenderUsers`
+ * (Volto 19.3.0) with a patch: it keeps the markup, the class names, the
+ * element ids and the behaviour Volto's stylesheet and tests expect, and
+ * changes the one thing worth changing. On a Volto upgrade, read upstream's
+ * diff for *behavioural* changes and port those.
+ *
+ * WHAT DIFFERS FROM UPSTREAM, and why:
+ *
+ * - **Edit goes to the Profile, for a user who has one.** Upstream always
+ *   opens a modal bound to `@userschema` — the member-properties form, which
+ *   writes through `portal_memberdata`. That form is the *wrong* form for
+ *   anyone whose fields live in a Profile: it shows the subset of fields the
+ *   schema happens to name,
+ *   nothing that type added, and it edits a store which is not where that
+ *   user's data is read from. Their Profile has an edit form of its own, with
+ *   their actual fields on it, so Edit links there.
+ *
+ * - **Everyone else is untouched.** The site's `admin`, an account created
+ *   before the extra was installed, any user on a site without it: no
+ *   `profile_url`, so the modal opens exactly as before. That is the same
+ *   condition the user menu keys on — see `helpers/profileSource` — and it is
+ *   `profile_url` rather than `source` for the reason written down there:
+ *   `source` names the plugin that *authenticated* the account, which is
+ *   `source_users` for everybody, so keying on it hides the feature from
+ *   every user it is for.
+ *
+ * - **The link is a `Link`, not a click handler.** It is a navigation, so it
+ *   is an anchor: middle-click, open-in-new-tab and a visible target in the
+ *   status bar all work, and none of them do for a `div` with an `onClick`.
+ *
+ * - **An Account action.** Which providers a person has configured and when
+ *   they last signed in are the two questions this control panel could not
+ *   answer -- the first because `@users` carries bare provider ids, the
+ *   second because nothing in Plone records it. `@user-account/<id>` answers
+ *   both, one user at a time, and this is the action that opens it.
+ *
+ *   A `Link` to a route rather than a modal it fetched into itself, for the
+ *   same reason Edit above is an anchor: it is a navigation to a page's worth
+ *   of facts about one person, and an overlay could not be linked to,
+ *   bookmarked or opened in a new tab. The request moved with it -- the page
+ *   knows who it is about from the route.
+ *
+ * @module components/ControlPanel/RenderUsers
+ */
+import React, { useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
+
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import { ModalForm } from '@plone/volto/components/manage/Form';
+import { updateUser } from '@plone/volto/actions/users/users';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+import { canAssignRole } from '@plone/volto/helpers/User/User';
+import editSVG from '@plone/volto/icons/editing.svg';
+import ploneSVG from '@plone/volto/icons/plone.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
+import { toast } from 'react-toastify';
+
+import type { UserProfile } from '../../types';
+import { userAccountUrl } from '../../config/routes';
+
+/** A role as the control panel lists them. */
+interface Role {
+  id: string;
+}
+
+interface RenderUsersProps {
+  /** The user this row is about, as `@users` serializes them. */
+  user: UserProfile & { roles: string[] };
+  /** Every role the site has, in column order. */
+  roles: Role[];
+  onDelete: (event: React.MouseEvent, data: { value: string }) => void;
+  isUserManager: boolean;
+  listUsers?: () => void;
+  updateUser: (userId: string, role: string) => void;
+  /** Roles this user holds through a group rather than directly. */
+  inheritedRole?: string[];
+  userschema?: { loaded: boolean; userschema: object };
+}
+
+/**
+ * Where the Edit action should lead for one user.
+ *
+ * @param profileUrl The user's `profile_url`, when they have a Profile.
+ * @returns The app-relative edit URL, or `null` for a user whose fields are
+ *   not in a Profile — for whom the member-properties modal is still right.
+ */
+export function profileEditUrl(
+  profileUrl: string | null | undefined,
+): string | null {
+  if (!profileUrl) {
+    return null;
+  }
+  // The payload carries an absolute URL on the backend's own host; a router
+  // link needs the path this site serves it at.
+  return `${flattenToAppURL(profileUrl)}/edit`;
+}
+
+const RenderUsers: React.FC<RenderUsersProps> = (props) => {
+  const [user, setUser] = useState<Record<string, any>>({});
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const updateRequest = useSelector((state: any) => state.users?.update);
+
+  const {
+    user: propsUser,
+    listUsers,
+    updateUser: updateUserRole,
+    isUserManager,
+    roles,
+    inheritedRole,
+    userschema,
+    onDelete,
+  } = props;
+
+  const editUrl = profileEditUrl(propsUser.profile_url);
+
+  const updateUserData = (userId: string, userData: object) => {
+    (dispatch as any)(updateUser(userId, userData))
+      .then(() => {
+        setUser({});
+        if (listUsers) {
+          listUsers();
+        }
+        toast.success(
+          <Toast
+            success
+            title={intl.formatMessage(messages.success)}
+            content={intl.formatMessage(messages.updateUserSuccess)}
+          />,
+        );
+      })
+      .catch(() => {
+        toast.error(
+          <Toast
+            error
+            title={intl.formatMessage(messages.error)}
+            content={intl.formatMessage(messages.thereWereSomeErrors)}
+          />,
+        );
+      });
+  };
+
+  const onChange = (_event: unknown, { value }: { value: string }) => {
+    const [userId, role] = value.split('&role=');
+    updateUserRole(userId, role);
+  };
+
+  const onEditUserSubmit = (data: Record<string, any>) => {
+    // Roles and groups are edited in their own columns, not in this form.
+    delete data.groups;
+    delete data.roles;
+    updateUserData(data.id, data);
+  };
+
+  const canDeleteUser = () => {
+    if (isUserManager) return true;
+    return !propsUser.roles.includes('Manager');
+  };
+
+  return (
+    <Table.Row key={propsUser.username ?? propsUser.id}>
+      <Table.Cell className="fullname">
+        {propsUser.fullname ? propsUser.fullname : propsUser.username} (
+        {propsUser.username})
+      </Table.Cell>
+      {roles.map((role) => (
+        <Table.Cell key={role.id}>
+          {inheritedRole && inheritedRole.includes(role.id) ? (
+            <Icon
+              name={ploneSVG}
+              size="20px"
+              color="#007EB1"
+              title={'plone-svg'}
+            />
+          ) : (
+            <Checkbox
+              checked={propsUser.roles.includes(role.id)}
+              onChange={onChange as any}
+              value={`${propsUser.id}&role=${role.id}`}
+              disabled={!canAssignRole(isUserManager, role)}
+            />
+          )}
+        </Table.Cell>
+      ))}
+      <Table.Cell textAlign="right">
+        {canDeleteUser() && (
+          <Dropdown icon="ellipsis horizontal">
+            <Dropdown.Menu className="left">
+              {editUrl ? (
+                <Dropdown.Item
+                  as={Link}
+                  to={editUrl}
+                  id="edit-user-button"
+                  value={propsUser['@id']}
+                >
+                  <Icon name={editSVG} size="15px" />
+                  <FormattedMessage id="Edit" defaultMessage="Edit" />
+                </Dropdown.Item>
+              ) : (
+                userschema && (
+                  <Dropdown.Item
+                    id="edit-user-button"
+                    onClick={() => {
+                      setUser({ ...propsUser });
+                    }}
+                    value={propsUser['@id']}
+                  >
+                    <Icon name={editSVG} size="15px" />
+                    <FormattedMessage id="Edit" defaultMessage="Edit" />
+                  </Dropdown.Item>
+                )
+              )}
+              <Dropdown.Item
+                as={Link}
+                to={userAccountUrl(propsUser.id)}
+                id="user-account-button"
+                value={propsUser['@id']}
+              >
+                <Icon name={ploneSVG} size="15px" />
+                <FormattedMessage id="Account" defaultMessage="Account" />
+              </Dropdown.Item>
+              <Dropdown.Item
+                id="delete-user-button"
+                onClick={onDelete as any}
+                value={propsUser['@id']}
+              >
+                <Icon name={trashSVG} size="15px" />
+                <FormattedMessage id="Delete" defaultMessage="Delete" />
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </Table.Cell>
+      {Object.keys(user).length > 0 && userschema?.loaded && (
+        <ModalForm
+          className="modal"
+          onSubmit={onEditUserSubmit}
+          submitError={user.editUserError}
+          formData={user}
+          onCancel={() => setUser({})}
+          title={intl.formatMessage(messages.updateUserFormTitle)}
+          loading={updateRequest.loading}
+          schema={userschema.userschema}
+        />
+      )}
+    </Table.Row>
+  );
+};
+
+export default RenderUsers;

package/src/components/ControlPanel/SecretReveal.scss

@@ -0,0 +1,32 @@
+/**
+ * The one moment a client secret exists.
+ *
+ * Deliberately unlike the rest of the page: this is the only panel in the
+ * add-on where dismissing something loses it irrecoverably.
+ */
+.identity-secret {
+  padding: 1rem;
+  border: 2px solid var(--identity-danger);
+  border-radius: var(--identity-radius);
+  margin-bottom: 2rem;
+}
+
+.identity-secret__notice {
+  margin: 0 0 0.5rem;
+  font-weight: 500;
+}
+
+.identity-secret__value {
+  display: flex;
+  margin: 0.75rem 0;
+  gap: 0.5rem;
+
+  input {
+    flex: 1;
+    padding: 8px 6px;
+    border: 0;
+    border-bottom: 1px solid var(--identity-field-border);
+    background: transparent;
+    font-family: monospace;
+  }
+}

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SecretReveal from './SecretReveal';
+import { CLIENT, MINTED_CLIENT } from '../../stories/fixtures';
+
+const meta: Meta<typeof SecretReveal> = {
+  title: 'Identity/ControlPanel/SecretReveal',
+  component: SecretReveal,
+  args: { client: MINTED_CLIENT, onDismiss: () => {} },
+};
+export default meta;
+
+type Story = StoryObj<typeof SecretReveal>;
+
+/**
+ * The one moment the secret exists in a form anybody can read. The server
+ * keeps a hash, so this is not recoverable and nearly the whole design of the
+ * clients panel is about this appearing exactly once.
+ */
+export const JustMinted: Story = {};
+
+/** A rotation says the same thing about a secret that already existed. */
+export const Rotated: Story = {
+  args: {
+    client: {
+      ...MINTED_CLIENT,
+      notice: 'The previous secret stopped working the moment this was minted.',
+    },
+  },
+};
+
+/** Without a secret there is nothing to reveal. */
+export const NothingToShow: Story = { args: { client: CLIENT } };

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

@@ -0,0 +1,101 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '../../testing';
+import React from 'react';
+
+import SecretReveal from './SecretReveal';
+import type { OAuthClient } from '../../types';
+
+const CLIENT: OAuthClient = {
+  '@id': '/@identity-clients/app',
+  client_id: 'app',
+  title: 'Example App',
+  redirect_uris: [],
+  grant_types: ['authorization_code'],
+  scope: [],
+  auth_method: 'client_secret_post',
+  public: false,
+  enabled: true,
+  service_user: '',
+  secret: 's3cr3t',
+  notice: 'This is the only time this secret is shown.',
+};
+
+function renderReveal(client: OAuthClient = CLIENT) {
+  const onDismiss = vi.fn();
+  render(<SecretReveal client={client} onDismiss={onDismiss} />);
+  return onDismiss;
+}
+
+describe('SecretReveal', () => {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
+    });
+  });
+
+  it('shows the secret', () => {
+    renderReveal();
+
+    expect(screen.getByDisplayValue('s3cr3t')).toBeTruthy();
+  });
+
+  it('carries the server’s own notice', () => {
+    renderReveal();
+
+    expect(screen.getByText(/only time this secret is shown/)).toBeTruthy();
+  });
+
+  it('says so even when the server sent no notice', () => {
+    renderReveal({ ...CLIENT, notice: undefined });
+
+    expect(screen.getByText(/only time this secret is shown/)).toBeTruthy();
+  });
+
+  it('announces itself, because dismissing it loses the secret', () => {
+    renderReveal();
+
+    expect(screen.getByRole('alertdialog')).toBeTruthy();
+  });
+
+  it('copies to the clipboard', async () => {
+    renderReveal();
+
+    fireEvent.click(screen.getByText('Copy'));
+
+    await waitFor(() =>
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('s3cr3t'),
+    );
+    await waitFor(() => expect(screen.getByText('Copied')).toBeTruthy());
+  });
+
+  it('stays usable when the browser refuses clipboard access', async () => {
+    Object.assign(navigator, {
+      clipboard: { writeText: vi.fn().mockRejectedValue(new Error('denied')) },
+    });
+    renderReveal();
+
+    fireEvent.click(screen.getByText('Copy'));
+
+    // Still readable and selectable, which is the fallback that matters.
+    await waitFor(() => expect(screen.getByText('Copy')).toBeTruthy());
+    expect(screen.getByDisplayValue('s3cr3t')).toBeTruthy();
+  });
+
+  it('selects the whole secret on focus', () => {
+    renderReveal();
+    const field = screen.getByDisplayValue('s3cr3t') as HTMLInputElement;
+    field.select = vi.fn();
+
+    fireEvent.focus(field);
+
+    expect(field.select).toHaveBeenCalled();
+  });
+
+  it('is dismissed only when the operator says they have saved it', () => {
+    const onDismiss = renderReveal();
+
+    fireEvent.click(screen.getByText('I have saved it'));
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});