@plone-collective/volto-identity 1.0.0-alpha.13 → 1.0.0-alpha.14

package/.changelog.draft

@@ -1,6 +1,14 @@
-## 1.0.0-alpha.13 (2026-09-30)
+## 1.0.0-alpha.14 (2026-10-22)
 
-No significant changes.
 
+### Feature
+
+- Made the local group in a provider's group map a picker over the site's groups, served by the backend. @ericof [#144](https://github.com/collective/pas-plugins-identity/issues/144)
+- Drew the avatar on the toolbar's personal-tools button at 50px instead of 30px, and made the size a CSS variable, `--identity-toolbar-avatar-size`. A site that already sets `--toolbar-avatar-size` keeps its size, and no longer needs its own rule with `!important` to override the avatar's inline width and height. @ericof 
+
+
+### Internal
+
+- Updated code comments that described the property map's target as four fixed fields. @ericof [#143](https://github.com/collective/pas-plugins-identity/issues/143)
 
 

package/CHANGELOG.md

@@ -8,6 +8,19 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-alpha.14 (2026-10-22)
+
+
+### Feature
+
+- Made the local group in a provider's group map a picker over the site's groups, served by the backend. @ericof [#144](https://github.com/collective/pas-plugins-identity/issues/144)
+- Drew the avatar on the toolbar's personal-tools button at 50px instead of 30px, and made the size a CSS variable, `--identity-toolbar-avatar-size`. A site that already sets `--toolbar-avatar-size` keeps its size, and no longer needs its own rule with `!important` to override the avatar's inline width and height. @ericof 
+
+
+### Internal
+
+- Updated code comments that described the property map's target as four fixed fields. @ericof [#143](https://github.com/collective/pas-plugins-identity/issues/143)
+
 ## 1.0.0-alpha.13 (2026-09-30)
 
 No significant changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone-collective/volto-identity",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "description": "Volto add-on for multi-provider external authentication in Plone, with identity linking",
   "main": "src/index.ts",
   "license": "MIT",
@@ -50,10 +50,10 @@
     "react-aria-components": "^1.17.0",
     "react-cookie": "8.1.2",
     "@storybook/react": "^8.0.4",
-    "@plone/types": "2.0.1",
-    "@plone/components": "4.2.1",
     "@plone/scripts": "4.0.1",
-    "@plone/registry": "3.0.1"
+    "@plone/registry": "3.0.1",
+    "@plone/components": "4.2.1",
+    "@plone/types": "2.0.1"
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",

package/src/components/ControlPanel/ProviderForm.stories.tsx

@@ -22,7 +22,7 @@ import { providerSchema, toFormData } from '../../helpers/providerSchema';
  *
  * Both mappings are `object_list` widgets, and one sub-field of one of them
  * reads a vocabulary over the API: the property map's target, which is a
- * picker over the four Profile fields a login writes. Every story carries the
+ * picker over the Profile fields a login writes. Every story carries the
  * loaded vocabularies in its store, so that picker renders its terms rather
  * than empty -- which is also exactly how it looks when the backend refuses
  * `@vocabularies`, and is worth recognising.
@@ -59,7 +59,7 @@ const form = (provider: (typeof CONFIGURED)[number], driverId: string) => ({
  * The **Attribute mapping** fieldset carries both editors, and the asymmetry
  * between them is the thing to look at. A claim path and a provider-side
  * group are text, because neither can be enumerated from here. A property
- * map's target is a picker over the four Profile fields a login writes. A
+ * map's target is a picker over the Profile fields a login writes. A
  * local group is text as well, though this site does know its own groups: a
  * profile may ship a map before the group it points at, and the login skips a
  * row it cannot resolve rather than the import refusing the map.

package/src/components/Toolbar/Toolbar.jsx

@@ -716,7 +716,7 @@ class Toolbar extends Component {
                     tabIndex={0}
                     id="toolbar-personal"
                   >
-                    <UserAvatar size="30px" />
+                    <UserAvatar size="var(--identity-toolbar-avatar-size)" />
                   </button>
                 )}
               </div>

package/src/components/UserMenu/UserAvatar.test.tsx

@@ -126,4 +126,19 @@ describe('UserAvatar', () => {
       container.querySelector('.identity-avatar')?.getAttribute('style'),
     ).toContain('96px');
   });
+
+  it('takes a CSS variable as its size, as the toolbar passes one', () => {
+    const { container } = renderAvatar(
+      { id: 'alice' },
+      { size: 'var(--identity-toolbar-avatar-size)' },
+    );
+
+    const style = container
+      .querySelector('.identity-avatar')
+      ?.getAttribute('style');
+    expect(style).toContain('width: var(--identity-toolbar-avatar-size)');
+    expect(style).toContain(
+      'font-size: calc(var(--identity-toolbar-avatar-size) / 2.4)',
+    );
+  });
 });

package/src/helpers/avatar.test.ts

