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

package/src/components/ProfileGate/ProfileGate.test.tsx

@@ -0,0 +1,370 @@
+/**
+ * The gate, mounted.
+ *
+ * `helpers/profileGate` already covers which path wins; what is left is the
+ * wiring around it, and every one of these is a way to break a site rather
+ * than a component. Asking for the profile while anonymous answers 401 on
+ * every page of a public site. Not asking at all leaves a user with an
+ * unfinished profile browsing freely. Redirecting before the answer arrives,
+ * or after an error, makes a backend hiccup look like a locked site.
+ */
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter, Route, useLocation } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { IntlProvider } from '../../testing';
+
+import ProfileGate from './ProfileGate';
+import { rememberReturn, takeReturn } from '../../helpers/profileGate';
+
+const PROFILE = 'https://example.org/identity-profiles/alice';
+
+const dispatched: any[] = [];
+
+function store(state: any) {
+  return {
+    getState: () => state,
+    subscribe: () => () => {},
+    dispatch: (action: any) => {
+      dispatched.push(action);
+      return action;
+    },
+  };
+}
+
+function profileState(overrides: any = {}) {
+  return {
+    loading: false,
+    loaded: true,
+    error: null,
+    data: {
+      '@id': '/@my-profile',
+      userid: 'alice',
+      profile: PROFILE,
+      review_state: 'incomplete',
+    },
+    ...overrides,
+  };
+}
+
+/** Render the gate at a path and report where the router ended up. */
+function mountAt(pathname: string, state: any): { path: string } {
+  const seen = { path: pathname };
+  const Spy = () => {
+    seen.path = useLocation().pathname;
+    return null;
+  };
+  render(
+    <Provider store={store(state) as any}>
+      <IntlProvider locale="en">
+        <MemoryRouter initialEntries={[pathname]}>
+          <ProfileGate />
+          <Route path="*" component={Spy} />
+        </MemoryRouter>
+      </IntlProvider>
+    </Provider>,
+  );
+  return seen;
+}
+
+/**
+ * Run with a stubbed `window.location`, so a real navigation is observable.
+ *
+ * jsdom refuses to navigate and only logs; the assignment is the thing under
+ * test, so it has to land somewhere that can be read back.
+ */
+function withLocation(run: () => void): void {
+  const original = Object.getOwnPropertyDescriptor(window, 'location');
+  delete (window as any).location;
+  (window as any).location = { href: '' };
+  try {
+    run();
+  } finally {
+    if (original) {
+      Object.defineProperty(window, 'location', original);
+    }
+  }
+}
+
+function withStorage(run: () => void): void {
+  const original = Object.getOwnPropertyDescriptor(window, 'sessionStorage');
+  const values = new Map<string, string>();
+  Object.defineProperty(window, 'sessionStorage', {
+    configurable: true,
+    value: {
+      getItem: (k: string) => values.get(k) ?? null,
+      setItem: (k: string, v: string) => values.set(k, v),
+      removeItem: (k: string) => values.delete(k),
+    },
+  });
+  try {
+    run();
+  } finally {
+    if (original) {
+      Object.defineProperty(window, 'sessionStorage', original);
+    }
+  }
+}
+
+describe('ProfileGate', () => {
+  it('sends a user with an unfinished profile to its edit form', () => {
+    const seen = mountAt('/news', {
+      userSession: { token: 'a-token' },
+      myProfile: profileState(),
+    });
+
+    expect(seen.path).toBe('/identity-profiles/alice/edit');
+  });
+
+  it('leaves a finished profile where it was going', () => {
+    const seen = mountAt('/news', {
+      userSession: { token: 'a-token' },
+      myProfile: profileState({
+        data: {
+          '@id': '/@my-profile',
+          userid: 'alice',
+          profile: PROFILE,
+          review_state: 'complete',
+        },
+      }),
+    });
+
+    expect(seen.path).toBe('/news');
+  });
+
+  it('does not redirect before the answer has arrived', () => {
+    const seen = mountAt('/news', {
+      userSession: { token: 'a-token' },
+      myProfile: { loading: true, loaded: false, error: null },
+    });
+
+    expect(seen.path).toBe('/news');
+  });
+
+  it('does not redirect when the backend answered with an error', () => {
+    // A backend that cannot answer must not be able to make the site
+    // unreachable. The worst case of letting somebody through is that they
+    // fill their profile in later.
+    const seen = mountAt('/news', {
+      userSession: { token: 'a-token' },
+      myProfile: { loading: false, loaded: false, error: { status: 500 } },
+    });
+
+    expect(seen.path).toBe('/news');
+  });
+
+  it('asks for the profile when there is a session', () => {
+    // And again on every navigation, which is deliberate: saving the form is
+    // a navigation, and a stale answer here is a user held on a profile they
+    // have already completed.
+    dispatched.length = 0;
+
+    mountAt('/news', {
+      userSession: { token: 'a-token' },
+      myProfile: { loading: false, loaded: false, error: null },
+    });
+
+    expect(dispatched.length).toBeGreaterThan(0);
+  });
+
+  it('asks for nothing while anonymous', () => {
+    // Every page of a public site would otherwise answer 401 to a request
+    // nobody made.
+    dispatched.length = 0;
+
+    mountAt('/news', {
+      userSession: {},
+      myProfile: { loading: false, loaded: false, error: null },
+    });
+
+    expect(dispatched.length).toBe(0);
+  });
+
+  it('says what it wants before sending them away', () => {
+    // A user dropped on an edit form with no explanation cannot tell a
+    // requirement from a broken site. The backend reports which fields are
+    // missing so the message can name them.
+    dispatched.length = 0;
+
+    withStorage(() => {
+      mountAt('/news', {
+        userSession: { token: 'a-token' },
+        myProfile: profileState({
+          data: {
+            '@id': '/@my-profile',
+            userid: 'alice',
+            profile: PROFILE,
+            review_state: 'incomplete',
+            missing: ['email', 'fullname'],
+          },
+        }),
+      });
+    });
+
+    // Volto's `addMessage` action is flat: {type, id, title, body, level}.
+    const message = dispatched.find(
+      (action: any) => typeof action?.body === 'string',
+    );
+    expect(message?.body).toContain('email');
+    expect(message?.body).toContain('fullname');
+    expect(message?.level).toBe('warning');
+  });
+
+  it('returns the user to where they were going once it is complete', () => {
+    // The bug Érico hit: held mid-way through signing in to another site,
+    // he completed his profile and was left on the identity provider with
+    // no way onward.
+    //
+    // With a real navigation, and the query string intact. The destination
+    // is `@@oauth-authorize`, a backend view: this test used to assert the
+    // router had been given it, which renders Volto's 404 at exactly that
+    // URL and drops the authorization request's parameters on the way.
+    withLocation(() => {
+      withStorage(() => {
+        rememberReturn('/@@oauth-authorize?client_id=x');
+
+        const seen = mountAt('/news', {
+          userSession: { token: 'a-token' },
+          myProfile: profileState({
+            data: {
+              '@id': '/@my-profile',
+              userid: 'alice',
+              profile: PROFILE,
+              review_state: 'complete',
+              missing: [],
+            },
+          }),
+        });
+
+        expect(seen.path).toBe('/news');
+        expect(window.location.href).toBe('/@@oauth-authorize?client_id=x');
+      });
+    });
+  });
+
+  it('routes a return the app owns, rather than reloading', () => {
+    // The other half: a real navigation is for the backend's addresses, and
+    // paying for one to reach a route already running is the waste this
+    // helper exists to avoid.
+    withLocation(() => {
+      withStorage(() => {
+        rememberReturn('/news/an-article');
+
+        const seen = mountAt('/news', {
+          userSession: { token: 'a-token' },
+          myProfile: profileState({
+            data: {
+              '@id': '/@my-profile',
+              userid: 'alice',
+              profile: PROFILE,
+              review_state: 'complete',
+              missing: [],
+            },
+          }),
+        });
+
+        expect(seen.path).toBe('/news/an-article');
+        expect(window.location.href).toBe('');
+      });
+    });
+  });
+
+  it('does not return anybody who was never held', () => {
+    withStorage(() => {
+      const seen = mountAt('/news', {
+        userSession: { token: 'a-token' },
+        myProfile: profileState({
+          data: {
+            '@id': '/@my-profile',
+            userid: 'alice',
+            profile: PROFILE,
+            review_state: 'complete',
+            missing: [],
+          },
+        }),
+      });
+
+      expect(seen.path).toBe('/news');
+    });
+  });
+
+  it('renders nothing', () => {
+    const { container } = render(
+      <Provider
+        store={
+          store({
+            userSession: { token: 'a-token' },
+            myProfile: profileState(),
+          }) as any
+        }
+      >
+        <IntlProvider locale="en">
+          <MemoryRouter initialEntries={['/identity-profiles/alice/edit']}>
+            <ProfileGate />
+          </MemoryRouter>
+        </IntlProvider>
+      </Provider>,
+    );
+
+    expect(container.innerHTML).toBe('');
+  });
+});
+
+describe('the remembered destination', () => {
+  // Volto's test environment provides a `sessionStorage` that accepts writes
+  // and returns nothing, so a round trip needs a real one. Installed here
+  // rather than globally: the point of the other two tests is what the helper
+  // does when storage does *not* work.
+  it('comes back once and only once', () => {
+    // Twice would send somebody back to a page they had already left.
+    withStorage(() => {
+      rememberReturn('/news');
+
+      expect(takeReturn()).toBe('/news');
+      expect(takeReturn()).toBe(null);
+    });
+  });
+
+  it('ignores an empty destination', () => {
+    withStorage(() => {
+      rememberReturn('');
+
+      expect(takeReturn()).toBe(null);
+    });
+  });
+
+  it('is nothing when none was remembered', () => {
+    withStorage(() => {
+      expect(takeReturn()).toBe(null);
+    });
+  });
+
+  it('survives storage refusing to work', () => {
+    // Private windows throw outright on sessionStorage in some browsers.
+    // Losing the return is a worse journey; throwing is a blank page.
+    const original = Object.getOwnPropertyDescriptor(window, 'sessionStorage');
+    Object.defineProperty(window, 'sessionStorage', {
+      configurable: true,
+      value: {
+        getItem: () => {
+          throw new Error('nope');
+        },
+        setItem: () => {
+          throw new Error('nope');
+        },
+        removeItem: () => {
+          throw new Error('nope');
+        },
+      },
+    });
+    try {
+      expect(() => rememberReturn('/news')).not.toThrow();
+      expect(takeReturn()).toBe(null);
+    } finally {
+      if (original) {
+        Object.defineProperty(window, 'sessionStorage', original);
+      }
+    }
+  });
+});

package/src/components/ProfileGate/ProfileGate.tsx

@@ -0,0 +1,172 @@
+/**
+ * Holding a signed-in user on their profile until it is complete.
+ *
+ * The backend has a gate of its own, and it deliberately lets
+ * `plone.restapi` requests through: Volto fetches the edit form over the API,
+ * so gating those would break the page the user is being sent to. Every
+ * navigation in this app is such a request, which means the backend gate
+ * never fires for a Volto site and this component is where the same rule
+ * lives.
+ *
+ * Wire it into `appExtras` so that it is mounted on every route:
+ *
+ * ```ts
+ * config.settings.appExtras = [
+ *   ...config.settings.appExtras,
+ *   { match: '', component: ProfileGate },
+ * ];
+ * ```
+ *
+ * It does three things, and the second and third exist because the first one
+ * on its own was a trap in the demo.
+ *
+ * 1. **Redirect**, while the profile is incomplete.
+ * 2. **Say why.** A user dropped on an edit form with no explanation cannot
+ *    tell a requirement from a broken site. The backend reports which fields
+ *    are missing, so the message names them.
+ * 3. **Come back.** The interruption happens mid-journey — in the demo, in
+ *    the middle of signing in to *another* site through this one — and a user
+ *    who fills the form in was left on their profile with no way onward. The
+ *    destination is remembered before redirecting and restored the moment the
+ *    profile stops being incomplete.
+ *
+ * The destination is not always this app's to remember. When the backend's
+ * authorization endpoint pauses a federated sign-in at this form, it hands
+ * the request to resume over as `return_url`, and that target is a backend
+ * view rather than a route — so it is taken into the same memory on arrival
+ * and resumed with a real navigation.
+ *
+ * The decision itself lives in `helpers/profileGate`, where it is tested
+ * without a store.
+ * @module components/ProfileGate/ProfileGate
+ */
+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 { addMessage } from '@plone/volto/actions';
+
+import { getMyProfile } from '../../actions';
+import {
+  gateTarget,
+  handedOverReturn,
+  rememberReturn,
+  takeReturn,
+} from '../../helpers/profileGate';
+import { goTo } from '../../helpers/navigate';
+
+const messages = defineMessages({
+  title: {
+    id: 'Complete your profile',
+    defaultMessage: 'Complete your profile',
+  },
+  body: {
+    id: 'Your profile needs a few more details before you can continue.',
+    defaultMessage:
+      'Your profile needs a few more details before you can continue.',
+  },
+  bodyWithFields: {
+    id: 'Please fill in {fields} before you can continue.',
+    defaultMessage: 'Please fill in {fields} before you can continue.',
+  },
+});
+
+interface ProfileGateProps {
+  /** Backend base URL, when it differs from the frontend's. */
+  apiPath?: string;
+}
+
+const ProfileGate: React.FC<ProfileGateProps> = ({ apiPath = '' }) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const location = useLocation();
+  const intl = useIntl();
+  const asked = useRef(false);
+  const explained = useRef(false);
+
+  const token = useSelector((state: any) => state.userSession?.token);
+  const profile = useSelector((state: any) => state.myProfile);
+
+  useEffect(() => {
+    // Anonymous users have no profile to be held for, and asking would answer
+    // 401 on every page of a public site.
+    if (!token) {
+      return;
+    }
+    // Re-asked on every navigation, not once: saving the form is a navigation,
+    // and a stale answer here is a user held on a profile they have already
+    // completed.
+    asked.current = true;
+    dispatch(getMyProfile());
+  }, [dispatch, token, location.pathname]);
+
+  useEffect(() => {
+    if (!token || !profile?.loaded || profile?.error) {
+      // Not yet, or not at all. A backend that cannot answer must not be able
+      // to make the site unreachable: the worst case of letting somebody
+      // through is that they fill their profile in later.
+      return;
+    }
+
+    // Whether the *profile* is unfinished, which is not the same question as
+    // whether this page would be redirected. Keying the return on `gateTarget`
+    // instead is an infinite loop: the gate sends the user to their profile,
+    // and being on their profile makes `gateTarget` answer null, which reads
+    // as "they finished" and sends them straight back.
+    // A destination handed over by the backend. The authorization endpoint
+    // pauses its own request at this form and passes it as `return_url`;
+    // taking it into the same memory means one way back rather than two.
+    const handedOver = handedOverReturn(location.search);
+    if (handedOver) {
+      rememberReturn(handedOver);
+    }
+
+    const held =
+      !!profile.data?.profile && profile.data.review_state === 'incomplete';
+
+    if (!held) {
+      // Finished, or never unfinished. If they were held earlier, this is the
+      // moment they completed it, so send them on to where they were going.
+      const back = takeReturn();
+      if (back && back !== location.pathname) {
+        goTo(back, history.replace);
+      }
+      return;
+    }
+
+    const target = gateTarget(profile.data, location.pathname, apiPath);
+
+    if (target && target !== location.pathname) {
+      rememberReturn(`${location.pathname}${location.search}`);
+      if (!explained.current) {
+        explained.current = true;
+        const missing = profile.data?.missing ?? [];
+        dispatch(
+          addMessage(
+            intl.formatMessage(messages.title),
+            missing.length
+              ? intl.formatMessage(messages.bodyWithFields, {
+                  fields: missing.join(', '),
+                })
+              : intl.formatMessage(messages.body),
+            'warning',
+          ),
+        );
+      }
+      history.replace(target);
+    }
+  }, [
+    profile,
+    location.pathname,
+    location.search,
+    history,
+    apiPath,
+    dispatch,
+    intl,
+    token,
+  ]);
+
+  return null;
+};
+
+export default ProfileGate;

package/src/components/Toolbar/PersonalTools.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
+import PersonalTools from './PersonalTools';
+import { withToolbar } from '../../storybook/withUserMenu';
+import IdentitiesMenuItem from '../UserMenu/IdentitiesMenuItem';
+import ProfileMenuItem from '../UserMenu/ProfileMenuItem';
+import {
+  PersonalInformationMenuItem,
+  PreferencesMenuItem,
+  SiteSetupMenuItem,
+} from '../UserMenu/UserMenuPlugs';
+import { LOADED, USER, withStore } from '../../stories/fixtures';
+
+/**
+ * The shadowed personal-tools menu.
+ *
+ * Worth a story even though it is Volto's component: it is this package's
+ * code now, and these stories are where the entries are seen *in place*
+ * rather than each on its own. Every entry is a plug, so a story that mounts
+ * none of them renders an empty menu -- which is itself worth seeing, since
+ * that is what a site removing them all would get.
+ *
+ * The menu is normally sized to the toolbar it slides over, which is not
+ * here -- `theToolbar` is an empty ref, so it takes its natural width.
+ */
+const meta: Meta<typeof PersonalTools> = {
+  title: 'Identity/UserMenu/PersonalTools',
+  component: PersonalTools,
+  // It renders `.personal-tools.pastanaga-menu` itself, but every rule for
+  // that class is nested under `#toolbar` in `toolbar.less` -- so without
+  // this ancestor the menu came out as an unstyled column of links.
+  decorators: [withToolbar],
+  parameters: { fullBleed: true },
+  args: {
+    loadComponent: () => {},
+    unloadComponent: () => {},
+    theToolbar: { current: null },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof PersonalTools>;
+
+const withState = (user: Record<string, unknown>, actions: unknown[] = []) =>
+  withStore({
+    userProfile: { ...LOADED, data: { ...USER, ...user } },
+    actions: { actions: { user: actions } },
+  });
+
+/** Everything the add-on registers, which is the whole menu. */
+const Menu = (args: React.ComponentProps<typeof PersonalTools>) => (
+  <PluggablesProvider>
+    <PersonalInformationMenuItem />
+    <PreferencesMenuItem />
+    <SiteSetupMenuItem />
+    <IdentitiesMenuItem />
+    <ProfileMenuItem />
+    <PersonalTools {...args} />
+  </PluggablesProvider>
+);
+
+/** An ordinary member: no Site Setup, and "My profile" in the first slot. */
+export const Member: Story = {
+  render: (args) => <Menu {...args} />,
+  decorators: [withState({})],
+};
+
+/** A manager, who also gets Site Setup — last, because it is about the site. */
+export const Manager: Story = {
+  render: (args) => <Menu {...args} />,
+  decorators: [withState({}, [{ id: 'plone_setup' }])],
+};
+
+/**
+ * A user with no Profile: Volto's own Profile link takes the slot back,
+ * leading to the member form at `/personal-information`.
+ *
+ * "Sign-in methods" stays, because identities are core rather than part of
+ * the optional layer.
+ */
+export const WithoutTheProfileLayer: Story = {
+  render: (args) => <Menu {...args} />,
+  decorators: [withState({ profile_url: null })],
+};
+
+/**
+ * A user with no name yet. The header shows the userid rather than nothing:
+ * an empty header reads as a broken menu.
+ */
+export const NameNotLoadedYet: Story = {
+  render: (args) => <Menu {...args} />,
+  decorators: [withState({ fullname: null, username: null })],
+};
+
+/**
+ * The component on its own, with nothing plugged in.
+ *
+ * Not a state a running site is in -- the add-on registers five entries --
+ * but it is what this component actually contributes: the header, the width,
+ * and an empty list.
+ */
+export const NothingPluggedIn: Story = {
+  render: (args) => (
+    <PluggablesProvider>
+      <PersonalTools {...args} />
+    </PluggablesProvider>
+  ),
+  decorators: [withState({})],
+};