harden auth account and locale mutation UX by dnywh · Pull Request #62 · dnywh/peels

dnywh · 2026-04-24T02:32:38Z

Summary

extract SignUpForm Turnstile orchestration into a focused hook and align sign-up busy/error feedback
return typed InlineActionResult data from display locale mutations and make LocalePicker pending/error behaviour explicit
tighten profile account editor feedback, destructive dialog focus, and shared form feedback announcements
expand production e2e coverage for sign-up validation, locale changes, profile email errors, and destructive-dialog focus

Validation

npm run typecheck
npm run check
npm run build
CI=1 npm run test:e2e:prod

Notes

no public API, database schema, or Supabase migration changes
homepage hydration and broader use-client/TODO sweeps remain out of scope

vercel · 2026-04-24T02:32:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
peels	Ready	Preview, Comment	Apr 24, 2026 3:28am

supabase · 2026-04-24T02:32:45Z

This pull request has been ignored for the connected project mfnaqdyunuafbwukbbyr because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

Copilot

Pull request overview

This PR hardens authentication/account and locale-mutation UX by extracting Turnstile orchestration into a dedicated hook, making locale mutations return typed results with clearer pending/error behavior, tightening profile editor feedback and destructive-dialog focus behavior, and expanding production e2e coverage for these flows.

Changes:

Extracted SignUpForm Turnstile token orchestration into useTurnstileToken and aligned busy/error feedback + test ids.
Made display-locale mutations return typed InlineActionResult data and updated LocalePicker to use explicit pending/error state.
Improved profile account editor pending/inline feedback, destructive dialog initial focus behavior, and added/updated Playwright e2e tests.

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/SignUpForm/useTurnstileToken.ts	New hook encapsulating Turnstile token acquisition, timeouts, and error state.
src/components/SignUpForm/SignUpForm.tsx	Integrates the new hook; standardizes busy/disabled state and adds test ids for validation/errors.
src/components/ProfileAccountSettings/ProfileAccountSettings.tsx	Adds explicit `aria-busy`, disables inputs while pending, and adds test ids for inline messages.
src/components/LocalePicker/LocalePicker.tsx	Switches to explicit pending state + optimistic selection with typed action result handling.
src/components/InputHint/InputHint.tsx	Extends props so callers can pass attributes like `data-testid`.
src/components/Input/Input.tsx	Tightens typing by introducing `InputProps` with an `error` prop and omitting `invalid`.
src/components/FormMessage/FormMessage.tsx	Adds `role` and `aria-live` for improved announcement semantics.
src/components/ButtonToDialog/ButtonToDialog.tsx	Ensures danger dialogs focus the cancel action first; adds dialog button test ids.
src/app/actions.ts	Updates `setDisplayLocaleAction` to return typed `InlineActionResult` data with localized errors.
e2e/profile.spec.ts	Adds coverage for email edit inline errors and danger-dialog focus behavior.
e2e/i18n.spec.ts	Improves locale-switch coverage and reduces reliance on arbitrary timeouts.
e2e/auth.spec.ts	Adds sign-up client validation + pending/server-error preservation coverage.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-24T02:36:51Z

+    setIsPending(true);
+
+    try {
+      const formData = new FormData();
+      formData.set("locale", nextLocale);
+      const result = await setDisplayLocaleAction(formData);
+
+      if (!result.success || result.error) {
+        setSelectedLocale(locale);
+        setError(result.error || t("Errors.genericLater"));
+        setIsPending(false);
+        return;
+      }

-          window.location.reload();
-        } catch (error) {
-          console.error("Error updating display locale:", error);
-          setError(t("Errors.genericLater"));
-        }
-      })();
-    });
+      window.location.reload();
+    } catch (error) {


isPending is set to true when a locale change starts, but it is never reset on the success path (the code calls window.location.reload() and returns). If reload() is blocked or fails to navigate (e.g. in embedded contexts/tests), the select stays disabled and aria-busy remains true indefinitely. Consider resetting isPending in a finally block, or explicitly calling setIsPending(false) after the reload call (or before it, if you prefer not to re-enable the UI).

Copilot · 2026-04-24T02:36:51Z

+    setError(null);
+  }, []);
+
+  useEffect(() => clearTokenPromise, [clearTokenPromise]);


On unmount, the effect cleanup calls clearTokenPromise(), which nulls the stored resolvers/rejecters and clears the timeout, but it does not reject any in-flight waitForToken() promise. If a caller is awaiting requestToken() and the component unmounts (e.g. user navigates away mid-verification), that await can remain pending indefinitely. Consider rejecting any outstanding token promise during cleanup (and optionally clearing isWaitingForToken) so callers always settle.

Suggested change

useEffect(() => clearTokenPromise, [clearTokenPromise]);

useEffect(

() => () => {

rejectTokenPromise(

new Error("Turnstile token request was cancelled because the component unmounted.")

);

},

[rejectTokenPromise]

);

Copilot

Pull request overview

Copilot reviewed 12 out of 14 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-24T03:11:16Z

+        setIsWaitingForToken(false);
+        setError(errorMessage);


