@shipfox/client-auth 7.0.0 → 8.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -38,8 +38,8 @@
     "@shipfox/api-auth-dto": "9.0.2",
     "@shipfox/api-workspaces-dto": "9.0.2",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-invitations": "6.0.2",
-    "@shipfox/client-shell": "6.0.2",
+    "@shipfox/client-invitations": "8.0.0",
+    "@shipfox/client-shell": "8.0.0",
     "@shipfox/client-ui": "6.0.2",
     "@shipfox/react-ui": "0.3.7"
   },

package/src/components/password-login-form.test.tsx

@@ -0,0 +1,34 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {render, screen} from '@testing-library/react';
+import {jsonResponse} from '#test/utils.js';
+import {AuthProvider} from './auth-provider.js';
+import {PasswordLoginForm} from './password-login-form.js';
+
+describe('PasswordLoginForm', () => {
+  beforeEach(() => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl,
+      getAccessToken: undefined,
+      refreshAccessToken: undefined,
+    });
+  });
+
+  test('renders without a router context', async () => {
+    render(
+      <AuthProvider>
+        <PasswordLoginForm invitationEmail="invitee@example.com" />
+      </AuthProvider>,
+    );
+
+    expect(await screen.findByLabelText('Email')).toHaveValue('invitee@example.com');
+    expect(screen.getByLabelText('Email')).toHaveAttribute('readonly');
+    expect(screen.getByLabelText('Password')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Log in'})).toBeInTheDocument();
+  });
+});

package/src/components/password-login-form.tsx

@@ -0,0 +1,149 @@
+import {loginBodySchema} from '@shipfox/api-auth-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {Icon} from '@shipfox/react-ui/icon';
+import {useForm} from '@tanstack/react-form';
+import {useAtom} from 'jotai';
+import {type ReactNode, useEffect, useRef, useState} from 'react';
+import {useLoginAuth} from '#hooks/api/login-auth.js';
+import {loginErrorToFormError} from '#pages/form-errors.js';
+import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
+
+export interface PasswordLoginFormProps {
+  children?: ReactNode;
+  invitationEmail?: string | undefined;
+}
+
+export function PasswordLoginForm({children, invitationEmail}: PasswordLoginFormProps = {}) {
+  const login = useLoginAuth();
+  const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
+  const [formError, setFormError] = useState<string | undefined>();
+  const draftRef = useRef(authFormDraft);
+  draftRef.current = authFormDraft;
+  // Set just before clearing the draft on success so the unmount cleanup
+  // below does not repersist the just-submitted credentials.
+  const skipDraftPersistRef = useRef(false);
+
+  const form = useForm({
+    defaultValues: {email: authFormDraft.email, password: authFormDraft.password},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        await login.mutateAsync(value);
+        skipDraftPersistRef.current = true;
+        setAuthFormDraft(initialAuthFormDraft);
+      } catch (error) {
+        const mapped = loginErrorToFormError(error);
+        if (mapped.kind === 'field') {
+          form.setFieldMeta(mapped.field, (prev) => ({
+            ...prev,
+            errorMap: {...prev.errorMap, onServer: mapped.message},
+          }));
+        } else {
+          setFormError(mapped.message);
+        }
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (invitationEmail && form.state.values.email !== invitationEmail) {
+      form.setFieldValue('email', invitationEmail);
+      setAuthFormDraft((current) => ({...current, email: invitationEmail}));
+    }
+  }, [form, invitationEmail, setAuthFormDraft]);
+
+  // Sync TanStack Form values back into the Jotai draft on unmount so a
+  // navigation to /signup or /reset preserves what the user typed. Skipped
+  // after a successful login because we just intentionally cleared the draft.
+  useEffect(() => {
+    return () => {
+      if (skipDraftPersistRef.current) return;
+      const {email, password} = form.state.values;
+      if (email !== draftRef.current.email || password !== draftRef.current.password) {
+        setAuthFormDraft({email, password});
+      }
+    };
+  }, [form, setAuthFormDraft]);
+
+  function persistDraft() {
+    const {email, password} = form.state.values;
+    setAuthFormDraft({email, password});
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-18"
+      noValidate
+      onSubmit={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void form.handleSubmit();
+      }}
+    >
+      {formError ? (
+        <Callout role="alert" type="error">
+          {formError}
+        </Callout>
+      ) : null}
+      <form.Field
+        name="email"
+        validators={{onBlur: loginBodySchema.shape.email, onSubmit: loginBodySchema.shape.email}}
+      >
+        {(field) => (
+          <FormField label="Email" id="email" error={fieldError(field)}>
+            <FormFieldInput
+              autoComplete="email"
+              name="email"
+              type="email"
+              value={field.state.value}
+              onChange={(event) => field.handleChange(event.target.value)}
+              onBlur={() => {
+                field.handleBlur();
+                persistDraft();
+              }}
+              readOnly={Boolean(invitationEmail)}
+              iconRight={
+                invitationEmail ? (
+                  <Icon
+                    aria-hidden="true"
+                    className="size-16 text-foreground-neutral-disabled"
+                    name="lockLine"
+                  />
+                ) : undefined
+              }
+            />
+          </FormField>
+        )}
+      </form.Field>
+      <form.Field
+        name="password"
+        validators={{
+          onBlur: loginBodySchema.shape.password,
+          onSubmit: loginBodySchema.shape.password,
+        }}
+      >
+        {(field) => (
+          <FormField label="Password" id="password" error={fieldError(field)}>
+            <FormFieldInput
+              autoComplete="current-password"
+              name="password"
+              type="password"
+              value={field.state.value}
+              onChange={(event) => field.handleChange(event.target.value)}
+              onBlur={() => {
+                field.handleBlur();
+                persistDraft();
+              }}
+            />
+          </FormField>
+        )}
+      </form.Field>
+      {children}
+      <Button className="w-full" isLoading={login.isPending} type="submit">
+        {login.isPending ? 'Logging in...' : 'Log in'}
+      </Button>
+    </form>
+  );
+}

