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

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Login from './Login';
+import {
+  FAILED,
+  LOADED,
+  LOADING,
+  PROVIDERS,
+  withStore,
+} from '../../stories/fixtures';
+
+const meta: Meta<typeof Login> = {
+  title: 'Identity/Login/Login',
+  component: Login,
+};
+export default meta;
+
+type Story = StoryObj<typeof Login>;
+
+/** The whole page: the panel, the providers, and the password fallback. */
+export const Default: Story = {
+  decorators: [
+    withStore({
+      loginProviders: { ...LOADED, data: PROVIDERS },
+      providerLogin: {},
+      magicLinkSend: {},
+      userSession: { token: null, login: {} },
+    }),
+  ],
+};
+
+export const Loading: Story = {
+  decorators: [
+    withStore({
+      loginProviders: { ...LOADING, data: [] },
+      providerLogin: {},
+      magicLinkSend: {},
+      userSession: { token: null, login: {} },
+    }),
+  ],
+};
+
+export const NoProvidersConfigured: Story = {
+  decorators: [
+    withStore({
+      loginProviders: { ...LOADED, data: [] },
+      providerLogin: {},
+      magicLinkSend: {},
+      userSession: { token: null, login: {} },
+    }),
+  ],
+};
+
+export const PasswordRefused: Story = {
+  decorators: [
+    withStore({
+      loginProviders: { ...LOADED, data: PROVIDERS },
+      providerLogin: {},
+      magicLinkSend: {},
+      userSession: { token: null, login: { error: FAILED.error } },
+    }),
+  ],
+};

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

