@shipfox/client-auth 0.2.0

package/src/pages/workspace-onboarding-page.tsx

@@ -0,0 +1,213 @@
+import {createWorkspaceBodySchema} from '@shipfox/api-workspaces-dto';
+import {displayNameFieldError} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@shipfox/react-ui/card';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {Icon} from '@shipfox/react-ui/icon';
+import {toast} from '@shipfox/react-ui/toast';
+import {Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useNavigate} from '@tanstack/react-router';
+import {useSetAtom} from 'jotai';
+import {useState} from 'react';
+import {useCreateWorkspaceAuth} from '#hooks/api/workspace-auth.js';
+import {lastWorkspaceIdAtom} from '#state/last-workspace.js';
+import {workspaceOnboardingErrorToFormError} from './form-errors.js';
+
+const previewMetrics = [
+  {label: 'Runs', value: '--'},
+  {label: 'Passed', value: '--'},
+  {label: 'Failed', value: '--'},
+  {label: 'Duration', value: '--'},
+];
+const previewBars = [
+  {id: 'runs-start', height: 32},
+  {id: 'runs-mid-low', height: 48},
+  {id: 'runs-dip', height: 28},
+  {id: 'runs-mid-high', height: 66},
+  {id: 'runs-mid', height: 54},
+  {id: 'runs-peak', height: 82},
+  {id: 'runs-late-low', height: 44},
+  {id: 'runs-late-high', height: 74},
+];
+
+export function WorkspaceOnboardingPage() {
+  const createWorkspace = useCreateWorkspaceAuth();
+  const navigate = useNavigate();
+  const setLastWorkspaceId = useSetAtom(lastWorkspaceIdAtom);
+  const [formError, setFormError] = useState<string | undefined>();
+
+  const form = useForm({
+    defaultValues: {name: ''},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        const body = createWorkspaceBodySchema.parse({name: value.name});
+        const created = await createWorkspace.mutateAsync(body);
+        toast.success('Workspace created.');
+        // Pin the new workspace as the last-active one so a page refresh and
+        // future visits to `/` land on it.
+        try {
+          setLastWorkspaceId(created.id);
+        } catch {
+          // localStorage may throw in private browsing or quota-exceeded.
+        }
+        await navigate({to: '/workspaces/$wid', params: {wid: created.id}});
+      } catch (error) {
+        const mapped = workspaceOnboardingErrorToFormError(error);
+        setFormError(mapped.message);
+      }
+    },
+  });
+
+  return (
+    <main className="min-h-screen bg-background-subtle-base px-24 py-32 max-[520px]:px-16">
+      <div className="mx-auto flex min-h-[calc(100vh-64px)] w-full max-w-[1120px] flex-col gap-24">
+        <header className="flex items-center justify-between">
+          <div className="flex items-center gap-10">
+            <div className="flex size-36 items-center justify-center rounded-8 border border-border-neutral-base bg-background-neutral-base shadow-button-neutral">
+              <Icon name="shipfox" className="size-24 text-background-highlight-interactive" />
+            </div>
+            <Text size="md" bold>
+              Shipfox
+            </Text>
+          </div>
+        </header>
+
+        <section className="grid flex-1 items-center gap-32 lg:grid-cols-[minmax(0,440px)_minmax(0,1fr)]">
+          <form
+            className="relative z-10 w-full"
+            noValidate
+            aria-labelledby="workspace-onboarding-title"
+            onSubmit={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              void form.handleSubmit();
+            }}
+          >
+            <Card className="gap-20 p-24 shadow-button-neutral">
+              <CardHeader className="gap-8">
+                <CardTitle id="workspace-onboarding-title" variant="h1">
+                  Create your workspace
+                </CardTitle>
+                <CardDescription>Give your team a place to collaborate.</CardDescription>
+              </CardHeader>
+
+              {formError ? (
+                <Callout role="alert" type="error">
+                  {formError}
+                </Callout>
+              ) : null}
+
+              <CardContent className="flex flex-col gap-8">
+                <form.Field
+                  name="name"
+                  validators={{
+                    onBlur: ({value}) =>
+                      displayNameFieldError(
+                        value,
+                        'Workspace name',
+                        createWorkspaceBodySchema.shape.name,
+                      ),
+                    onSubmit: ({value}) =>
+                      displayNameFieldError(
+                        value,
+                        'Workspace name',
+                        createWorkspaceBodySchema.shape.name,
+                      ),
+                  }}
+                >
+                  {(field) => (
+                    <FormField label="Workspace name" id="workspace-name" error={fieldError(field)}>
+                      <FormFieldInput
+                        autoComplete="organization"
+                        name="name"
+                        placeholder="Acme"
+                        type="text"
+                        value={field.state.value}
+                        onChange={(event) => field.handleChange(event.target.value)}
+                        onBlur={field.handleBlur}
+                      />
+                    </FormField>
+                  )}
+                </form.Field>
+              </CardContent>
+
+              <Button
+                className="w-full"
+                iconRight="chevronRight"
+                isLoading={createWorkspace.isPending}
+                type="submit"
+              >
+                {createWorkspace.isPending ? 'Creating workspace...' : 'Create workspace'}
+              </Button>
+            </Card>
+          </form>
+
+          <div className="hidden flex-col gap-18 lg:flex" aria-hidden="true">
+            <div className="grid grid-cols-4 gap-12">
+              {previewMetrics.map((metric) => (
+                <div
+                  className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-14 shadow-button-neutral"
+                  key={metric.label}
+                >
+                  <Text size="xs" className="text-foreground-neutral-muted">
+                    {metric.label}
+                  </Text>
+                  <Text size="xl" bold>
+                    {metric.value}
+                  </Text>
+                </div>
+              ))}
+            </div>
+            <div className="grid grid-cols-2 gap-18">
+              <PreviewPanel title="Performance over time" />
+              <PreviewPanel title="Duration distribution" bars />
+            </div>
+            <div className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 shadow-button-neutral">
+              <Text size="sm" bold>
+                Jobs breakdown
+              </Text>
+              <div className="mt-14 flex flex-col gap-10">
+                {[0, 1, 2, 3].map((row) => (
+                  <div
+                    className="grid grid-cols-[1fr_80px_80px] gap-12 border-t border-border-neutral-base pt-10"
+                    key={row}
+                  >
+                    <div className="h-12 rounded-full bg-background-neutral-disabled" />
+                    <div className="h-12 rounded-full bg-background-neutral-disabled" />
+                    <div className="h-12 rounded-full bg-background-neutral-disabled" />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}
+
+function PreviewPanel({title, bars = false}: {title: string; bars?: boolean}) {
+  return (
+    <div className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 shadow-button-neutral">
+      <Text size="sm" bold>
+        {title}
+      </Text>
+      <div className="mt-16 flex h-[220px] items-end gap-8 border-b border-l border-border-neutral-base px-12 pb-10">
+        {previewBars.map((bar) => (
+          <div
+            className={
+              bars
+                ? 'w-full rounded-t-4 bg-background-neutral-disabled'
+                : 'w-full rounded-full bg-background-neutral-disabled'
+            }
+            key={`${title}-${bar.id}`}
+            style={{height: `${bar.height}%`}}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/routes/index.tsx

@@ -0,0 +1,18 @@
+import type {RouterContext} from '@shipfox/client-shell/runtime';
+import {defineRoute, getLastWorkspaceId} from '@shipfox/client-shell/runtime';
+import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {redirect} from '@tanstack/react-router';
+
+export default defineRoute({
+  beforeLoad: ({context}: {context: RouterContext}) => {
+    const auth = context.auth;
+    if (!auth || auth.isLoading) return;
+    if (!auth.isAuthenticated) throw redirect({to: '/auth/login'});
+    const [first, ...rest] = auth.workspaces;
+    if (!first) throw redirect({to: '/setup/workspaces/new'});
+    const target =
+      [first, ...rest].find((workspace) => workspace.id === getLastWorkspaceId()) ?? first;
+    throw redirect({to: '/workspaces/$wid', params: {wid: target.id}});
+  },
+  component: FullPageLoader,
+});

package/src/routes/login.tsx

@@ -0,0 +1,11 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {GuestGuard} from '#components/auth-guard.js';
+import {LoginPage} from '#pages/login-page.js';
+
+export default defineRoute({
+  component: () => (
+    <GuestGuard>
+      <LoginPage />
+    </GuestGuard>
+  ),
+});

package/src/routes/logout.tsx

@@ -0,0 +1,4 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {LogoutPage} from '#pages/logout-page.js';
+
+export default defineRoute({component: LogoutPage});

package/src/routes/reset.tsx

@@ -0,0 +1,11 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {GuestGuard} from '#components/auth-guard.js';
+import {PasswordResetPage} from '#pages/password-reset-page.js';
+
+export default defineRoute({
+  component: () => (
+    <GuestGuard>
+      <PasswordResetPage />
+    </GuestGuard>
+  ),
+});

package/src/routes/signup.tsx

@@ -0,0 +1,11 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {GuestGuard} from '#components/auth-guard.js';
+import {SignupPage} from '#pages/signup-page.js';
+
+export default defineRoute({
+  component: () => (
+    <GuestGuard>
+      <SignupPage />
+    </GuestGuard>
+  ),
+});

package/src/routes/verify-email.tsx

@@ -0,0 +1,11 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {GuestGuard} from '#components/auth-guard.js';
+import {VerifyEmailPage} from '#pages/verify-email-page.js';
+
+export default defineRoute({
+  component: () => (
+    <GuestGuard>
+      <VerifyEmailPage />
+    </GuestGuard>
+  ),
+});

package/src/routes/workspace-onboarding.tsx

@@ -0,0 +1,14 @@
+import type {RouterContext} from '@shipfox/client-shell/runtime';
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {redirect} from '@tanstack/react-router';
+import {WorkspaceOnboardingPage} from '#pages/workspace-onboarding-page.js';
+
+export default defineRoute({
+  beforeLoad: ({context, location}: {context: RouterContext; location: {href: string}}) => {
+    const auth = context.auth;
+    if (!auth || auth.isLoading) return;
+    if (!auth.isAuthenticated)
+      throw redirect({to: '/auth/login', search: {redirect: location.href}});
+  },
+  component: WorkspaceOnboardingPage,
+});

package/src/state/auth.ts

@@ -0,0 +1,18 @@
+import {atom} from 'jotai';
+
+export {
+  type AuthState,
+  type AuthStatus,
+  authStateAtom,
+  initialAuthState,
+  toAuthenticatedState,
+  type Workspace,
+} from '@shipfox/client-shell/runtime';
+
+export interface AuthFormDraft {
+  email: string;
+  password: string;
+}
+
+export const initialAuthFormDraft: AuthFormDraft = {email: '', password: ''};
+export const authFormDraftAtom = atom<AuthFormDraft>(initialAuthFormDraft);

package/src/state/last-workspace.test.ts

@@ -0,0 +1,63 @@
+import {createStore} from 'jotai';
+import {
+  getLastWorkspaceId,
+  lastWorkspaceIdAtom,
+  rememberLastWorkspaceId,
+} from './last-workspace.js';
+
+describe('lastWorkspaceIdAtom', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  test('initial value is undefined when storage is empty', () => {
+    const store = createStore();
+
+    expect(store.get(lastWorkspaceIdAtom)).toBeUndefined();
+  });
+
+  test('write persists to localStorage and round-trips through the atom', () => {
+    const store = createStore();
+
+    store.set(lastWorkspaceIdAtom, 'workspace-1');
+
+    expect(JSON.parse(window.localStorage.getItem('shipfox.lastWorkspaceId') ?? 'null')).toBe(
+      'workspace-1',
+    );
+    expect(store.get(lastWorkspaceIdAtom)).toBe('workspace-1');
+  });
+
+  test('subscribers receive updates when the atom is set', () => {
+    const store = createStore();
+    const seen: Array<string | undefined> = [];
+    const unsubscribe = store.sub(lastWorkspaceIdAtom, () => {
+      seen.push(store.get(lastWorkspaceIdAtom));
+    });
+
+    store.set(lastWorkspaceIdAtom, 'workspace-1');
+    store.set(lastWorkspaceIdAtom, 'workspace-2');
+
+    expect(seen).toEqual(['workspace-1', 'workspace-2']);
+    unsubscribe();
+  });
+
+  test('rememberLastWorkspaceId persists a root redirect target', () => {
+    rememberLastWorkspaceId('workspace-1');
+
+    const result = getLastWorkspaceId();
+
+    expect(result).toBe('workspace-1');
+  });
+
+  test('getLastWorkspaceId ignores malformed storage', () => {
+    window.localStorage.setItem('shipfox.lastWorkspaceId', '{');
+
+    const result = getLastWorkspaceId();
+
+    expect(result).toBeUndefined();
+  });
+});

package/src/state/last-workspace.ts

@@ -0,0 +1,5 @@
+export {
+  getLastWorkspaceId,
+  lastWorkspaceIdAtom,
+  rememberLastWorkspaceId,
+} from '@shipfox/client-shell/runtime';

package/test/factories/user.ts

@@ -0,0 +1,17 @@
+import {faker} from '@faker-js/faker';
+import type {UserDto} from '@shipfox/api-auth-dto';
+import {Factory} from 'fishery';
+
+export const pageUserFactory = Factory.define<UserDto>(() => {
+  const createdAt = faker.date.recent();
+
+  return {
+    id: faker.string.uuid(),
+    email: faker.internet.email().toLowerCase(),
+    name: faker.person.fullName(),
+    email_verified_at: faker.helpers.maybe(() => faker.date.recent().toISOString()) ?? null,
+    status: 'active',
+    created_at: createdAt.toISOString(),
+    updated_at: faker.date.soon({refDate: createdAt}).toISOString(),
+  };
+});

package/test/pages.tsx

@@ -0,0 +1,83 @@
+import {Toaster} from '@shipfox/react-ui/toast';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {type RenderResult, render} from '@testing-library/react';
+import {type ReactElement, StrictMode} from 'react';
+import {AuthProvider} from '#components/auth-provider.js';
+import {LoginPage} from '#pages/login-page.js';
+import {PasswordResetPage} from '#pages/password-reset-page.js';
+import {SignupPage} from '#pages/signup-page.js';
+import {VerifyEmailPage} from '#pages/verify-email-page.js';
+
+function createTestRouter(path: string, element: ReactElement) {
+  const rootRoute = createRootRoute({
+    component: Outlet,
+  });
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (path.split('?')[0] === '/' ? element : <h1>Authenticated home</h1>),
+  });
+  const workspaceRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: 'workspaces/$wid',
+    component: () => <h1>Authenticated home</h1>,
+  });
+  const loginRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/auth/login',
+    component: () => (path.split('?')[0] === '/auth/login' ? element : <LoginPage />),
+  });
+  const signupRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/auth/signup',
+    component: () => (path.split('?')[0] === '/auth/signup' ? element : <SignupPage />),
+  });
+  const passwordResetRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/auth/reset',
+    component: () => (path.split('?')[0] === '/auth/reset' ? element : <PasswordResetPage />),
+  });
+  const verifyEmailRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/auth/verify-email',
+    component: () => (path.split('?')[0] === '/auth/verify-email' ? element : <VerifyEmailPage />),
+  });
+  const routeTree = rootRoute.addChildren([
+    indexRoute,
+    workspaceRoute,
+    loginRoute,
+    signupRoute,
+    passwordResetRoute,
+    verifyEmailRoute,
+  ]);
+  return createRouter({
+    history: createMemoryHistory({initialEntries: [path]}),
+    routeTree,
+  });
+}
+
+function renderWithProviders(path: string, element: ReactElement) {
+  const router = createTestRouter(path, element);
+
+  return (
+    <AuthProvider>
+      <RouterProvider router={router} />
+      <Toaster />
+    </AuthProvider>
+  );
+}
+
+export function renderAuthPage(path: string, element: ReactElement): RenderResult {
+  return render(renderWithProviders(path, element));
+}
+
+export function renderStrictAuthPage(path: string, element: ReactElement): RenderResult {
+  return render(<StrictMode>{renderWithProviders(path, element)}</StrictMode>);
+}

package/test/setup.ts

@@ -0,0 +1,3 @@
+import {installClientDomTestEnv} from '@shipfox/client-test-setup';
+
+installClientDomTestEnv();

package/test/utils.ts

@@ -0,0 +1,11 @@
+export function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+export function requestUrl(input: RequestInfo | URL): string {
+  return input instanceof Request ? input.url : input.toString();
+}

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@shipfox/ts-config/react",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "customConditions": ["workspace-source"]
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.tsx", "**/*.test.ts"]
+}