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

package/src/components/Identities/Identities.test.tsx

@@ -0,0 +1,134 @@
+import { afterEach, beforeEach, 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 Identities from './Identities';
+
+// Volto's toolbar reads slices of the store this page does not own and does
+// not fill -- content, actions, the breadcrumb trail. It is chrome around the
+// panel rather than anything this test is about, so it is stubbed instead of
+// fed: the alternative is a fixture of Volto's whole app state, which would
+// break on Volto's schedule rather than on this package's. `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,
+}));
+
+/**
+ * The container's wiring, which no other test here can see.
+ *
+ * Both things pinned below are requests and selectors rather than markup:
+ * `IdentitiesList` and `ProfileEmails` are rendered with props in their own
+ * tests, and a prop handed to them correctly proves nothing about where the
+ * container got it. Severing either of these leaves every one of those tests
+ * green and the page quietly wrong -- an unexpanded listing makes
+ * `canSignInWithLink` false on every site, which reads as "this operator
+ * turned the magic link off" rather than as a broken request.
+ */
+
+const EMAIL_PROVIDER = {
+  '@id': '/@login-providers/email',
+  id: 'email',
+  title: 'Email',
+  driver: 'email',
+};
+
+function storeWith(loginProviders: unknown[]) {
+  const state = {
+    identities: { loading: false, loaded: true, error: null, data: [] },
+    linkableProviders: { loading: false, loaded: true, error: null, data: [] },
+    loginProviders: {
+      loading: false,
+      loaded: true,
+      error: null,
+      data: loginProviders,
+    },
+    identityLinking: {},
+    identityUnlink: {},
+    preferredEmail: {},
+    myProfile: {
+      loading: false,
+      loaded: true,
+      error: null,
+      data: {
+        profile: '/identity-profiles/erico',
+        emails: [
+          { address: 'erico@plone.org', verified: false, preferred: true },
+        ],
+      },
+    },
+  };
+  return { state, dispatched: [] as any[] };
+}
+
+function renderIdentities(loginProviders: unknown[] = [EMAIL_PROVIDER]) {
+  const { state, dispatched } = storeWith(loginProviders);
+  const store = {
+    getState: () => state,
+    dispatch: (action: any) => {
+      dispatched.push(action);
+      return action;
+    },
+    subscribe: () => () => {},
+  };
+  render(
+    <Provider store={store as any}>
+      <MemoryRouter initialEntries={['/identities']}>
+        <Identities />
+      </MemoryRouter>
+    </Provider>,
+  );
+  return { dispatched };
+}
+
+/** The addresses live behind their own tab, so a test reaches them by name. */
+function openAddresses() {
+  fireEvent.click(screen.getByRole('tab', { name: 'Email addresses' }));
+}
+
+describe('Identities', () => {
+  // The page portals its toolbar into Volto's `#toolbar`, which only the app
+  // shell renders. Without it React throws before anything can be asserted.
+  beforeEach(() => {
+    const toolbar = document.createElement('div');
+    toolbar.id = 'toolbar';
+    document.body.appendChild(toolbar);
+  });
+
+  afterEach(() => {
+    document.getElementById('toolbar')?.remove();
+  });
+
+  it('asks for the listing with the login providers expanded', () => {
+    // Unexpanded, `state.loginProviders` is never filled on this route and
+    // the page cannot tell a provider that is off the login page from one
+    // that is on it.
+    const { dispatched } = renderIdentities();
+
+    const paths = dispatched
+      .filter((action) => action?.request?.path)
+      .map((action) => action.request.path);
+    expect(paths).toContain('/@identities?expand=login-providers');
+  });
+
+  it('says a verified address signs you in when email is a way in', () => {
+    renderIdentities([EMAIL_PROVIDER]);
+    openAddresses();
+
+    expect(document.body.textContent).toContain('sign in with a link');
+  });
+
+  it('does not, when the operator took email off the login page', () => {
+    // `show_in_login` off: the provider is still enabled and still verifies
+    // addresses, but nothing on the login page starts that flow.
+    renderIdentities([
+      { '@id': '/@login-providers/dex', id: 'dex', driver: 'oidc-generic' },
+    ]);
+    openAddresses();
+
+    expect(document.body.textContent).not.toContain('sign in with a link');
+    expect(document.body.textContent).toContain('recognises you');
+  });
+});

