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

package/src/components/Views/GroupView.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import GroupView from './GroupView';
+import { LOADED, LOADING, withStore } from '../../stories/fixtures';
+
+const CONTENT = {
+  '@id': '/identity-profiles/staff',
+  id: 'staff',
+  title: 'Staff',
+  description: 'Everybody who works here.',
+};
+
+const MEMBERS = {
+  '@id': '/@group-members/staff',
+  group: 'staff',
+  items_total: 2,
+  items: [
+    {
+      '@id': '/@group-members/staff/alice',
+      id: 'alice',
+      fullname: 'Alice Liddell',
+      login: 'alice@example.com',
+      profile_url: '/identity-profiles/alice',
+      through: ['developers'],
+    },
+    {
+      '@id': '/@group-members/staff/bob',
+      id: 'bob',
+      fullname: 'Bob Cratchit',
+      login: 'bob@example.com',
+      profile_url: '/identity-profiles/bob',
+      through: ['staff'],
+    },
+  ],
+  nested_groups: [
+    { '@id': '/g/developers', id: 'developers', title: 'Developers' },
+  ],
+  parent_groups: [{ '@id': '/g/everyone', id: 'everyone', title: 'Everyone' }],
+};
+
+const meta: Meta<typeof GroupView> = {
+  title: 'Identity/Views/GroupView',
+  component: GroupView,
+  args: { content: CONTENT },
+};
+export default meta;
+
+type Story = StoryObj<typeof GroupView>;
+
+/** A group in the middle of a nesting: something above it and below it. */
+export const Nested: Story = {
+  decorators: [withStore({ groupMembers: { ...LOADED, data: MEMBERS } })],
+};
+
+/** A group with nothing nested inside it, which is most of them. */
+export const Flat: Story = {
+  decorators: [
+    withStore({
+      groupMembers: {
+        ...LOADED,
+        data: { ...MEMBERS, nested_groups: [], parent_groups: [] },
+      },
+    }),
+  ],
+};
+
+export const Empty: Story = {
+  decorators: [
+    withStore({
+      groupMembers: {
+        ...LOADED,
+        data: {
+          ...MEMBERS,
+          items: [],
+          nested_groups: [],
+          parent_groups: [],
+        },
+      },
+    }),
+  ],
+};
+
+export const Loading: Story = {
+  decorators: [withStore({ groupMembers: LOADING })],
+};
+
+/**
+ * A visitor who can see the group without being in it.
+ *
+ * A membership list is personal data about other people, so it is visible to
+ * its own members and to somebody who manages users. The page is still a
+ * page.
+ */
+export const MembershipRefused: Story = {
+  decorators: [
+    withStore({ groupMembers: { loaded: false, error: { status: 403 } } }),
+  ],
+};

package/src/components/Views/GroupView.test.tsx

