flagon-io/g1t

public

Confirm page: its own frame, and the result shown after the code works

Seen in a browser against local identity and site: /confirm-email drew the app's sidebar for an account with nothing to show in it (it is now in the marketing frame, like /verify), and a right code left the button spinning, because the page's loader redirected away once the account was confirmed. The loader now answers "confirmed" instead, so the page shows what confirming did (the workspace joined, or why the invite lapsed) with Continue.

syntaqxcommitted 3d agoParent6db9fe3Browse files

25	25		});
26	26
27	27		test("a visitor gets the marketing frame on the front, pricing and sign-in pages", () => {
28		−	for (const path of ["/", "/pricing", "/pricing/", "/login", "/register", "/verify", "/forgot", "/reset", "/device", "/oauth/authorize"]) {
	28	+	for (const path of ["/", "/pricing", "/pricing/", "/login", "/register", "/verify", "/confirm-email", "/forgot", "/reset", "/device", "/oauth/authorize"]) {
29	29		assert.equal(usesAppShell(path, false), false, path);
30	30		}
31	31		});

19	19		"/register",
20	20		"/logout",
21	21		"/verify",
	22	+	"/confirm-email",
22	23		"/forgot",
23	24		"/reset",
24	25		"/device",

1	1		import { CircleCheck, MailCheck } from "lucide-react";
2		−	import { Form, data, redirect } from "react-router";
	2	+	import { Form, data } from "react-router";
3	3
4	4		import { CONFIRM_TTL_SECONDS, tidyConfirmCode } from "@g1t/contracts";
5	5
⋯
27	27		export async function loader({ request, context }: Route.LoaderArgs) {
28	28		const user = requireUser(context, request);
29	29		const next = safeNext(new URL(request.url).searchParams.get("next"));
30		−	if (user.verified) throw redirect(next);
	30	+	// Confirmed already: from a bookmark, or the page loading again right
	31	+	// after the code worked, when it shows what that did.
	32	+	if (user.verified) return { username: user.username, address: null, next, verified: true };
31	33		const emails = await accounts.listEmails(user);
32	34		const list = emails.ok ? emails.value.emails : [];
33	35		// The address the code went to: the primary, or (when another account
34	36		// confirmed that first) the oldest address still to confirm.
35	37		const address = (list.find((email) => email.primary && !email.verified) ?? list.find((email) => !email.verified))?.email ?? null;
36		−	return { username: user.username, address, next };
	38	+	return { username: user.username, address, next, verified: false };
37	39		}
38	40
39	41		export async function action({ request, context }: Route.ActionArgs) {
⋯
78	80		\| undefined;
79	81		const errorFor = (intent: string) => (said?.intent === intent ? (said.error ?? null) : null);
80	82
81		−	if (said?.confirmed) {
	83	+	if (said?.confirmed \|\| loaderData.verified) {
82	84		return (
83	85		<main className="mx-auto flex max-w-sm flex-col px-4 pt-20 pb-10">
84	86		<CircleCheck size={36} className="text-success" aria-hidden="true" />
85	87		<h1 className="mt-6 text-2xl font-semibold tracking-tight">Email confirmed</h1>
86		−	<p className={`mt-2 text-sm leading-6 ${said.lapsed ? "text-fg" : "text-muted"}`} role="status">
87		−	{said.line}
	88	+	<p className={`mt-2 text-sm leading-6 ${said?.lapsed ? "text-fg" : "text-muted"}`} role="status">
	89	+	{said?.line ?? "Your email address is confirmed."}
88	90		</p>
89	91		<div className="mt-8 *:w-full">
90		−	<ButtonLink to={said.to ?? "/"}>Continue</ButtonLink>
	92	+	<ButtonLink to={said?.to ?? loaderData.next}>Continue</ButtonLink>
91	93		</div>
92	94		</main>
93	95		);