package/src/components/Identities/Identities.tsx

@@ -0,0 +1,217 @@
+/**
+ * Identities container: the linking UI in user settings.
+ * @module components/Identities/Identities
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useHistory, useLocation } 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 { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+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 { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import backSVG from '@plone/volto/icons/back.svg';
+
+import {
+  getMyProfile,
+  listIdentities,
+  setPreferredEmail,
+  startLinking,
+  unlinkIdentity,
+} from '../../actions';
+import { EMAIL_DRIVER } from '../../helpers/identities';
+import type { Identity, LoginProvider, ProfileEmail } from '../../types';
+import IdentitiesList from './IdentitiesList';
+import { goTo } from '../../helpers/navigate';
+
+const messages = defineMessages({
+  title: { id: 'Sign-in methods', defaultMessage: 'Sign-in methods' },
+  back: { id: 'Back', defaultMessage: 'Back' },
+});
+
+const Identities: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const isClient = useClient();
+  const location = useLocation();
+  const { push } = useHistory();
+  const { pathname } = location;
+  const [redirecting, setRedirecting] = useState(false);
+
+  const mine = useSelector((state: any) => state.identities);
+  const linkableProviders = useSelector(
+    (state: any) => state.linkableProviders,
+  );
+  // The login page's own listing, which arrives expanded on `@identities`.
+  // Hidden providers are absent from it -- that is what `show_in_login` means
+  // -- so it is the only thing that can say whether a method here is one
+  // anybody can actually sign in with.
+  const loginProviders = useSelector((state: any) => state.loginProviders);
+  const linking = useSelector((state: any) => state.identityLinking);
+  const removing = useSelector((state: any) => state.identityUnlink);
+  const preferring = useSelector((state: any) => state.preferredEmail);
+  // The addresses live on the profile, not on the identity records, so this
+  // page needs the one endpoint that reads them off the catalog brain.
+  const myProfile = useSelector((state: any) => state.myProfile);
+
+  useEffect(() => {
+    // Expanded, so the login page's own listing rides along: this page has to
+    // know which of these methods actually signs anybody in, and that is the
+    // question `@login-providers` answers. One request rather than two, which
+    // is what the expandable component exists for.
+    dispatch(listIdentities(true));
+    dispatch(getMyProfile());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (redirecting && linking?.loaded && linking?.data?.authorize_url) {
+      goTo(linking.data.authorize_url, push, { external: true });
+    }
+  }, [redirecting, linking, push]);
+
+  // The email provider answers `sent` instead of an authorize URL, and the
+  // page stays where it is to say so.
+  const emailSent = Boolean(linking?.loaded && linking?.data?.sent);
+
+  // An operator who takes the email provider off the login page has turned
+  // off signing in with a link. Verifying an address still does its other
+  // job -- recognising the same person behind a later provider login -- so
+  // what changes here is what this page claims, not what it offers.
+  const canSignInWithLink = (loginProviders?.data ?? []).some(
+    (provider: LoginProvider) => provider.driver === EMAIL_DRIVER,
+  );
+
+  useEffect(() => {
+    if (removing?.loaded) {
+      // The list is stale the moment an unlink succeeds, and can_unlink may
+      // have changed for everything left. So are the addresses: removing an
+      // email identity is exactly what un-verifies one.
+      dispatch(listIdentities(true));
+      dispatch(getMyProfile());
+    }
+  }, [dispatch, removing?.loaded]);
+
+  const onLink = useCallback(
+    (provider: LoginProvider) => {
+      setRedirecting(true);
+      dispatch(startLinking(provider.id, location.pathname));
+    },
+    [dispatch, location.pathname],
+  );
+
+  const onVerifyEmail = useCallback(
+    (address: string) => {
+      // No `setRedirecting` here: nothing is going to navigate. The flow
+      // continues when the link in the message is clicked, which may well be
+      // in another browser entirely.
+      //
+      // The provider id is the driver id, which is what this site's email
+      // provider is called by convention and what the backend's own
+      // `EMAIL_PROVIDER` is. A site that renamed it would need the id off the
+      // listing instead -- but the listing deliberately does not carry the
+      // email provider any more, which is the whole point of this panel.
+      dispatch(startLinking(EMAIL_DRIVER, location.pathname, address));
+    },
+    [dispatch, location.pathname],
+  );
+
+  const onPreferEmail = useCallback(
+    (address: string) => {
+      // The whole list, reordered here rather than on the backend: `emails`
+      // is a field, and a PATCH carrying one entry would replace the list
+      // with it. The rest keep their order, so this moves one address and
+      // rearranges nothing else.
+      const profileUrl = myProfile?.data?.profile;
+      if (!profileUrl) {
+        return;
+      }
+      const addresses: string[] = (myProfile?.data?.emails ?? []).map(
+        (entry: ProfileEmail) => entry.address,
+      );
+      dispatch(
+        setPreferredEmail(flattenToAppURL(profileUrl), [
+          address,
+          ...addresses.filter((each) => each !== address),
+        ]),
+      );
+    },
+    [dispatch, myProfile],
+  );
+
+  useEffect(() => {
+    if (preferring?.loaded) {
+      // A PATCH answers with no body, so the new order comes from asking
+      // again -- and `preferred` is derived, so the answer is the only place
+      // that knows which address actually won.
+      dispatch(getMyProfile());
+    }
+  }, [dispatch, preferring?.loaded]);
+
+  const onUnlink = useCallback(
+    (identity: Identity) => {
+      dispatch(unlinkIdentity(identity.provider, identity.subject));
+    },
+    [dispatch],
+  );
+
+  return (
+    // The page chrome Volto's own user-settings pages have: a container that
+    // centres the content, a titled panel, and the toolbar. Without it this
+    // route rendered as a bare list against the left edge of the window.
+    <Container id="page-identities">
+      <Helmet title={intl.formatMessage(messages.title)} />
+      <Segment.Group raised>
+        <Segment className="primary">
+          {intl.formatMessage(messages.title)}
+        </Segment>
+        <Segment>
+          <IdentitiesList
+            identities={mine?.data ?? []}
+            available={linkableProviders?.data ?? []}
+            emails={myProfile?.data?.emails ?? []}
+            canSignInWithLink={canSignInWithLink}
+            profileUrl={myProfile?.data?.profile ?? null}
+            loading={Boolean(mine?.loading)}
+            busy={
+              redirecting ||
+              Boolean(removing?.loading) ||
+              Boolean(preferring?.loading) ||
+              Boolean(linking?.loading)
+            }
+            error={linking?.error ?? removing?.error}
+            emailSent={emailSent}
+            onLink={onLink}
+            onVerifyEmail={onVerifyEmail}
+            onPreferEmail={onPreferEmail}
+            onUnlink={onUnlink}
+          />
+        </Segment>
+      </Segment.Group>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to={`${getBaseUrl(pathname)}`} className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar') as HTMLElement,
+        )}
+    </Container>
+  );
+};
+
+export default Identities;

package/src/components/Identities/IdentitiesList.scss

@@ -0,0 +1,49 @@
+/**
+ * The "your sign-in methods" panel.
+ *
+ * No border or shadow of its own: the container that renders it already puts
+ * it inside a raised Segment, and a card inside a card reads as a mistake.
+ */
+.identity-identities__list {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0 0 var(--identity-gap);
+  gap: 8px;
+  list-style: none;
+
+  li {
+    display: flex;
+    align-items: baseline;
+    padding: 10px 0;
+    border-bottom: var(--identity-border);
+    gap: 8px;
+  }
+}
+
+.identity-identities__title {
+  font-weight: 600;
+}
+
+.identity-identities__add {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  margin-top: calc(var(--identity-gap) * 2);
+  gap: 8px;
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+    gap: 8px;
+    list-style: none;
+  }
+}

