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

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import LoginPanel from './LoginPanel';
+
+const meta: Meta<typeof LoginPanel> = {
+  title: 'Identity/Login/LoginPanel',
+  component: LoginPanel,
+  args: {
+    title: 'Log in',
+    description: 'Choose how you would like to sign in.',
+    children: (
+      // Centred and padded, so the story shows the card's body as the page
+      // fills it rather than a line of text against its top-left corner.
+      <p
+        style={{
+          display: 'flex',
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 'var(--identity-gap)',
+          margin: 0,
+          textAlign: 'center',
+        }}
+      >
+        The sign-in options go here.
+      </p>
+    ),
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof LoginPanel>;
+
+/** The chrome, which is volto-authomatic's so the two add-ons match. */
+export const Default: Story = {};
+
+export const NoProvidersConfigured: Story = {
+  args: { description: 'Sign in with your account on this site.' },
+};

package/src/components/Login/LoginPanel.tsx

@@ -0,0 +1,60 @@
+/**
+ * The chrome around the login page.
+ *
+ * The panel, its markup and its classes are taken from `volto-authomatic`,
+ * which is the shape Volto's own login page has: a fixed-width card with a
+ * titled header, a description strip, and the form below. Two add-ons that
+ * both replace `/login` looking like two different products is a worse
+ * outcome than either of them looking like itself.
+ *
+ * The card and its heading additionally wear the add-on's own `identity-surface`
+ * classes, so this panel and the control panel's sections are the same card
+ * described once.
+ *
+ * Every string it renders is a prop: the container decides what the page is
+ * called and what it says, because that depends on what is actually below.
+ * @module components/Login/LoginPanel
+ */
+import React from 'react';
+import type { ReactNode } from 'react';
+import { Container } from '@plone/components';
+import { Helmet } from '@plone/volto/helpers/Helmet/Helmet';
+
+import './LoginPanel.scss';
+
+interface LoginPanelProps {
+  /** Heading, and the browser title. */
+  title: string;
+  /**
+   * The strip under the heading, saying what the options below are.
+   *
+   * Optional: the callback and the first-login wait use this same card, and
+   * neither has anything to say there. An empty strip is still a coloured
+   * band with padding, so it is left out rather than rendered blank.
+   */
+  description?: string;
+  children: ReactNode;
+}
+
+const LoginPanel: React.FC<LoginPanelProps> = ({
+  title,
+  description,
+  children,
+}) => (
+  <div id="page-login">
+    <Helmet title={title} />
+    <Container className="loginForm">
+      <Container className="wrapper identity-surface">
+        <Container className="title identity-surface__header">
+          {title}
+        </Container>
+        {description ? (
+          <Container className="description">{description}</Container>
+        ) : null}
+        <Container className="form">{children}</Container>
+      </Container>
+    </Container>
+  </div>
+);
+
+export default LoginPanel;

package/src/components/Login/MagicLinkForm.scss

@@ -0,0 +1,25 @@
+/**
+ * The "email me a link" form, and what it says once the link is on its way.
+ *
+ * The form itself wears `.PloneAuth`, so its field, its underline and its
+ * action row are styled by `PasswordForm.scss` -- the two forms on this card
+ * are the same form and are styled once. Only what is particular to this one
+ * lives here: a single field needs no divider above its action row, and the
+ * confirmation that replaces the whole form is not a form at all.
+ */
+.identity-magic-link {
+  &.PloneAuth .actions {
+    padding-top: 0;
+    /* `PasswordForm` rules a line above its two buttons to separate them from
+       two fields and a password-reset link. Above a single field it is a rule
+       under nothing. */
+    border-top: 0;
+  }
+}
+
+.identity-magic-link--sent {
+  padding: var(--identity-gap) 0;
+  margin: 0;
+  color: var(--identity-muted);
+  text-align: center;
+}

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import MagicLinkForm from './MagicLinkForm';
+import { FAILED, withLoginCard } from '../../stories/fixtures';
+
+const meta: Meta<typeof MagicLinkForm> = {
+  title: 'Identity/Login/MagicLinkForm',
+  component: MagicLinkForm,
+  decorators: [withLoginCard()],
+  args: { sent: false, loading: false, onSend: () => {} },
+};
+export default meta;
+
+type Story = StoryObj<typeof MagicLinkForm>;
+
+export const Default: Story = {};
+
+export const Sending: Story = { args: { loading: true } };
+
+/**
+ * The confirmation says nothing about whether the address is known: the
+ * backend answers identically either way, and a UI that distinguished them
+ * would undo that.
+ */
+export const Sent: Story = { args: { sent: true } };
+
+export const Failed: Story = { args: { error: FAILED.error } };

package/src/components/Login/MagicLinkForm.tsx

@@ -0,0 +1,133 @@
+/**
+ * The "email me a link" way in.
+ *
+ * The markup and the classes are `PasswordForm`'s, which are
+ * `volto-authomatic`'s `PloneForm`, which is the shape Volto's own login form
+ * has: a labelled field with a single underline, and the submit as an icon
+ * button on a divided row. The two forms on this page ask for one and two
+ * fields respectively and are otherwise the same form -- which is the point.
+ * Before this they were not: a bare `<label>` and `<input>` next to a fully
+ * dressed `PloneAuth`, on the same card, one click apart.
+ *
+ * Just the form. Whether it is shown at all, and what it replaces when it is,
+ * belongs to `LoginForm`.
+ * @module components/Login/MagicLinkForm
+ */
+import React, { useState } from 'react';
+import type { FormEvent } from 'react';
+import { Button, Container, TextField } from '@plone/components';
+import { defineMessages, useIntl } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+
+// The widget's own stylesheet, for the same reason `PasswordForm` imports it:
+// `@plone/components` ships its CSS separately from its components, so a
+// TextField rendered without this is unstyled.
+import '@plone/components/src/styles/basic/TextField.css';
+
+import LoginOverlay, { useDismissibleError } from './LoginOverlay';
+
+import './MagicLinkForm.scss';
+
+const messages = defineMessages({
+  email: { id: 'Email address', defaultMessage: 'Email address' },
+  send: { id: 'Email me a link', defaultMessage: 'Email me a link' },
+  sending: { id: 'Sending', defaultMessage: 'Sending' },
+  sent: {
+    id: 'If that address can sign in here',
+    defaultMessage:
+      'If that address can sign in here, a link is on its way. It works ' +
+      'once, and only for a few minutes.',
+  },
+  failed: {
+    id: 'That did not work. Please try again in a little while.',
+    defaultMessage: 'That did not work. Please try again in a little while.',
+  },
+});
+
+interface MagicLinkFormProps {
+  sent: boolean;
+  loading: boolean;
+  error?: unknown;
+  onSend: (email: string) => void;
+}
+
+const MagicLinkForm: React.FC<MagicLinkFormProps> = ({
+  sent,
+  loading,
+  error,
+  onSend,
+}) => {
+  const intl = useIntl();
+  const [email, setEmail] = useState('');
+  const [showError, dismissError] = useDismissibleError(error);
+
+  if (sent) {
+    // Deliberately says nothing about whether the address is known: the
+    // backend answers identically either way, and a UI that distinguished
+    // them would undo that.
+    return (
+      <p
+        className="identity-magic-link identity-magic-link--sent"
+        role="status"
+      >
+        {intl.formatMessage(messages.sent)}
+      </p>
+    );
+  }
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (email.trim()) {
+      onSend(email.trim());
+    }
+  };
+
+  return (
+    <form
+      method="post"
+      className="PloneAuth identity-magic-link"
+      onSubmit={submit}
+    >
+      <Container className="form">
+        <TextField
+          label={intl.formatMessage(messages.email)}
+          name="email"
+          type="email"
+          placeholder={intl.formatMessage(messages.email)}
+          autoComplete="email"
+          isRequired
+          value={email}
+          onChange={setEmail}
+        />
+      </Container>
+
+      <Container className="actions">
+        <Button
+          id="magic-link-form-submit"
+          type="submit"
+          isDisabled={loading || !email.trim()}
+          aria-label={intl.formatMessage(
+            loading ? messages.sending : messages.send,
+          )}
+        >
+          <Icon className="circled" name={aheadSVG} size="30px" />
+        </Button>
+      </Container>
+
+      {loading ? (
+        <LoginOverlay message={intl.formatMessage(messages.sending)} />
+      ) : null}
+
+      {showError ? (
+        <LoginOverlay
+          error
+          message={intl.formatMessage(messages.failed)}
+          onDismiss={dismissError}
+        />
+      ) : null}
+    </form>
+  );
+};
+
+export default MagicLinkForm;

package/src/components/Login/PasswordForm.scss

@@ -0,0 +1,82 @@
+/**
+ * The password form, following volto-authomatic's `PloneForm`.
+ *
+ * That is the shape Volto's own login form has: labelled fields with a single
+ * underline, and a submit and a cancel as icon buttons on a divided row. The
+ * class names are its class names, so the two forms are the same form.
+ *
+ * The control that opens it lives in `LoginForm.scss`, with the markup.
+ */
+/* The width is explicit because the auto margins below cost the stretch that
+   would otherwise have supplied one: this form is a flex item of
+   `.identity-login`, and a flex item with an auto margin on the cross axis is
+   sized to its content rather than stretched to the line. Left at
+   `max-width: 100%` it collapsed to whatever the fields happened to need. */
+.PloneAuth {
+  display: flex;
+  width: 80%;
+  max-width: 100%;
+  flex-direction: column;
+  margin-right: auto;
+  margin-left: auto;
+  line-height: 1.5;
+
+  .form {
+    padding: 10px;
+
+    .react-aria-TextField {
+      width: 100%;
+      padding: 10px 0;
+
+      .react-aria-Label {
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      /* The whole border rather than just its width: `TextField.css` styles
+         one with a custom property this add-on does not load, so what is
+         inherited from it is no border at all. */
+      .react-aria-Input {
+        width: 100%;
+        padding: 10px 5px;
+        border: 0;
+        border-bottom: 1px solid var(--identity-field-border);
+        margin-top: 10px;
+        background: transparent;
+        font-size: 18px;
+
+        &:not(:focus) {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+
+  .forgotPassword {
+    padding: 10px 10px 20px;
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 20px 10px;
+    border-top: 1px solid var(--identity-surface-header-bg);
+
+    > button {
+      border: unset;
+      cursor: pointer;
+
+      &.react-aria-Button {
+        background-color: transparent !important;
+      }
+
+      &#login-form-submit {
+        color: var(--identity-accent);
+      }
+
+      &#login-form-cancel {
+        color: var(--identity-danger);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PasswordForm from './PasswordForm';
+import { FAILED, withLoginCard } from '../../stories/fixtures';
+
+const meta: Meta<typeof PasswordForm> = {
+  title: 'Identity/Login/PasswordForm',
+  component: PasswordForm,
+  // The sentence the real page carries above this form when it is the
+  // only way in, which is the case it is worth comparing against.
+  decorators: [withLoginCard('Sign in with your account on this site.')],
+  args: { loading: false, onSubmit: () => {} },
+};
+export default meta;
+
+type Story = StoryObj<typeof PasswordForm>;
+
+/**
+ * The form on its own. Whether the login page shows it, and what it replaces
+ * when it does, is `LoginForm`'s decision -- see its own stories.
+ */
+export const Default: Story = {};
+
+export const Refused: Story = { args: { error: FAILED.error } };
+
+export const Authenticating: Story = { args: { loading: true } };

package/src/components/Login/PasswordForm.tsx

@@ -0,0 +1,159 @@
+/**
+ * Signing in with a local account.
+ *
+ * This route replaces Volto's own login page, so without it a site that
+ * installs this add-on loses password sign-in entirely. That is wrong for any
+ * site with local accounts and impossible for one running the `[server]`
+ * layer: an authorization server has to be able to authenticate its own
+ * users, and "sign in with somebody else" is not an answer it can give.
+ *
+ * The markup and the classes follow `volto-authomatic`'s `PloneForm`, which
+ * is the shape Volto's own login form has: labelled fields with a single
+ * underline, and a submit and a cancel as icon buttons on a divided row.
+ *
+ * Just the form. Whether it is shown at all, and what it replaces when it is,
+ * belongs to `LoginForm`: opening the password form hides the providers, and a
+ * component cannot hide its own siblings.
+ * @module components/Login/PasswordForm
+ */
+import React, { useState } from 'react';
+import type { FormEvent } from 'react';
+import { Button, Container, TextField } from '@plone/components';
+import { Link } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+// The widget's own stylesheet. `@plone/components` ships its CSS separately
+// from its components, so a TextField rendered without this is unstyled --
+// which is what made this form look unlike volto-authomatic's despite the
+// markup and the class names matching it exactly.
+import '@plone/components/src/styles/basic/TextField.css';
+
+import LoginOverlay, { useDismissibleError } from './LoginOverlay';
+
+import './PasswordForm.scss';
+
+const messages = defineMessages({
+  loginName: { id: 'Login name', defaultMessage: 'Login name' },
+  password: { id: 'Password', defaultMessage: 'Password' },
+  forgotPassword: {
+    id: 'box_forgot_password_option',
+    defaultMessage: 'Forgot your password?',
+  },
+  refused: {
+    id: 'That login name and password did not match.',
+    defaultMessage: 'That login name and password did not match.',
+  },
+  signIn: { id: 'Sign in', defaultMessage: 'Sign in' },
+  signingIn: { id: 'Signing in', defaultMessage: 'Signing in' },
+  clear: { id: 'Clear', defaultMessage: 'Clear' },
+});
+
+interface PasswordFormProps {
+  /** Whether a sign-in attempt is in flight. */
+  loading: boolean;
+  /** Whether the last attempt was refused. */
+  error?: unknown;
+  /** Called with the credentials to try. */
+  onSubmit: (username: string, password: string) => void;
+}
+
+const PasswordForm: React.FC<PasswordFormProps> = ({
+  loading,
+  error,
+  onSubmit,
+}) => {
+  const intl = useIntl();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showError, dismissError] = useDismissibleError(error);
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (username && password) {
+      onSubmit(username, password);
+    }
+  };
+
+  const clear = () => {
+    setUsername('');
+    setPassword('');
+  };
+
+  return (
+    <form method="post" className="PloneAuth" onSubmit={submit}>
+      <Container className="form">
+        <TextField
+          label={intl.formatMessage(messages.loginName)}
+          name="username"
+          placeholder={intl.formatMessage(messages.loginName)}
+          autoComplete="username"
+          isRequired
+          value={username}
+          onChange={setUsername}
+        />
+        <TextField
+          label={intl.formatMessage(messages.password)}
+          name="password"
+          type="password"
+          placeholder={intl.formatMessage(messages.password)}
+          autoComplete="current-password"
+          isRequired
+          value={password}
+          onChange={setPassword}
+        />
+      </Container>
+
+      <Container className="forgotPassword">
+        <p className="help">
+          <Link to="/passwordreset">
+            {intl.formatMessage(messages.forgotPassword)}
+          </Link>
+        </p>
+      </Container>
+
+      <Container className="actions">
+        <Button
+          id="login-form-submit"
+          type="submit"
+          isDisabled={loading || !username || !password}
+          aria-label={intl.formatMessage(
+            loading ? messages.signingIn : messages.signIn,
+          )}
+        >
+          <Icon className="circled" name={aheadSVG} size="30px" />
+        </Button>
+
+        <Button
+          id="login-form-cancel"
+          type="button"
+          onPress={clear}
+          aria-label={intl.formatMessage(messages.clear)}
+        >
+          <Icon className="circled" name={clearSVG} size="30px" />
+        </Button>
+      </Container>
+
+      {/* Over the form rather than inside it: a refusal that pushed the
+          action row down moved the button the reader was about to press
+          again. The wait carries no dismiss -- it is not theirs to end. */}
+      {loading ? (
+        <LoginOverlay message={intl.formatMessage(messages.signingIn)} />
+      ) : null}
+
+      {/* One message for a wrong name and a wrong password alike: telling
+          them apart is an account-enumeration oracle. */}
+      {showError ? (
+        <LoginOverlay
+          error
+          message={intl.formatMessage(messages.refused)}
+          onDismiss={dismissError}
+        />
+      ) : null}
+    </form>
+  );
+};
+
+export default PasswordForm;

package/src/components/Login/ProviderButton.scss

@@ -0,0 +1,103 @@
+/**
+ * One provider button.
+ *
+ * The geometry and the per-provider colours are volto-authomatic's, keyed off
+ * the driver rather than the provider id: a site may call its Keycloak
+ * anything it likes, but it is still an OpenID Connect button.
+ */
+.identity-provider {
+  display: inline-flex;
+  width: var(--identity-provider-width);
+  max-width: 100%;
+  height: var(--identity-provider-height);
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  border: none;
+  border-radius: var(--identity-provider-radius);
+  background: var(--identity-provider-default-bg);
+  box-shadow: var(--identity-provider-shadow);
+  color: var(--identity-provider-default-color);
+  cursor: pointer;
+  font-size: 16px;
+  gap: 8px;
+  text-align: center;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  &.identity-provider--github {
+    background: var(--identity-provider-github-bg);
+    color: var(--identity-provider-github-color);
+
+    &:hover:not(:disabled) {
+      background: var(--identity-provider-github-bg-hover);
+    }
+  }
+
+  &.identity-provider--google {
+    background: var(--identity-provider-google-bg);
+    color: var(--identity-provider-google-color);
+
+    &:hover:not(:disabled) {
+      background: var(--identity-provider-google-bg-hover);
+    }
+  }
+
+  &.identity-provider--plone {
+    background: var(--identity-provider-plone-bg);
+    color: var(--identity-provider-plone-color);
+
+    &:hover:not(:disabled) {
+      background: var(--identity-provider-plone-bg-hover);
+    }
+  }
+
+  &.identity-provider--oidc-generic {
+    background: var(--identity-provider-oidc-bg);
+    color: var(--identity-provider-oidc-color);
+
+    &:hover:not(:disabled) {
+      background: var(--identity-provider-oidc-bg-hover);
+    }
+  }
+
+  /* An operator's own colours, set per provider in the control panel. The
+     rule carries no colours of its own: they arrive as an inline style, and
+     this only has to stop the driver rules above from winning. `revert`
+     rather than `unset`, so a provider styled with a background alone keeps
+     the stylesheet's text colour rather than falling back to the browser's
+     black on whatever they chose. */
+  &.identity-provider--styled {
+    background: revert;
+    color: revert;
+
+    &:hover:not(:disabled) {
+      background: revert;
+      /* The operator chose the colour; dimming it slightly is the only hover
+         this can offer without knowing what would contrast with it. */
+      filter: brightness(0.92);
+    }
+  }
+
+  .identity-provider__icon {
+    display: inline-flex;
+    width: 1.25em;
+    height: 1.25em;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    /* An uploaded icon is whatever size it was drawn at, and `currentColor`
+       is what makes a monochrome one take the button's text colour -- which
+       is the reason it is inlined rather than served as an image. A fill the
+       operator set on the path still wins over this. */
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentcolor;
+    }
+  }
+}