@@ -0,0 +1,189 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from '../../testing';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import React from 'react';
+
+import Login from './Login';
+import * as showPloneLoginModule from '../../helpers/showPloneLogin';
+
+/**
+ * Replace `window.location` so a navigation can be observed instead of
+ * performed; jsdom refuses to navigate and would fail the test instead.
+ */
+function captureNavigation() {
+  const original = window.location;
+  const navigated: string[] = [];
+  // jsdom's location is not writable through the normal assignment.
+  delete (window as any).location;
+  // @ts-expect-error a stub with only what the component touches
+  window.location = {
+    ...original,
+    get href() {
+      return original.href;
+    },
+    set href(value: string) {
+      navigated.push(value);
+    },
+  };
+  return {
+    navigated,
+    restore: () =>
+      Object.defineProperty(window, 'location', {
+        value: original,
+        writable: true,
+      }),
+  };
+}
+
+/**
+ * The listing slice as the reducer leaves it after a successful request.
+ *
+ * `loaded` is not decoration here: it is the flag the page uses to tell "the
+ * providers are not here yet" from "there are none", so a fixture without it
+ * is a fixture of a request that never answered.
+ */
+const LOADED_PROVIDERS = {
+  loading: false,
+  loaded: true,
+  error: null,
+  data: [{ id: 'github', title: 'GitHub' }],
+};
+
+function storeWith(token?: string, loginProviders: any = LOADED_PROVIDERS) {
+  const state = {
+    loginProviders,
+    providerLogin: {},
+    magicLinkSend: {},
+    userSession: { token, login: {} },
+  };
+  return {
+    getState: () => state,
+    dispatch: (action: any) => action,
+    subscribe: () => () => {},
+  };
+}
+
+function renderLogin(
+  token?: string,
+  search = '?came_from=%2F%40%40oauth-authorize',
+  loginProviders?: any,
+) {
+  render(
+    <Provider store={storeWith(token, loginProviders) as any}>
+      <MemoryRouter initialEntries={[`/login${search}`]}>
+        <Login />
+      </MemoryRouter>
+    </Provider>,
+  );
+}
+
+describe('Login', () => {
+  let capture: ReturnType<typeof captureNavigation>;
+
+  beforeEach(() => {
+    capture = captureNavigation();
+  });
+
+  afterEach(() => {
+    capture.restore();
+    vi.restoreAllMocks();
+  });
+
+  it('does not redirect when the visitor already had a session', () => {
+    // This page is only reached because something refused that session --
+    // an authorization endpoint that will not accept the principal. Bouncing
+    // back to it is an infinite redirect, and the sign-in buttons never stay
+    // on screen long enough to be clicked.
+    renderLogin('an-existing-token');
+
+    expect(capture.navigated).toEqual([]);
+  });
+
+  it('shows the providers instead of redirecting', () => {
+    renderLogin('an-existing-token');
+
+    expect(document.body.textContent).toContain('GitHub');
+  });
+
+  it('asks at render time whether to offer the password form', () => {
+    // Not read from the settings at install: the answer arrives in the
+    // container's environment, so one image serves a site that wants the
+    // password form and one that does not. Severing this wiring is invisible
+    // to every other test here, which is why it has one of its own.
+    const decide = vi
+      .spyOn(showPloneLoginModule, 'showPloneLogin')
+      .mockReturnValue(true);
+
+    renderLogin('an-existing-token');
+
+    expect(decide).toHaveBeenCalled();
+    expect(document.body.textContent).toContain('Sign in with a password');
+  });
+
+  it('hides the password form when the environment says to', () => {
+    vi.spyOn(showPloneLoginModule, 'showPloneLogin').mockReturnValue(false);
+
+    renderLogin('an-existing-token');
+
+    expect(document.body.textContent).not.toContain('Sign in with a password');
+  });
+
+  it('does not redirect an anonymous visitor either', () => {
+    renderLogin(undefined);
+
+    expect(capture.navigated).toEqual([]);
+  });
+
+  it('waits rather than guessing before the listing has answered', () => {
+    // The slice as it is on the very first render: the effect has not
+    // dispatched yet, so it is neither loading nor loaded. Reading only
+    // `loading` and `data` made that indistinguishable from a site with no
+    // providers, and the page rendered the local password form -- the
+    // no-providers fallback -- for a tick before replacing it.
+    renderLogin(undefined, undefined, {
+      loading: false,
+      loaded: false,
+      error: null,
+      data: [],
+    });
+
+    expect(document.body.textContent).toContain('Loading');
+    expect(document.body.textContent).not.toContain('Sign in with a password');
+    expect(document.querySelector('#login-form-submit')).toBeNull();
+  });
+
+  it('names what is below only once it knows', () => {
+    // The description strip is the same guess in prose. Naming the local
+    // password form and then replacing the sentence is the flicker with
+    // words instead of fields.
+    renderLogin(undefined, undefined, {
+      loading: true,
+      loaded: false,
+      error: null,
+      data: [],
+    });
+
+    expect(document.body.textContent).not.toContain(
+      'Sign in with your account on this site.',
+    );
+    expect(document.body.textContent).not.toContain(
+      'Choose how you would like to sign in.',
+    );
+  });
+
+  it('falls back to the password form when the listing fails', () => {
+    // A failure has answered -- with nothing. Holding the loading state for
+    // it would leave a site whose provider list is unreachable with a
+    // spinner instead of the one way in that still works.
+    renderLogin(undefined, undefined, {
+      loading: false,
+      loaded: false,
+      error: { status: 500 },
+      data: [],
+    });
+
+    expect(document.body.textContent).not.toContain('Loading');
+    expect(document.querySelector('#login-form-submit')).toBeTruthy();
+  });
+});

package/src/components/Login/Login.tsx