package/src/components/Identities/IdentitiesList.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import IdentitiesList from './IdentitiesList';
+import {
+  FAILED,
+  IDENTITIES,
+  ONLY_IDENTITY,
+  PROFILE_EMAILS,
+  PROVIDERS,
+  STYLED,
+} from '../../stories/fixtures';
+
+const meta: Meta<typeof IdentitiesList> = {
+  title: 'Identity/Identities/IdentitiesList',
+  component: IdentitiesList,
+  args: {
+    identities: IDENTITIES,
+    available: PROVIDERS,
+    emails: PROFILE_EMAILS,
+    profileUrl: '/identity-profiles/erico',
+    loading: false,
+    busy: false,
+    emailSent: false,
+    canSignInWithLink: true,
+    onLink: () => {},
+    onVerifyEmail: () => {},
+    onUnlink: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof IdentitiesList>;
+
+export const Several: Story = {};
+
+/**
+ * The last way in cannot be unlinked: doing so would lock the user out of an
+ * account they have no password for.
+ */
+export const LastRemaining: Story = { args: { identities: ONLY_IDENTITY } };
+
+/** One that has never been used since it was linked. */
+export const NeverUsed: Story = {
+  args: { identities: [{ ...IDENTITIES[0], last_login: null }] },
+};
+
+export const Empty: Story = { args: { identities: [] } };
+
+export const Loading: Story = { args: { loading: true, identities: [] } };
+
+/** While a link or unlink is in flight, nothing else may be started. */
+export const Busy: Story = { args: { busy: true } };
+
+export const Failed: Story = { args: { error: FAILED.error } };
+
+/** Every provider already linked, so there is nothing left to add. */
+export const NothingLeftToLink: Story = { args: { available: [] } };
+
+/**
+ * A provider wearing the icon and colours an operator gave it.
+ *
+ * The same button the login screen draws: the identities page reads the
+ * backend's `available` listing, which carries the style for exactly this.
+ */
+export const StyledProvider: Story = { args: { available: [STYLED] } };
+
+/** Nothing on the profile to verify, so it points at the profile instead. */
+export const NoAddresses: Story = { args: { emails: [] } };
+
+/** A confirmation link has gone out and the page stays where it is. */
+export const AddressSent: Story = { args: { emailSent: true } };

package/src/components/Identities/IdentitiesList.test.tsx

@@ -0,0 +1,218 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import React from 'react';
+
+import IdentitiesList from './IdentitiesList';
+import type { Identity, LoginProvider, ProfileEmail } from '../../types';
+
+const DEX: Identity = {
+  '@id': '/@identities/dex/subject-1',
+  provider: 'dex',
+  subject: 'subject-1',
+  title: 'Dex',
+  created: '2026-08-21T10:00:00+00:00',
+  last_login: null,
+  can_unlink: true,
+};
+
+const GITHUB: LoginProvider = {
+  '@id': '/@login-providers/github',
+  id: 'github',
+  title: 'GitHub',
+  driver: 'github',
+};
+
+const ADDRESS: ProfileEmail = {
+  address: 'erico@plone.org',
+  verified: false,
+  preferred: true,
+};
+
+function renderList(
+  props: Partial<React.ComponentProps<typeof IdentitiesList>> = {},
+) {
+  const onLink = vi.fn();
+  const onVerifyEmail = vi.fn();
+  const onUnlink = vi.fn();
+  render(
+    <IdentitiesList
+      identities={[DEX]}
+      available={[GITHUB]}
+      emails={[ADDRESS]}
+      canSignInWithLink
+      loading={false}
+      busy={false}
+      emailSent={false}
+      onLink={onLink}
+      onVerifyEmail={onVerifyEmail}
+      onUnlink={onUnlink}
+      {...props}
+    />,
+  );
+  return { onLink, onVerifyEmail, onUnlink };
+}
+
+describe('IdentitiesList', () => {
+  it('lists what the user owns', () => {
+    renderList();
+
+    expect(screen.getByText('Dex')).toBeTruthy();
+    expect(screen.getByText('subject-1')).toBeTruthy();
+  });
+
+  it('offers what they can still add', () => {
+    renderList();
+
+    expect(screen.getByText('GitHub')).toBeTruthy();
+  });
+
+  it('reports the provider to link', () => {
+    const { onLink } = renderList();
+
+    fireEvent.click(screen.getByText('GitHub'));
+
+    expect(onLink).toHaveBeenCalledWith(GITHUB);
+  });
+
+  it('reports the identity to remove', () => {
+    const { onUnlink } = renderList();
+
+    fireEvent.click(screen.getByText('Remove'));
+
+    expect(onUnlink).toHaveBeenCalledWith(DEX);
+  });
+
+  it('refuses to offer removing the last way in', () => {
+    // Surfaced. A button that only fails when pressed is worse than one
+    // that explains itself.
+    renderList({ identities: [{ ...DEX, can_unlink: false }] });
+
+    const button = screen.getByText('Remove') as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+    expect(button.title).toContain('only way to sign in');
+  });
+
+  it('disables everything while something is in flight', () => {
+    renderList({ busy: true });
+
+    for (const button of screen.getAllByRole('button')) {
+      expect((button as HTMLButtonElement).disabled).toBe(true);
+    }
+  });
+
+  it('says so while loading', () => {
+    renderList({ loading: true });
+
+    expect(screen.getByRole('status').textContent).toContain('Loading');
+  });
+
+  it('says so when nothing is linked', () => {
+    renderList({ identities: [] });
+
+    expect(screen.getByText(/no external sign-in methods/i)).toBeTruthy();
+  });
+
+  it('offers no add section when there is nothing to add', () => {
+    renderList({ available: [] });
+
+    expect(screen.queryByText('Add another')).toBeNull();
+  });
+
+  it('reports a failure', () => {
+    renderList({ error: { status: 409 } });
+
+    expect(screen.getByRole('alert')).toBeTruthy();
+  });
+});
+
+/**
+ * Select one of the panel's tabs by its label.
+ *
+ * Only the selected panel is in the document, so the addresses are reached by
+ * pressing their tab rather than by querying for them.
+ */
+function openTab(label: string) {
+  fireEvent.click(screen.getByRole('tab', { name: label }));
+}
+
+describe('IdentitiesList sections', () => {
+  it('splits the page into the two questions it answers', () => {
+    // Stacked, this read as a pile of everything that could be said about how
+    // you get in, with the addresses below whatever length the provider list
+    // happened to be.
+    renderList();
+
+    const tabs = screen.getAllByRole('tab').map((tab) => tab.textContent);
+    expect(tabs).toEqual(['Sign-in methods', 'Email addresses']);
+  });
+
+  it('opens on the methods rather than the addresses', () => {
+    renderList();
+
+    expect(screen.getByRole('tab', { selected: true }).textContent).toBe(
+      'Sign-in methods',
+    );
+    expect(screen.queryByText('Your email addresses')).toBeNull();
+  });
+
+  it('wears the same tabs the account page does', () => {
+    // The control panel's account page is this question asked by an
+    // administrator; the two being recognisably one design is the point.
+    renderList();
+
+    expect(document.querySelector('.identity-tabs')).toBeTruthy();
+  });
+});
+
+describe('IdentitiesList and your own addresses', () => {
+  it('lists the addresses on the profile', () => {
+    // Not a box to type one into. The address a magic link proves is
+    // whatever was typed, so a free-text field here verified any mailbox at
+    // all -- and a verified address is what a new provider account can be
+    // auto-attached to.
+    renderList();
+    openTab('Email addresses');
+
+    expect(screen.queryByLabelText('Email address')).toBeNull();
+    expect(screen.getByText('erico@plone.org')).toBeTruthy();
+  });
+
+  it('offers to verify one that is not verified yet', () => {
+    const { onVerifyEmail } = renderList();
+    openTab('Email addresses');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Verify' }));
+
+    expect(onVerifyEmail).toHaveBeenCalledWith('erico@plone.org');
+  });
+
+  it('says so rather than offering to verify a verified one', () => {
+    renderList({ emails: [{ ...ADDRESS, verified: true }] });
+    openTab('Email addresses');
+
+    expect(screen.queryByRole('button', { name: 'Verify' })).toBeNull();
+    expect(screen.getByText('Verified')).toBeTruthy();
+  });
+
+  it('marks the address the site uses', () => {
+    renderList();
+    openTab('Email addresses');
+
+    expect(screen.getByText('Preferred')).toBeTruthy();
+  });
+
+  it('says the mail is out once it is', () => {
+    renderList({ emailSent: true });
+    openTab('Email addresses');
+
+    expect(screen.getByRole('status')).toBeTruthy();
+  });
+
+  it('points at the profile when there is nothing to verify', () => {
+    renderList({ emails: [], profileUrl: '/identity-profiles/erico' });
+    openTab('Email addresses');
+
+    expect(screen.getByText(/carries no email address/i)).toBeTruthy();
+    expect(screen.getByText('Edit your profile')).toBeTruthy();
+  });
+});