@remit/web-client 0.0.299 → 0.0.301

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.299",
+  "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/mail/MailSidebarAdapter.tsx

@@ -12,6 +12,7 @@ import { NavSidebar } from "@remit/ui";
 import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { folderFailure } from "@/lib/folder-failure";
 import {
 	buildMailboxRoleMap,
 	labelForMailbox,
@@ -103,6 +104,7 @@ function toNavMailbox(
 		unseen: showBadge ? mb.unseenCount : undefined,
 		role,
 		fullPath: mb.fullPath,
+		failure: folderFailure(mb),
 	};
 }