@@ -0,0 +1,163 @@
+/**
+ * Login container: store, routing, and the redirect out to the provider.
+ * @module components/Login/Login
+ */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+
+import {
+  listLoginProviders,
+  sendMagicLink,
+  startProviderLogin,
+} from '../../actions';
+import { login } from '@plone/volto/actions/userSession/userSession';
+
+import { returnUrl } from '../../helpers/returnUrl';
+import { showPloneLogin } from '../../helpers/showPloneLogin';
+import type { LoginProvider } from '../../types';
+import LoginForm from './LoginForm';
+import LoginPanel from './LoginPanel';
+import { goTo } from '../../helpers/navigate';
+
+const messages = defineMessages({
+  title: { id: 'Log in', defaultMessage: 'Log in' },
+  chooseHow: {
+    id: 'Choose how you would like to sign in.',
+    defaultMessage: 'Choose how you would like to sign in.',
+  },
+  signInLocally: {
+    id: 'Sign in with your account on this site.',
+    defaultMessage: 'Sign in with your account on this site.',
+  },
+});
+
+const Login: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const { push } = useHistory();
+  const [redirecting, setRedirecting] = useState(false);
+  // The session as it was when this page loaded. Only a token that appears
+  // *after* that is somebody signing in here.
+  const sessionOnArrival = useRef<string | undefined>(undefined);
+
+  const providers = useSelector((state: any) => state.loginProviders);
+  const started = useSelector((state: any) => state.providerLogin);
+  const magic = useSelector((state: any) => state.magicLinkSend);
+  const userSession = useSelector((state: any) => state.userSession);
+
+  useEffect(() => {
+    dispatch(listLoginProviders());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (redirecting && started?.loaded && started?.data?.authorize_url) {
+      // A full page load, not a router push: the next stop is the provider's
+      // own origin.
+      goTo(started.data.authorize_url, push, { external: true });
+    }
+  }, [redirecting, started, push]);
+
+  const onSelectProvider = useCallback(
+    (provider: LoginProvider) => {
+      setRedirecting(true);
+      dispatch(
+        startProviderLogin(
+          provider.id,
+          returnUrl(location.search, location.pathname),
+        ),
+      );
+    },
+    [dispatch, location.search, location.pathname],
+  );
+
+  const onPasswordLogin = useCallback(
+    (username: string, password: string) => {
+      dispatch(login(username, password));
+    },
+    [dispatch],
+  );
+
+  useEffect(() => {
+    if (sessionOnArrival.current === undefined) {
+      sessionOnArrival.current = userSession?.token ?? '';
+    }
+  }, [userSession?.token]);
+
+  // Volto stores the token and its own AppExtras redirects; all this has to
+  // do is get the user back to where the flow started, which for an
+  // authorization request is the whole request.
+  //
+  // Only for a token that appeared while this page was open. Arriving here
+  // *already* carrying one means whatever sent us here would not accept it,
+  // because this page is only reached when something refused the session --
+  // so bouncing straight back is an infinite redirect, and the sign-in
+  // options never stay on screen long enough to be clicked. Showing the form
+  // instead lets the visitor sign in as somebody the flow will accept.
+  useEffect(() => {
+    const token = userSession?.token;
+    const arrived = sessionOnArrival.current;
+    if (token && arrived !== undefined && token !== arrived) {
+      goTo(returnUrl(location.search, location.pathname), push);
+    }
+  }, [userSession?.token, location.search, location.pathname, push]);
+
+  const onSendMagicLink = useCallback(
+    (email: string) => {
+      dispatch(sendMagicLink(email));
+    },
+    [dispatch],
+  );
+
+  // Whether the listing has answered at all -- which is not the same thing as
+  // `loading`. The slice starts neither loading nor loaded, so between the
+  // first render and the effect below dispatching, `loading` is false and
+  // `data` is empty: indistinguishable, to anything reading those two, from a
+  // site with no providers configured. That is the state the page used to
+  // render the local password form in, for a tick, before replacing it.
+  //
+  // A failed listing is deliberately *not* held here. It has answered -- with
+  // nothing -- and the form's own fallbacks are what a site with no reachable
+  // provider list should get: the password form is the way in when this page
+  // cannot draw the other ones.
+  const answered = Boolean(providers?.loaded || providers?.error);
+
+  // The description names what is actually below, which differs by site: a
+  // provider list, a password form, or both. Until the listing answers there
+  // is nothing below to name, so the strip is left out rather than guessing
+  // -- guessing means the wrong sentence on screen and then a second one
+  // replacing it.
+  const hasProviders = Boolean(providers?.data?.length);
+  const description = answered
+    ? intl.formatMessage(
+        hasProviders ? messages.chooseHow : messages.signInLocally,
+      )
+    : undefined;
+
+  return (
+    <LoginPanel
+      title={intl.formatMessage(messages.title)}
+      description={description}
+    >
+      <LoginForm
+        providers={providers?.data ?? []}
+        loading={!answered}
+        starting={redirecting}
+        error={started?.error}
+        magicLinkSent={Boolean(magic?.data)}
+        magicLinkLoading={Boolean(magic?.loading)}
+        magicLinkError={magic?.error}
+        onSelectProvider={onSelectProvider}
+        onSendMagicLink={onSendMagicLink}
+        passwordLoading={Boolean(userSession?.login?.loading)}
+        passwordError={userSession?.login?.error}
+        showPloneLogin={showPloneLogin()}
+        onPasswordLogin={onPasswordLogin}
+      />
+    </LoginPanel>
+  );
+};
+
+export default Login;

package/src/components/Login/LoginForm.scss

