@remit/web-client 0.0.292 → 0.0.293

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.292",
+  "version": "0.0.293",
   "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": {

package/src/components/onboarding/OnboardingWizard.flow.test.ts

@@ -169,6 +169,51 @@ describe("OnboardingWizard — the first-run path", () => {
 		assert.equal(imapHostField(dom).value, "imap.fastmail.com");
 	});
 
+	it("picks the Gmail preset from a Gmail address and locks both hosts", async () => {
+		const dom = start();
+		await walkToServers(dom, "alice@gmail.com");
+
+		const provider = dom.query<HTMLSelectElement>("#provider-select");
+		assert.ok(provider);
+		assert.equal(provider.value, "gmail");
+		const imap = imapHostField(dom);
+		const smtp = dom.query<HTMLInputElement>(
+			'input[placeholder="smtp.example.com"]',
+		);
+		assert.ok(smtp, "expected the SMTP host field");
+		assert.equal(imap.value, "imap.gmail.com");
+		assert.equal(smtp.value, "smtp.gmail.com");
+		assert.equal(imap.readOnly, true);
+		assert.equal(smtp.readOnly, true);
+		const security = [
+			...dom.document.querySelectorAll<HTMLSelectElement>("fieldset select"),
+		];
+		assert.deepEqual(
+			security.map((select) => [select.value, select.disabled]),
+			[
+				["tls", true],
+				["starttls", true],
+			],
+		);
+		assert.match(dom.text(), /2-Step Verification/);
+		assert.match(dom.text(), /create an app password/);
+		const link = dom.byText("a", "Get an app password");
+		assert.equal(
+			link.getAttribute("href"),
+			"https://support.google.com/accounts/answer/185833",
+		);
+	});
+
+	it("offers no Gmail sign-in on the connector step", () => {
+		const dom = start();
+		clickText(dom, "Add your first account");
+		assert.match(dom.text(), /How does this account connect/);
+		assert.doesNotMatch(
+			dom.text(),
+			/Gmail|Sign in with Google|No app passwords/,
+		);
+	});
+
 	it("falls back to a guess for a domain nobody has heard of", async () => {
 		const dom = start();
 		await walkToServers(dom, "alice@unheard-of.example");

package/src/components/onboarding/OnboardingWizard.tsx

@@ -257,7 +257,7 @@ function StepConnector({
 				</>
 			}
 		>
-			<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+			<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
 				<ConnectorTile
 					name="IMAP / SMTP"
 					description="Any mail provider — Fastmail, iCloud, your own server."
@@ -265,12 +265,6 @@ function StepConnector({
 					selected={selected === "imap"}
 					onSelect={() => setSelected("imap")}
 				/>
-				<ConnectorTile
-					name="Gmail"
-					description="Sign in with Google. No app passwords."
-					icon={<AtSign className="size-5" />}
-					comingSoon
-				/>
 				<ConnectorTile
 					name="Outlook / Microsoft 365"
 					description="Sign in with Microsoft. Works with Outlook.com and work accounts."
@@ -588,7 +582,7 @@ function StepAddress({
 	);
 }
 
-function StepServers({
+export function StepServers({
 	email,
 	imapConfig,
 	smtpConfig,

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { getPresetById } from "@/lib/provider-presets";
+import { StepServers } from "./OnboardingWizard";
+
+const gmail = getPresetById("gmail");
+if (!gmail) throw new Error("the gmail preset is missing");
+
+const meta: Meta<typeof StepServers> = {
+	title: "Playground/Shipped/Onboarding/Servers",
+	component: StepServers,
+	parameters: { layout: "fullscreen" },
+	args: {
+		email: "alice@gmail.com",
+		imapConfig: gmail.imap,
+		smtpConfig: gmail.smtp,
+		discovered: true,
+		onContinue: () => {},
+		onBack: () => {},
+		onChange: () => {},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof StepServers>;
+
+export const GmailPreset: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByLabelText("Provider")).toHaveValue("gmail");
+		await expect(canvas.getByDisplayValue("imap.gmail.com")).toHaveAttribute(
+			"readonly",
+		);
+		await expect(canvas.getByDisplayValue("smtp.gmail.com")).toHaveAttribute(
+			"readonly",
+		);
+		for (const security of canvas.getAllByLabelText("Security")) {
+			await expect(security).toBeDisabled();
+		}
+		await expect(canvas.getByText(/2-Step Verification/)).toBeVisible();
+		await expect(
+			canvas.getByRole("link", { name: "Get an app password" }),
+		).toHaveAttribute("href", gmail.passwordHelp.url);
+	},
+};
+
+export const GmailPresetPhone: Story = {
+	globals: { viewport: { value: "mobile" } },
+};

package/src/lib/provider-presets.test.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import { APP_PASSWORD_URLS, discoverSettings } from "./autodiscovery.js";
 import {
 	getPresetById,
 	PROVIDER_PRESETS,
@@ -29,12 +30,16 @@ const EXPECTED: Record<string, ExpectedSettings> = {
 		imap: { host: "imap.fastmail.com", port: 993, security: "tls" },
 		smtp: { host: "smtp.fastmail.com", port: 465, security: "tls" },
 	},
+	gmail: {
+		imap: { host: "imap.gmail.com", port: 993, security: "tls" },
+		smtp: { host: "smtp.gmail.com", port: 587, security: "starttls" },
+	},
 };
 
 describe("provider presets", () => {
-	it("exposes exactly the four documented providers", () => {
+	it("exposes exactly the five documented providers", () => {
 		const ids = PROVIDER_PRESETS.map((p) => p.id).sort();
-		assert.deepEqual(ids, ["aol", "fastmail", "icloud", "yahoo"]);
+		assert.deepEqual(ids, ["aol", "fastmail", "gmail", "icloud", "yahoo"]);
 	});
 
 	for (const preset of PROVIDER_PRESETS) {
@@ -71,6 +76,18 @@ describe("provider presets", () => {
 		assert.equal(preset.label, "iCloud");
 	});
 
+	it("tells a Gmail user to turn on 2-Step Verification before creating an app password", () => {
+		const gmail = getPresetById("gmail");
+		assert.ok(gmail);
+		const { text, url } = gmail.passwordHelp;
+		const twoStep = text.search(/2-Step Verification/);
+		const appPassword = text.search(/create an app password/i);
+		assert.ok(twoStep >= 0, "names 2-Step Verification");
+		assert.ok(appPassword > twoStep, "2-Step Verification comes first");
+		assert.equal(url, APP_PASSWORD_URLS["gmail.com"]);
+		assert.equal(url, APP_PASSWORD_URLS["googlemail.com"]);
+	});
+
 	it("returns undefined for an unknown id", () => {
 		assert.equal(getPresetById("custom"), undefined);
 	});
@@ -82,6 +99,20 @@ describe("provider presets", () => {
 			assert.equal(presetIdForEmail("carol@yahoo.com"), "yahoo");
 			assert.equal(presetIdForEmail("dave@aol.com"), "aol");
 			assert.equal(presetIdForEmail("erin@fastmail.com"), "fastmail");
+			assert.equal(presetIdForEmail("frank@gmail.com"), "gmail");
+			assert.equal(presetIdForEmail("grace@googlemail.com"), "gmail");
+		});
+
+		it("resolves a Gmail address to the preset its server lookup agrees with", async () => {
+			for (const email of ["user@gmail.com", "User@GoogleMail.com"]) {
+				const preset = getPresetById(presetIdForEmail(email));
+				assert.ok(preset, email);
+				assert.equal(preset.id, "gmail");
+				const discovered = await discoverSettings(email);
+				assert.ok(discovered, email);
+				assert.deepEqual(preset.imap, discovered.imap);
+				assert.deepEqual(preset.smtp, discovered.smtp);
+			}
 		});
 
 		it("is case-insensitive on the domain", () => {

package/src/lib/provider-presets.ts

@@ -1,4 +1,4 @@
-import type { ServerSettings } from "./autodiscovery.js";
+import { APP_PASSWORD_URLS, type ServerSettings } from "./autodiscovery.js";
 
 export interface ProviderPreset {
 	id: string;
@@ -54,6 +54,17 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [
 			url: "https://www.fastmail.help/hc/en-us/articles/360058752854",
 		},
 	},
+	{
+		id: "gmail",
+		label: "Gmail",
+		username: "full-email",
+		imap: { host: "imap.gmail.com", port: 993, security: "tls" },
+		smtp: { host: "smtp.gmail.com", port: 587, security: "starttls" },
+		passwordHelp: {
+			text: "Gmail requires an app password, not your Google password. First turn on 2-Step Verification for your Google Account, then create an app password under Security → 2-Step Verification → App passwords.",
+			url: APP_PASSWORD_URLS["gmail.com"],
+		},
+	},
 ];
 
 export function getPresetById(id: string): ProviderPreset | undefined {
@@ -70,6 +81,8 @@ const DOMAIN_TO_PRESET: Record<string, string> = {
 	"aol.com": "aol",
 	"fastmail.com": "fastmail",
 	"fastmail.fm": "fastmail",
+	"gmail.com": "gmail",
+	"googlemail.com": "gmail",
 };
 
 /** Pre-select a provider preset from a known email domain; "" for Custom. */