@shipfox/client-auth 22.0.2 → 22.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "22.0.2",
+  "version": "22.0.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -36,13 +36,13 @@
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
     "@shipfox/api-common-dto": "12.0.0",
-    "@shipfox/api-auth-dto": "12.0.0",
     "@shipfox/api-workspaces-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-invitations": "22.0.2",
-    "@shipfox/client-shell": "22.0.2",
-    "@shipfox/client-ui": "22.0.2",
-    "@shipfox/react-ui": "2.1.1"
+    "@shipfox/api-auth-dto": "12.0.0",
+    "@shipfox/client-invitations": "22.0.3",
+    "@shipfox/client-shell": "22.0.3",
+    "@shipfox/client-ui": "22.0.3",
+    "@shipfox/react-ui": "2.2.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/pages/form-errors.test.ts

@@ -78,6 +78,34 @@ describe('signupErrorToFormError', () => {
       message: 'We could not reach the API. Check your connection and try again.',
     });
   });
+
+  test('marks configured signup denial messages as Markdown', () => {
+    const message = 'Read the [access policy](https://example.test/access).';
+    const error = new ApiError({
+      code: 'signup-not-allowed',
+      message: 'Forbidden',
+      status: 403,
+      details: {code: 'signup-not-allowed', details: {message, format: 'markdown'}},
+    });
+
+    const result = signupErrorToFormError(error);
+
+    expect(result).toEqual({kind: 'form', message, format: 'markdown'});
+  });
+
+  test('keeps unformatted signup policy messages as plain text', () => {
+    const message = 'Email <admin>@example.test for access.';
+    const error = new ApiError({
+      code: 'signup-not-allowed',
+      message: 'Forbidden',
+      status: 403,
+      details: {code: 'signup-not-allowed', details: {message}},
+    });
+
+    const result = signupErrorToFormError(error);
+
+    expect(result).toEqual({kind: 'form', message});
+  });
 });
 
 describe('passwordResetRequestErrorToFormError', () => {

package/src/pages/form-errors.ts

@@ -1,9 +1,9 @@
 import {ApiError} from '@shipfox/client-api';
-import {authErrorMessage} from './form-utils.js';
+import {authErrorMessage, authErrorMessageFormat} from './form-utils.js';
 
 export type FormErrorMapping<TField extends string> =
   | {kind: 'field'; field: TField; message: string}
-  | {kind: 'form'; message: string};
+  | {kind: 'form'; message: string; format?: 'markdown'};
 
 type LoginField = 'email' | 'password';
 type SignupField = 'email' | 'password' | 'name';
@@ -25,6 +25,14 @@ export function signupErrorToFormError(error: unknown): FormErrorMapping<SignupF
   if (apiCode(error) === 'email-taken') {
     return {kind: 'field', field: 'email', message: authErrorMessage(error)};
   }
+  if (apiCode(error) === 'signup-not-allowed') {
+    const format = authErrorMessageFormat(error);
+    return {
+      kind: 'form',
+      message: authErrorMessage(error),
+      ...(format ? {format} : {}),
+    };
+  }
   return {kind: 'form', message: authErrorMessage(error)};
 }
 

package/src/pages/form-utils.test.ts

@@ -1,5 +1,5 @@
 import {ApiError} from '@shipfox/client-api';
-import {authErrorMessage} from './form-utils.js';
+import {authErrorMessage, authErrorMessageFormat} from './form-utils.js';
 
 describe('authErrorMessage', () => {
   test.each([
@@ -42,3 +42,44 @@ describe('authErrorMessage', () => {
     expect(result).toBe('Something went wrong. Try again.');
   });
 });
+
+describe('authErrorMessageFormat', () => {
+  test('returns Markdown for signup denial errors that declare it', () => {
+    const error = new ApiError({
+      code: 'signup-not-allowed',
+      message: 'Forbidden',
+      status: 403,
+      details: {details: {format: 'markdown'}},
+    });
+
+    const result = authErrorMessageFormat(error);
+
+    expect(result).toBe('markdown');
+  });
+
+  test.each([
+    [
+      'a different error code',
+      new ApiError({
+        code: 'unknown-api-code',
+        message: 'Try later',
+        status: 400,
+        details: {details: {format: 'markdown'}},
+      }),
+    ],
+    [
+      'an unsupported signup denial format',
+      new ApiError({
+        code: 'signup-not-allowed',
+        message: 'Forbidden',
+        status: 403,
+        details: {details: {format: 'html'}},
+      }),
+    ],
+    ['a non-API error', new Error('boom')],
+  ])('returns undefined for %s', (_case, error) => {
+    const result = authErrorMessageFormat(error);
+
+    expect(result).toBeUndefined();
+  });
+});

package/src/pages/form-utils.ts

@@ -4,12 +4,21 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
 }
 
-function signupNotAllowedMessage(error: ApiError): string | undefined {
+function signupNotAllowedDetails(error: ApiError): Record<string, unknown> | undefined {
   if (error.code !== 'signup-not-allowed') return undefined;
   if (!isRecord(error.details)) return undefined;
   const details = error.details.details;
-  if (!isRecord(details)) return undefined;
-  return typeof details.message === 'string' ? details.message : undefined;
+  return isRecord(details) ? details : undefined;
+}
+
+function signupNotAllowedMessage(error: ApiError): string | undefined {
+  const details = signupNotAllowedDetails(error);
+  return typeof details?.message === 'string' ? details.message : undefined;
+}
+
+export function authErrorMessageFormat(error: unknown): 'markdown' | undefined {
+  if (!(error instanceof ApiError)) return undefined;
+  return signupNotAllowedDetails(error)?.format === 'markdown' ? 'markdown' : undefined;
 }
 
 export function authErrorMessage(error: unknown): string {

package/src/pages/signup-page.test.tsx

@@ -1,5 +1,5 @@
 import {configureApiClient} from '@shipfox/client-api';
-import {act, fireEvent, screen, waitFor} from '@testing-library/react';
+import {act, fireEvent, screen, waitFor, within} from '@testing-library/react';
 import {pageUserFactory} from '#test/factories/user.js';
 import {renderAuthPage} from '#test/pages.js';
 import {jsonResponse, requestUrl} from '#test/utils.js';
@@ -7,6 +7,7 @@ import {SignupPage} from './signup-page.js';
 
 const SUBMITTED_EMAIL_RE = /new@example.com/;
 const RESEND_COUNTDOWN_RE = /^Resend in \d+s$/;
+const ACCESS_POLICY_RE = /access policy/i;
 function emailChallenge() {
   return {
     id: '019f814f-3cfd-779a-82f2-6588eefd572c',
@@ -236,7 +237,7 @@ describe('SignupPage', () => {
     expect(await screen.findByRole('heading', {name: 'Authenticated home'})).toBeInTheDocument();
   });
 
-  test('surfaces duplicate-email errors', async () => {
+  test('renders ordinary form errors as plain text', async () => {
     const fetchImpl = vi
       .fn()
       .mockResolvedValueOnce(
@@ -244,7 +245,7 @@ describe('SignupPage', () => {
       )
       .mockResolvedValueOnce(
         jsonResponse(
-          {code: 'email-already-exists', message: 'Email already exists'},
+          {code: 'email-already-exists', message: 'Email *already* exists'},
           {status: 409},
         ),
       );
@@ -256,7 +257,49 @@ describe('SignupPage', () => {
     fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
     fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
 
-    expect(await screen.findByRole('alert')).toHaveTextContent('Email already exists');
+    const alert = await screen.findByRole('alert');
+    expect(alert).toHaveTextContent('Email *already* exists');
+    expect(within(alert).queryByText('already', {selector: 'em'})).not.toBeInTheDocument();
+  });
+
+  test('renders configured signup denial messages as Markdown', async () => {
+    const message = [
+      '# Signups require approval',
+      '',
+      '- Review the [access policy](https://example.test/access).',
+    ].join('\n');
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      )
+      .mockResolvedValueOnce(
+        jsonResponse(
+          {
+            code: 'signup-not-allowed',
+            message: 'Forbidden',
+            details: {message, format: 'markdown'},
+          },
+          {status: 403},
+        ),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: 'New User'}});
+    fireEvent.change(screen.getByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+
+    const alert = await screen.findByRole('alert');
+    expect(
+      within(alert).getByRole('heading', {level: 2, name: 'Signups require approval'}),
+    ).toBeInTheDocument();
+    expect(within(alert).getByRole('listitem')).toBeInTheDocument();
+    expect(within(alert).getByRole('link', {name: ACCESS_POLICY_RE})).toHaveAttribute(
+      'href',
+      'https://example.test/access',
+    );
   });
 
   test('validates the name locally', async () => {

package/src/pages/signup-page.tsx

@@ -7,9 +7,10 @@ import {
 } from '@shipfox/client-shell/runtime';
 import {displayNameFieldError} from '@shipfox/client-ui';
 import {Button, ButtonLink} from '@shipfox/react-ui/button';
-import {Callout} from '@shipfox/react-ui/callout';
+import {Callout, CalloutContent} from '@shipfox/react-ui/callout';
 import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
 import {Icon} from '@shipfox/react-ui/icon';
+import {Markdown} from '@shipfox/react-ui/markdown';
 import {toast} from '@shipfox/react-ui/toast';
 import {Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
@@ -45,7 +46,7 @@ export function SignupPage() {
   const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
   const [emailChallenge, setEmailChallenge] = useState<{email: string; id: string} | undefined>();
   const [nextResendAvailableAt, setNextResendAvailableAt] = useState<string | undefined>();
-  const [formError, setFormError] = useState<string | undefined>();
+  const [formError, setFormError] = useState<{message: string; format?: 'markdown'} | undefined>();
   const [resendError, setResendError] = useState<string | undefined>();
   const [invitationRefreshFailure, setInvitationRefreshFailure] = useState<{
     workspaceId: string;
@@ -138,7 +139,7 @@ export function SignupPage() {
             errorMap: {...prev.errorMap, onServer: mapped.message},
           }));
         } else {
-          setFormError(mapped.message);
+          setFormError(mapped);
         }
       }
     },
@@ -295,7 +296,15 @@ export function SignupPage() {
       >
         {formError ? (
           <Callout role="alert" type="error">
-            {formError}
+            <CalloutContent>
+              {formError.format === 'markdown' ? (
+                <Markdown className="[&>*:last-child]:mb-0" headingLevelOffset={1}>
+                  {formError.message}
+                </Markdown>
+              ) : (
+                formError.message
+              )}
+            </CalloutContent>
           </Callout>
         ) : null}
         <form.Field