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

package/src/components/Login/ProviderButton.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ProviderButton from './ProviderButton';
+import { GITHUB, GOOGLE, KEYCLOAK, STYLED } from '../../stories/fixtures';
+
+const meta: Meta<typeof ProviderButton> = {
+  title: 'Identity/Login/ProviderButton',
+  component: ProviderButton,
+  args: {
+    id: GOOGLE.id,
+    driver: GOOGLE.driver,
+    label: GOOGLE.title,
+    disabled: false,
+    onSelect: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ProviderButton>;
+
+export const Google: Story = {};
+
+export const GitHub: Story = {
+  args: { id: GITHUB.id, driver: GITHUB.driver, label: GITHUB.title },
+};
+
+/** Any provider reached through discovery, which is most of them. */
+export const GenericOIDC: Story = {
+  args: { id: KEYCLOAK.id, driver: KEYCLOAK.driver, label: KEYCLOAK.title },
+};
+
+/**
+ * The local password form, which the login page offers as one of these. Its
+ * colours are `volto-authomatic`'s `plone` provider.
+ */
+export const Password: Story = {
+  args: { driver: 'plone', label: 'Sign in with a password', id: undefined },
+};
+
+/**
+ * Disabled while a redirect is already under way: a second click would start
+ * a second flow whose state replaces the first one's.
+ */
+export const Redirecting: Story = { args: { disabled: true } };
+
+/** A provider whose title the operator never set falls back to its id. */
+export const Untitled: Story = { args: { label: GOOGLE.id } };
+
+/**
+ * A provider wearing the look an operator gave it in the control panel.
+ *
+ * The icon is inlined rather than served as an image, which is what lets a
+ * monochrome one take the button's own text colour.
+ */
+export const Styled: Story = {
+  args: {
+    id: STYLED.id,
+    driver: STYLED.driver,
+    label: STYLED.title,
+    icon: STYLED.icon,
+    background_color: STYLED.background_color,
+    foreground_color: STYLED.foreground_color,
+  },
+};
+
+/** An icon and no colours: the theme's own button, with a mark on it. */
+export const IconOnly: Story = {
+  args: {
+    id: STYLED.id,
+    driver: STYLED.driver,
+    label: STYLED.title,
+    icon: STYLED.icon,
+  },
+};

package/src/components/Login/ProviderButton.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import React from 'react';
+
+import ProviderButton from './ProviderButton';
+
+const ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+  '<path d="M8 1l7 13H1z"/></svg>';
+
+function renderButton(
+  props: Partial<React.ComponentProps<typeof ProviderButton>> = {},
+) {
+  const onSelect = vi.fn();
+  render(
+    <ProviderButton
+      id="acme"
+      driver="oidc-generic"
+      label="Acme SSO"
+      onSelect={onSelect}
+      {...props}
+    />,
+  );
+  return { onSelect };
+}
+
+describe('ProviderButton', () => {
+  it('wears the driver class when the provider has no look of its own', () => {
+    renderButton();
+
+    const button = screen.getByRole('button');
+    expect(button.className).toContain('identity-provider--oidc-generic');
+    expect(button.className).not.toContain('identity-provider--styled');
+    expect(button.getAttribute('style')).toBeNull();
+  });
+
+  it('reports the press', () => {
+    const { onSelect } = renderButton();
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(onSelect).toHaveBeenCalled();
+  });
+});
+
+describe('ProviderButton and the look an operator set', () => {
+  it('wears the colours as an inline style', () => {
+    renderButton({ background_color: '#4b3f72', foreground_color: '#ffffff' });
+
+    const button = screen.getByRole('button') as HTMLButtonElement;
+    expect(button.style.backgroundColor).toBeTruthy();
+    expect(button.style.color).toBeTruthy();
+  });
+
+  it('marks itself so the stylesheet stands back', () => {
+    // Otherwise the driver rules above would fight the inline style on
+    // specificity, and which one won would depend on the driver.
+    renderButton({ background_color: '#4b3f72' });
+
+    expect(screen.getByRole('button').className).toContain(
+      'identity-provider--styled',
+    );
+  });
+
+  it('writes no style at all when neither colour is set', () => {
+    // An empty string in a style object produces `background-color: ` in the
+    // attribute, which some engines treat as a reset rather than as nothing.
+    renderButton({ background_color: '', foreground_color: '' });
+
+    expect(screen.getByRole('button').getAttribute('style')).toBeNull();
+  });
+
+  it('inlines the icon so it can take the button colour', () => {
+    renderButton({ icon: ICON });
+
+    expect(document.querySelector('.identity-provider__icon svg')).toBeTruthy();
+  });
+
+  it('keeps the label beside the icon', () => {
+    renderButton({ icon: ICON });
+
+    expect(screen.getByText('Acme SSO')).toBeTruthy();
+  });
+
+  it('hides the icon from assistive technology', () => {
+    // The label says what the button does; the icon repeating it would be
+    // read out twice.
+    renderButton({ icon: ICON });
+
+    const icon = document.querySelector('.identity-provider__icon');
+    expect(icon?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('renders no icon element when there is no icon', () => {
+    renderButton();
+
+    expect(document.querySelector('.identity-provider__icon')).toBeNull();
+  });
+});

package/src/components/Login/ProviderButton.tsx

@@ -0,0 +1,97 @@
+/**
+ * One button in the list of ways in.
+ *
+ * Presentational, and deliberately not tied to a `LoginProvider`: the local
+ * password is offered as one of these too, wearing `volto-authomatic`'s Plone
+ * colours, and it is not a provider the backend knows anything about. The
+ * caller supplies the label, the driver whose colours to wear, and what
+ * pressing it does.
+ *
+ * A provider may also carry its *own* look -- an icon and two colours an
+ * operator set in the control panel. When it does, that wins over the
+ * driver's stylesheet class, because the operator has said what this button
+ * should look like and the class is only a default for the ones who have not.
+ * @module components/Login/ProviderButton
+ */
+import React from 'react';
+
+import type { ProviderStyle } from '../../types';
+
+import './ProviderButton.scss';
+
+interface ProviderButtonProps extends ProviderStyle {
+  /** Whose colours to wear. `plone` is the local password form. */
+  driver: string;
+  /**
+   * What the button says.
+   *
+   * A provider's own title, which an operator sets and which is therefore not
+   * ours to translate; the caller translates its own labels.
+   */
+  label: string;
+  /** The provider id, for anything selecting this button by it. */
+  id?: string;
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
+const ProviderButton: React.FC<ProviderButtonProps> = ({
+  driver,
+  label,
+  id,
+  icon,
+  background_color: background,
+  foreground_color: foreground,
+  disabled = false,
+  onSelect,
+}) => {
+  // Only the colours that were set. Writing `undefined` into a style object
+  // is harmless, but writing an empty string is not: it produces
+  // `background-color: ` in the attribute, which some engines treat as a
+  // reset of the inherited value rather than as nothing at all.
+  const style: React.CSSProperties = {};
+  if (background) {
+    style.backgroundColor = background;
+  }
+  if (foreground) {
+    style.color = foreground;
+  }
+  const styled = Boolean(background || foreground);
+
+  return (
+    <button
+      type="button"
+      className={[
+        'identity-provider',
+        `identity-provider--${driver}`,
+        // Marks the button as carrying its own colours, so the stylesheet can
+        // stand back rather than fight an inline style with specificity.
+        styled ? 'identity-provider--styled' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={styled ? style : undefined}
+      data-provider={id}
+      disabled={disabled}
+      onClick={onSelect}
+    >
+      {icon ? (
+        <span
+          className="identity-provider__icon"
+          aria-hidden="true"
+          // The source is an SVG document the backend sanitized as it was
+          // stored: an allowlist of elements and attributes, no attribute
+          // that references a URL, and the whole thing serialized from the
+          // parsed tree rather than sliced out of what was pasted. Inlining
+          // it rather than using an `<img>` is what lets it inherit the
+          // button's colour, which is the entire reason an operator uploads
+          // one.
+          dangerouslySetInnerHTML={{ __html: icon }}
+        />
+      ) : null}
+      <span className="identity-provider__label">{label}</span>
+    </button>
+  );
+};
+
+export default ProviderButton;

package/src/components/ProfileGate/ProfileGate.stories.tsx

@@ -0,0 +1,118 @@
+/**
+ * The gate renders nothing, so the story renders where it sent you.
+ *
+ * A component whose entire output is a redirect has no picture of its own.
+ * What is worth seeing is the decision, so each story mounts the gate on a
+ * route and shows the path the app ends up on -- which is the thing that goes
+ * wrong, in both directions: a user let through with an unfinished profile,
+ * or a user held on a page they can never leave.
+ * @module components/ProfileGate/ProfileGate.stories
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+
+import ProfileGate from './ProfileGate';
+import { LOADED, LOADING, withStore } from '../../stories/fixtures';
+
+const PROFILE = 'https://example.org/identity-profiles/alice';
+
+/** Show the path the router is on, after the gate has had its say. */
+const Where: React.FC = () => {
+  const location = useLocation();
+  return (
+    <p style={{ fontFamily: 'monospace' }}>
+      <strong>Now at:</strong> {location.pathname}
+    </p>
+  );
+};
+
+/** Mount the gate on a starting route and report where it left the app. */
+function at(pathname: string) {
+  return (Story: React.ComponentType) => (
+    <MemoryRouter initialEntries={[pathname]}>
+      <Story />
+      <Where />
+    </MemoryRouter>
+  );
+}
+
+function profileState(review_state: string | null, profile: string | null) {
+  return {
+    ...LOADED,
+    data: {
+      '@id': '/@my-profile',
+      userid: 'alice',
+      profile,
+      review_state,
+    },
+  };
+}
+
+const meta: Meta<typeof ProfileGate> = {
+  title: 'Identity/ProfileGate',
+  component: ProfileGate,
+};
+export default meta;
+
+type Story = StoryObj<typeof ProfileGate>;
+
+/** An unfinished profile: every page becomes its edit form. */
+export const Held: Story = {
+  decorators: [
+    at('/news'),
+    withStore({
+      userSession: { token: 'a-token' },
+      myProfile: profileState('incomplete', PROFILE),
+    }),
+  ],
+};
+
+/** Already on the profile. Redirecting here would be a loop with no exit. */
+export const OnTheProfileAlready: Story = {
+  decorators: [
+    at('/identity-profiles/alice/edit'),
+    withStore({
+      userSession: { token: 'a-token' },
+      myProfile: profileState('incomplete', PROFILE),
+    }),
+  ],
+};
+
+/** Signing out has to stay possible for somebody who would rather leave. */
+export const SigningOut: Story = {
+  decorators: [
+    at('/logout'),
+    withStore({
+      userSession: { token: 'a-token' },
+      myProfile: profileState('incomplete', PROFILE),
+    }),
+  ],
+};
+
+/** A finished profile goes where it was going. */
+export const LetThrough: Story = {
+  decorators: [
+    at('/news'),
+    withStore({
+      userSession: { token: 'a-token' },
+      myProfile: profileState('complete', PROFILE),
+    }),
+  ],
+};
+
+/** A user with no Profile: there is nothing to hold them for. */
+export const NoProfile: Story = {
+  decorators: [
+    at('/news'),
+    withStore({
+      userSession: { token: 'a-token' },
+      myProfile: profileState(null, null),
+    }),
+  ],
+};
+
+/** Anonymous. Nothing is asked and nothing is held. */
+export const Anonymous: Story = {
+  decorators: [at('/news'), withStore({ userSession: {}, myProfile: LOADING })],
+};