From 66c6e1233f92a83ffdfad25c899e561c1f6ad475 Mon Sep 17 00:00:00 2001
From: YCC3741 <mo0307b1006@gmail.com>
Date: Tue, 21 Apr 2026 07:53:44 +0800
Subject: [PATCH 1/2] fix(login-region): remove duplicate onMounted redirect
 that broke ?pick escape hatch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LoginRegionSelection.vue had two competing auto-redirect mechanisms:

1. `onMounted` (legacy): if `loginRegion` was saved, immediately
   `router.replace('/login/id-pass')`. Did NOT check `route.query.pick`,
   did NOT consult `loginMethod` (always landed on id-pass).
2. `watch(() => config.loaded, ..., { immediate: true })` added by
   commit 24a07af: same redirect intent, but correctly honours the
   `?pick=1` escape hatch and routes to `/login/qr` when
   `loginMethod === '1'` on TW.

Because `onMounted` ran synchronously before the watcher's config-loaded
trigger, every back-button navigation from a login form (which appends
`?pick=1` per 24a07af's design) got bounced straight back to id-pass —
the picker became unreachable after first launch, and QR-mode users
were silently downgraded to id-pass on every return trip.

This looks like a leftover from cherry-picking 24a07af in PR #230: the
new watcher was added but the old `onMounted` was never removed.

Drop the `onMounted` block (and its now-unused import). The watcher
with `immediate: true` already covers first-mount, and its logic is
strictly a superset of the deleted block.

Add regression tests covering all five branches of the redirect
decision so the duplication can't silently come back:
- saved TW + default loginMethod → /login/id-pass
- saved TW + loginMethod=1       → /login/qr
- saved HK + loginMethod=1       → /login/id-pass (HK has no QR)
- saved region + ?pick=1         → stays on picker
- no saved region                → stays on picker
---
 src/pages/LoginRegionSelection.vue            | 12 +--
 tests/unit/pages/LoginRegionSelection.spec.ts | 94 ++++++++++++++++++-
 2 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/src/pages/LoginRegionSelection.vue b/src/pages/LoginRegionSelection.vue
index f7381ad..800b7f0 100644
--- a/src/pages/LoginRegionSelection.vue
+++ b/src/pages/LoginRegionSelection.vue
@@ -31,7 +31,7 @@
  * picker without triggering the redirect again.
  */
 
-import { computed, onMounted, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useConfigStore } from '../stores/config'
@@ -44,16 +44,6 @@ const route = useRoute()
 const router = useRouter()
 const config = useConfigStore()
 
-/**
- * Skip the region picker if a region is already saved — go
- * straight to the login form. First-launch users see the picker.
- */
-onMounted(() => {
-  if (config.get('loginRegion')) {
-    void router.replace('/login/id-pass')
-  }
-})
-
 /**
  * Tile descriptors. Kept declarative so the template stays a flat
  * `v-for` rather than two near-duplicate `<button>` blocks (DRY).
diff --git a/tests/unit/pages/LoginRegionSelection.spec.ts b/tests/unit/pages/LoginRegionSelection.spec.ts
index 0a26689..065d6b7 100644
--- a/tests/unit/pages/LoginRegionSelection.spec.ts
+++ b/tests/unit/pages/LoginRegionSelection.spec.ts
@@ -23,6 +23,7 @@ import { defineComponent, h, nextTick } from 'vue'
 import type { I18n } from 'vue-i18n'
 
 import type { CommandError, Result } from '../../../src/types/bindings'
+import { useConfigStore } from '../../../src/stores/config'
 
 vi.mock('element-plus', () => ({
   ElIcon: defineComponent({
@@ -51,6 +52,7 @@ import LoginRegionSelection from '../../../src/pages/LoginRegionSelection.vue'
 import { createAppI18n, i18nMessages, setLocale } from '../../../src/i18n'
 
 const mockSetConfig = vi.mocked(commands.setConfig)
+const mockGetAllConfig = vi.mocked(commands.getAllConfig)
 
 const ok = <T>(data: T): Promise<Result<T, CommandError>> => Promise.resolve({ status: 'ok', data })
 
@@ -60,7 +62,7 @@ const ok = <T>(data: T): Promise<Result<T, CommandError>> => Promise.resolve({ s
  * `router.push` resolves cleanly. Mirrors the test layout we'll reuse
  * in D3-D8 to verify each form's nav target.
  */
-function mountPicker(): {
+function mountPicker(opts: { initialPath?: string } = {}): {
   router: Router
   i18n: I18n
   mountIt: () => Promise<ReturnType<typeof mount>>
@@ -81,6 +83,14 @@ function mountPicker(): {
           render: () => h('div', { 'data-testid': 'id-pass-stub' }),
         }),
       },
+      {
+        path: '/login/qr',
+        name: 'login-qr',
+        component: defineComponent({
+          name: 'QrStub',
+          render: () => h('div', { 'data-testid': 'qr-stub' }),
+        }),
+      },
     ],
   })
 