@@ -0,0 +1,39 @@
+/**
+ * The stack of ways in: provider buttons, the magic link, the password form.
+ *
+ * Each is its own component with its own stylesheet; this only spaces them
+ * apart and centres the provider list.
+ */
+.identity-login {
+  display: flex;
+  flex-direction: column;
+  gap: var(--identity-gap);
+}
+
+/* The control that swaps between the providers and the password form. Plain
+   text rather than a button: it chooses between two ways in, and neither of
+   them is the page's action. */
+.identity-password-toggle {
+  padding: 10px;
+  text-align: center;
+
+  > button {
+    padding: 0;
+    border: unset;
+    background: transparent;
+    color: var(--identity-accent);
+    cursor: pointer;
+    font-size: 14px;
+  }
+}
+
+.identity-providers {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 0 1rem;
+  margin: 1rem;
+  gap: 6px;
+  list-style: none;
+  text-align: center;
+}

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import LoginForm from './LoginForm';
+import {
+  EMAIL,
+  FAILED,
+  PROVIDERS,
+  withLoginCard,
+} from '../../stories/fixtures';
+
+const meta: Meta<typeof LoginForm> = {
+  title: 'Identity/Login/LoginForm',
+  component: LoginForm,
+  decorators: [withLoginCard()],
+  args: {
+    providers: PROVIDERS,
+    loading: false,
+    starting: false,
+    magicLinkSent: false,
+    magicLinkLoading: false,
+    passwordLoading: false,
+    showPloneLogin: true,
+    onSelectProvider: () => {},
+    onSendMagicLink: () => {},
+    onPasswordLogin: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof LoginForm>;
+
+export const Providers: Story = {};
+
+/**
+ * Email as one of the buttons.
+ *
+ * It is not a redirect, so pressing it opens its field on the next step
+ * rather than leaving this origin -- but on the picker it is a way in like
+ * any other, which is the only thing the picker is about.
+ */
+export const WithMagicLink: Story = {
+  args: { providers: [...PROVIDERS, EMAIL] },
+};
+
+export const Loading: Story = { args: { loading: true } };
+
+/**
+ * A site can legitimately have none configured, and an authorization server
+ * never will: its users are local. The password has to be offered here, or
+ * there is no way in at all.
+ */
+export const NoProviders: Story = { args: { providers: [] } };
+
+/** A site that has providers and wants no password beside them. */
+export const ProvidersOnly: Story = {
+  args: { showPloneLogin: false },
+};
+
+/**
+ * One provider and nothing else: the picker is skipped and the flow starts
+ * on its own, so what is on screen is where it is going.
+ */
+export const TheOnlyWayIn: Story = {
+  args: { showPloneLogin: false, providers: [PROVIDERS[0]] },
+};
+
+/** The same site, after that provider turned out to be unreachable. */
+export const TheOnlyWayInFailed: Story = {
+  args: {
+    showPloneLogin: false,
+    providers: [PROVIDERS[0]],
+    error: FAILED.error,
+  },
+};
+
+/**
+ * A site whose only way in is a link in the post.
+ *
+ * Also what the Email button opens on a site with a choice: one way in is
+ * not a choice, so the step it would lead to is the page itself. The step
+ * reached by pressing the button is an interaction rather than a state, so
+ * it is pinned in `LoginForm.test.tsx` rather than here.
+ */
+export const MagicLinkOnly: Story = {
+  args: { showPloneLogin: false, providers: [EMAIL] },
+};
+
+export const Redirecting: Story = { args: { starting: true } };
+
+export const StartFailed: Story = { args: { error: FAILED.error } };
+
+/**
+ * A refused password, on the page that shows it.
+ *
+ * `passwordError` reaches `PasswordForm`, and that form is only on screen
+ * once it has been opened -- so with providers configured this story rendered
+ * the picker and showed nothing at all. A site with no providers *is* the
+ * password form, which is the state worth looking at.
+ */
+export const PasswordRefused: Story = {
+  args: { providers: [], passwordError: FAILED.error },
+};
+
+/** The same form while the attempt is still in flight. */
+export const Authenticating: Story = {
+  args: { providers: [], passwordLoading: true },
+};
+
+/** A refusal from the provider listing, over the options it could not load. */
+export const StartFailedDismissible: Story = {
+  args: { error: FAILED.error },
+};