@@ -0,0 +1,137 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../testing';
+import { Provider } from 'react-redux';
+import React from 'react';
+
+import GroupView from './GroupView';
+
+const CONTENT = {
+  '@id': '/identity-profiles/staff',
+  id: 'staff',
+  title: 'Staff',
+  description: 'Everybody who works here.',
+};
+
+const MEMBERS = {
+  '@id': '/@group-members/staff',
+  group: 'staff',
+  items_total: 2,
+  items: [
+    {
+      '@id': '/@group-members/staff/alice',
+      id: 'alice',
+      fullname: 'Alice Liddell',
+      login: 'alice@example.com',
+      profile_url: '/identity-profiles/alice',
+      through: ['developers'],
+    },
+    {
+      '@id': '/@group-members/staff/bob',
+      id: 'bob',
+      fullname: 'Bob Cratchit',
+      login: 'bob@example.com',
+      profile_url: null,
+      through: ['staff'],
+    },
+  ],
+  nested_groups: [{ '@id': '/x', id: 'developers', title: 'Developers' }],
+  parent_groups: [{ '@id': '/y', id: 'everyone', title: 'Everyone' }],
+};
+
+function renderView(state: any = {}) {
+  const store = {
+    getState: () => ({ groupMembers: state }),
+    dispatch: (action: any) => action,
+    subscribe: () => () => {},
+  };
+  render(
+    <Provider store={store as any}>
+      <GroupView content={CONTENT} />
+    </Provider>,
+  );
+}
+
+describe('GroupView', () => {
+  it('shows the title and description', () => {
+    renderView({ loaded: true, data: MEMBERS });
+
+    expect(screen.getByText('Staff')).toBeTruthy();
+    expect(screen.getByText('Everybody who works here.')).toBeTruthy();
+  });
+
+  it('lists the groups nested inside it', () => {
+    // The requirement: a group page says what is in it, and membership of an
+    // inner group is membership of this one.
+    renderView({ loaded: true, data: MEMBERS });
+
+    expect(screen.getByText('Developers')).toBeTruthy();
+  });
+
+  it('says what it is nested inside', () => {
+    renderView({ loaded: true, data: MEMBERS });
+
+    expect(screen.getByText('Everyone')).toBeTruthy();
+  });
+
+  it('lists the members', () => {
+    renderView({ loaded: true, data: MEMBERS });
+
+    expect(screen.getByText('Alice Liddell')).toBeTruthy();
+    expect(screen.getByText('Bob Cratchit')).toBeTruthy();
+  });
+
+  it('says which group an inherited member came through', () => {
+    // A list that silently mixes direct members with inherited ones is a list
+    // nobody can account for.
+    renderView({ loaded: true, data: MEMBERS });
+
+    expect(screen.getByText(/through developers/)).toBeTruthy();
+  });
+
+  it('says nothing extra about a direct member', () => {
+    renderView({ loaded: true, data: MEMBERS });
+
+    expect(screen.queryByText(/through staff/)).toBeNull();
+  });
+
+  it('links a member who has a profile', () => {
+    renderView({ loaded: true, data: MEMBERS });
+
+    const link = screen.getByText('Alice Liddell') as HTMLAnchorElement;
+    expect(link.tagName).toBe('A');
+  });
+
+  it('does not link one who has none', () => {
+    // An account that predates the add-on, or a site not keeping users as
+    // content: there is nowhere to send the reader.
+    renderView({ loaded: true, data: MEMBERS });
+
+    expect((screen.getByText('Bob Cratchit') as HTMLElement).tagName).toBe(
+      'SPAN',
+    );
+  });
+
+  it('says so while the membership is loading', () => {
+    renderView({ loading: true });
+
+    expect(screen.getByRole('status')).toBeTruthy();
+  });
+
+  it('still renders the group when the membership is refused', () => {
+    // A visitor who can see the group without being in it gets the title and
+    // description. That is a page, not an error.
+    renderView({ error: { status: 403 } });
+
+    expect(screen.getByText('Staff')).toBeTruthy();
+    expect(screen.getByText(/visible to its own members/)).toBeTruthy();
+  });
+
+  it('says so when nobody is in it', () => {
+    renderView({
+      loaded: true,
+      data: { ...MEMBERS, items: [], nested_groups: [], parent_groups: [] },
+    });
+
+    expect(screen.getByText(/Nobody is in this group/)).toBeTruthy();
+  });
+});

package/src/components/Views/GroupView.tsx

