Skip to content

Unify password and PIN login into a single login scene#295

Open
j0ntz wants to merge 2 commits into
masterfrom
jon/login-redesign
Open

Unify password and PIN login into a single login scene#295
j0ntz wants to merge 2 commits into
masterfrom
jon/login-redesign

Conversation

@j0ntz

@j0ntz j0ntz commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

  • Yes
  • No

Dependencies

none

Description

Merges the two separate login scenes (PasswordLoginScene and PinLoginScene) into a single unified LoginScene that switches between a password flavor and a PIN/biometric flavor in place, per the redesign proposals.

Asana: https://app.asana.com/0/1215088146871429/1215939017452141

What changed:

  • New unified LoginScene replaces both old scenes. The passwordLogin and pinLogin routes collapse into one login route, and all internal callsites (initial-route logic, landing, OTP error, recovery, change-PIN, new-account) are rewired to it. The LoginScreen public API and initialRoute values stay backward compatible, so no edge-react-gui change is required.
  • Layout uses Option A ordering: the logo sits above the pill toggle, and the toggle copy is "Password" | "Pin/Biometric".
  • The username row is a dropdown box when multiple accounts exist (both flavors) and a plain, non-tappable label when only one account is on the device.
  • Selecting an account without PIN enabled while on the PIN flavor auto-switches to the password flavor with that account selected and shows the toast "PIN login is not enabled for this account, enter your password". On the password flavor, the Pin/Biometric pill is greyed out when the selected account has no PIN, and tapping it shows the same toast.
  • The QR-code button and the forgot-password link are folded into an Option C "Trouble Signing in?" help sheet that offers QR-code login and password recovery via recovery token.

Testing:

Built edge-react-gui with this branch linked via updot and drove the login UI on the iOS simulator (YOLO auto-login disabled so the scene renders):

  • PIN flavor renders with the toggle, username dropdown, 4-digit display and keypad; entering the edge-funds PIN logs in to the home screen.
  • Tapping the Password pill switches to the password flavor (username dropdown, password field, Login / Create account).
  • The "Trouble Signing in?" link opens the Login Help sheet with the QR-code and recovery-token options.

Proof screenshots attached below.


Note

Medium Risk
Large refactor of the primary login surface (password, PIN, biometrics, recovery, QR) with new in-scene state; core login APIs are reused but navigation and UX paths changed widely enough to warrant thorough regression testing.

Overview
Replaces PasswordLoginScene and PinLoginScene with one login route and a new LoginScene that switches between password and PIN/biometric flows in place via LoginFlavorToggle, instead of navigating between separate screens.

Routing and entry: LoginInitActions, landing, OTP error, recovery, new-account PIN back, and related paths now navigate to login with loginId, username, and optional passwordOnly (for forced password entry). The router drops the old scene cases; LoginParamList is updated accordingly.

Unified UX: In-scene account picking uses an animated username dropdown (password and multi-account PIN). PIN-capable vs password-only accounts drive auto flavor selection, greyed PIN tab, and toasts when PIN is unavailable. Forgot-password and QR login move from inline controls to LoginHelpModal behind "Trouble Signing in?"

Theming: Dark theme adds loginToggleBackground / loginToggleSelected and adjusts filled text-input colors to align with edge-react-gui.

Reviewed by Cursor Bugbot for commit 7cfe75b. Bugbot is set up for automated code reviews on this repo. Configure here.

@j0ntz

j0ntz commented Jun 23, 2026

Copy link
Copy Markdown
Contributor Author

📸 Test evidence (iOS sim)

agent proof 1215939017452141 01 login pin flavor

agent proof 1215939017452141 01 login pin flavor

agent proof 1215939017452141 02 login password flavor

agent proof 1215939017452141 02 login password flavor

agent proof 1215939017452141 03 login help modal

agent proof 1215939017452141 03 login help modal

agent proof 1215939017452141 04 login success home

agent proof 1215939017452141 04 login success home

