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

package/src/components/Login/LoginForm.tsx

@@ -0,0 +1,321 @@
+/**
+ * The login page, without any store or routing in it.
+ *
+ * Kept presentational so it can be tested by rendering it, which is where
+ * the behaviour worth pinning lives: which buttons appear, what is disabled
+ * while a redirect is in flight, and what a failure says.
+ * @module components/Login/LoginForm
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { Container } from '@plone/components';
+import { defineMessages, useIntl } from 'react-intl';
+
+import type { LoginProvider } from '../../types';
+import { EMAIL_DRIVER } from '../../helpers/identities';
+import LoginOverlay, { useDismissibleError } from './LoginOverlay';
+import MagicLinkForm from './MagicLinkForm';
+import PasswordForm from './PasswordForm';
+import ProviderButton from './ProviderButton';
+
+import './LoginForm.scss';
+
+const messages = defineMessages({
+  loading: {
+    id: 'Loading sign-in options',
+    defaultMessage: 'Loading sign-in options…',
+  },
+  unavailable: {
+    id: 'That sign-in option is not available right now.',
+    defaultMessage: 'That sign-in option is not available right now.',
+  },
+  usePassword: {
+    id: 'Sign in with a password',
+    defaultMessage: 'Sign in with a password',
+  },
+  backToOptions: {
+    id: 'Back to sign-in options',
+    defaultMessage: 'Back to sign-in options',
+  },
+  redirecting: {
+    id: 'Taking you to {provider}…',
+    defaultMessage: 'Taking you to {provider}…',
+  },
+});
+
+interface LoginFormProps {
+  providers: LoginProvider[];
+  /**
+   * Whether the sign-in options are still unknown.
+   *
+   * "Not here yet" rather than "a request is in flight": an empty
+   * `providers` on a page that has not asked yet means the same thing to
+   * every branch below as a site with none configured, and the branch for
+   * that is the local password form. The container is what can tell the two
+   * apart -- see `answered` there.
+   */
+  loading: boolean;
+  starting: boolean;
+  error?: unknown;
+  magicLinkSent: boolean;
+  magicLinkLoading: boolean;
+  magicLinkError?: unknown;
+  /** Whether a password sign-in is in flight. */
+  passwordLoading: boolean;
+  /** Whether the last password sign-in was refused. */
+  passwordError?: unknown;
+  /**
+   * Whether Plone's own password form is one of the ways in.
+   *
+   * A prop rather than a read of `config.settings` here, so this component
+   * stays renderable without the registry and the decision is visible in
+   * one place.
+   */
+  showPloneLogin: boolean;
+  onSelectProvider: (provider: LoginProvider) => void;
+  onSendMagicLink: (email: string) => void;
+  onPasswordLogin: (username: string, password: string) => void;
+}
+
+/**
+ * The driver the local password button wears the colours of.
+ *
+ * `volto-authomatic` calls its own `plone`, and this reuses that name so the
+ * two add-ons paint the same button the same blue.
+ */
+const PASSWORD_DRIVER = 'plone';
+
+/**
+ * Which form the picker has been replaced by.
+ *
+ * `null` is the picker itself. The two named steps are the ways in that ask
+ * for something typed rather than sending the visitor to another origin.
+ */
+type Step = null | 'password' | 'email';
+
+const LoginForm: React.FC<LoginFormProps> = ({
+  providers,
+  loading,
+  starting,
+  error,
+  magicLinkSent,
+  magicLinkLoading,
+  magicLinkError,
+  passwordLoading,
+  passwordError,
+  showPloneLogin,
+  onSelectProvider,
+  onSendMagicLink,
+  onPasswordLogin,
+}) => {
+  const intl = useIntl();
+  // Which form has replaced the picker, or `null` while the picker is up.
+  //
+  // The forms replace the other ways in rather than sitting under them: each
+  // is a different way to sign in, not an extra field on this one. One state
+  // rather than a boolean each, because opening either must close the other
+  // and two booleans can both be true.
+  const [step, setStep] = useState<Step>(null);
+  // Which provider the redirect is for, so the wait can name it. The store
+  // knows a flow was started; only the click knows which button began it.
+  const [going, setGoing] = useState<LoginProvider | null>(null);
+  const [showError, dismissError] = useDismissibleError(error);
+  // Providers that sign somebody in by sending them somewhere. Email is not
+  // one: it answers with a message rather than an authorize URL, so it must
+  // stay out of every branch that redirects.
+  const buttons = providers.filter((p) => p.driver !== EMAIL_DRIVER);
+  const emailProvider = providers.find((p) => p.driver === EMAIL_DRIVER);
+  const hasMagicLink = Boolean(emailProvider);
+  // With nothing configured the password form is the login page whatever the
+  // setting says. The setting decides whether a password is offered *beside*
+  // the providers; it is not a way to leave a site with no way in, which is
+  // what a fresh install -- add-on on, no provider configured yet -- would
+  // otherwise be.
+  const hasPassword = showPloneLogin || !providers.length;
+  // Every way in, counted the same way whatever kind it is: this is what
+  // decides whether there is a choice to present at all.
+  const ways = buttons.length + (hasMagicLink ? 1 : 0) + (hasPassword ? 1 : 0);
+  const onlyProvider = ways === 1 && buttons.length === 1 ? buttons[0] : null;
+
+  // A single provider and nothing else: the picker would be one button asking
+  // the user to confirm the only thing that can happen. Sent once per mount
+  // and never while a failure is on screen -- an unreachable provider would
+  // otherwise be an unbreakable redirect loop rather than a message with a
+  // button under it.
+  const startedRef = useRef(false);
+  useEffect(() => {
+    if (!onlyProvider || error || starting || startedRef.current) {
+      return;
+    }
+    startedRef.current = true;
+    setGoing(onlyProvider);
+    onSelectProvider(onlyProvider);
+  }, [onlyProvider, error, starting, onSelectProvider]);
+
+  if (loading) {
+    return (
+      <div className="identity-login">
+        <LoginOverlay message={intl.formatMessage(messages.loading)} />
+      </div>
+    );
+  }
+
+  if (ways === 1 && hasPassword) {
+    // Not an error: a site can legitimately have no providers configured yet,
+    // and an authorization server may never have any -- its users are local.
+    // So the password form is the login page, shown outright rather than
+    // behind a disclosure, and nothing announces the absence: the panel's
+    // description already says the account is one on this site. This is what
+    // `volto-authomatic` renders when it has no providers either.
+    return (
+      <div className="identity-login identity-login--empty">
+        <PasswordForm
+          loading={passwordLoading}
+          error={passwordError}
+          onSubmit={onPasswordLogin}
+        />
+      </div>
+    );
+  }
+
+  if (ways === 1 && hasMagicLink) {
+    // The same argument as the password form above: one way in is not a
+    // choice, so it is not presented as one.
+    return (
+      <div className="identity-login identity-login--empty">
+        <MagicLinkForm
+          sent={magicLinkSent}
+          loading={magicLinkLoading}
+          error={magicLinkError}
+          onSend={onSendMagicLink}
+        />
+      </div>
+    );
+  }
+
+  if (onlyProvider && !error) {
+    // The redirect is already on its way from the effect above. Saying so
+    // beats a flash of a button nobody is meant to press.
+    return (
+      <div className="identity-login">
+        <LoginOverlay
+          message={intl.formatMessage(messages.redirecting, {
+            provider: onlyProvider.title || onlyProvider.id,
+          })}
+        />
+      </div>
+    );
+  }
+
+  if (step) {
+    // Hiding the providers without a way back would strand anyone who opened
+    // a form by mistake on the one they cannot use. The same escape for both,
+    // because both hide the same thing.
+    return (
+      <div className="identity-login">
+        {step === 'password' ? (
+          <PasswordForm
+            loading={passwordLoading}
+            error={passwordError}
+            onSubmit={onPasswordLogin}
+          />
+        ) : (
+          <MagicLinkForm
+            sent={magicLinkSent}
+            loading={magicLinkLoading}
+            error={magicLinkError}
+            onSend={onSendMagicLink}
+          />
+        )}
+        <Container className="identity-password-toggle">
+          <button type="button" onClick={() => setStep(null)}>
+            {intl.formatMessage(messages.backToOptions)}
+          </button>
+        </Container>
+      </div>
+    );
+  }
+
+  return (
+    <div className="identity-login">
+      {/* The password is one of the ways in, so it is one of these buttons
+          rather than a line of text under them -- when it is offered at all.
+          A site that turned it off and has only the magic link renders an
+          empty list here and the form below it. */}
+      <ul className="identity-providers">
+        {buttons.map((provider) => (
+          <li key={provider.id}>
+            <ProviderButton
+              id={provider.id}
+              driver={provider.driver}
+              label={provider.title || provider.id}
+              icon={provider.icon}
+              background_color={provider.background_color}
+              foreground_color={provider.foreground_color}
+              disabled={starting}
+              onSelect={() => {
+                setGoing(provider);
+                onSelectProvider(provider);
+              }}
+            />
+          </li>
+        ))}
+        {/* Email is a button like the rest, and opens its field on the next
+            step rather than standing open under everything else. It was the
+            only way in that did not look like one -- a labelled input on a
+            page whose question is "choose how", answered before it was
+            asked. The two that ask for something typed sit together at the
+            end, since neither leaves this origin. */}
+        {emailProvider ? (
+          <li>
+            <ProviderButton
+              id={emailProvider.id}
+              driver={emailProvider.driver}
+              label={emailProvider.title || emailProvider.id}
+              icon={emailProvider.icon}
+              background_color={emailProvider.background_color}
+              foreground_color={emailProvider.foreground_color}
+              disabled={starting}
+              onSelect={() => setStep('email')}
+            />
+          </li>
+        ) : null}
+        {hasPassword ? (
+          <li>
+            <ProviderButton
+              driver={PASSWORD_DRIVER}
+              label={intl.formatMessage(messages.usePassword)}
+              disabled={starting}
+              onSelect={() => setStep('password')}
+            />
+          </li>
+        ) : null}
+      </ul>
+
+      {/* Greying the buttons says they cannot be pressed; it does not say
+          why, or that anything is happening. The wait on top does both, and
+          names where it is going -- which is what the single-provider page
+          already did and this one did not. */}
+      {starting && !error ? (
+        <LoginOverlay
+          message={
+            going
+              ? intl.formatMessage(messages.redirecting, {
+                  provider: going.title || going.id,
+                })
+              : intl.formatMessage(messages.loading)
+          }
+        />
+      ) : null}
+
+      {showError ? (
+        <LoginOverlay
+          error
+          message={intl.formatMessage(messages.unavailable)}
+          onDismiss={dismissError}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default LoginForm;

package/src/components/Login/LoginOverlay.scss

@@ -0,0 +1,44 @@
+/**
+ * The wait and the refusal, drawn over the card's body.
+ *
+ * Absolutely positioned against `LoginPanel`'s `.form`, which is what makes
+ * this an overlay rather than a third state of the page: whatever it covers
+ * keeps its size and its place, and comes back unchanged when this goes.
+ *
+ * The veil is the card's own grey, near enough opaque: what is underneath
+ * keeps its size and its place, but is not left looking usable while it is
+ * not. A paler veil read as a hole in the card, and a translucent one left
+ * buttons showing through that could not be pressed.
+ */
+.identity-overlay {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Twice the gap at the sides: the card is 350px wide and a refusal is a
+     sentence, so with only the rhythm's own padding it ran to both edges and
+     read as text pasted over the card rather than as a message on it. */
+  padding: var(--identity-gap) calc(var(--identity-gap) * 2);
+  background: var(--identity-overlay-veil);
+  inset: 0;
+}
+
+.identity-overlay__body {
+  display: flex;
+  max-width: 100%;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+}
+
+.identity-overlay__message {
+  margin: 0;
+  color: var(--identity-muted);
+  font-size: 14px;
+}
+
+.identity-overlay--error .identity-overlay__message {
+  color: var(--identity-error);
+}

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

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import LoginOverlay from './LoginOverlay';
+import { withLoginCard } from '../../stories/fixtures';
+
+/**
+ * Something for the overlay to be over.
+ *
+ * The point of an overlay is what stays underneath it, so a story that showed
+ * it against an empty card would not show the thing worth looking at.
+ */
+const Underneath = () => (
+  <ul className="identity-providers">
+    <li>
+      <button type="button" className="identity-provider" disabled>
+        <span>GitHub</span>
+      </button>
+    </li>
+    <li>
+      <button type="button" className="identity-provider" disabled>
+        <span>Sign in with a password</span>
+      </button>
+    </li>
+  </ul>
+);
+
+const meta: Meta<typeof LoginOverlay> = {
+  title: 'Identity/Login/LoginOverlay',
+  component: LoginOverlay,
+  decorators: [
+    (Story) => (
+      <div className="identity-login">
+        <Underneath />
+        {Story()}
+      </div>
+    ),
+    withLoginCard(),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof LoginOverlay>;
+
+/** Waiting on the provider listing, before there is anything to choose. */
+export const Loading: Story = { args: { message: 'Loading sign-in options…' } };
+
+/** Waiting on a redirect, with the options it came from still underneath. */
+export const Redirecting: Story = {
+  args: { message: 'Taking you to GitHub…' },
+};
+
+/** A refusal, which the reader ends by reading it. */
+export const Refused: Story = {
+  args: {
+    error: true,
+    message: 'That sign-in option is not available right now.',
+    onDismiss: () => {},
+  },
+};
+
+/**
+ * A refusal with nothing to go back to.
+ *
+ * No dismiss control, because taking it down would leave a card saying
+ * nothing at all.
+ */
+export const RefusedWithNoWayBack: Story = {
+  args: {
+    error: true,
+    message: 'That sign-in option is not available right now.',
+  },
+};

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

@@ -0,0 +1,98 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import React from 'react';
+
+import LoginOverlay, { useDismissibleError } from './LoginOverlay';
+
+describe('LoginOverlay', () => {
+  it('announces a wait without interrupting', () => {
+    // A wait is a status: something is happening and the reader may keep
+    // reading. An alert would interrupt them to say so.
+    render(<LoginOverlay message="Taking you to Dex…" />);
+
+    expect(screen.getByRole('status').textContent).toContain('Dex');
+    expect(document.querySelector('.identity-spinner')).toBeTruthy();
+  });
+
+  it('announces a refusal as one', () => {
+    render(<LoginOverlay error message="That did not work." />);
+
+    expect(screen.getByRole('alert').textContent).toContain('did not work');
+  });
+
+  it('draws no spinner on a refusal', () => {
+    // Nothing is happening, which is the whole message.
+    render(<LoginOverlay error message="That did not work." />);
+
+    expect(document.querySelector('.identity-spinner')).toBeNull();
+  });
+
+  it('offers no way out of a wait', () => {
+    // It is not the reader's to end, and a button would say otherwise.
+    render(<LoginOverlay message="Signing in" onDismiss={vi.fn()} />);
+
+    expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
+  });
+
+  it('offers a way out of a refusal', () => {
+    const onDismiss = vi.fn();
+    render(
+      <LoginOverlay error message="That did not work." onDismiss={onDismiss} />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  it('has no dismiss button when nothing can be dismissed to', () => {
+    render(<LoginOverlay error message="That did not work." />);
+
+    expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
+  });
+});
+
+/** A host for the hook, since a hook cannot be rendered on its own. */
+const Host: React.FC<{ error: unknown }> = ({ error }) => {
+  const [visible, dismiss] = useDismissibleError(error);
+  return visible ? (
+    <button type="button" onClick={dismiss}>
+      showing
+    </button>
+  ) : (
+    <span>hidden</span>
+  );
+};
+
+describe('useDismissibleError', () => {
+  it('shows a refusal that has not been dismissed', () => {
+    render(<Host error={{ status: 401 }} />);
+
+    expect(screen.getByText('showing')).toBeTruthy();
+  });
+
+  it('shows nothing when there is no refusal', () => {
+    render(<Host error={null} />);
+
+    expect(screen.getByText('hidden')).toBeTruthy();
+  });
+
+  it('hides the one that was dismissed', () => {
+    render(<Host error={{ status: 401 }} />);
+
+    fireEvent.click(screen.getByText('showing'));
+
+    expect(screen.getByText('hidden')).toBeTruthy();
+  });
+
+  it('shows the next one anyway', () => {
+    // Dismissing is about the refusal that was read, not about refusals in
+    // general -- a second wrong password has to say so again.
+    const { rerender } = render(<Host error={{ status: 401 }} />);
+    fireEvent.click(screen.getByText('showing'));
+
+    rerender(<Host error={{ status: 401 }} />);
+
+    expect(screen.getByText('showing')).toBeTruthy();
+  });
+});

package/src/components/Login/LoginOverlay.tsx

@@ -0,0 +1,107 @@
+/**
+ * What the login card says over itself: a wait, or a refusal.
+ *
+ * An overlay rather than a branch, because both used to *replace* what they
+ * were about. A wait swapped the options for a line of text, so the card
+ * changed size and the reader lost their place; a refusal appeared as a
+ * paragraph that pushed everything below it down. Neither is a different
+ * page -- they are something happening to the page that is already there, and
+ * that is what an overlay is for.
+ *
+ * Two kinds, and the difference is who ends them. A wait ends when whatever
+ * is being waited for answers, so it has no control on it. A refusal ends
+ * when the reader has read it, so it does: leaving it up would hide the form
+ * they need to try again in.
+ *
+ * Positioned against the nearest positioned ancestor, which is
+ * `LoginPanel`'s `.form` -- the card's body, and the thing whose size should
+ * not change while this is up.
+ * @module components/Login/LoginOverlay
+ */
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import './LoginOverlay.scss';
+
+const messages = defineMessages({
+  dismiss: { id: 'Close', defaultMessage: 'Close' },
+});
+
+interface LoginOverlayProps {
+  /** What is being waited for, or what was refused. */
+  message: string;
+  /**
+   * Whether this is a refusal rather than a wait.
+   *
+   * A refusal is announced as an alert and carries no spinner: nothing is
+   * happening, which is the whole message.
+   */
+  error?: boolean;
+  /**
+   * Take this overlay down.
+   *
+   * Only meaningful on a refusal -- a wait is not the reader's to end, and a
+   * dismiss button on one would suggest it is. Absent even on a refusal where
+   * there is nothing underneath to go back to.
+   */
+  onDismiss?: () => void;
+}
+
+const LoginOverlay: React.FC<LoginOverlayProps> = ({
+  message,
+  error = false,
+  onDismiss,
+}) => {
+  const intl = useIntl();
+  const kind = error ? 'identity-overlay--error' : 'identity-overlay--waiting';
+
+  return (
+    <div
+      className={`identity-overlay ${kind}`}
+      role={error ? 'alert' : 'status'}
+    >
+      <div className="identity-overlay__body">
+        {error ? null : (
+          <span className="identity-spinner" aria-hidden="true" />
+        )}
+        <p className="identity-overlay__message">{message}</p>
+        {error && onDismiss ? (
+          <button
+            type="button"
+            // Filled: it is the only thing on the overlay that can be
+            // pressed, and an outlined button on a veil read as disabled.
+            className="identity-button identity-button--primary"
+            data-action="dismiss"
+            onClick={onDismiss}
+          >
+            {intl.formatMessage(messages.dismiss)}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Whether a refusal is still worth showing, and how to stop showing it.
+ *
+ * The refusal itself lives in the store, so "dismissed" cannot: clearing it
+ * there would be this component deciding a request never failed. What is
+ * remembered instead is *which* refusal was dismissed, so the next one --
+ * a second wrong password, a second unreachable provider -- says so again
+ * rather than being silently swallowed by the first one's dismissal.
+ *
+ * The identity of the error value is what distinguishes them, which is what
+ * the request reducers produce: a fresh object per failure. A backend that
+ * somehow returned the very same object twice would have its second refusal
+ * hidden, which is a better failure than a refusal that cannot be dismissed.
+ *
+ * @param error The refusal, or a falsy value when there is none.
+ * @returns Whether to show it, and a function that takes it down.
+ */
+export function useDismissibleError(error: unknown): [boolean, () => void] {
+  const [dismissed, setDismissed] = useState<unknown>(undefined);
+  return [Boolean(error) && dismissed !== error, () => setDismissed(error)];
+}
+
+export default LoginOverlay;

package/src/components/Login/LoginPanel.scss

@@ -0,0 +1,50 @@
+/**
+ * The login card.
+ *
+ * The card itself is `.identity-surface` and its heading
+ * `.identity-surface__header`, both from the root stylesheet: this is the same
+ * card the control panel's sections are. Only what is particular to the login
+ * page lives here -- its width, and the description strip under the heading.
+ */
+#page-login {
+  /* `Container` only centres itself when it is given one of its own width
+     modifiers -- `narrow`, `default`, `layout` -- and this one is sized by us
+     instead, so the auto margins have to come from here. Without them the card
+     sits against the left edge of the window. */
+  .loginForm {
+    width: var(--identity-login-width);
+    max-width: 100%;
+    line-height: 1.5;
+    margin-inline: auto;
+  }
+
+  .wrapper {
+    margin: 1rem 0;
+  }
+
+  /* The card's body. Two things it must do beyond holding what is in it:
+     never get shorter than the floor -- every state of the page lives here,
+     and a card that resized on each of them read as the page jumping about
+     -- and be the positioned ancestor a wait or a refusal is drawn against,
+     so an overlay covers this and nothing else. */
+  .form {
+    position: relative;
+    display: flex;
+    min-height: var(--identity-login-min-height);
+    flex-direction: column;
+    /* Centred rather than stacked from the top. The floor above means a short
+       state -- the first-login decision, the callback's one line -- otherwise
+       sits against the top of a box more than twice its height, which reads as
+       a card that failed to fill rather than one with little to say. Anything
+       taller than the floor makes the box grow, so nothing is ever centred out
+       of reach. */
+    justify-content: center;
+  }
+
+  .description {
+    padding: 12px;
+    background-color: var(--identity-surface-header-bg);
+    font-size: 12px;
+    font-weight: 200;
+  }
+}