@remit/web-client 0.0.300 → 0.0.301

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.300",
+  "version": "0.0.301",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {
@@ -77,6 +77,7 @@
     "@remit/api-http-client": "*",
     "@remit/data-ports": "*",
     "@remit/domain-enums": "*",
+    "@remit/mail-oauth-service": "*",
     "@remit/ui": "*",
     "@tanstack/react-query": "^5",
     "@tanstack/react-query-devtools": "^5",

package/src/auth/amplify-config.ts

@@ -24,11 +24,10 @@ const readCognitoEnv = (): CognitoEnv | null => {
 	};
 };
 
-const cognitoEnv = readCognitoEnv();
-
-export const isCognitoConfigured = (): boolean => cognitoEnv !== null;
+export const isCognitoConfigured = (): boolean => readCognitoEnv() !== null;
 
 export const configureAmplify = (): void => {
+	const cognitoEnv = readCognitoEnv();
 	if (!cognitoEnv) {
 		console.warn(
 			"[auth] Cognito user pool is not configured. Running in local dev mode without Cognito auth.",

package/src/auth/cognito-sign-in.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { cognitoAuthProvider } from "@/auth/cognito-provider";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+import { withRuntimeConfig } from "@/mocks/story-frame/session";
+
+const userPool = withRuntimeConfig({
+	cognito: {
+		userPoolId: "eu-west-1_Story0001",
+		clientId: "story-client-id",
+		region: "eu-west-1",
+	},
+});
+
+const meta = {
+	title: "Playground/Shipped/Sign in/Cognito",
+	component: AppStory,
+	args: { url: "/mail/brief", authProvider: cognitoAuthProvider },
+	parameters: {
+		layout: "fullscreen",
+		theme: "dark",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+	beforeEach: userPool,
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const signInForm = async (canvasElement: HTMLElement) => {
+	const canvas = within(canvasElement);
+	await expect(
+		await canvas.findByRole("tab", { name: "Sign In", selected: true }),
+	).toBeVisible();
+	await expect(canvas.getByLabelText("Username")).toHaveAttribute(
+		"placeholder",
+		"Enter your username",
+	);
+	await expect(canvas.getByLabelText("Password")).toHaveAttribute(
+		"placeholder",
+		"Enter your password",
+	);
+	await expect(canvas.getByRole("button", { name: "Sign in" })).toBeVisible();
+	await expect(canvas.queryByText("Q3 planning")).toBeNull();
+};
+
+export const SignInMobile: Story = {
+	name: "Sign In — mobile",
+	globals: phone,
+	play: async ({ canvasElement }) => signInForm(canvasElement),
+};
+
+export const CreateAccountMobile: Story = {
+	name: "Create Account — mobile",
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			await canvas.findByRole("tab", { name: "Create Account" }),
+		);
+		await expect(
+			await canvas.findByPlaceholderText("Confirm your password"),
+		).toBeVisible();
+	},
+};
+
+export const SignInDesktop: Story = {
+	name: "Sign In — desktop",
+	play: async ({ canvasElement }) => signInForm(canvasElement),
+};
+
+export const SignInLight: Story = {
+	name: "Sign In — light",
+	parameters: { theme: "light" },
+	play: async ({ canvasElement }) => signInForm(canvasElement),
+};
+
+export const LocalDevBanner: Story = {
+	name: "Local dev banner",
+	beforeEach: withRuntimeConfig({}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Local dev")).toBeVisible();
+		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+	},
+};

package/src/auth/email-sign-in.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, userEvent, within } from "storybook/test";
+import { betterAuthProvider } from "@/auth/better-auth-provider";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+import { withRuntimeConfig } from "@/mocks/story-frame/session";
+
+const signedOut = http.get("/api/auth/get-session", () =>
+	HttpResponse.json(null),
+);
+
+const meta = {
+	title: "Playground/Shipped/Sign in/Email and password",
+	component: AppStory,
+	args: { url: "/mail/brief", authProvider: betterAuthProvider },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: [signedOut, ...mailHandlers(mailWorld())] },
+	},
+	beforeEach: withRuntimeConfig({ betterAuthEnabled: true }),
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const submit = (canvasElement: HTMLElement): HTMLElement => {
+	const button = canvasElement.querySelector<HTMLElement>(
+		'button[type="submit"]',
+	);
+	if (!button) throw new Error("the sign-in form has no submit button");
+	return button;
+};
+
+const fill = async (canvasElement: HTMLElement) => {
+	const canvas = within(canvasElement);
+	await userEvent.type(
+		await canvas.findByLabelText("Email"),
+		"alice@example.com",
+	);
+	await userEvent.type(canvas.getByLabelText("Password"), "not-my-password");
+};
+
+export const SignIn: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("button", { name: "Sign in", pressed: true }),
+		).toBeVisible();
+		await expect(canvas.getByLabelText("Email")).toBeVisible();
+		await expect(canvas.queryByLabelText("Name")).toBeNull();
+		await expect(canvas.queryByText("Q3 planning")).toBeNull();
+	},
+};
+
+export const CreateAccount: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			await canvas.findByRole("button", { name: "Create account" }),
+		);
+		await expect(await canvas.findByLabelText("Name")).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Create account", pressed: true }),
+		).toBeVisible();
+	},
+};
+
+export const WrongPassword: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				signedOut,
+				http.post("/api/auth/sign-in/email", () =>
+					HttpResponse.json(
+						{
+							code: "INVALID_EMAIL_OR_PASSWORD",
+							message: "Invalid email or password",
+						},
+						{ status: 401 },
+					),
+				),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await fill(canvasElement);
+		await userEvent.click(submit(canvasElement));
+		await expect(
+			await canvas.findByText("Invalid email or password"),
+		).toBeVisible();
+	},
+};
+
+export const SignupsClosed: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				signedOut,
+				http.post("/api/auth/sign-up/email", () =>
+					HttpResponse.json(
+						{
+							code: "EMAIL_PASSWORD_SIGN_UP_DISABLED",
+							message: "Email and password sign up is not enabled",
+						},
+						{ status: 400 },
+					),
+				),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			await canvas.findByRole("button", { name: "Create account" }),
+		);
+		await userEvent.type(await canvas.findByLabelText("Name"), "Alice");
+		await fill(canvasElement);
+		await userEvent.click(submit(canvasElement));
+		await expect(
+			await canvas.findByText(/New signups are currently closed/),
+		).toBeVisible();
+	},
+};