@@ -90,7 +100,7 @@ function mountPicker(): {
     router,
     i18n,
     async mountIt() {
-      await router.push('/login/region')
+      await router.push(opts.initialPath ?? '/login/region')
       await router.isReady()
       return mount(LoginRegionSelection, {
         global: { plugins: [router, i18n] },
@@ -104,6 +114,8 @@ describe('LoginRegionSelection', () => {
     setActivePinia(createPinia())
     mockSetConfig.mockReset()
     mockSetConfig.mockReturnValue(ok(null))
+    mockGetAllConfig.mockReset()
+    mockGetAllConfig.mockReturnValue(ok({}))
   })
 
   it('renders both region tiles with their localized labels', async () => {
@@ -172,6 +184,84 @@ describe('LoginRegionSelection', () => {
     expect(ctx.router.currentRoute.value.name).toBe('login-id-pass')
   })
 
+  /*
+   * Auto-redirect (WPF `loginMethodInit` parity, commit `24a07af`).
+   *
+   * Once `Config.xml` is loaded, a saved `loginRegion` should skip
+   * the picker and jump straight to the matching login form. The
+   * `?pick=1` query is the documented escape hatch — login-form back
+   * buttons append it so the user can return to the picker.
+   *
+   * This block locks down the bug fixed in
+   * `fix(login-region): remove duplicate onMounted redirect`: a stray
+   * `onMounted` block was racing the watcher with weaker logic
+   * (no `?pick` check, no `loginMethod` awareness), making the
+   * picker unreachable after first launch.
+   */
+  describe('auto-redirect when Config.xml has saved preferences', () => {
+    it('jumps to /login/id-pass when loginRegion=TW is saved (default loginMethod)', async () => {
+      mockGetAllConfig.mockReturnValue(ok({ loginRegion: 'TW' }))
+      const ctx = mountPicker()
+      const config = useConfigStore()
+      await config.loadAll()
+      const wrapper = await ctx.mountIt()
+      await flushPromises()
+
+      expect(ctx.router.currentRoute.value.path).toBe('/login/id-pass')
+      wrapper.unmount()
+    })
+
+    it('jumps to /login/qr when loginRegion=TW + loginMethod=1 are saved', async () => {
+      mockGetAllConfig.mockReturnValue(ok({ loginRegion: 'TW', loginMethod: '1' }))
+      const ctx = mountPicker()
+      const config = useConfigStore()
+      await config.loadAll()
+      const wrapper = await ctx.mountIt()
+      await flushPromises()
+
+      expect(ctx.router.currentRoute.value.path).toBe('/login/qr')
+      wrapper.unmount()
+    })
+
+    it('falls back to /login/id-pass for HK even when loginMethod=1 (HK has no QR endpoint)', async () => {
+      mockGetAllConfig.mockReturnValue(ok({ loginRegion: 'HK', loginMethod: '1' }))
+      const ctx = mountPicker()
+      const config = useConfigStore()
+      await config.loadAll()
+      const wrapper = await ctx.mountIt()
+      await flushPromises()
+
+      expect(ctx.router.currentRoute.value.path).toBe('/login/id-pass')
+      wrapper.unmount()
+    })
+
+    it('stays on the picker when ?pick=1 is in the route, even with a saved region', async () => {
+      mockGetAllConfig.mockReturnValue(ok({ loginRegion: 'TW' }))
+      const ctx = mountPicker({ initialPath: '/login/region?pick=1' })
+      const config = useConfigStore()
+      await config.loadAll()
+      const wrapper = await ctx.mountIt()
+      await flushPromises()
+
+      expect(ctx.router.currentRoute.value.path).toBe('/login/region')
+      expect(wrapper.findAll('.region-tile')).toHaveLength(2)
+      wrapper.unmount()
+    })
+
+    it('stays on the picker on first launch when no region is saved', async () => {
+      mockGetAllConfig.mockReturnValue(ok({}))
+      const ctx = mountPicker()
+      const config = useConfigStore()
+      await config.loadAll()
+      const wrapper = await ctx.mountIt()
+      await flushPromises()
+
+      expect(ctx.router.currentRoute.value.path).toBe('/login/region')
+      expect(wrapper.findAll('.region-tile')).toHaveLength(2)
+      wrapper.unmount()
+    })
+  })
+
   it('re-renders heading + tile labels after a runtime locale switch', async () => {
     const ctx = mountPicker()
     const wrapper = await ctx.mountIt()

From 51f9609f13e2db5fe64d1d7a173bd1089ce7deef Mon Sep 17 00:00:00 2001
From: YCC3741 <mo0307b1006@gmail.com>
Date: Tue, 21 Apr 2026 08:02:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(qr,gamepass):=20"=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E4=B8=80=E8=88=AC=E7=99=BB=E5=85=A5"=20goes=20back=20to=20id-p?=
 =?UTF-8?q?ass=20form,=20not=20region=20picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

QrForm.vue:goBack and GamepassForm.vue:goBack both pushed
`/login?pick=1`, which sent the user back to the region picker. The
button label is "返回一般登入" / "Back to Regular Login" — "regular
login" means the id-pass form within the same region, not the region
picker.

This was the SPA side of the bug paired with the duplicate
`onMounted` redirect fix earlier in this PR: 24a07af added the
`?pick=1` escape hatch for legitimate "re-pick region" flows, but
the QR / Gamepass back buttons were retrofitted to use the same
mechanism even though their semantics are different (mode switch
within a region, not region re-pick).

WPF parity: `qr_form.xaml.cs::btn_back_Click` flips
`App.LoginMethod = Regular` and re-runs `loginMethodChanged()`, which
lands on the regular id-pass form — never the region picker.

Both forms now `router.push('/login/id-pass')` directly. The
`onMounted` HK pre-flight guards (QrForm:241, GamepassForm:274) keep
their `?pick=1` redirect — that path *is* a region rejection and
correctly belongs at the picker.

Update the two affected specs to:
- register a `/login/id-pass` route stub in the harness routers
- assert the back-button target is `/login/id-pass`
- document the regression in the test name + body
---
 src/pages/GamepassForm.vue            |  7 ++++++-
 src/pages/QrForm.vue                  | 12 ++++++++----
 tests/unit/pages/GamepassForm.spec.ts | 22 +++++++++++++++++++---
 tests/unit/pages/QrForm.spec.ts       | 22 +++++++++++++++++++---
 4 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/pages/GamepassForm.vue b/src/pages/GamepassForm.vue
index 1567279..738cd2e 100644
--- a/src/pages/GamepassForm.vue
+++ b/src/pages/GamepassForm.vue
@@ -312,7 +312,12 @@ async function refresh(): Promise<void> {
 
 async function goBack(): Promise<void> {
   disposed = true
-  await router.push({ path: '/login', query: { pick: '1' } })
+  // "返回一般登入" — go back to the regular id-pass form within the
+  // same saved region, NOT to the region picker. Pushing
+  // `/login?pick=1` would force the user to re-pick TW/HK, which the
+  // button label does not promise. Mirrors WPF's
+  // `LoginMethod = Regular` + `loginMethodChanged()` flow.
+  await router.push('/login/id-pass')
 }
 </script>
 
diff --git a/src/pages/QrForm.vue b/src/pages/QrForm.vue
index 3df6dfc..7677ed4 100644
--- a/src/pages/QrForm.vue
+++ b/src/pages/QrForm.vue
@@ -17,9 +17,13 @@
  *   QR challenge, overwriting any prior `pending_qr` slot (see
  *   `commands/auth.rs::login_qr_start` side-effect docs).
  * - **Back button**: `qr_form.xaml.cs::btn_back_Click` flips
- *   `App.LoginMethod = Regular` and re-runs `loginMethodChanged()`.
- *   We push `/login`; the parent `LoginPage` re-renders
- *   `LoginRegionSelection` at the root child route.
+ *   `App.LoginMethod = Regular` and re-runs `loginMethodChanged()`,
+ *   which lands the user on the regular id-pass form (the QR mode is
+ *   peer to id-pass within the same region, not above region picking).
+ *   We mirror that with `router.push('/login/id-pass')` — staying in
+ *   the saved region, just switching the login mode. We do NOT push
+ *   `/login?pick=1`; the button is "返回一般登入" (back to regular
+ *   login), not "重選區域" (re-pick region).
  *
  * # Polling strategy (Q2 + Q10)
  *
@@ -300,7 +304,7 @@ async function refresh(): Promise<void> {
 async function goBack(): Promise<void> {
   disposed = true
   clearPollTimer()
-  await router.push({ path: '/login', query: { pick: '1' } })
+  await router.push('/login/id-pass')
 }
 
 /**
diff --git a/tests/unit/pages/GamepassForm.spec.ts b/tests/unit/pages/GamepassForm.spec.ts
index 28803af..cdedafb 100644
--- a/tests/unit/pages/GamepassForm.spec.ts
+++ b/tests/unit/pages/GamepassForm.spec.ts
@@ -17,7 +17,9 @@
  *    `connection-lost` banner shows and the steps stay at `0`.
  * 5. Refresh re-issues both commands and clears the banner on
  *    success.
- * 6. Back button navigates to `/login` without further calls.
+ * 6. Back button ("返回一般登入") navigates to `/login/id-pass` (NOT
+ *    `/login?pick=1` — the button switches login mode within the same
+ *    region, it does not re-pick region) without further backend calls.
  * 7. Locale switch re-renders the localized copy.
  *
  * CP4 event-wiring assertions (new):
@@ -231,6 +233,14 @@ function mountForm(opts: { region?: string } = {}) {
     routes: [
       { path: '/login', name: 'login', component: LoginStub },
       { path: '/login/gamepass', name: 'login-gamepass', component: GamepassForm },
+      {
+        path: '/login/id-pass',
+        name: 'login-id-pass',
+        component: defineComponent({
+          name: 'IdPassStub',
+          render: () => h('div', { 'data-testid': 'id-pass-stub' }),
+        }),
+      },
       { path: '/accounts', name: 'accounts', component: AccountsStub },
     ],
   })
@@ -368,7 +378,13 @@ describe('GamepassForm', () => {
     expect(wrapper.find('[data-testid="gamepass-steps"]').attributes('data-active')).toBe('2')
   })
 
-  it('Back button navigates to /login without further backend calls', async () => {
+  it('Back button ("返回一般登入") navigates to /login/id-pass without further backend calls', async () => {
+    /*
+     * Regression for the bug where goBack pushed `/login?pick=1`,
+     * which dumped the user back at the region picker even though
+     * the button label promised "back to regular (id-pass) login".
+     * The correct behaviour is mode-switch within the saved region.
+     */
     const ctx = mountForm()
     const wrapper = await ctx.mountIt()
     await flushPromises()
@@ -379,7 +395,7 @@ describe('GamepassForm', () => {
     await wrapper.find('[data-testid="gamepass-back"]').trigger('click')
     await flushPromises()
 
-    expect(ctx.router.currentRoute.value.path).toBe('/login')
+    expect(ctx.router.currentRoute.value.path).toBe('/login/id-pass')
     expect(mockLoginGamepassStart.mock.calls.length).toBe(startCallsAfterMount)
     expect(mockOpenGamepassWindow.mock.calls.length).toBe(openCallsAfterMount)
   })
diff --git a/tests/unit/pages/QrForm.spec.ts b/tests/unit/pages/QrForm.spec.ts
index 15d11d3..e070c29 100644
--- a/tests/unit/pages/QrForm.spec.ts
+++ b/tests/unit/pages/QrForm.spec.ts
@@ -17,7 +17,9 @@
  * 7. `loginQrCheck` error result stops polling + shows inline
  *    "connection lost" banner (Q11 = B — no toast, inline fallback).
  * 8. Refresh button re-mints the QR.
- * 9. Back button navigates to `/login` and halts the polling loop.
+ * 9. Back button ("返回一般登入") navigates to `/login/id-pass` (NOT
+ *    `/login?pick=1` — the button switches login mode within the same
+ *    region, it does not re-pick region) and halts the polling loop.
  * 10. Copy deeplink success path uses `navigator.clipboard.writeText`
  *     + success toast.
  * 11. Copy deeplink button is disabled when the server returns no
@@ -179,6 +181,14 @@ function mountForm(opts: { region?: string } = {}) {
     routes: [
       { path: '/login', name: 'login', component: LoginStub },
       { path: '/login/qr', name: 'login-qr', component: QrForm },
+      {
+        path: '/login/id-pass',
+        name: 'login-id-pass',
+        component: defineComponent({
+          name: 'IdPassStub',
+          render: () => h('div', { 'data-testid': 'id-pass-stub' }),
+        }),
+      },
       {
         path: '/accounts',
         name: 'accounts',
@@ -409,7 +419,13 @@ describe('QrForm', () => {
     )
   })
 
-  it('Back button navigates to /login and halts polling', async () => {
+  it('Back button ("返回一般登入") navigates to /login/id-pass and halts polling', async () => {
+    /*
+     * Regression for the bug where goBack pushed `/login?pick=1`,
+     * which dumped the user back at the region picker even though
+     * the button label promised "back to regular (id-pass) login".
+     * The correct behaviour is mode-switch within the saved region.
+     */
     mockLoginQrStart.mockReturnValueOnce(ok(CHALLENGE))
     mockLoginQrCheck.mockResolvedValue({ status: 'ok', data: STATUS_PENDING })
 
@@ -420,7 +436,7 @@ describe('QrForm', () => {
     await wrapper.find('[data-testid="qr-back"]').trigger('click')
     await flushPromises()
 
-    expect(ctx.router.currentRoute.value.path).toBe('/login')
+    expect(ctx.router.currentRoute.value.path).toBe('/login/id-pass')
 
     const callsAfterBack = mockLoginQrCheck.mock.calls.length
     await advancePoll(3)