package/src/continuation.test.ts

@@ -2,6 +2,7 @@ import {
   AuthActions,
   AuthShell,
   EmailCodeVerification,
+  PasswordLoginForm,
   parseRedirectContext,
 } from '@shipfox/client-auth/continuation';
 
@@ -10,6 +11,7 @@ describe('client-auth continuation exports', () => {
     expect(AuthActions).toBeTypeOf('function');
     expect(AuthShell).toBeTypeOf('function');
     expect(EmailCodeVerification).toBeTypeOf('function');
+    expect(PasswordLoginForm).toBeTypeOf('function');
     expect(parseRedirectContext).toBeTypeOf('function');
   });
 });

package/src/continuation.ts

@@ -3,4 +3,8 @@ export {
   EmailCodeVerification,
   type EmailCodeVerificationProps,
 } from './components/email-code-verification.js';
+export {
+  PasswordLoginForm,
+  type PasswordLoginFormProps,
+} from './components/password-login-form.js';
 export {parseRedirectContext, type RedirectContext} from './redirect-context.js';

package/src/pages/login-page.tsx

@@ -1,18 +1,9 @@
-import {loginBodySchema} from '@shipfox/api-auth-dto';
 import {AuthShell, useRouteSearch} from '@shipfox/client-shell/runtime';
-import {Button, ButtonLink} from '@shipfox/react-ui/button';
-import {Callout} from '@shipfox/react-ui/callout';
-import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
-import {Icon} from '@shipfox/react-ui/icon';
+import {ButtonLink} from '@shipfox/react-ui/button';
 import {Text} from '@shipfox/react-ui/typography';
-import {useForm} from '@tanstack/react-form';
 import {Link} from '@tanstack/react-router';
-import {useAtom} from 'jotai';
-import {useEffect, useRef, useState} from 'react';
-import {useLoginAuth} from '#hooks/api/login-auth.js';
-import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
+import {PasswordLoginForm} from '#components/password-login-form.js';
 import {validateRedirectSearch} from '../routes/inputs.js';