package/src/components/onboarding/onboarding.stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import {
+	REDIRECT_STALL_MESSAGE,
+	REDIRECT_STALL_MS,
+} from "@/hooks/useRedirectEnded";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+import {
+	NEW_ACCOUNT_ID,
+	type OnboardingHandlerOptions,
+	onboardingHandlers,
+} from "@/mocks/story-frame/onboarding-handlers";
+import { makeAccount } from "@/test-support/fixtures";
+
+const EMAIL = "alice@northwind.example";
+
+const firstRun = mailWorld({ accounts: [], threads: [], outbox: [] });
+
+const handlers = (
+	options: OnboardingHandlerOptions = {},
+	world = firstRun,
+) => ({
+	msw: { handlers: [...onboardingHandlers(options), ...mailHandlers(world)] },
+});
+
+const meta = {
+	title: "Playground/Shipped/Onboarding/Wizard",
+	component: AppStory,
+	args: { url: "/onboarding" },
+	parameters: { layout: "fullscreen", ...handlers() },
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type Canvas = ReturnType<typeof within>;
+
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const press = async (canvas: Canvas, name: string | RegExp) =>
+	userEvent.click(await canvas.findByRole("button", { name }));
+
+const toConnector = (canvas: Canvas) => press(canvas, "Add your first account");
+
+const toAddress = async (canvas: Canvas) => {
+	await toConnector(canvas);
+	await press(canvas, "Continue with IMAP");
+};
+
+const toServers = async (canvas: Canvas, email = EMAIL) => {
+	await toAddress(canvas);
+	await userEvent.type(await canvas.findByLabelText("Email address"), email);
+	await press(canvas, "Continue");
+	await canvas.findByText("Confirm server settings");
+};
+
+const toCredentials = async (canvas: Canvas) => {
+	await toServers(canvas);
+	await press(canvas, "Continue");
+	await canvas.findByText("Sign in to northwind.example");
+};
+
+const toTest = async (canvas: Canvas) => {
+	await toCredentials(canvas);
+	await userEvent.type(canvas.getByLabelText(/Password/), "app-password");
+	await press(canvas, "Test connection");
+};
+
+const toMicrosoft = async (canvas: Canvas) => {
+	await toConnector(canvas);
+	await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+	await press(canvas, "Continue with Microsoft");
+	return canvas.findByRole("button", { name: "Sign in with Microsoft" });
+};
+
+export const Welcome: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Welcome to Remit")).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Import a config file" }),
+		).toBeVisible();
+	},
+};
+
+export const Walkthrough: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText(`Syncing ${EMAIL}`, undefined, {
+				timeout: 4000,
+			}),
+		).toBeVisible();
+		await expect(
+			await canvas.findByRole("button", { name: "Go to inbox" }),
+		).toBeEnabled();
+	},
+};
+
+export const ConnectorPicker: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await expect(
+			await canvas.findByText("How does this account connect?"),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Continue with IMAP" }),
+		).toBeVisible();
+		await expect(canvas.queryByText(/Google/)).toBeNull();
+	},
+};
+
+export const ConnectorPickerMicrosoft: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+		await expect(
+			canvas.getByRole("button", { name: "Continue with Microsoft" }),
+		).toBeVisible();
+	},
+};
+
+export const ConnectorPickerInSettings: Story = {
+	args: { url: "/settings/accounts" },
+	parameters: handlers({}, mailWorld()),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await press(canvas, "Add account");
+		await expect(
+			await canvas.findByText("How does this account connect?"),
+		).toBeVisible();
+		await expect(canvas.queryByRole("button", { name: "Back" })).toBeNull();
+	},
+};
+
+export const ConnectorPickerPhone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await expect(
+			await canvas.findByRole("button", { name: "Continue with IMAP" }),
+		).toBeVisible();
+	},
+};
+
+export const ConnectorPickerMicrosoftPhone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+		await expect(
+			canvas.getByRole("button", { name: "Continue with Microsoft" }),
+		).toBeVisible();
+	},
+};
+
+export const MicrosoftEmail: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await toMicrosoft(canvas)).toBeEnabled();
+		await expect(
+			canvas.getByLabelText("Email address (optional)"),
+		).toBeVisible();
+		await expect(canvas.getByRole("button", { name: "Back" })).toBeVisible();
+	},
+};
+
+export const MicrosoftEmailInSettings: Story = {
+	args: { url: "/settings/accounts" },
+	parameters: handlers({}, mailWorld()),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await press(canvas, "Add account");
+		await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+		await press(canvas, "Continue with Microsoft");
+		await expect(
+			await canvas.findByRole("button", { name: "Sign in with Microsoft" }),
+		).toBeVisible();
+		await expect(canvas.getByRole("button", { name: "Back" })).toBeVisible();
+	},
+};
+
+const realSetTimeout = window.setTimeout;
+
+const stallAtOnce: Window["setTimeout"] = (handler, delay, ...rest) =>
+	realSetTimeout(handler, delay === REDIRECT_STALL_MS ? 0 : delay, ...rest);
+
+export const MicrosoftRedirectStalled: Story = {
+	beforeEach: () => () => {
+		Reflect.set(window, "setTimeout", realSetTimeout);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const signIn = await toMicrosoft(canvas);
+		Reflect.set(window, "setTimeout", stallAtOnce);
+		await userEvent.click(signIn);
+		await expect(await canvas.findByText(REDIRECT_STALL_MESSAGE)).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Sign in with Microsoft" }),
+		).toBeEnabled();
+	},
+};
+
+export const AddressAutodiscovery: Story = {
+	parameters: handlers({ autoconfig: "slow" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toAddress(canvas);
+		await userEvent.type(await canvas.findByLabelText("Email address"), EMAIL);
+		await press(canvas, "Continue");
+		await expect(
+			await canvas.findByText("Looking up settings for northwind.example…"),
+		).toBeVisible();
+	},
+};
+
+export const AddressInvalid: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toAddress(canvas);
+		await userEvent.type(
+			await canvas.findByLabelText("Email address"),
+			"alice",
+		);
+		await press(canvas, "Continue");
+		await expect(
+			await canvas.findByText("Enter a valid email address."),
+		).toBeVisible();
+	},
+};
+
+export const ServerConfirm: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		await expect(canvas.getByText(/Found via autodiscovery/)).toBeVisible();
+		await expect(canvas.getAllByText("detected")).toHaveLength(2);
+		await expect(
+			canvas.getAllByDisplayValue("mail.northwind.example"),
+		).toHaveLength(2);
+	},
+};
+
+export const ServerConfirmPhone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		for (const security of canvas.getAllByLabelText("Security")) {
+			await expect(security).toBeEnabled();
+		}
+	},
+};
+
+export const ServerManualFallback: Story = {
+	parameters: handlers({ autoconfig: "missing" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		await expect(
+			canvas.getByText(/couldn't detect settings for northwind.example/),
+		).toBeVisible();
+		await expect(
+			canvas.getByDisplayValue("imap.northwind.example"),
+		).toBeVisible();
+		await expect(canvas.queryByText("detected")).toBeNull();
+	},
+};
+
+export const ServerMissingHost: Story = {
+	parameters: handlers({ autoconfig: "missing" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		await userEvent.clear(canvas.getByDisplayValue("imap.northwind.example"));
+		await press(canvas, "Continue");
+		await expect(await canvas.findByText("Enter the IMAP host.")).toBeVisible();
+	},
+};
+
+export const ServerProviderPreset: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas, "alice@icloud.com");
+		await expect(canvas.getByLabelText("Provider")).toHaveValue("icloud");
+		await expect(
+			canvas.getByText(/pre-filled for iCloud and locked/),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("link", { name: "Get an app password" }),
+		).toBeVisible();
+	},
+};
+
+export const Credentials: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toCredentials(canvas);
+		await expect(canvas.getByLabelText("Username")).toHaveValue(EMAIL);
+		await press(canvas, "Test connection");
+		await expect(
+			await canvas.findByText("Enter your username and password."),
+		).toBeVisible();
+	},
+};
+
+export const TestConnectionSuccess: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(await canvas.findByText("Connection verified")).toBeVisible();
+	},
+};
+
+export const TestConnectionFailure: Story = {
+	parameters: handlers({
+		connection: {
+			imapSuccess: true,
+			smtpSuccess: false,
+			smtpError: "535 5.7.8 Authentication credentials invalid",
+		},
+	}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText(/many providers require an app password/),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Back to credentials" }),
+		).toBeVisible();
+	},
+};
+
+export const TestConnectionNetworkFailure: Story = {
+	parameters: handlers({
+		connection: {
+			imapSuccess: false,
+			imapError: "connect ECONNREFUSED 203.0.113.7:993",
+		},
+	}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByRole("button", { name: "Back to servers" }),
+		).toBeVisible();
+		await expect(canvas.getAllByText(/ECONNREFUSED/).length).toBeGreaterThan(0);
+		await expect(
+			canvas.queryByText(/many providers require an app password/),
+		).toBeNull();
+	},
+};
+
+export const SyncProgress: Story = {
+	parameters: handlers({
+		sync: {
+			syncPhase: "syncing_inbox",
+			mailboxCountTotal: 6,
+			mailboxCountSynced: 0,
+			mailboxes: [
+				{
+					mailboxId: "mbx-new-inbox",
+					fullPath: "INBOX",
+					phase: "syncing",
+					messagesTotal: 800,
+					messagesSynced: 120,
+					highWaterMarkUid: 0,
+				},
+			],
+		},
+	}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText("120 / 800 messages", undefined, {
+				timeout: 4000,
+			}),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Go to inbox" }),
+		).toBeEnabled();
+	},
+};
+
+const waitingForMail = handlers({
+	sync: { syncPhase: "discovering_mailboxes", mailboxes: [] },
+});
+
+export const SyncWaitingForFirstMail: Story = {
+	parameters: waitingForMail,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByRole(
+				"button",
+				{ name: "Getting your mail…" },
+				{ timeout: 4000 },
+			),
+		).toBeDisabled();
+	},
+};
+
+export const SyncWaitingForFirstMailPhone: Story = {
+	globals: phone,
+	parameters: waitingForMail,
+	play: SyncWaitingForFirstMail.play,
+};
+
+export const SyncCreateError: Story = {
+	parameters: handlers({ createFails: true }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText("Couldn't create account", undefined, {
+				timeout: 4000,
+			}),
+		).toBeVisible();
+		await expect(canvas.getByRole("button", { name: "Retry" })).toBeVisible();
+	},
+};
+
+export const SyncStalled: Story = {
+	parameters: handlers(
+		{ sync: { syncPhase: "error", mailboxes: [] } },
+		mailWorld({
+			accounts: [
+				makeAccount({
+					accountId: NEW_ACCOUNT_ID,
+					email: EMAIL,
+					lastError: "IMAP IDLE dropped: connection reset by peer",
+				}),
+			],
+			threads: [],
+			outbox: [],
+		}),
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText(/Sync stalled/, undefined, { timeout: 4000 }),
+		).toBeVisible();
+		await waitFor(() =>
+			expect(
+				canvas.getByText("IMAP IDLE dropped: connection reset by peer"),
+			).toBeVisible(),
+		);
+	},
+};