@@ -148,8 +148,9 @@ describe('avatarColors', () => {
   it.each([...DEFAULT_AVATAR_COLORS])(
     'ships %s, which clears WCAG AA against the white initials',
     (hex) => {
-      // 4.5:1, the ratio for normal text: the initials are well under the
-      // size WCAG counts as large at the 30px the toolbar draws them.
+      // 4.5:1, the ratio for normal text, so the palette holds whatever
+      // `--identity-toolbar-avatar-size` a site sets: at 30px the initials
+      // are well under the size WCAG counts as large.
       const ratio = (luminance('#ffffff') + 0.05) / (luminance(hex) + 0.05);
 
       expect(ratio).toBeGreaterThanOrEqual(4.5);

package/src/helpers/groupmap.ts

@@ -5,14 +5,11 @@
  * {@link module:helpers/rowmap}; what belongs here is only the names this
  * mapping's two halves go by.
  *
- * Both halves are free text, and only one of them has to be. The provider
- * side is whatever the far end's directory happens to call a group, which
- * this site cannot enumerate. The local side names a group here, and a row
- * naming one that does not exist grants nothing -- the backend skips it and
- * logs -- but a profile may legitimately ship a map before the group it
- * points at, so the field stays text rather than a `Choice` that would refuse
- * the import. Compare the property map, whose target is four fields this
- * package knows by name and is a picker.
+ * The provider side is free text: it is whatever the far end's directory
+ * happens to call a group, which this site cannot enumerate. The local side
+ * is a pick from this site's groups, served by the backend, and the API
+ * refuses a group that does not exist. Only a profile's import may name one,
+ * because it may ship a map before the group it points at.
  * @module helpers/groupmap
  */
 

package/src/helpers/providerSchema.test.ts

@@ -20,7 +20,10 @@ import {
   suggestedProviderId,
   toFormData,
 } from './providerSchema';
-import { USER_FIELDS_VOCABULARY } from '../constants/vocabularies';
+import {
+  GROUPS_VOCABULARY,
+  USER_FIELDS_VOCABULARY,
+} from '../constants/vocabularies';
 import type { Driver, VoltoSchema } from '../types';
 
 const intl = {
@@ -28,7 +31,7 @@ const intl = {
 } as any;
 
 /**
- * What `@identity-providers` sends: `IProviderRecords`, serialized.
+ * What `@identity-providers` sends: `IProviderForm`, serialized.
  *
  * Including `driver`, `propertymap` and `groupmap`, which it really does
  * send -- they are fields of a provider's storage. Leaving them out of this
@@ -61,9 +64,13 @@ const SERVED = {
         schema: { title: 'Provider group', type: 'string' },
         additional: {},
       },
+      // The local side is a `Choice` over the site's groups on the served
+      // schema, though not on the records it is stored in.
       value_type: {
-        schema: { title: 'Local group', type: 'string' },
-        additional: {},
+        schema: { title: 'Local group', type: 'string', factory: 'Choice' },
+        additional: {
+          vocabulary: { '@id': `/@vocabularies/${GROUPS_VOCABULARY}` },
+        },
       },
     },
     icon: { title: 'Icon', type: 'string', widget: 'provider_icon' },
@@ -280,15 +287,23 @@ describe('providerSchema', () => {
     expect(property.properties.claim).not.toHaveProperty('vocabulary');
   });
 
-  it('leaves both halves of the group map free text', () => {
-    // The local side names a group that may not exist yet: a profile can
-    // ship a map before the group it points at, and the login skips a row it
-    // cannot resolve rather than refusing the map.
+  it("makes the group map's local side a picker over the served groups", () => {
+    // A typed id with a typo, or a title where the id belongs, saved without
+    // complaint and granted nothing at every login.
+    const schema = providerSchema(SERVED, DRIVERS, 'oidc', false, intl);
+    const group = schema.properties.groupmap?.schema as VoltoSchema;
+
+    expect((group.properties.local as any).vocabulary['@id']).toBe(
+      `/@vocabularies/${GROUPS_VOCABULARY}`,
+    );
+  });
+
+  it("leaves the group map's provider side a text box", () => {
+    // The far end's own group names, which nothing here enumerates.
     const schema = providerSchema(SERVED, DRIVERS, 'oidc', false, intl);
     const group = schema.properties.groupmap?.schema as VoltoSchema;
 
     expect(group.properties.group).not.toHaveProperty('vocabulary');
-    expect(group.properties.local).not.toHaveProperty('vocabulary');
   });
 
   it('falls back to a text box when no vocabulary is served', () => {
@@ -299,14 +314,17 @@ describe('providerSchema', () => {
       properties: {
         ...SERVED.properties,
         propertymap: { title: 'Property map', type: 'object' },
+        groupmap: { title: 'Group map', type: 'object' },
       },
     };
 
     const schema = providerSchema(older, DRIVERS, 'oidc', false, intl);
     const property = schema.properties.propertymap?.schema as VoltoSchema;
+    const group = schema.properties.groupmap?.schema as VoltoSchema;
 
     expect(property.properties.field).not.toHaveProperty('vocabulary');
     expect(property.properties.field.type).toBe('string');
+    expect(group.properties.local).not.toHaveProperty('vocabulary');
   });
 
   it('drops the served driver field rather than merging it', () => {

package/src/helpers/providerSchema.ts

@@ -265,9 +265,9 @@ export function providerSchema(
         // A picker over the fields a login writes, not a text box. The two
         // sides of this row are asymmetric for the same reason the group
         // map's are: a claim path is whatever the far end publishes and
-        // nothing here can enumerate it, while the target is four fields
-        // this package knows by name.
-        vocabulary: targetVocabulary(served),
+        // nothing here can enumerate it, while the target is a field of
+        // the site's user type, which the backend serves.
+        vocabulary: targetVocabulary(served, 'propertymap'),
       },
     ),
   };
@@ -285,7 +285,13 @@ export function providerSchema(
       schema: rowSchema(
         intl.formatMessage(messages.groupmapRow),
         { name: 'group', title: intl.formatMessage(messages.providerGroup) },
-        { name: 'local', title: intl.formatMessage(messages.localGroup) },
+        {
+          name: 'local',
+          title: intl.formatMessage(messages.localGroup),
+          // A pick from this site's groups, for the reason the property
+          // map's target is one: a typed id with a typo granted nothing.
+          vocabulary: targetVocabulary(served, 'groupmap'),
+        },
       ),
     };
   }
@@ -351,21 +357,24 @@ interface VocabularyRef {
 }
 
 /**
- * Read the vocabulary the backend serves for a property map's target.
+ * Read the vocabulary the backend serves for one mapping's values.
  *
- * `IProviderRecords.propertymap` is a `Dict` whose values are a `Choice` over
- * `pas.plugins.identity.UserFields`, and `plone.restapi` serializes a named
- * vocabulary as the URL that enumerates it. Lifted from the served schema
- * rather than assembled here: the name of the vocabulary, and whether there
- * is one at all, are the backend's to say.
+ * Both mappings are a `Dict` whose values are a `Choice` on the served
+ * schema: the property map's over `pas.plugins.identity.UserFields`, the
+ * group map's over `pas.plugins.identity.Groups`. `plone.restapi`
+ * serializes a named vocabulary as the URL that enumerates it. Lifted from
+ * the served schema rather than assembled here: the name of the vocabulary,
+ * and whether there is one at all, are the backend's to say.
  *
  * @param served The provider schema from `@identity-providers`.
+ * @param mapping Which mapping, `propertymap` or `groupmap`.
  * @returns The vocabulary reference, or undefined when none is served.
  */
 function targetVocabulary(
   served: JsonSchema | undefined,
+  mapping: 'propertymap' | 'groupmap',
 ): VocabularyRef | undefined {
-  const value = (served?.properties?.propertymap as any)?.value_type;
+  const value = (served?.properties?.[mapping] as any)?.value_type;
   const reference = value?.additional?.vocabulary;
   return reference?.['@id'] ? reference : undefined;
 }

package/src/stories/fixtures.tsx

@@ -418,8 +418,12 @@ export const PROVIDER_SCHEMA = {
         additional: {},
       },
       value_type: {
-        schema: { type: 'string', title: 'Local group' },
-        additional: {},
+        schema: { type: 'string', title: 'Local group', factory: 'Choice' },
+        additional: {
+          vocabulary: {
+            '@id': `http://localhost:8080/Plone/@vocabularies/${GROUPS_VOCABULARY}`,
+          },
+        },
       },
     },
     title: { type: 'string', title: 'Title' },
@@ -498,10 +502,10 @@ export const CONFIGURED: ConfiguredProvider[] = [
 /**
  * The vocabulary the property-map editor reads, already loaded.
  *
- * Four terms, and that is the whole of it: a login writes four Profile
- * fields, so those are the four the picker offers. It used to be the site's
- * live member schema, which also offered `email`, `portrait` and a username
- * -- rows that were stored and then dropped on every login.
+ * The four terms of the shipped user type. A site whose type has behaviors
+ * gets their fields too. It used to be the site's live member schema, which
+ * also offered `email`, `portrait` and a username -- rows that were stored
+ * and then dropped on every login.
  */
 export const USER_FIELDS_STATE = {
   [USER_FIELDS_VOCABULARY]: {

package/src/styles.css

@@ -89,6 +89,12 @@
   --identity-provider-oidc-bg-hover: #555;
   --identity-provider-oidc-color: #fff;
 
+  /* The avatar on the toolbar's personal-tools button, picture and initials
+     alike. Passed to `<UserAvatar>` as its size, so it is the inline width
+     and height and needs no `!important` to win. `--toolbar-avatar-size` is
+     the name sites already set to enlarge it, and it still does. */
+  --identity-toolbar-avatar-size: var(--toolbar-avatar-size, 50px);
+
   /* Stats boxes: a figure over what it counts, as on a group page's
      `42 members · 12 directly`. A box is at least this wide and grows for a
      long label rather than breaking it -- a translated label is often longer