Captured by the agent's in-app test run (build-and-test).

Comment thread src/components/scenes/LoginScene.tsx
Comment thread src/components/scenes/LoginScene.tsx Outdated
@j0ntz j0ntz force-pushed the jon/login-redesign branch from 6c42a97 to ca37b78 Compare June 23, 2026 00:08
Comment thread src/components/scenes/LoginScene.tsx
@j0ntz j0ntz force-pushed the jon/login-redesign branch from ca37b78 to e4c5429 Compare June 23, 2026 00:15
Comment thread src/components/scenes/LoginScene.tsx
Comment thread src/components/scenes/LoginScene.tsx
@j0ntz j0ntz force-pushed the jon/login-redesign branch from e4c5429 to e31ecde Compare June 23, 2026 00:25
New reusable pieces for the unified login scene: a two-segment pill toggle
that switches between the password and PIN/biometric flavors, and the
"Trouble Signing in?" help modal that folds QR-code login and password
recovery into one sheet.
@j0ntz j0ntz force-pushed the jon/login-redesign branch from e31ecde to 1dda260 Compare June 23, 2026 01:52
@j0ntz

j0ntz commented Jun 23, 2026

Copy link
Copy Markdown
Contributor Author

📸 Test evidence — design feedback (grey toggle, grey FilledTextInput inputs, no blue)

agent proof 1215939017452141 01 login pin flavor

agent proof 1215939017452141 01 login pin flavor

agent proof 1215939017452141 02 login password flavor

agent proof 1215939017452141 02 login password flavor

agent proof 1215939017452141 03 login success home

agent proof 1215939017452141 03 login success home

Captured by the agent's in-app test run (build-and-test).

Comment thread src/components/scenes/LoginScene.tsx Outdated
Comment thread src/components/scenes/LoginScene.tsx
@j0ntz j0ntz force-pushed the jon/login-redesign branch from 1dda260 to 7480838 Compare June 23, 2026 01:58
Comment thread src/components/scenes/LoginScene.tsx
@j0ntz j0ntz force-pushed the jon/login-redesign branch from 7480838 to b28a8f7 Compare June 23, 2026 02:04
Comment thread src/components/scenes/LoginScene.tsx
Comment thread src/components/scenes/LoginScene.tsx Outdated
@j0ntz j0ntz force-pushed the jon/login-redesign branch 2 times, most recently from fbac915 to 5713096 Compare June 23, 2026 18:57

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 5713096. Configure here.

Comment thread src/components/scenes/LoginScene.tsx
Replace the two distinct login scenes with one LoginScene that toggles
between a password and a PIN/biometric flavor in place. Logo sits above the
pill toggle ("Password" | "Pin/Biometric"); the username row is a dropdown
when multiple accounts exist and a plain, non-tappable label for a single
account. Selecting a non-PIN account from the PIN flavor auto-switches to the
password flavor with a toast, and the PIN pill is greyed when the selected
account has no PIN. The QR button and forgot-password link are folded into the
"Trouble Signing in?" help sheet. Collapses the passwordLogin/pinLogin routes
into a single login route and rewires all internal callsites.
@j0ntz j0ntz force-pushed the jon/login-redesign branch from 5713096 to 7cfe75b Compare June 23, 2026 19:05
j0ntz added a commit to EdgeApp/edge-react-gui that referenced this pull request Jun 23, 2026
Draft integration only: pin edge-login-ui-rn to a local prebuilt tarball of
the jon/login-redesign branch (EdgeApp/edge-login-ui-rn#295) so CI and a feta
cheese build exercise the unified login scene before the dep is published. Not
for merge.
@j0ntz

j0ntz commented Jun 23, 2026

Copy link
Copy Markdown
Contributor Author

📸 Test evidence: 1rem logo gap fix + PIN login (this followup)

logo gap before too tight

logo gap before too tight

logo gap after 1rem

logo gap after 1rem

pin login success home

pin login success home

Captured by the agent's in-app test run (build-and-test).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant