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

package/src/components/Identities/IdentitiesList.tsx

@@ -0,0 +1,207 @@
+/**
+ * The "your sign-in methods" panel, without store or routing.
+ *
+ * Two sections, and they are tabs rather than a column: the providers you
+ * sign in through, and the addresses that are yours. They were stacked, so
+ * the page read as a pile of everything that could be said about how you get
+ * in -- and the addresses, which is where the work usually is, were below
+ * whatever length the provider list happened to be.
+ *
+ * The same tabs the control panel's account page wears, because this is that
+ * page's question asked by the account's owner rather than by an
+ * administrator.
+ * @module components/Identities/IdentitiesList
+ */
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Tabs } from '@plone/components';
+import { Tab, TabList, TabPanel } from 'react-aria-components';
+
+// `@plone/components` ships its CSS separately from its components; see the
+// note on the same import in `UserAccountPanel`.
+import '@plone/components/src/styles/basic/Tabs.css';
+
+import type { Identity, LoginProvider, ProfileEmail } from '../../types';
+import ProviderButton from '../Login/ProviderButton';
+import ProfileEmails from './ProfileEmails';
+
+import './IdentitiesList.scss';
+
+const messages = defineMessages({
+  loading: {
+    id: 'Loading your sign-in methods',
+    defaultMessage: 'Loading your sign-in methods…',
+  },
+  remove: { id: 'Remove', defaultMessage: 'Remove' },
+  lastWayIn: {
+    id: 'This is your only way to sign in. Add another first.',
+    defaultMessage: 'This is your only way to sign in. Add another first.',
+  },
+  empty: {
+    id: 'You have no external sign-in methods linked yet.',
+    defaultMessage: 'You have no external sign-in methods linked yet.',
+  },
+  addAnother: { id: 'Add another', defaultMessage: 'Add another' },
+  providers: { id: 'Sign-in methods', defaultMessage: 'Sign-in methods' },
+  addresses: { id: 'Email addresses', defaultMessage: 'Email addresses' },
+  sections: {
+    id: 'identities-sections',
+    defaultMessage: 'How you sign in',
+  },
+  failed: {
+    id: 'That did not work. Please try again.',
+    defaultMessage: 'That did not work. Please try again.',
+  },
+});
+
+interface IdentitiesListProps {
+  identities: Identity[];
+  /**
+   * Providers that could still be added.
+   *
+   * The backend's own `available`, not a filter applied here. It is the
+   * *enabled* providers minus the ones already linked, which is a different
+   * question from the login screen's listing -- a provider an operator has
+   * taken off the login page is still one an existing user may attach.
+   */
+  available: LoginProvider[];
+  /** The caller's own addresses, and which of them are verified. */
+  emails: ProfileEmail[];
+  /** Where the caller's profile is, when they have one. */
+  profileUrl?: string | null;
+  loading: boolean;
+  busy: boolean;
+  error?: unknown;
+  /** Whether a confirmation mail has gone out for an address. */
+  emailSent: boolean;
+  onLink: (provider: LoginProvider) => void;
+  /**
+   * Whether the email provider is one of the ways in on the login page.
+   *
+   * Passed straight to `ProfileEmails`, where the reason it matters is
+   * written down.
+   */
+  canSignInWithLink: boolean;
+  onVerifyEmail: (address: string) => void;
+  /** Move an address to the front of the caller's list, when they can. */
+  onPreferEmail?: (address: string) => void;
+  onUnlink: (identity: Identity) => void;
+}
+
+const IdentitiesList: React.FC<IdentitiesListProps> = ({
+  identities,
+  available,
+  canSignInWithLink,
+  emails,
+  profileUrl,
+  loading,
+  busy,
+  error,
+  emailSent,
+  onLink,
+  onVerifyEmail,
+  onPreferEmail,
+  onUnlink,
+}) => {
+  const intl = useIntl();
+
+  if (loading) {
+    return (
+      <div className="identity-identities" role="status">
+        {intl.formatMessage(messages.loading)}
+      </div>
+    );
+  }
+
+  return (
+    <div className="identity-identities">
+      <Tabs className="identity-tabs">
+        <TabList aria-label={intl.formatMessage(messages.sections)}>
+          <Tab id="providers">{intl.formatMessage(messages.providers)}</Tab>
+          <Tab id="addresses">{intl.formatMessage(messages.addresses)}</Tab>
+        </TabList>
+
+        <TabPanel id="providers">
+          <ul className="identity-identities__list">
+            {identities.map((identity) => (
+              <li key={identity['@id']} data-provider={identity.provider}>
+                <span className="identity-identities__title">
+                  {identity.title}
+                </span>
+                <span className="identity-identities__subject identity-note">
+                  {identity.subject}
+                </span>
+                <button
+                  type="button"
+                  className="identity-button identity-button--danger"
+                  disabled={busy || !identity.can_unlink}
+                  // Surfaced: the backend refuses to remove the last way in,
+                  // and a button that only fails when pressed is worse than one
+                  // that explains itself.
+                  title={
+                    identity.can_unlink
+                      ? undefined
+                      : intl.formatMessage(messages.lastWayIn)
+                  }
+                  data-action="unlink"
+                  onClick={() => onUnlink(identity)}
+                >
+                  {intl.formatMessage(messages.remove)}
+                </button>
+              </li>
+            ))}
+          </ul>
+
+          {identities.length === 0 ? (
+            <p className="identity-identities__empty identity-note">
+              {intl.formatMessage(messages.empty)}
+            </p>
+          ) : null}
+
+          {available.length ? (
+            <div className="identity-identities__add">
+              <h3>{intl.formatMessage(messages.addAnother)}</h3>
+              <ul>
+                {available.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={busy}
+                      onSelect={() => onLink(provider)}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </TabPanel>
+
+        <TabPanel id="addresses">
+          <ProfileEmails
+            emails={emails}
+            profileUrl={profileUrl}
+            loading={loading}
+            busy={busy}
+            sent={emailSent}
+            canSignInWithLink={canSignInWithLink}
+            onVerify={onVerifyEmail}
+            onPrefer={onPreferEmail}
+          />
+        </TabPanel>
+      </Tabs>
+
+      {error ? (
+        <p className="identity-error" role="alert">
+          {intl.formatMessage(messages.failed)}
+        </p>
+      ) : null}
+    </div>
+  );
+};
+
+export default IdentitiesList;

package/src/components/Identities/ProfileEmails.scss

@@ -0,0 +1,62 @@
+/**
+ * Your addresses, and the button that proves one.
+ *
+ * Shares the geometry of the sign-in-methods list above it: the two panels
+ * sit in the same Segment and a second set of measurements would read as two
+ * pages stapled together.
+ */
+.identity-emails {
+  margin-top: var(--identity-gap);
+
+  h3 {
+    margin-bottom: 4px;
+  }
+}
+
+.identity-emails__list {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: var(--identity-gap) 0;
+  gap: 8px;
+  list-style: none;
+
+  li {
+    display: flex;
+    align-items: baseline;
+    padding: 10px 0;
+    border-bottom: var(--identity-border);
+    gap: 8px;
+  }
+}
+
+.identity-emails__address {
+  flex: 1;
+  font-weight: 600;
+  /* An address is long and has no spaces to wrap at, so it is the one thing
+     on the row that must be allowed to break rather than push the buttons
+     off the end. */
+  overflow-wrap: anywhere;
+}
+
+.identity-emails__badge {
+  padding: 2px 8px;
+  border: var(--identity-border);
+  border-radius: 10px;
+  font-size: 0.85em;
+}
+
+.identity-emails__badge--verified {
+  border-color: var(--identity-verified-border, #1a7f37);
+  color: var(--identity-verified-color, #1a7f37);
+}
+
+/* A second action on the same row as `Verify`, and quieter than it: choosing
+   a preferred address is housekeeping, while proving one is the thing this
+   panel is for. */
+.identity-button--quiet {
+  border-color: transparent;
+  background: none;
+  font-weight: 400;
+  text-decoration: underline;
+}

package/src/components/Identities/ProfileEmails.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ProfileEmails from './ProfileEmails';
+import { PROFILE_EMAILS } from '../../stories/fixtures';
+
+const meta: Meta<typeof ProfileEmails> = {
+  title: 'Identity/Identities/ProfileEmails',
+  component: ProfileEmails,
+  args: {
+    emails: PROFILE_EMAILS,
+    profileUrl: '/identity-profiles/erico',
+    loading: false,
+    busy: false,
+    sent: false,
+    canSignInWithLink: true,
+    onVerify: () => {},
+    onPrefer: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ProfileEmails>;
+
+/**
+ * The same panel on a site that took the email provider off its login page.
+ *
+ * Verifying still recognises the person behind a later provider login, so the
+ * button stays -- but signing in with a link is not one of the ways in here,
+ * and the panel stops saying it is.
+ */
+export const WithoutLinkSignIn: Story = {
+  args: { canSignInWithLink: false },
+};
+
+/** One address proved, one still to prove. */
+export const Several: Story = {};
+
+/** Nothing verified yet, which is how a profile arrives from a provider. */
+export const NoneVerified: Story = {
+  args: {
+    emails: PROFILE_EMAILS.map((entry) => ({ ...entry, verified: false })),
+  },
+};
+
+/**
+ * No addresses at all.
+ *
+ * There is nothing to verify and no box to type one into: an address is added
+ * on the profile, and this points at it.
+ */
+export const Empty: Story = { args: { emails: [] } };
+
+/** A confirmation link has gone out. Nothing is verified until it is clicked,
+ * which may well happen in another browser entirely. */
+export const Sent: Story = { args: { sent: true } };
+
+/** While a send is in flight, nothing else may be started. */
+export const Busy: Story = { args: { busy: true } };
+
+/**
+ * A page that only shows the addresses.
+ *
+ * Without a handler the buttons are not rendered at all, rather than rendered
+ * inert: an action that does nothing when clicked is worse than one that was
+ * never offered.
+ */
+export const NoReordering: Story = { args: { onPrefer: undefined } };
+
+/**
+ * One address, so there is nothing to choose between.
+ *
+ * The hint above the list is what disappears; the address is preferred by
+ * being the only one.
+ */
+export const OnlyOne: Story = { args: { emails: PROFILE_EMAILS.slice(0, 1) } };

package/src/components/Identities/ProfileEmails.test.tsx

@@ -0,0 +1,132 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import React from 'react';
+
+import ProfileEmails from './ProfileEmails';
+import type { ProfileEmail } from '../../types';
+
+const PREFERRED: ProfileEmail = {
+  address: 'erico@plone.org',
+  verified: true,
+  preferred: true,
+};
+
+const OTHER: ProfileEmail = {
+  address: 'erico@example.com',
+  verified: false,
+  preferred: false,
+};
+
+function renderPanel(
+  props: Partial<React.ComponentProps<typeof ProfileEmails>> = {},
+) {
+  const onVerify = vi.fn();
+  const onPrefer = vi.fn();
+  render(
+    <ProfileEmails
+      emails={[PREFERRED, OTHER]}
+      canSignInWithLink
+      loading={false}
+      busy={false}
+      sent={false}
+      onVerify={onVerify}
+      onPrefer={onPrefer}
+      {...props}
+    />,
+  );
+  return { onVerify, onPrefer };
+}
+
+describe('ProfileEmails', () => {
+  it('lists every address on the profile', () => {
+    renderPanel();
+
+    expect(screen.getByText('erico@plone.org')).toBeTruthy();
+    expect(screen.getByText('erico@example.com')).toBeTruthy();
+  });
+
+  it('marks the one this site uses', () => {
+    renderPanel();
+
+    expect(screen.getByText('Preferred')).toBeTruthy();
+  });
+
+  describe('choosing which address stands for you', () => {
+    it('offers it on every address but the one already chosen', () => {
+      renderPanel();
+
+      expect(
+        screen.getAllByRole('button', { name: 'Make preferred' }),
+      ).toHaveLength(1);
+    });
+
+    it('hands back the address that was picked', () => {
+      const { onPrefer } = renderPanel();
+
+      fireEvent.click(screen.getByRole('button', { name: 'Make preferred' }));
+
+      expect(onPrefer).toHaveBeenCalledWith('erico@example.com');
+    });
+
+    it('is not offered at all without a handler', () => {
+      // Rendered inert would be worse than never offered: a button that does
+      // nothing when clicked reads as a broken page.
+      renderPanel({ onPrefer: undefined });
+
+      expect(
+        screen.queryByRole('button', { name: 'Make preferred' }),
+      ).toBeNull();
+    });
+
+    it('says nothing about ordering when there is one address', () => {
+      renderPanel({ emails: [PREFERRED] });
+
+      expect(
+        screen.queryByRole('button', { name: 'Make preferred' }),
+      ).toBeNull();
+    });
+
+    it('is held while something else is in flight', () => {
+      renderPanel({ busy: true });
+
+      expect(
+        screen
+          .getByRole('button', { name: 'Make preferred' })
+          .hasAttribute('disabled'),
+      ).toBe(true);
+    });
+  });
+
+  describe('when the email provider is off the login page', () => {
+    it('stops saying a verified address can sign you in', () => {
+      // The panel is reached from a page called "Sign-in methods". Listing
+      // something there that cannot sign anybody in is the page telling the
+      // user something untrue.
+      renderPanel({ canSignInWithLink: false });
+
+      expect(document.body.textContent).not.toContain('sign in with a link');
+      expect(document.body.textContent).toContain('recognises you');
+    });
+
+    it('still offers the verification', () => {
+      // Verifying does a second job the login page has no say over: it is
+      // how a later provider login is matched to this account. Removing the
+      // button would take that away too.
+      renderPanel({ canSignInWithLink: false });
+
+      expect(document.querySelector('[data-action="verify"]')).toBeTruthy();
+    });
+
+    it('says both halves when the link is a way in', () => {
+      renderPanel({ canSignInWithLink: true });
+
+      expect(document.body.textContent).toContain('sign in with a link');
+    });
+  });
+
+  it('offers a verification only for an address that has none', () => {
+    renderPanel();
+
+    expect(screen.getAllByRole('button', { name: 'Verify' })).toHaveLength(1);
+  });
+});

package/src/components/Identities/ProfileEmails.tsx

@@ -0,0 +1,217 @@
+/**
+ * Your addresses, and the button that proves one.
+ *
+ * This is what replaced the free-text box that used to sit on this page. That
+ * box asked for an address and mailed a link to it, which verified *any*
+ * mailbox somebody could reach -- and a verified address is what a new
+ * provider account can be auto-attached to. So the addresses offered here are
+ * the ones already on your profile, and adding one is an edit to the profile
+ * rather than something this panel does.
+ *
+ * Verifying is still the same magic link and the same endpoint; what changed
+ * is that the backend now refuses an address that is not yours.
+ *
+ * **Choosing which one is yours.** A provider that knows several of your
+ * addresses puts all of them on your profile, so the question is no longer
+ * which one to keep but which one stands for you here. That is the *order* of
+ * the list -- the backend derives `email` from it, preferring the first
+ * verified address -- so {guilabel}`Make preferred` moves one to the front
+ * rather than setting a field. An unverified address can be moved and will not
+ * win while a verified one is on the list, which is why the badge is what says
+ * who won rather than what you last clicked.
+ * @module components/Identities/ProfileEmails
+ */
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
+import type { ProfileEmail } from '../../types';
+
+import './ProfileEmails.scss';
+
+const messages = defineMessages({
+  heading: {
+    id: 'Your email addresses',
+    defaultMessage: 'Your email addresses',
+  },
+  intro: {
+    id: 'profile-emails-intro',
+    defaultMessage:
+      'A verified address can be used to sign in with a link, and to ' +
+      'recognise you when you add another provider. Add an address on your ' +
+      'profile first, then verify it here.',
+  },
+  introNoSignIn: {
+    id: 'profile-emails-intro-no-sign-in',
+    defaultMessage:
+      'A verified address is how this site recognises you when you add ' +
+      'another provider. Add an address on your profile first, then verify ' +
+      'it here.',
+  },
+  verify: { id: 'Verify', defaultMessage: 'Verify' },
+  makePreferred: {
+    id: 'Make preferred',
+    defaultMessage: 'Make preferred',
+  },
+  verified: { id: 'Verified', defaultMessage: 'Verified' },
+  preferred: { id: 'Preferred', defaultMessage: 'Preferred' },
+  preferredHelp: {
+    id: 'profile-emails-preferred-help',
+    defaultMessage:
+      'The address this site uses for you: the first verified one, or the ' +
+      'first on your profile when none is verified.',
+  },
+  choose: {
+    id: 'profile-emails-choose',
+    defaultMessage:
+      'Move an address to the top to make it the one this site uses for you.',
+  },
+  empty: {
+    id: 'profile-emails-empty',
+    defaultMessage: 'Your profile carries no email address yet.',
+  },
+  edit: { id: 'Edit your profile', defaultMessage: 'Edit your profile' },
+  sent: {
+    id: 'profile-emails-sent',
+    defaultMessage:
+      'Check that mailbox. The link confirms the address; it does not sign ' +
+      'anybody in.',
+  },
+});
+
+interface ProfileEmailsProps {
+  emails: ProfileEmail[];
+  /** Where the profile's own edit form is, when the user has a profile. */
+  profileUrl?: string | null;
+  loading: boolean;
+  busy: boolean;
+  /** Whether a confirmation mail has just gone out. */
+  sent: boolean;
+  /**
+   * Whether signing in with a link is one of the ways in.
+   *
+   * Verifying does two jobs -- it enables the magic link, and it is how a
+   * later provider login is recognised as the same person -- and an operator
+   * can turn the first one off by taking the email provider off the login
+   * page. When they have, this panel must stop offering the half that is not
+   * there: a page called "sign-in methods" that lists something which cannot
+   * sign anybody in is telling the user something untrue.
+   *
+   * The other half survives, which is why this changes the wording rather
+   * than removing the button: recognition still works, and a user who cannot
+   * verify an address here loses the account matching too.
+   */
+  canSignInWithLink: boolean;
+  onVerify: (address: string) => void;
+  /**
+   * Move an address to the front of the list.
+   *
+   * Optional so that a page rendering this panel read-only -- or one talking
+   * to a backend that predates the reorder -- can leave the buttons out
+   * rather than wire up a handler that does nothing.
+   */
+  onPrefer?: (address: string) => void;
+}
+
+const ProfileEmails: React.FC<ProfileEmailsProps> = ({
+  emails,
+  profileUrl,
+  loading,
+  busy,
+  sent,
+  canSignInWithLink,
+  onVerify,
+  onPrefer,
+}) => {
+  const intl = useIntl();
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <div className="identity-emails">
+      <h3>{intl.formatMessage(messages.heading)}</h3>
+      <p className="identity-note">
+        {intl.formatMessage(
+          canSignInWithLink ? messages.intro : messages.introNoSignIn,
+        )}
+      </p>
+      {onPrefer && emails.length > 1 ? (
+        <p className="identity-note">{intl.formatMessage(messages.choose)}</p>
+      ) : null}
+
+      {emails.length ? (
+        <ul className="identity-emails__list">
+          {emails.map((entry) => (
+            <li key={entry.address} data-address={entry.address}>
+              <span className="identity-emails__address">{entry.address}</span>
+              {entry.verified ? (
+                <span
+                  className="identity-emails__badge identity-emails__badge--verified"
+                  data-state="verified"
+                >
+                  {intl.formatMessage(messages.verified)}
+                </span>
+              ) : (
+                <button
+                  type="button"
+                  className="identity-button"
+                  data-action="verify"
+                  disabled={busy}
+                  onClick={() => onVerify(entry.address)}
+                >
+                  {intl.formatMessage(messages.verify)}
+                </button>
+              )}
+              {entry.preferred ? (
+                <span
+                  className="identity-emails__badge"
+                  data-state="preferred"
+                  title={intl.formatMessage(messages.preferredHelp)}
+                >
+                  {intl.formatMessage(messages.preferred)}
+                </span>
+              ) : null}
+              {onPrefer && !entry.preferred ? (
+                <button
+                  type="button"
+                  className="identity-button identity-button--quiet"
+                  data-action="prefer"
+                  disabled={busy}
+                  onClick={() => onPrefer(entry.address)}
+                >
+                  {intl.formatMessage(messages.makePreferred)}
+                </button>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="identity-note">{intl.formatMessage(messages.empty)}</p>
+      )}
+
+      {sent ? (
+        <p className="identity-emails__sent" role="status">
+          {intl.formatMessage(messages.sent)}
+        </p>
+      ) : null}
+
+      {profileUrl ? (
+        <p className="identity-emails__edit">
+          {/* A router link: the edit form is a Volto route, and a plain
+              anchor to it threw the whole application away to reach a page
+              this app was already running. `profileUrl` is the backend's
+              absolute URL, so it has to be flattened first. */}
+          <Link to={`${flattenToAppURL(profileUrl)}/edit`}>
+            {intl.formatMessage(messages.edit)}
+          </Link>
+        </p>
+      ) : null}
+    </div>
+  );
+};
+
+export default ProfileEmails;