feat(mosaic): Wire up password section (#9930)

Author: austincalvelage

.changeset/quiet-managed-password.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/__tests__/feature/fake-fapi.ts

@@ -39,6 +39,7 @@ export interface FakeFapiState {
   suggestions: OrganizationSuggestionJSON[];
   apiKeys: ApiKeyJSON[];
   verification: FakeVerificationState;
+  passwordUpdates: URLSearchParams[];
 }
 
 export type FakeFapiSeed = Partial<Omit<FakeFapiState, 'verification'>> & {
@@ -100,6 +101,7 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
     invitations: [],
     suggestions: [],
     apiKeys: [],
+    passwordUpdates: [],
     ...rest,
     verification: createVerificationState(verification),
   };
@@ -144,6 +146,19 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
       state.client = { ...state.client, sessions, last_active_session_id: sessions[0]?.id ?? null };
       return envelope({ ...session, status: 'removed' }, state.client);
     }),
+    http.post(fapiUrl('/v1/me/change_password'), async ({ request }) => {
+      const session = findSession(state, state.client.last_active_session_id);
+      if (!session) {
+        return missing();
+      }
+      state.passwordUpdates.push(new URLSearchParams(await request.text()));
+      const updatedUser = { ...session.user, password_enabled: true };
+      state.client = {
+        ...state.client,
+        sessions: state.client.sessions.map(item => (item.id === session.id ? { ...item, user: updatedUser } : item)),
+      };
+      return envelope(updatedUser, state.client);
+    }),
     http.post(fapiUrl('/v1/client/sessions'), ({ request }) => {
       if (new URL(request.url).searchParams.get('_method') !== 'DELETE') {
         return undefined;
@@ -224,7 +239,7 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
 export interface HeldRequests {
   requests: Request[];
   release: () => void;
-  fail: (code?: string) => void;
+  fail: (code?: string, longMessage?: string, paramName?: string) => void;
 }
 
 interface Hold {
@@ -266,6 +281,21 @@ export function holdRequests(method: 'get' | 'post', path: string): HeldRequests
   return {
     requests,
     release: () => settle(undefined),
-    fail: (code = 'form_param_invalid') => settle(error(code)),
+    fail: (code = 'form_param_invalid', longMessage = code, paramName?: string) =>
+      settle(
+        HttpResponse.json(
+          {
+            errors: [
+              {
+                code,
+                message: code,
+                long_message: longMessage,
+                ...(paramName ? { meta: { param_name: paramName } } : {}),
+              },
+            ],
+          },
+          { status: 400 },
+        ),
+      ),
   };
 }

packages/mosaic/src/__tests__/feature/fapi.ts

@@ -7,6 +7,7 @@ import type {
   ClientJSON,
   DisplayConfigJSON,
   EmailAddressJSON,
+  EnterpriseAccountJSON,
   EnvironmentJSON,
   OAuthProviders,
   OrganizationJSON,
@@ -271,6 +272,44 @@ export function fapiUser(overrides: Partial<UserJSON> & Pick<UserJSON, 'id'>): U
   };
 }
 
+export function fapiEnterpriseAccount(
+  overrides: Partial<EnterpriseAccountJSON> & Pick<EnterpriseAccountJSON, 'id'>,
+): EnterpriseAccountJSON {
+  return {
+    object: 'enterprise_account',
+    active: true,
+    email_address: 'sso@example.com',
+    enterprise_connection: {
+      object: 'enterprise_connection',
+      id: 'sso_1',
+      active: true,
+      allow_idp_initiated: false,
+      allow_subdomains: false,
+      disable_additional_identifications: true,
+      domain: 'example.com',
+      logo_public_url: null,
+      name: 'Company SSO',
+      protocol: 'saml',
+      provider: 'saml_okta',
+      sync_user_attributes: false,
+      allow_organization_account_linking: false,
+      created_at: createdAt,
+      updated_at: createdAt,
+      enterprise_connection_id: 'sso_1',
+    },
+    first_name: null,
+    last_name: null,
+    protocol: 'saml',
+    provider: 'saml_okta',
+    provider_user_id: null,
+    public_metadata: {},
+    verification: null,
+    last_authenticated_at: null,
+    enterprise_connection_id: 'sso_1',
+    ...overrides,
+  };
+}
+
 export function fapiSession(overrides: Partial<SessionJSON> & Pick<SessionJSON, 'id' | 'user'>): SessionJSON {
   const { user } = overrides;
   const primaryEmail = user.email_addresses.find(email => email.id === user.primary_email_address_id);

packages/mosaic/src/components/field/field.test.tsx

@@ -7,6 +7,7 @@ import { renderToString } from 'react-dom/server';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { Checkbox } from '../checkbox';
+import type { FieldFeedback } from '../form';
 import { Input } from '../input';
 import { Select } from '../select';
 import { Field } from './field';
@@ -37,6 +38,41 @@ function stubPrototype(target: object, name: string, descriptor: PropertyDescrip
 }
 
 describe('Mosaic Field', () => {
+  it.each<{ type: FieldFeedback['type']; slot: string }>([
+    { type: 'error', slot: 'cl-field-error' },
+    { type: 'success', slot: 'cl-field-success' },
+    { type: 'info', slot: 'cl-field-info' },
+    { type: 'warning', slot: 'cl-field-info' },
+  ])('associates $type feedback with its control', ({ type, slot }) => {
+    render(
+      <Field.Root>
+        <Field.Label>Password</Field.Label>
+        <Input />
+        <Field.Feedback feedback={{ type, message: 'Password feedback' }} />
+      </Field.Root>,
+    );
+    expect(screen.getByRole('textbox', { name: 'Password' })).toHaveAccessibleDescription('Password feedback');
+    expect(screen.getByText('Password feedback').closest('p')).toHaveClass(slot);
+    expect(screen.getByRole('status')).toHaveTextContent('Password feedback');
+  });
+  it('associates text-only info feedback with the control in a live region', () => {
+    render(
+      <Field.Root>
+        <Field.Label>Password</Field.Label>
+        <Input />
+        <Field.Message>
+          <Field.Hint>Try a longer password.</Field.Hint>
+        </Field.Message>
+      </Field.Root>,
+    );
+
+    expect(screen.getByRole('textbox', { name: 'Password' })).toHaveAccessibleDescription('Try a longer password.');
+    expect(screen.getByRole('status')).toHaveTextContent('Try a longer password.');
+    const info = screen.getByText('Try a longer password.').closest('p');
+    expect(info).toHaveClass('cl-field-info');
+    expect(info?.querySelector('svg')).toBeNull();
+  });
+
   afterEach(() => {
     restores.splice(0).forEach(restore => restore());
   });

packages/mosaic/src/components/field/field.tsx

@@ -11,6 +11,7 @@ import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles';
 import { reset } from '../../utils/reset.styles';
 import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles';
 import { visuallyHidden } from '../../utils/visually-hidden.styles';
+import type { FieldFeedback as FormFieldFeedback } from '../form';
 import type { FieldOrientation } from './field.context';
 import {
   FieldMessageProvider,
@@ -202,18 +203,19 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
   return <FieldMessageProvider register={register}>{rendered}</FieldMessageProvider>;
 });
 
-type FieldFeedbackKind = 'error' | 'success';
+type FieldFeedbackKind = 'error' | 'success' | 'info';
 
-const FEEDBACK: Record<FieldFeedbackKind, { slot: string; icon: IconName; color: stylex.StyleXStyles }> = {
+const FEEDBACK: Record<FieldFeedbackKind, { slot: string; icon?: IconName; color: stylex.StyleXStyles }> = {
   error: { slot: 'field-error', icon: 'exclamation-circle', color: feedbackStyles.error },
   success: { slot: 'field-success', icon: 'checkmark', color: feedbackStyles.success },
+  info: { slot: 'field-info', color: feedbackStyles.info },
 };
 
-interface FieldFeedbackProps extends MosaicComponentProps<'p'> {
+interface FieldFeedbackPartProps extends MosaicComponentProps<'p'> {
   kind: FieldFeedbackKind;
 }
 
-const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>(function MosaicFieldFeedback(
+const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackPartProps>(function MosaicFieldFeedback(
   { render, xstyle, id: idProp, children, kind, ...rest },
   ref,
 ) {
@@ -240,7 +242,7 @@ const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>
         rest,
       ),
       id,
-      children: <FeedbackBody icon={icon}>{message}</FeedbackBody>,
+      children: icon ? <FeedbackBody icon={icon}>{message}</FeedbackBody> : message,
     },
   });
 });
@@ -271,5 +273,47 @@ const FieldSuccess = React.forwardRef<HTMLParagraphElement, FieldSuccessProps>(f
   );
 });
 
+export type FieldHintProps = MosaicComponentProps<'p'>;
+
+const FieldHint = React.forwardRef<HTMLParagraphElement, FieldHintProps>(function MosaicFieldHint(props, ref) {
+  return (
+    <FieldFeedback
+      ref={ref}
+      kind='info'
+      {...props}
+    />
+  );
+});
+
+export interface FieldFeedbackProps extends Omit<FieldMessageProps, 'children'> {
+  feedback?: FormFieldFeedback;
+}
+
+const Feedback = React.forwardRef<HTMLDivElement, FieldFeedbackProps>(function MosaicFieldFeedbackValue(
+  { feedback, ...props },
+  ref,
+) {
+  return (
+    <Message
+      ref={ref}
+      {...props}
+    >
+      <FieldError>{feedback?.type === 'error' ? feedback.message : null}</FieldError>
+      <FieldHint>{feedback?.type === 'info' || feedback?.type === 'warning' ? feedback.message : null}</FieldHint>
+      <FieldSuccess>{feedback?.type === 'success' ? feedback.message : null}</FieldSuccess>
+    </Message>
+  );
+});
+
 /** Styled parts for composing an automatically associated single-control field. */
-export const Field = { Root, Label, Content, Description, Message, Error: FieldError, Success: FieldSuccess };
+export const Field = {
+  Root,
+  Label,
+  Content,
+  Description,
+  Message,
+  Feedback,
+  Error: FieldError,
+  Success: FieldSuccess,
+  Hint: FieldHint,
+};

packages/mosaic/src/components/field/index.ts

@@ -2,6 +2,8 @@ export { Field } from './field';
 export type {
   FieldDescriptionProps,
   FieldErrorProps,
+  FieldFeedbackProps,
+  FieldHintProps,
   FieldLabelProps,
   FieldMessageProps,
   FieldRootProps,

packages/mosaic/src/components/form/use-form.edit-password.test.ts

@@ -45,6 +45,24 @@ function useEditPasswordForm(onSubmit: (values: EditPasswordValues) => Promise<v
 }
 
 describe('useForm: edit password', () => {
+  it('reports submission immediately within the submit event', async () => {
+    let finish = () => {};
+    const onSubmit = () =>
+      new Promise<void>(resolve => {
+        finish = resolve;
+      });
+    const { result } = renderHook(() => useForm({ initialValues: { password: 'secret' }, onSubmit }));
+    const form = result.current;
+    act(() => {
+      form.submit();
+      expect(form.isSubmitting).toBe(true);
+    });
+    await act(async () => {
+      finish();
+      await flush();
+    });
+    expect(form.isSubmitting).toBe(false);
+  });
   it('walks a user from a weak password to a saved one', async () => {
     const onSubmit = vi.fn(() => Promise.resolve());
     const { result } = renderHook(() => useEditPasswordForm(onSubmit));

packages/mosaic/src/components/form/use-form.ts

@@ -191,7 +191,10 @@ export function useForm<TValues extends object>(options: UseFormOptions<TValues>
     values,
     fields,
     error: context.error?.message,
-    isSubmitting,
+    get isSubmitting() {
+      const current = actor.getSnapshot();
+      return current.value === 'submitting' || current.context.submitQueued;
+    },
     isDirty: keysOf(values).some(name => fields[name].isDirty),
     canSubmit: !isSubmitting && isValid(context),
     register,