-import {loginErrorToFormError} from './form-errors.js';
 import {
   extractInvitationToken,
   pendingInvitation,
@@ -20,64 +11,10 @@ import {
 } from './invitation-context.js';
 
 export function LoginPage() {
-  const login = useLoginAuth();
   const search = useRouteSearch(validateRedirectSearch);
   const invitationToken = extractInvitationToken(search.redirect);
   const invitationPreview = useInvitationContext(invitationToken);
   const invitationPending = pendingInvitation(invitationPreview.data);
-  const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
-  const [formError, setFormError] = useState<string | undefined>();
-  const draftRef = useRef(authFormDraft);
-  draftRef.current = authFormDraft;
-  // Set just before clearing the draft on success so the unmount cleanup
-  // below does not repersist the just-submitted credentials.
-  const skipDraftPersistRef = useRef(false);
-
-  const form = useForm({
-    defaultValues: {email: authFormDraft.email, password: authFormDraft.password},
-    onSubmit: async ({value}) => {
-      setFormError(undefined);
-      try {
-        await login.mutateAsync(value);
-        skipDraftPersistRef.current = true;
-        setAuthFormDraft(initialAuthFormDraft);
-      } catch (error) {
-        const mapped = loginErrorToFormError(error);
-        if (mapped.kind === 'field') {
-          form.setFieldMeta(mapped.field, (prev) => ({
-            ...prev,
-            errorMap: {...prev.errorMap, onServer: mapped.message},
-          }));
-        } else {
-          setFormError(mapped.message);
-        }
-      }
-    },
-  });
-
-  // Lock the email field when arriving from an invitation link so the user
-  // can't log in as a different account than the one the invitation targets.
-  useEffect(() => {
-    if (invitationPending && form.state.values.email !== invitationPending.email) {
-      form.setFieldValue('email', invitationPending.email);
-      setAuthFormDraft((current) => ({...current, email: invitationPending.email}));
-    }
-  }, [invitationPending, form, setAuthFormDraft]);
-
-  // Sync TanStack Form values back into the Jotai draft on unmount so a
-  // navigation to /signup or /reset preserves what the user typed. Skipped
-  // after a successful login because we just intentionally cleared the draft.
-  useEffect(() => {
-    return () => {
-      if (skipDraftPersistRef.current) return;
-      const {email, password} = form.state.values;
-      if (email !== draftRef.current.email || password !== draftRef.current.password) {
-        setAuthFormDraft({email, password});
-      }
-    };
-  }, [form, setAuthFormDraft]);
-
-  const isInvitationEmailLocked = Boolean(invitationPending);
   const invitationRedirect = invitationToken
     ? `/invitations/accept?token=${encodeURIComponent(invitationToken)}`
     : undefined;
@@ -88,87 +25,13 @@ export function LoginPage() {
     ? 'Log in to accept your invitation.'
     : 'Log in to access Shipfox.';
 
-  function persistDraft() {
-    const {email, password} = form.state.values;
-    setAuthFormDraft({email, password});
-  }
-
   return (
     <AuthShell title={headerTitle} description={headerDescription}>
-      <form
-        className="flex flex-col gap-18"
-        noValidate
-        onSubmit={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          void form.handleSubmit();
-        }}
-      >
-        {formError ? (
-          <Callout role="alert" type="error">
-            {formError}
-          </Callout>
-        ) : null}
-        <form.Field
-          name="email"
-          validators={{onBlur: loginBodySchema.shape.email, onSubmit: loginBodySchema.shape.email}}
-        >
-          {(field) => (
-            <FormField label="Email" id="email" error={fieldError(field)}>
-              <FormFieldInput
-                autoComplete="email"
-                name="email"
-                type="email"
-                value={field.state.value}
-                onChange={(event) => field.handleChange(event.target.value)}
-                onBlur={() => {
-                  field.handleBlur();
-                  persistDraft();
-                }}
-                readOnly={isInvitationEmailLocked}
-                iconRight={
-                  isInvitationEmailLocked ? (
-                    <Icon
-                      aria-hidden="true"
-                      className="size-16 text-foreground-neutral-disabled"
-                      name="lockLine"
-                    />
-                  ) : undefined
-                }
-              />
-            </FormField>
-          )}
-        </form.Field>
-        <form.Field
-          name="password"
-          validators={{
-            onBlur: loginBodySchema.shape.password,
-            onSubmit: loginBodySchema.shape.password,
-          }}
-        >
-          {(field) => (
-            <FormField label="Password" id="password" error={fieldError(field)}>
-              <FormFieldInput
-                autoComplete="current-password"
-                name="password"
-                type="password"
-                value={field.state.value}
-                onChange={(event) => field.handleChange(event.target.value)}
-                onBlur={() => {
-                  field.handleBlur();
-                  persistDraft();
-                }}
-              />
-            </FormField>
-          )}
-        </form.Field>
+      <PasswordLoginForm invitationEmail={invitationPending?.email}>
         <ButtonLink asChild variant="subtle" className="-mt-8 self-end">
           <Link to="/auth/reset">Forgot password?</Link>
         </ButtonLink>
-        <Button className="w-full" isLoading={login.isPending} type="submit">
-          {login.isPending ? 'Logging in...' : 'Log in'}
-        </Button>
-      </form>
+      </PasswordLoginForm>
       <Text size="sm" className="text-center text-foreground-neutral-subtle">
         New to Shipfox?{' '}
         <ButtonLink asChild variant="interactive" underline>