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

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

@@ -0,0 +1,173 @@
+import { describe, expect, it } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import React from 'react';
+
+import UserAccountPanel, { formatDate } from './UserAccountPanel';
+import type { UserAccount } from '../../types';
+
+const ACCOUNT: UserAccount = {
+  '@id': '/@user-account/alice',
+  userid: 'alice',
+  fullname: 'Alice Liddell',
+  profile_url: '/identity-profiles/alice',
+  identities: [
+    {
+      provider: 'github',
+      title: 'GitHub',
+      subject: '99',
+      created: '2026-03-02T11:40:00+00:00',
+      last_login: '2026-08-21T18:03:00+00:00',
+      provider_configured: true,
+      provider_enabled: true,
+      groups: [],
+    },
+  ],
+  emails: [{ address: 'alice@example.com', verified: true, preferred: true }],
+  last_authenticated: '2026-08-21T18:03:00+00:00',
+  events_total: 1,
+  events: [
+    {
+      event: 'authenticated',
+      provider: 'github',
+      success: true,
+      timestamp: '2026-08-21T18:03:00+00:00',
+      detail: {},
+    },
+  ],
+};
+
+function renderPanel(
+  props: Partial<React.ComponentProps<typeof UserAccountPanel>> = {},
+) {
+  render(<UserAccountPanel account={ACCOUNT} loading={false} {...props} />);
+}
+
+describe('formatDate', () => {
+  it('answers nothing for a missing timestamp', () => {
+    expect(formatDate(null)).toBeNull();
+  });
+
+  it('answers nothing rather than "Invalid Date"', () => {
+    // A backend that changed shape should not print that into a control
+    // panel.
+    expect(formatDate('not a date')).toBeNull();
+  });
+});
+
+/**
+ * Select one of the panel's tabs by its label.
+ *
+ * Only the selected panel is in the document, so a section other than the
+ * first is reached by pressing its tab rather than by querying for it.
+ */
+function openTab(label: string) {
+  fireEvent.click(screen.getByRole('tab', { name: label }));
+}
+
+describe('UserAccountPanel', () => {
+  it('names the providers rather than their ids', () => {
+    // The first of the two questions. `@users` carries bare ids, which is not
+    // something to show somebody.
+    renderPanel();
+
+    expect(screen.getByText('GitHub')).toBeTruthy();
+  });
+
+  it('says when they last signed in', () => {
+    // The second. Nothing in Plone records it.
+    renderPanel();
+
+    expect(screen.getByText(/Last signed in/)).toBeTruthy();
+  });
+
+  it('does not claim they never signed in when the log is simply empty', () => {
+    // The log is bounded, so a dormant account has had its entries dropped.
+    renderPanel({ account: { ...ACCOUNT, last_authenticated: null } });
+
+    expect(screen.getByText('Not in the retained log')).toBeTruthy();
+  });
+
+  it('flags an identity whose provider is switched off', () => {
+    // It looks like a broken login and reads like nothing.
+    renderPanel({
+      account: {
+        ...ACCOUNT,
+        identities: [{ ...ACCOUNT.identities[0], provider_enabled: false }],
+      },
+    });
+
+    expect(screen.getByText('Disabled')).toBeTruthy();
+  });
+
+  it('flags an identity whose provider was removed', () => {
+    renderPanel({
+      account: {
+        ...ACCOUNT,
+        identities: [
+          {
+            ...ACCOUNT.identities[0],
+            provider_configured: false,
+            provider_enabled: false,
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByText('Not configured')).toBeTruthy();
+    expect(screen.queryByText('Disabled')).toBeNull();
+  });
+
+  it('says so for a password-only account', () => {
+    renderPanel({ account: { ...ACCOUNT, identities: [] } });
+
+    expect(screen.getByText(/password only/)).toBeTruthy();
+  });
+
+  it('shows which addresses are verified', () => {
+    renderPanel();
+    openTab('Email addresses');
+
+    expect(screen.getByText('alice@example.com')).toBeTruthy();
+    expect(screen.getByText('Verified')).toBeTruthy();
+  });
+
+  it('lists the recent events', () => {
+    renderPanel();
+    openTab('Recent activity');
+
+    expect(screen.getByText('authenticated')).toBeTruthy();
+  });
+
+  it('opens on the sign-in methods', () => {
+    // Three questions about one person, and this is the one an administrator
+    // came for: the other two are reachable, not in the way.
+    renderPanel();
+
+    expect(screen.getByRole('tab', { selected: true }).textContent).toBe(
+      'Sign-in methods',
+    );
+    expect(screen.queryByText('alice@example.com')).toBeNull();
+  });
+
+  it('keeps the last sign-in outside the tabs', () => {
+    // It is not one of the three sections: it is the fact the page is about,
+    // and hiding it behind a tab would make it the answer to a question
+    // nobody thought to ask.
+    renderPanel();
+    openTab('Recent activity');
+
+    expect(document.body.textContent).toContain('Last signed in');
+  });
+
+  it('says so while loading', () => {
+    renderPanel({ loading: true, account: null });
+
+    expect(screen.getByRole('status')).toBeTruthy();
+  });
+
+  it('says so when the read was refused', () => {
+    renderPanel({ account: null, error: { status: 403 } });
+
+    expect(screen.getByRole('alert')).toBeTruthy();
+  });
+});

package/src/components/ControlPanel/UserAccountPanel.tsx

@@ -0,0 +1,273 @@
+/**
+ * How one user gets in, and when they last did.
+ *
+ * Two questions an administrator could not ask anywhere in Plone. Which
+ * providers this person has configured -- `@users` carries the identities as
+ * bare ids, which is not something to show somebody -- and when they last
+ * authenticated, which nothing in Plone records at all.
+ *
+ * Presentational: the route that shows this owns the request, so it can be
+ * rendered in a story and in a test without a store.
+ *
+ * Three sections, and they are tabs rather than a column of headings. It is
+ * three separate questions about one person -- how they get in, which
+ * addresses are theirs, what they have done lately -- and an administrator
+ * opening this page has one of them in mind, not all three. The same tabs the
+ * sign-in methods page wears, since that page is this question asked by the
+ * account's owner.
+ * @module components/ControlPanel/UserAccountPanel
+ */
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Tabs } from '@plone/components';
+import { Tab, TabList, TabPanel } from 'react-aria-components';
+
+// `@plone/components` ships its CSS separately from its components, so a Tabs
+// rendered without this is unstyled -- the same split `PasswordForm` documents
+// for TextField.css. `.identity-tabs` in the root stylesheet adds the add-on's
+// own colours on top.
+import '@plone/components/src/styles/basic/Tabs.css';
+
+import type { UserAccount } from '../../types';
+
+import './UserAccountPanel.scss';
+
+const messages = defineMessages({
+  loading: { id: 'user-account-loading', defaultMessage: 'Loading…' },
+  failed: {
+    id: 'user-account-failed',
+    defaultMessage: 'That could not be read.',
+  },
+  lastAuthenticated: {
+    id: 'Last signed in',
+    defaultMessage: 'Last signed in',
+  },
+  never: {
+    id: 'user-account-never',
+    defaultMessage: 'Not in the retained log',
+  },
+  neverHelp: {
+    id: 'user-account-never-help',
+    defaultMessage:
+      'Not the same as never: the authentication log is bounded, so an ' +
+      'account dormant longer than the retention period has had its ' +
+      'entries dropped.',
+  },
+  providers: { id: 'Sign-in methods', defaultMessage: 'Sign-in methods' },
+  noProviders: {
+    id: 'user-account-no-providers',
+    defaultMessage: 'This account signs in with a password only.',
+  },
+  linked: { id: 'user-account-linked', defaultMessage: 'linked {date}' },
+  lastUsed: {
+    id: 'user-account-last-used',
+    defaultMessage: 'last used {date}',
+  },
+  neverUsed: {
+    id: 'user-account-never-used',
+    defaultMessage: 'never used',
+  },
+  disabled: { id: 'Disabled', defaultMessage: 'Disabled' },
+  disabledHelp: {
+    id: 'user-account-disabled-help',
+    defaultMessage:
+      'The provider is switched off, so this identity cannot sign anybody in.',
+  },
+  gone: { id: 'Not configured', defaultMessage: 'Not configured' },
+  goneHelp: {
+    id: 'user-account-gone-help',
+    defaultMessage:
+      'The provider was removed while this identity was still stored ' +
+      'against it. Nobody can sign in through it, and nothing was deleted.',
+  },
+  addresses: { id: 'Email addresses', defaultMessage: 'Email addresses' },
+  verified: { id: 'Verified', defaultMessage: 'Verified' },
+  noAddresses: {
+    id: 'user-account-no-addresses',
+    defaultMessage: 'This account has no profile, so it carries no addresses.',
+  },
+  events: { id: 'Recent activity', defaultMessage: 'Recent activity' },
+  sections: {
+    id: 'user-account-sections',
+    defaultMessage: 'What this account is made of',
+  },
+  noEvents: {
+    id: 'user-account-no-events',
+    defaultMessage: 'Nothing recorded.',
+  },
+});
+
+/**
+ * Render an ISO timestamp for a reader.
+ *
+ * `toLocaleString` rather than a format of our own: an administrator reading
+ * a login time wants it in the conventions of their own machine, and this
+ * panel has no locale opinion worth imposing.
+ *
+ * @param value An ISO 8601 timestamp, or null.
+ * @returns The formatted date, or null.
+ */
+export function formatDate(value: string | null | undefined): string | null {
+  if (!value) {
+    return null;
+  }
+  const parsed = new Date(value);
+  // An unparseable timestamp is a backend that changed shape; showing
+  // "Invalid Date" in a control panel is worse than showing nothing.
+  return Number.isNaN(parsed.getTime()) ? null : parsed.toLocaleString();
+}
+
+interface UserAccountPanelProps {
+  account?: UserAccount | null;
+  loading: boolean;
+  error?: unknown;
+}
+
+const UserAccountPanel: React.FC<UserAccountPanelProps> = ({
+  account,
+  loading,
+  error,
+}) => {
+  const intl = useIntl();
+
+  if (loading) {
+    return (
+      <div className="identity-account" role="status">
+        {intl.formatMessage(messages.loading)}
+      </div>
+    );
+  }
+  if (error || !account) {
+    return (
+      <div className="identity-account" role="alert">
+        {intl.formatMessage(messages.failed)}
+      </div>
+    );
+  }
+
+  const lastSeen = formatDate(account.last_authenticated);
+
+  return (
+    <div className="identity-account">
+      <p className="identity-account__last">
+        <strong>{intl.formatMessage(messages.lastAuthenticated)}: </strong>
+        {lastSeen ?? (
+          <span title={intl.formatMessage(messages.neverHelp)}>
+            {intl.formatMessage(messages.never)}
+          </span>
+        )}
+      </p>
+
+      <Tabs className="identity-tabs">
+        <TabList aria-label={intl.formatMessage(messages.sections)}>
+          <Tab id="providers">{intl.formatMessage(messages.providers)}</Tab>
+          <Tab id="addresses">{intl.formatMessage(messages.addresses)}</Tab>
+          <Tab id="events">{intl.formatMessage(messages.events)}</Tab>
+        </TabList>
+
+        <TabPanel id="providers">
+          {account.identities.length ? (
+            <ul className="identity-account__list">
+              {account.identities.map((identity) => (
+                <li key={identity.provider} data-provider={identity.provider}>
+                  <span className="identity-account__title">
+                    {identity.title}
+                  </span>
+                  {!identity.provider_configured ? (
+                    <span
+                      className="identity-account__badge"
+                      data-state="gone"
+                      title={intl.formatMessage(messages.goneHelp)}
+                    >
+                      {intl.formatMessage(messages.gone)}
+                    </span>
+                  ) : !identity.provider_enabled ? (
+                    <span
+                      className="identity-account__badge"
+                      data-state="disabled"
+                      title={intl.formatMessage(messages.disabledHelp)}
+                    >
+                      {intl.formatMessage(messages.disabled)}
+                    </span>
+                  ) : null}
+                  <span className="identity-note">
+                    {intl.formatMessage(messages.linked, {
+                      date: formatDate(identity.created) ?? identity.created,
+                    })}
+                    {', '}
+                    {identity.last_login
+                      ? intl.formatMessage(messages.lastUsed, {
+                          date: formatDate(identity.last_login),
+                        })
+                      : intl.formatMessage(messages.neverUsed)}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="identity-note">
+              {intl.formatMessage(messages.noProviders)}
+            </p>
+          )}
+        </TabPanel>
+
+        <TabPanel id="addresses">
+          {account.emails.length ? (
+            <ul className="identity-account__list">
+              {account.emails.map((entry) => (
+                <li key={entry.address} data-address={entry.address}>
+                  <span className="identity-account__title">
+                    {entry.address}
+                  </span>
+                  {entry.verified ? (
+                    <span
+                      className="identity-account__badge"
+                      data-state="verified"
+                    >
+                      {intl.formatMessage(messages.verified)}
+                    </span>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="identity-note">
+              {intl.formatMessage(messages.noAddresses)}
+            </p>
+          )}
+        </TabPanel>
+
+        <TabPanel id="events">
+          {account.events.length ? (
+            <ul className="identity-account__list">
+              {account.events.map((event, index) => (
+                <li
+                  // Nothing in an audit entry is unique -- two sign-ins a second
+                  // apart through the same provider are identical but for the
+                  // timestamp -- and the list is a fixed newest-first slice that
+                  // is never reordered, so the position is the honest key.
+                  key={`${event.timestamp}-${index}`}
+                  data-event={event.event}
+                  data-success={String(event.success)}
+                >
+                  <span className="identity-account__title">{event.event}</span>
+                  <span className="identity-note">
+                    {event.provider}
+                    {' · '}
+                    {formatDate(event.timestamp) ?? event.timestamp}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="identity-note">
+              {intl.formatMessage(messages.noEvents)}
+            </p>
+          )}
+        </TabPanel>
+      </Tabs>
+    </div>
+  );
+};
+
+export default UserAccountPanel;

package/src/components/FirstLogin/FirstLogin.scss

@@ -0,0 +1,12 @@
+/**
+ * The one line shown while the first-login decision is being made.
+ *
+ * Inside `LoginPanel`, like the callback: the card and its centring are the
+ * panel's, and this only centres the line within it.
+ */
+.identity-first-login {
+  padding: var(--identity-gap) 0;
+  margin: 0;
+  color: var(--identity-muted);
+  text-align: center;
+}

package/src/components/FirstLogin/FirstLogin.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import FirstLogin from './FirstLogin';
+import { LOADED, LOADING, withStore } from '../../stories/fixtures';
+
+const meta: Meta<typeof FirstLogin> = {
+  title: 'Identity/FirstLogin',
+  component: FirstLogin,
+};
+export default meta;
+
+type Story = StoryObj<typeof FirstLogin>;
+
+export const Deciding: Story = {
+  decorators: [withStore({ myProfile: LOADING })],
+};
+
+/** A user whose Profile still needs filling in. */
+export const ProfileIncomplete: Story = {
+  decorators: [
+    withStore({
+      myProfile: {
+        ...LOADED,
+        data: {
+          '@id': '/@my-profile',
+          userid: 'alice',
+          profile: 'https://example.org/identity-profiles/alice',
+          review_state: 'incomplete',
+        },
+      },
+    }),
+  ],
+};
+
+/** A user with no Profile: there is nothing to complete. */
+export const NoProfile: Story = {
+  decorators: [
+    withStore({
+      myProfile: {
+        ...LOADED,
+        data: {
+          '@id': '/@my-profile',
+          userid: 'alice',
+          profile: null,
+          review_state: null,
+        },
+      },
+    }),
+  ],
+};

package/src/components/FirstLogin/FirstLogin.tsx

@@ -0,0 +1,94 @@
+/**
+ * First-login routing.
+ *
+ * A user who has just signed in for the first time has a Profile in the
+ * `incomplete` state and nothing in it. Sending them straight to wherever
+ * they were heading means they never see it; asking every user to fill one in
+ * on every login would be worse. This route asks the backend which of the two
+ * applies and navigates accordingly.
+ *
+ * Wire it as the destination a successful sign-in navigates to, passing the
+ * user's original target along:
+ *
+ * ```tsx
+ * <Callback onToken={(token, cameFrom) => {
+ *   dispatch(loginSuccess(token));
+ *   history.push(`/first-login?return_url=${encodeURIComponent(cameFrom)}`);
+ * }} />
+ * ```
+ *
+ * It is a separate route rather than logic inside `Callback` so that a site
+ * that does not want the step can simply not use it, and so the decision is
+ * reachable from a magic-link sign-in as well as an OAuth one.
+ * @module components/FirstLogin/FirstLogin
+ */
+import React, { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { getMyProfile } from '../../actions';
+import { afterLogin } from '../../helpers/firstLogin';
+import { returnUrl } from '../../helpers/returnUrl';
+import LoginPanel from '../Login/LoginPanel';
+
+import './FirstLogin.scss';
+
+const messages = defineMessages({
+  title: { id: 'Log in', defaultMessage: 'Log in' },
+  working: { id: 'Signing you in', defaultMessage: 'Signing you in…' },
+});
+
+interface FirstLoginProps {
+  /** Backend base URL, when it differs from the frontend's. */
+  apiPath?: string;
+}
+
+const FirstLogin: React.FC<FirstLoginProps> = ({ apiPath = '' }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const location = useLocation();
+  const dispatched = useRef(false);
+  const navigated = useRef(false);
+
+  const profile = useSelector((state: any) => state.myProfile);
+
+  useEffect(() => {
+    if (dispatched.current) {
+      return;
+    }
+    dispatched.current = true;
+    dispatch(getMyProfile());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (navigated.current) {
+      return;
+    }
+    // An error here is not a reason to strand the user on a spinner: they are
+    // signed in either way, and the worst case of carrying on is that they
+    // fill their profile in later.
+    if (!profile?.loaded && !profile?.error) {
+      return;
+    }
+    navigated.current = true;
+    const fallback = returnUrl(location.search, '/');
+    history.replace(
+      profile?.error ? fallback : afterLogin(profile.data, fallback, apiPath),
+    );
+  }, [profile, history, location.search, apiPath]);
+
+  return (
+    // The same card the callback and the login page are: this is the last
+    // step of the same flow, and a bare line of text here sat against the
+    // left edge of the window.
+    <LoginPanel title={intl.formatMessage(messages.title)}>
+      <p className="identity-first-login" role="status">
+        {intl.formatMessage(messages.working)}
+      </p>
+    </LoginPanel>
+  );
+};
+
+export default FirstLogin;

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Identities from './Identities';
+import {
+  IDENTITIES,
+  LOADED,
+  LOADING,
+  PROFILE_EMAILS,
+  PROVIDERS,
+  withStore,
+} from '../../stories/fixtures';
+
+const meta: Meta<typeof Identities> = {
+  title: 'Identity/Identities/Identities',
+  component: Identities,
+};
+export default meta;
+
+type Story = StoryObj<typeof Identities>;
+
+const base = {
+  identities: { ...LOADED, data: IDENTITIES },
+  // What the page offers to add is the backend's own `available`, which is
+  // not the login screen's listing: a provider taken off the login page is
+  // still one an existing user may attach.
+  linkableProviders: { ...LOADED, data: PROVIDERS },
+  myProfile: {
+    ...LOADED,
+    data: {
+      '@id': '/@my-profile',
+      userid: 'erico',
+      profile: '/identity-profiles/erico',
+      review_state: 'complete',
+      missing: [],
+      emails: PROFILE_EMAILS,
+    },
+  },
+  identityLinking: {},
+  identityUnlink: {},
+};
+
+/** Where a signed-in user manages their own ways in. */
+export const Default: Story = { decorators: [withStore(base)] };
+
+export const Loading: Story = {
+  decorators: [withStore({ ...base, identities: { ...LOADING, data: [] } })],
+};
+
+export const Unlinking: Story = {
+  decorators: [withStore({ ...base, identityUnlink: LOADING })],
+};