The timeout callback in scheduleTokenTimeout calls setIsWaitingForToken/setError unconditionally. If the component unmounts right as the timer fires, this can still attempt a state update after unmount (cleanup clears the timer, but it can’t stop a callback already executing). Guard the timer callback with isMountedRef.current (or move these state updates behind the existing mount check pattern used in requestToken).

Suggested change

setIsWaitingForToken(false);

setError(errorMessage);

if (isMountedRef.current) {

setIsWaitingForToken(false);

setError(errorMessage);

}

Copilot · 2026-04-24T03:11:16Z

+  const waitForToken = useCallback(
+    (timeout = BACKGROUND_TOKEN_TIMEOUT) =>
+      new Promise<string>((resolve, reject) => {
+        tokenResolverRef.current = resolve;
+        tokenRejecterRef.current = reject;
+        scheduleTokenTimeout(timeout);
+      }),


waitForToken overwrites tokenResolverRef/tokenRejecterRef without cancelling any in-flight token request. If requestToken is triggered twice before the first resolves (e.g. double-submit before the disabled state re-renders), the first promise can be left pending forever. Consider rejecting/clearing any existing promise before starting a new waitForToken (or internally track a request id and ignore stale callbacks).

Copilot · 2026-04-24T03:11:17Z

+    setIsWaitingForToken(true);
+    turnstileRef.current?.reset();
+
+    try {
+      const tokenPromise = waitForToken(BACKGROUND_TOKEN_TIMEOUT);
+      turnstileRef.current?.execute();


When enabled is true but turnstileRef.current is still null (e.g. user submits before the Turnstile component mounts), requestToken will wait for a token that can never arrive and eventually show a timeout. Consider failing fast if the instance isn’t available (set an error + return/throw) instead of executing a timeout-based wait.

Suggested change

setIsWaitingForToken(true);

turnstileRef.current?.reset();

try {

const tokenPromise = waitForToken(BACKGROUND_TOKEN_TIMEOUT);

turnstileRef.current?.execute();

const turnstile = turnstileRef.current;

if (!turnstile) {

const errorMessage = "Verification is not ready yet. Please try again.";

if (isMountedRef.current) {

setError(errorMessage);

setIsWaitingForToken(false);

setIsInteractive(false);

}

throw new Error(errorMessage);

}

setIsWaitingForToken(true);

turnstile.reset();

try {

const tokenPromise = waitForToken(BACKGROUND_TOKEN_TIMEOUT);

turnstile.execute();

Copilot

Pull request overview

Copilot reviewed 17 out of 19 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-24T03:26:13Z

+const languageLabels: Record<string, string> = {
+  de: "Deutsch",
+  en: "English",
+  es: "Español",
+  fr: "Français",
+  "pt-BR": "Português (Brasil)",
+};


languageLabels duplicates the app’s localeLabels mapping (src/i18n/config.ts) and is typed as Record<string, string>, so it’s easy for test expectations to drift if labels/locales change. Consider importing and reusing localeLabels (and/or the Locale type) so the test stays in sync with the source of truth and gets compile-time checking for locale keys.

dnywh added 2 commits April 24, 2026 12:24

harden auth account locale mutations

e3ce03b

announce form feedback

7276f3c

dnywh requested a review from Copilot April 24, 2026 02:32

Copilot started reviewing on behalf of dnywh April 24, 2026 02:33 View session

vercel Bot deployed to Preview April 24, 2026 02:33 View deployment

ignore swc plugin cache

b016c68

vercel Bot deployed to Preview April 24, 2026 02:35 View deployment

Copilot AI reviewed Apr 24, 2026

View reviewed changes

settle mutation cleanup states

746c3eb

vercel Bot deployed to Preview April 24, 2026 02:39 View deployment

dnywh requested a review from Copilot April 24, 2026 03:07

Copilot started reviewing on behalf of dnywh April 24, 2026 03:07 View session

Copilot AI reviewed Apr 24, 2026

View reviewed changes

harden turnstile token cleanup

daf35f0

vercel Bot deployed to Preview April 24, 2026 03:19 View deployment

dnywh requested a review from Copilot April 24, 2026 03:22

Copilot started reviewing on behalf of dnywh April 24, 2026 03:22 View session

Copilot AI reviewed Apr 24, 2026

View reviewed changes

reuse locale labels in e2e

aac7615

vercel Bot deployed to Preview April 24, 2026 03:28 View deployment

dnywh merged commit 4bf9b29 into main Apr 24, 2026
6 checks passed

dnywh deleted the dnywh/auth-account-locale-hardening branch April 24, 2026 03:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

harden auth account and locale mutation UX#62

harden auth account and locale mutation UX#62
dnywh merged 6 commits into
mainfrom
dnywh/auth-account-locale-hardening

dnywh commented Apr 24, 2026

Uh oh!

vercel Bot commented Apr 24, 2026 •

edited

Loading

Uh oh!

supabase Bot commented Apr 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  useEffect(() => clearTokenPromise, [clearTokenPromise]);
+  useEffect(
+    () => () => {
+      rejectTokenPromise(
+        new Error("Turnstile token request was cancelled because the component unmounted.")
+      );
+    },
+    [rejectTokenPromise]
+  );

Conversation

dnywh commented Apr 24, 2026

Summary

Validation

Notes

Uh oh!

vercel Bot commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

supabase Bot commented Apr 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Apr 24, 2026 •

edited

Loading