@@ -0,0 +1,178 @@
+/**
+ * What a group looks like when somebody opens it.
+ *
+ * A group is content, so it rendered through Volto's default view: a title
+ * and an empty body. What a group page has to say is who is in it and what it
+ * contains, and neither is on the content object -- membership is stored on
+ * each member, and the nesting is a graph the backend closes over.
+ *
+ * So the page is the content object for its title and description, and
+ * `@group-members/<id>` for everything else. That endpoint answers in one
+ * request: the members with enough per person to draw a row, the groups
+ * nested inside this one, and the groups this one is nested inside.
+ *
+ * It may refuse. Reading a group's membership needs `Manage users` or
+ * membership of the group itself -- a member list is personal data about
+ * other people -- and a visitor who can see the group without being in it
+ * gets the title and description and nothing more. That is a page rather than
+ * an error, which is why the refusal is rendered as a note instead of being
+ * left to the error boundary.
+ * @module components/Views/GroupView
+ */
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+
+import { Helmet } from '@plone/volto/helpers/Helmet/Helmet';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
+import { listGroupMembers } from '../../actions';
+import type { GroupMember, NestedGroup } from '../../types';
+
+import './GroupView.scss';
+
+const messages = defineMessages({
+  nested: {
+    id: 'Groups in this group',
+    defaultMessage: 'Groups in this group',
+  },
+  nestedHelp: {
+    id: 'group-view-nested-help',
+    defaultMessage:
+      'Everybody in these groups is in this one as well, at any depth.',
+  },
+  partOf: { id: 'Part of', defaultMessage: 'Part of' },
+  members: { id: 'Members', defaultMessage: 'Members' },
+  through: { id: 'group-view-through', defaultMessage: 'through {groups}' },
+  noMembers: {
+    id: 'group-view-no-members',
+    defaultMessage: 'Nobody is in this group yet.',
+  },
+  refused: {
+    id: 'group-view-refused',
+    defaultMessage:
+      'You can see this group but not who is in it. A membership list is ' +
+      'visible to its own members and to somebody who manages users.',
+  },
+  loading: { id: 'group-view-loading', defaultMessage: 'Loading members…' },
+});
+
+/** The fields this view reads off a serialized group. */
+interface GroupContent {
+  '@id': string;
+  id: string;
+  title?: string;
+  description?: string;
+}
+
+interface GroupViewProps {
+  content: GroupContent;
+}
+
+/**
+ * Render one entry in a list of groups.
+ *
+ * @param group The group to link to.
+ * @returns The list item.
+ */
+function groupItem(group: NestedGroup) {
+  return (
+    <li key={group.id} data-group={group.id}>
+      {group.title || group.id}
+    </li>
+  );
+}
+
+const GroupView: React.FC<GroupViewProps> = ({ content }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const state = useSelector((store: any) => store.groupMembers);
+  const groupId = content.id;
+
+  useEffect(() => {
+    if (groupId) {
+      dispatch(listGroupMembers(groupId));
+    }
+  }, [dispatch, groupId]);
+
+  const data = state?.data;
+  // The membership only, not the group itself: a group that is loading and a
+  // group somebody may not read are two different pages, and only one of them
+  // has anything to wait for.
+  const refused = Boolean(state?.error);
+  const members: GroupMember[] = data?.items ?? [];
+  const nested: NestedGroup[] = data?.nested_groups ?? [];
+  const parents: NestedGroup[] = data?.parent_groups ?? [];
+
+  return (
+    <Container className="view-wrapper identity-group-view">
+      <Helmet title={content.title || content.id} />
+      <h1 className="documentFirstHeading">{content.title || content.id}</h1>
+      {content.description ? (
+        <p className="documentDescription">{content.description}</p>
+      ) : null}
+
+      {parents.length ? (
+        <section className="identity-group-view__parents">
+          <h2>{intl.formatMessage(messages.partOf)}</h2>
+          <ul>{parents.map(groupItem)}</ul>
+        </section>
+      ) : null}
+
+      {nested.length ? (
+        <section className="identity-group-view__nested">
+          <h2>{intl.formatMessage(messages.nested)}</h2>
+          <p className="identity-note">
+            {intl.formatMessage(messages.nestedHelp)}
+          </p>
+          <ul>{nested.map(groupItem)}</ul>
+        </section>
+      ) : null}
+
+      <section className="identity-group-view__members">
+        <h2>{intl.formatMessage(messages.members)}</h2>
+        {refused ? (
+          <p className="identity-note">
+            {intl.formatMessage(messages.refused)}
+          </p>
+        ) : state?.loading ? (
+          <p className="identity-note" role="status">
+            {intl.formatMessage(messages.loading)}
+          </p>
+        ) : members.length ? (
+          <ul className="identity-group-view__list">
+            {members.map((member) => (
+              <li key={member.id} data-userid={member.id}>
+                {member.profile_url ? (
+                  <Link to={flattenToAppURL(member.profile_url)}>
+                    {member.fullname}
+                  </Link>
+                ) : (
+                  <span>{member.fullname}</span>
+                )}
+                {/* Which group this person arrived through, when it was not
+                    this one. A list that silently mixes direct members with
+                    inherited ones is a list nobody can account for. */}
+                {member.through.includes(groupId) ? null : (
+                  <span className="identity-note">
+                    {intl.formatMessage(messages.through, {
+                      groups: member.through.join(', '),
+                    })}
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="identity-note">
+            {intl.formatMessage(messages.noMembers)}
+          </p>
+        )}
+      </section>
+    </Container>
+  );
+};
+
+export default GroupView;

package/src/components/Views/ProfileView.scss

@@ -0,0 +1,27 @@
+/**
+ * A user's Profile, seen by somebody else.
+ *
+ * The picture and the name sit on one line rather than stacked: a profile
+ * page is a person, and a portrait above a heading reads as an article with
+ * a lead image.
+ */
+.identity-profile-view__header {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--identity-gap);
+  gap: 16px;
+
+  h1 {
+    margin: 0;
+  }
+}
+
+.identity-profile-view__picture {
+  width: 96px;
+  height: 96px;
+  flex: none;
+  border-radius: 50%;
+  /* An uploaded portrait is whatever shape it was cropped to; a circle over
+     a stretched image is worse than a circle over a cropped one. */
+  object-fit: cover;
+}

package/src/components/Views/ProfileView.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ProfileView from './ProfileView';
+import { PORTRAIT } from '../../stories/fixtures';
+
+const CONTENT = {
+  '@id': '/identity-profiles/erico',
+  title: 'Érico Andrei',
+  fullname: 'Érico Andrei',
+  description: 'Plone developer, and the person this add-on is written for.',
+  image: { download: PORTRAIT, scales: { preview: { download: PORTRAIT } } },
+};
+
+const meta: Meta<typeof ProfileView> = {
+  title: 'Identity/Views/ProfileView',
+  component: ProfileView,
+  args: { content: CONTENT },
+};
+export default meta;
+
+type Story = StoryObj<typeof ProfileView>;
+
+/** Everything filled in: a name, a biography and a picture. */
+export const Complete: Story = {};
+
+/** No picture. The page is the name and what they said about themselves. */
+export const WithoutAPicture: Story = {
+  args: { content: { ...CONTENT, image: null } },
+};
+
+/** A profile minted at first login by a provider that sent only a name. */
+export const JustCreated: Story = {
+  args: { content: { ...CONTENT, description: '', image: null } },
+};

package/src/components/Views/ProfileView.test.tsx

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../testing';
+import React from 'react';
+
+import ProfileView, { pictureUrl } from './ProfileView';
+
+const CONTENT = {
+  '@id': '/identity-profiles/alice',
+  title: 'Alice Liddell',
+  fullname: 'Alice Liddell',
+  description: 'Reads a lot.',
+  image: {
+    download: '/identity-profiles/alice/@@images/image',
+    scales: {
+      preview: { download: '/identity-profiles/alice/@@images/image/preview' },
+    },
+  },
+};
+
+describe('pictureUrl', () => {
+  it('prefers a scale over the original', () => {
+    // An uploaded portrait is whatever the camera produced, and a page that
+    // renders it at full size downloads megabytes to draw a thumbnail.
+    expect(pictureUrl(CONTENT.image)).toContain('/preview');
+  });
+
+  it('falls back to the original when there is no scale', () => {
+    expect(pictureUrl({ download: '/x' })).toBe('/x');
+  });
+
+  it('answers nothing for a profile with no picture', () => {
+    expect(pictureUrl(null)).toBeNull();
+  });
+});
+
+describe('ProfileView', () => {
+  it('shows the full name as the heading', () => {
+    render(<ProfileView content={CONTENT} />);
+
+    expect(screen.getByRole('heading').textContent).toBe('Alice Liddell');
+  });
+
+  it('shows the biography', () => {
+    render(<ProfileView content={CONTENT} />);
+
+    expect(screen.getByText('Reads a lot.')).toBeTruthy();
+  });
+
+  it('shows the picture, labelled with the name', () => {
+    render(<ProfileView content={CONTENT} />);
+
+    const image = screen.getByAltText('Alice Liddell') as HTMLImageElement;
+    expect(image.getAttribute('src')).toContain('/preview');
+  });
+
+  it('renders no image element when there is no picture', () => {
+    render(<ProfileView content={{ ...CONTENT, image: null }} />);
+
+    expect(document.querySelector('img')).toBeNull();
+  });
+
+  it('falls back to the computed title when there is no full name', () => {
+    // The backend computes `title` from the full name and then the login, so
+    // it is never empty -- which makes it the honest fallback.
+    render(<ProfileView content={{ ...CONTENT, fullname: '' }} />);
+
+    expect(screen.getByRole('heading').textContent).toBe('Alice Liddell');
+  });
+
+  it('never publishes an address', () => {
+    // The field carries a read permission of its own, but a view that
+    // rendered it when it happened to be there would publish an address on a
+    // page whose URL is guessable from a userid.
+    render(
+      <ProfileView
+        content={{ ...CONTENT, email: 'alice@example.com' } as any}
+      />,
+    );
+
+    expect(screen.queryByText(/alice@example.com/)).toBeNull();
+  });
+});

package/src/components/Views/ProfileView.tsx

@@ -0,0 +1,100 @@
+/**
+ * What a user's Profile looks like when somebody opens it.
+ *
+ * A Profile is content, so without a view of its own it rendered through
+ * Volto's default: a title, and a body that is empty because a Profile has no
+ * rich text. What a person visiting one wants is the three things that say who
+ * this is -- their name, what they say about themselves, and their picture.
+ *
+ * Deliberately not the address. The `email` field carries a read permission
+ * of its own (`...content.viewpii`), so it is absent from the serialization
+ * for most callers anyway -- but a view that rendered it when it happened to
+ * be there would publish an address on a page whose URL is guessable from a
+ * userid. The account's own owner sees their addresses on their sign-in
+ * methods page, where verifying one is also possible.
+ * @module components/Views/ProfileView
+ */
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Container } from 'semantic-ui-react';
+
+import { Helmet } from '@plone/volto/helpers/Helmet/Helmet';
+
+import './ProfileView.scss';
+
+const messages = defineMessages({
+  noName: { id: 'profile-view-unnamed', defaultMessage: 'Unnamed user' },
+});
+
+/** The shape of the fields this view reads off a serialized Profile. */
+interface ProfileContent {
+  '@id': string;
+  title?: string;
+  fullname?: string;
+  description?: string;
+  image?: {
+    download?: string;
+    scales?: Record<string, { download?: string }>;
+  } | null;
+}
+
+interface ProfileViewProps {
+  content: ProfileContent;
+}
+
+/**
+ * Return the best available URL for a Profile's picture.
+ *
+ * A scale rather than the original when there is one: an uploaded portrait
+ * is whatever the camera produced, and a page that renders it at full size
+ * downloads several megabytes to draw a thumbnail.
+ *
+ * @param image The serialized image field.
+ * @returns The URL, or null when the Profile has no picture.
+ */
+export function pictureUrl(image: ProfileContent['image']): string | null {
+  if (!image) {
+    return null;
+  }
+  return (
+    image.scales?.preview?.download ??
+    image.scales?.mini?.download ??
+    image.download ??
+    null
+  );
+}
+
+const ProfileView: React.FC<ProfileViewProps> = ({ content }) => {
+  const intl = useIntl();
+  // `title` is computed on the backend from the full name, falling back to
+  // the login -- so it is never empty, and it is the honest thing to fall
+  // back to before preferring a message of our own.
+  const name =
+    content.fullname || content.title || intl.formatMessage(messages.noName);
+  const picture = pictureUrl(content.image);
+
+  return (
+    <Container className="view-wrapper identity-profile-view">
+      <Helmet title={name} />
+      <div className="identity-profile-view__header">
+        {picture ? (
+          <img
+            className="identity-profile-view__picture"
+            src={picture}
+            // The name, not "portrait of": a screen reader announcing the
+            // word twice on a page whose heading is already the name adds
+            // nothing.
+            alt={name}
+          />
+        ) : null}
+        <h1 className="documentFirstHeading">{name}</h1>
+      </div>
+      {content.description ? (
+        <p className="documentDescription">{content.description}</p>
+      ) : null}
+    </Container>
+  );
+};
+
+export default ProfileView;

package/src/components/Widgets/ProviderIconWidget.scss

@@ -0,0 +1,21 @@
+/**
+ * The icon upload, sized so the preview reads as a button icon rather than as
+ * an illustration: it is drawn at button scale on the login page, and a
+ * preview at any other size would be a different thing.
+ */
+.provider-icon-widget__preview {
+  display: inline-flex;
+  width: 48px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 8px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}