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

package/src/components/Widgets/ProviderIconWidget.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ProviderIconWidget from './ProviderIconWidget';
+
+const SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+  '<path d="M8 1l7 13H1z"/></svg>';
+
+const meta: Meta<typeof ProviderIconWidget> = {
+  title: 'Identity/Widgets/ProviderIconWidget',
+  component: ProviderIconWidget,
+  args: {
+    id: 'icon',
+    title: 'Icon',
+    value: `filenameb64:${btoa('icon.svg')};datab64:${btoa(SVG)}`,
+    onChange: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ProviderIconWidget>;
+
+/** An icon already uploaded, previewed as the button will draw it. */
+export const WithIcon: Story = {};
+
+/** No icon yet, which is how every provider starts. */
+export const Empty: Story = { args: { value: '' } };
+
+/** While something else is in flight. */
+export const Disabled: Story = { args: { isDisabled: true } };

package/src/components/Widgets/ProviderIconWidget.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../testing';
+import React from 'react';
+
+import ProviderIconWidget, { iconSource } from './ProviderIconWidget';
+
+const SVG = '<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 0"/></svg>';
+const ENVELOPE = `filenameb64:${btoa('icon.svg')};datab64:${btoa(SVG)}`;
+
+describe('iconSource', () => {
+  it('reads the document out of the envelope', () => {
+    expect(iconSource(ENVELOPE)).toBe(SVG);
+  });
+
+  it('is empty for a value that is not an envelope', () => {
+    expect(iconSource('')).toBe('');
+    expect(iconSource(undefined)).toBe('');
+    expect(iconSource('<svg/>')).toBe('');
+  });
+
+  it('is empty rather than throwing on an undecodable payload', () => {
+    // A field that cannot be decoded shows empty and is uploaded again. A
+    // crash here would take the whole provider form with it.
+    expect(iconSource('filenameb64:aaa;datab64:!!!not base64!!!')).toBe('');
+  });
+});
+
+describe('ProviderIconWidget', () => {
+  it('previews by inlining the document', () => {
+    // Not through `/@@site-logo/<filename>`, which is what Volto's own
+    // registry image widget does and which 404s for a provider icon.
+    render(
+      <ProviderIconWidget id="icon" value={ENVELOPE} onChange={vi.fn()} />,
+    );
+
+    expect(
+      screen.getByTestId('provider-icon-preview').querySelector('svg'),
+    ).toBeTruthy();
+  });
+
+  it('offers a replacement once there is an icon', () => {
+    render(
+      <ProviderIconWidget id="icon" value={ENVELOPE} onChange={vi.fn()} />,
+    );
+
+    expect(screen.getByRole('button', { name: /replace/i })).toBeTruthy();
+  });
+
+  it('offers only an upload when there is none', () => {
+    render(<ProviderIconWidget id="icon" value="" onChange={vi.fn()} />);
+
+    expect(screen.getByRole('button', { name: /choose/i })).toBeTruthy();
+    expect(screen.queryByTestId('provider-icon-preview')).toBeNull();
+  });
+});

package/src/components/Widgets/ProviderIconWidget.tsx

@@ -0,0 +1,143 @@
+/**
+ * Upload the SVG a login button is drawn with.
+ *
+ * Volto ships `RegistryImageWidget` for exactly this shape of value — the
+ * `filenameb64:<name>;datab64:<bytes>` envelope Plone stores `site_logo` in —
+ * and this widget sends and reads the identical envelope, so the backend
+ * field is an ordinary `schema.Bytes`.
+ *
+ * What it does not reuse is the preview. `RegistryImageWidget` builds one from
+ * `/@@site-logo/<filename>`, which is Plone's own view and answers 404 for a
+ * provider icon. This previews by decoding the envelope and inlining the
+ * document, which costs no request and is exactly what the login button does
+ * with the same bytes — so what an operator sees here is what a visitor gets.
+ *
+ * Refusing a non-SVG file is the backend's job and is done on the field
+ * constraint, so an upload that slips past the accept filter is still refused
+ * with a message naming what was wrong. The filter here is a courtesy, not a
+ * check.
+ * @module components/Widgets/ProviderIconWidget
+ */
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+import './ProviderIconWidget.scss';
+
+const messages = defineMessages({
+  choose: { id: 'Choose a file', defaultMessage: 'Choose a file' },
+  replace: {
+    id: 'Replace existing file',
+    defaultMessage: 'Replace existing file',
+  },
+  remove: { id: 'Remove', defaultMessage: 'Remove' },
+  hint: {
+    id: 'provider-icon-hint',
+    defaultMessage:
+      'An SVG file. It is drawn in the button, so it takes the button' +
+      ' colours; anything else is refused.',
+  },
+});
+
+/** What the envelope looks like, and how its two halves are named. */
+const ENVELOPE = /^filenameb64:([^;]*);datab64:(.*)$/;
+
+/**
+ * Read the SVG source out of a stored value.
+ *
+ * @param value The field value, either an envelope or empty.
+ * @returns The source, or an empty string when there is nothing to draw.
+ */
+export function iconSource(value: unknown): string {
+  const match = ENVELOPE.exec(String(value ?? ''));
+  if (!match) {
+    return '';
+  }
+  try {
+    // `atob` gives one byte per character, which is not the same as UTF-8
+    // text: an icon carrying a non-ASCII character in a title would come back
+    // mojibake without this step.
+    const bytes = Uint8Array.from(atob(match[2]), (c) => c.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+  } catch {
+    // A value that is not decodable is not a crash: the field shows empty and
+    // the operator uploads again.
+    return '';
+  }
+}
+
+interface ProviderIconWidgetProps {
+  id: string;
+  value?: string;
+  onChange: (id: string, value: string) => void;
+  isDisabled?: boolean;
+  [key: string]: unknown;
+}
+
+const ProviderIconWidget: React.FC<ProviderIconWidgetProps> = (props) => {
+  const { id, value, onChange, isDisabled } = props;
+  const intl = useIntl();
+  const input = React.useRef<HTMLInputElement>(null);
+  const source = iconSource(value);
+
+  const onFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const parsed = /^data:(.*);(.*),(.*)$/.exec(String(reader.result ?? ''));
+      if (!parsed) {
+        return;
+      }
+      onChange(id, `filenameb64:${btoa(file.name)};datab64:${parsed[3]}`);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <FormFieldWrapper {...props} className="provider-icon-widget">
+      {source ? (
+        <div
+          className="provider-icon-widget__preview"
+          data-testid="provider-icon-preview"
+          // The same document the login button inlines. It reached here from
+          // the backend, which sanitizes an icon on assignment rather than on
+          // render, so what is stored is already what is safe to draw.
+          dangerouslySetInnerHTML={{ __html: source }}
+        />
+      ) : null}
+
+      <input
+        ref={input}
+        type="file"
+        accept="image/svg+xml,.svg"
+        hidden
+        onChange={onFile}
+      />
+      <Button
+        type="button"
+        disabled={isDisabled}
+        onClick={() => input.current?.click()}
+      >
+        {intl.formatMessage(source ? messages.replace : messages.choose)}
+      </Button>
+      {source ? (
+        <Button
+          type="button"
+          basic
+          disabled={isDisabled}
+          onClick={() => onChange(id, '')}
+        >
+          {intl.formatMessage(messages.remove)}
+        </Button>
+      ) : null}
+      <p className="help">{intl.formatMessage(messages.hint)}</p>
+    </FormFieldWrapper>
+  );
+};
+
+export default ProviderIconWidget;

package/src/config/menu.ts

@@ -0,0 +1,35 @@
+import type { ConfigType } from '@plone/registry';
+import ApplicationsMenuItem from '../components/UserMenu/ApplicationsMenuItem';
+import IdentitiesMenuItem from '../components/UserMenu/IdentitiesMenuItem';
+import ProfileMenuItem from '../components/UserMenu/ProfileMenuItem';
+import UserProfileLoader from '../components/UserMenu/UserProfileLoader';
+import {
+  PersonalInformationMenuItem,
+  PreferencesMenuItem,
+  SiteSetupMenuItem,
+} from '../components/UserMenu/UserMenuPlugs';
+
+export default function install(config: ConfigType) {
+  // A `Plug` renders nothing itself -- it registers with the pluggable and
+  // returns null -- so it has to be mounted somewhere that is always rendered.
+  // `appExtras` with an empty `match` is that place: Volto hands it to
+  // `matchPath`, and an empty path matches every route. The entry only becomes
+  // visible when Volto renders the user menu, which is authenticated-only.
+  config.settings.appExtras = [
+    ...(config.settings.appExtras ?? []),
+    // Renders nothing; it is here to keep the signed-in user in the store
+    // for everything below, which Volto only loads when the menu opens.
+    { match: '', component: UserProfileLoader, props: {} },
+    // Volto's own three entries, which this package's shadow of
+    // `PersonalTools` no longer writes into the list itself. Registered here
+    // beside the two of our own so the whole menu is described in one place,
+    // and so a site can drop any of them by filtering this list.
+    { match: '', component: PersonalInformationMenuItem, props: {} },
+    { match: '', component: PreferencesMenuItem, props: {} },
+    { match: '', component: SiteSetupMenuItem, props: {} },
+    { match: '', component: IdentitiesMenuItem, props: {} },
+    { match: '', component: ApplicationsMenuItem, props: {} },
+    { match: '', component: ProfileMenuItem, props: {} },
+  ];
+  return config;
+}

package/src/config/reducers.ts

@@ -0,0 +1,7 @@
+import type { ConfigType } from '@plone/registry';
+import reducers from '../reducers';
+
+export default function install(config: ConfigType) {
+  config.addonReducers = { ...config.addonReducers, ...reducers };
+  return config;
+}

package/src/config/routes.test.ts

@@ -0,0 +1,177 @@
+import { describe, expect, it } from 'vitest';
+
+import install, {
+  CALLBACK_PATH,
+  CLIENTS_CONTROLPANEL_PATH,
+  CONSENT_PATH,
+  CONTROLPANEL_PATH,
+  FALLBACK_LOGIN_PATH,
+  USER_ACCOUNT_PATH,
+  userAccountUrl,
+} from './routes';
+
+/**
+ * A config as Volto hands one to an add-on's install step.
+ *
+ * @returns The config object, with the keys this step appends to.
+ */
+function emptyConfig(): any {
+  return { settings: { nonContentRoutes: [] }, addonRoutes: [] };
+}
+
+describe('the routes install step', () => {
+  it('registers a route per page this add-on serves', () => {
+    const config = emptyConfig();
+
+    install(config);
+
+    const paths = config.addonRoutes.map((route: any) => route.path);
+    expect(paths).toContain(CALLBACK_PATH);
+    expect(paths).toContain(CONSENT_PATH);
+    expect(paths).toContain(CONTROLPANEL_PATH);
+    expect(paths).toContain(USER_ACCOUNT_PATH);
+  });
+
+  describe('the user account route', () => {
+    it('is a page rather than an overlay', () => {
+      // What it shows is a page's worth of read-only facts about one person.
+      // As a modal it could not be linked to, bookmarked, opened in a new
+      // tab or reached with the back button.
+      const config = emptyConfig();
+
+      install(config);
+
+      const route = config.addonRoutes.find(
+        (each: any) => each.path === USER_ACCOUNT_PATH,
+      );
+      expect(route).toBeTruthy();
+      expect(route.exact).toBe(true);
+    });
+
+    it('needs no nonContentRoutes entry of its own', () => {
+      // Volto's own `/\/controlpanel\/.*$/` already covers everything below
+      // there, which is why this route lives under the users control panel.
+      expect(USER_ACCOUNT_PATH.startsWith('/controlpanel/')).toBe(true);
+    });
+
+    it('escapes a userid that a path segment could not carry', () => {
+      expect(userAccountUrl('a b/c')).toBe(
+        '/controlpanel/users/a%20b%2Fc/account',
+      );
+    });
+
+    it('builds a URL the route matches', () => {
+      // The constant and the builder are two spellings of one path, and
+      // nothing else would catch them drifting apart.
+      const pattern = new RegExp(
+        `^${USER_ACCOUNT_PATH.replace(':userid', '[^/]+')}$`,
+      );
+      expect(pattern.test(userAccountUrl('erico'))).toBe(true);
+    });
+  });
+
+  it('keeps its pages out of the content routes', () => {
+    // Volto would otherwise ask the backend for a content object at each of
+    // these paths, and render a 404 while the page itself works.
+    const config = emptyConfig();
+
+    install(config);
+
+    expect(
+      config.settings.nonContentRoutes.some((pattern: RegExp) =>
+        pattern.test(CONSENT_PATH),
+      ),
+    ).toBe(true);
+  });
+
+  it('gives both control panels an icon', () => {
+    // Keyed by configlet id, which is what the backend's controlpanel.xml
+    // calls them. Without it Volto draws its generic placeholder, and these
+    // two are the only unlabelled tiles in the listing.
+    const config = emptyConfig();
+
+    install(config);
+
+    expect(
+      config.settings.controlPanelsIcons['identity-providers'],
+    ).toBeTruthy();
+    expect(config.settings.controlPanelsIcons['identity-clients']).toBeTruthy();
+  });
+
+  it('keys the icons the way the panel routes are named', () => {
+    // The configlet id is the last segment of the route, and a mismatch is
+    // silent: the panel renders and the tile stays blank.
+    const config = emptyConfig();
+
+    install(config);
+
+    for (const id of Object.keys(config.settings.controlPanelsIcons)) {
+      expect(
+        [CONTROLPANEL_PATH, CLIENTS_CONTROLPANEL_PATH].some((path) =>
+          path.endsWith(`/${id}`),
+        ),
+      ).toBe(true);
+    }
+  });
+
+  it("leaves Volto's own login form reachable", () => {
+    // This add-on takes over /login, so a page it cannot render is a site
+    // nobody can sign in to -- including the administrator who would fix it.
+    const config = emptyConfig();
+
+    install(config);
+
+    const fallback = config.addonRoutes.find(
+      (route: any) => route.path === FALLBACK_LOGIN_PATH,
+    );
+    expect(fallback).toBeDefined();
+    expect(fallback.component).toBeTruthy();
+  });
+
+  it('does not point the fallback at this add-on', () => {
+    // The whole value of the route is that it renders none of this package's
+    // components, so pointing it at the add-on's own Login would be worse
+    // than not having it: it would look like an escape and be a loop.
+    const config = emptyConfig();
+
+    install(config);
+
+    const routes = Object.fromEntries(
+      config.addonRoutes.map((route: any) => [route.path, route.component]),
+    );
+    // Asserted present as well as different: a missing route is also "not
+    // the same component", and this would otherwise pass by being absent.
+    expect(routes[FALLBACK_LOGIN_PATH]).toBeTruthy();
+    expect(routes[FALLBACK_LOGIN_PATH]).not.toBe(routes['/login']);
+  });
+
+  it('keeps the fallback out of the content routes', () => {
+    // Volto's own `/login` entry does not cover it: nonContentRoutes strings
+    // are tested as unanchored regexes, and `/login` does not occur in
+    // `/fallback_login`.
+    const config = emptyConfig();
+
+    install(config);
+
+    expect(
+      config.settings.nonContentRoutes.some((pattern: RegExp) =>
+        pattern.test(FALLBACK_LOGIN_PATH),
+      ),
+    ).toBe(true);
+  });
+
+  it('keeps whatever another add-on already registered', () => {
+    const config = {
+      settings: {
+        nonContentRoutes: [/^\/other$/],
+        controlPanelsIcons: { other: 'svg' },
+      },
+      addonRoutes: [{ path: '/other' }],
+    } as any;
+
+    install(config);
+
+    expect(config.addonRoutes[0].path).toBe('/other');
+    expect(config.settings.controlPanelsIcons.other).toBe('svg');
+  });
+});

package/src/config/routes.ts

@@ -0,0 +1,143 @@
+import type { ConfigType } from '@plone/registry';
+import appsSVG from '@plone/volto/icons/apps.svg';
+import worldSVG from '@plone/volto/icons/world.svg';
+import Applications from '../components/Applications/Applications';
+import Callback from '../components/Callback/Callback';
+import Consent from '../components/Consent/Consent';
+import FirstLogin from '../components/FirstLogin/FirstLogin';
+import ClientsControlPanel from '../components/ControlPanel/ClientsControlPanel';
+import ProvidersControlPanel from '../components/ControlPanel/ProvidersControlPanel';
+import UserAccount from '../components/ControlPanel/UserAccount';
+import Identities from '../components/Identities/Identities';
+import Login from '../components/Login/Login';
+import VoltoLogin from '@plone/volto/components/theme/Login/Login';
+
+/** The frontend route the provider redirects back to. */
+export const CALLBACK_PATH = '/login-identity';
+
+/** Where a just-signed-in user is routed based on their Profile state. */
+export const FIRST_LOGIN_PATH = '/first-login';
+
+/** Where a signed-in user manages their own sign-in methods. */
+export const IDENTITIES_PATH = '/identities';
+
+/**
+ * Where a signed-in user sees the applications they have authorized.
+ *
+ * The other direction from `IDENTITIES_PATH`: that page is the providers
+ * they sign in *with*, this one the applications they signed in *to*. Only
+ * a site running the `[server]` layer has any, and only that layer publishes
+ * the endpoint behind it.
+ */
+export const APPLICATIONS_PATH = '/applications';
+
+/**
+ * Where a user is asked whether they agree to an authorization request.
+ *
+ * Only reached on a site running the `[server]` layer, and only when that
+ * layer's `server_consent_url` names it: the authorization endpoint renders
+ * a standalone page of its own otherwise. The route exists regardless, since
+ * a frontend cannot be configured as the consent screen before it has one.
+ */
+export const CONSENT_PATH = '/oauth-consent';
+
+/**
+ * Where Volto's own login form stays reachable.
+ *
+ * This add-on takes over `/login` entirely, and its Login already carries a
+ * password form beside the provider list -- so this is not the way to sign in
+ * with a password. It is the way in when that page cannot be rendered at all:
+ * a provider list that fails to load, a misconfigured add-on, a JavaScript
+ * error in a component this package owns. Every one of those locks out the
+ * administrator who would go and fix it, and none of them are reachable
+ * through a page this package draws.
+ *
+ * The name is `volto-authomatic`'s, which ships the same escape at
+ * `/fallback_login` and `/failsafe_login`. A site migrating from it keeps the
+ * URL its operators already know.
+ */
+export const FALLBACK_LOGIN_PATH = '/fallback_login';
+
+/**
+ * Where a Manager reads one user's account.
+ *
+ * Under `/controlpanel/users`, because that is the listing it is reached
+ * from and the page is a control-panel page: Volto's own
+ * `/\/controlpanel\/.*$/` already keeps everything below there out of the
+ * content routes, so this needs no entry of its own.
+ *
+ * A route rather than the modal it used to be. What it shows is a page's
+ * worth of read-only facts about one person, it is not a form with an
+ * outcome, and as an overlay it could not be linked to, bookmarked, opened
+ * in a new tab or reached with the back button.
+ */
+export const USER_ACCOUNT_PATH = '/controlpanel/users/:userid/account';
+
+/**
+ * That route for one user.
+ *
+ * @param userid The account to show.
+ * @returns The path, with the userid escaped -- a userid is whatever the
+ *   provider minted and may carry characters a path segment may not.
+ */
+export function userAccountUrl(userid: string): string {
+  return `/controlpanel/users/${encodeURIComponent(userid)}/account`;
+}
+
+/** Where a Manager configures providers. */
+export const CONTROLPANEL_PATH = '/controlpanel/identity-providers';
+
+/** Where a Manager configures the OAuth clients this site issues tokens to. */
+export const CLIENTS_CONTROLPANEL_PATH = '/controlpanel/identity-clients';
+
+export default function install(config: ConfigType) {
+  config.settings.nonContentRoutes = [
+    ...(config.settings.nonContentRoutes ?? []),
+    new RegExp(`^${CALLBACK_PATH}$`),
+    new RegExp(`^${FIRST_LOGIN_PATH}$`),
+    new RegExp(`^${IDENTITIES_PATH}$`),
+    new RegExp(`^${CONSENT_PATH}$`),
+    new RegExp(`^${APPLICATIONS_PATH}$`),
+    // Not covered by Volto's own `/login` entry: `nonContentRoutes`
+    // strings are tested as unanchored regexes, and `/login` does not
+    // occur in `/fallback_login`.
+    new RegExp(`^${FALLBACK_LOGIN_PATH}$`),
+  ];
+  config.addonRoutes = [
+    ...(config.addonRoutes ?? []),
+    { path: CALLBACK_PATH, exact: true, component: Callback },
+    { path: FIRST_LOGIN_PATH, exact: true, component: FirstLogin },
+    { path: FALLBACK_LOGIN_PATH, exact: true, component: VoltoLogin },
+    { path: '/login', exact: true, component: Login },
+    { path: '/**/login', exact: true, component: Login },
+    { path: IDENTITIES_PATH, exact: true, component: Identities },
+    { path: CONSENT_PATH, exact: true, component: Consent },
+    { path: APPLICATIONS_PATH, exact: true, component: Applications },
+    { path: USER_ACCOUNT_PATH, exact: true, component: UserAccount },
+    { path: CONTROLPANEL_PATH, exact: true, component: ProvidersControlPanel },
+    {
+      path: CLIENTS_CONTROLPANEL_PATH,
+      exact: true,
+      component: ClientsControlPanel,
+    },
+  ];
+
+  // Keyed by configlet id, which is the last segment of each panel's route
+  // and what the backend's `controlpanel.xml` calls it. Without an entry
+  // Volto draws its generic placeholder, and a control-panel listing where
+  // this add-on's two panels are the only unlabelled tiles reads as two
+  // things that did not finish installing.
+  //
+  // A globe for the providers, because every one of them is somewhere else;
+  // the apps grid for the clients, because that panel is a list of
+  // applications this site issues tokens to. Both are Volto's own icons
+  // rather than anything drawn here: a control panel that looks like the
+  // control panels beside it is the whole point.
+  config.settings.controlPanelsIcons = {
+    ...config.settings.controlPanelsIcons,
+    'identity-providers': worldSVG,
+    'identity-clients': appsSVG,
+  };
+
+  return config;
+}

package/src/config/settings.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+
+import { asBoolean } from './settings';
+
+describe('asBoolean', () => {
+  it('falls back when the variable is not set', () => {
+    expect(asBoolean(undefined, false)).toBe(false);
+    expect(asBoolean(undefined, true)).toBe(true);
+  });
+
+  it('treats an empty value as unset', () => {
+    // `docker compose` writes an empty string for a variable named with no
+    // value, which means "I said nothing", not "I said no".
+    expect(asBoolean('', true)).toBe(true);
+  });
+
+  it.each(['1', 'true', 'TRUE', 'yes', 'on', ' true '])(
+    'reads %o as on',
+    (value) => {
+      expect(asBoolean(value, false)).toBe(true);
+    },
+  );
+
+  it.each(['0', 'false', 'FALSE', 'no', 'off'])('reads %o as off', (value) => {
+    // The one that matters: `Boolean("false")` is `true`, which would turn an
+    // operator switching the password form off into a site that still has it.
+    expect(asBoolean(value, true)).toBe(false);
+  });
+
+  it('reads anything it does not recognise as off', () => {
+    // Rather than as on: the values this gates are ones a site opts into.
+    expect(asBoolean('maybe', true)).toBe(false);
+  });
+});