fix(connect): add back button on password prompt and remember field values#727
fix(connect): add back button on password prompt and remember field values#727
Conversation
📝 WalkthroughWalkthroughThese changes add sessionStorage-based persistence for remote URL and email inputs across the connection flow, allowing users to revisit previously entered values within a session. Additionally, a "use different account" button is introduced across multiple authentication screens, enabling users to reset and abandon the current account path without requiring a page refresh. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
connect/src/components/views/ConnectionOptions.ts (1)
196-202: Consider whether remote URL should be cleared when switching accounts.The
useDifferentAccount()method inRemoteAuthentication.ts(lines 78-84) clearsad4m-connect-emailfrom sessionStorage but does not clearad4m-connect-remote-url. This may be intentional (user stays on the same remote node), but could also cause confusion if a user expects a complete reset.Additionally, per context snippet 1 (
web.ts:127-150), theauthstatechangehandler for'unauthenticated'state doesn't clear these sessionStorage keys, which could leave stale values after token expiration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@connect/src/components/views/ConnectionOptions.ts` around lines 196 - 202, The sessionStorage key "ad4m-connect-remote-url" is left uncleared and can become stale; update RemoteAuthentication.useDifferentAccount() to also remove "ad4m-connect-remote-url" from sessionStorage (in addition to "ad4m-connect-email"), and likewise update the authstatechange handler that processes 'unauthenticated' in web.ts (the authstatechange callback) to clear "ad4m-connect-remote-url" so the value set by ConnectionOptions (newRemoteUrl / sessionStorage.setItem("ad4m-connect-remote-url", ...)) is not retained after switching accounts or when the auth state becomes unauthenticated.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@connect/src/components/views/RemoteAuthentication.ts`:
- Around line 78-84: The method useDifferentAccount currently mutates the child
`@property` remoteAuthState directly; instead dispatch a custom event (e.g.,
"reset-remote-auth") from useDifferentAccount to notify the parent (web.ts) to
set its `@state` remoteAuthState = null, then locally clear password,
emailSecurityCode, email and sessionStorage as you already do; update web.ts to
listen for the "reset-remote-auth" event and set remoteAuthState = null (and
stop relying on the child to mutate the prop).
---
Nitpick comments:
In `@connect/src/components/views/ConnectionOptions.ts`:
- Around line 196-202: The sessionStorage key "ad4m-connect-remote-url" is left
uncleared and can become stale; update
RemoteAuthentication.useDifferentAccount() to also remove
"ad4m-connect-remote-url" from sessionStorage (in addition to
"ad4m-connect-email"), and likewise update the authstatechange handler that
processes 'unauthenticated' in web.ts (the authstatechange callback) to clear
"ad4m-connect-remote-url" so the value set by ConnectionOptions (newRemoteUrl /
sessionStorage.setItem("ad4m-connect-remote-url", ...)) is not retained after
switching accounts or when the auth state becomes unauthenticated.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 295c260e-d78d-4040-ac7c-1ad2820bd154
📒 Files selected for processing (2)
connect/src/components/views/ConnectionOptions.tsconnect/src/components/views/RemoteAuthentication.ts
| private useDifferentAccount() { | ||
| this.remoteAuthState = null; | ||
| this.password = ""; | ||
| this.emailSecurityCode = ""; | ||
| this.email = ""; | ||
| sessionStorage.removeItem("ad4m-connect-email"); | ||
| } |
There was a problem hiding this comment.
Property mutation bypasses parent state management.
remoteAuthState is a @property passed from the parent component (web.ts, which owns it as @state). Directly setting this.remoteAuthState = null mutates the child's local property reference but does not update the parent's state, potentially causing state desynchronization.
Consider dispatching an event to the parent to reset remoteAuthState instead:
🛠️ Proposed fix
private useDifferentAccount() {
- this.remoteAuthState = null;
+ this.dispatchEvent(new CustomEvent("reset-auth-state", { bubbles: true, composed: true }));
this.password = "";
this.emailSecurityCode = "";
this.email = "";
sessionStorage.removeItem("ad4m-connect-email");
}Then handle the event in the parent (web.ts) to set remoteAuthState = null.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@connect/src/components/views/RemoteAuthentication.ts` around lines 78 - 84,
The method useDifferentAccount currently mutates the child `@property`
remoteAuthState directly; instead dispatch a custom event (e.g.,
"reset-remote-auth") from useDifferentAccount to notify the parent (web.ts) to
set its `@state` remoteAuthState = null, then locally clear password,
emailSecurityCode, email and sessionStorage as you already do; update web.ts to
listen for the "reset-remote-auth" event and set remoteAuthState = null (and
stop relying on the child to mutate the prop).
1 participant
Summary
Fixes two UX issues in the multi-user login flow:
Back button on password prompt (#724)
When logging in via the multi-user flow, entering the wrong email moved to the password prompt with no way to go back. Added a "Use Different Account" button that resets
remoteAuthState, clears password/code/email fields, and returns to the email input step. Also appears on the account creation screen.Remember field values (#726)
Remote URL and email fields now persist to
sessionStorageduring the session:ad4m-connect-remote-url— restored when returning to connection optionsad4m-connect-email— restored when returning to the email input stepsessionStorageclears when the tab closes — no credential persistence across sessionsFiles changed
connect/src/components/views/RemoteAuthentication.ts— back button + email persistenceconnect/src/components/views/ConnectionOptions.ts— remote URL persistenceCloses #724, Closes #726
Summary by CodeRabbit
Release Notes