From e9e0e29e951f108e2919d49e99a75110d6809dcb Mon Sep 17 00:00:00 2001
From: lshw54 <wl1999054@gmail.com>
Date: Sun, 26 Apr 2026 13:23:08 +0800
Subject: [PATCH] feat(IdPassForm): arrow keys and mouse wheel to cycle saved
 accounts (#241)

WPF login form let users cycle through saved accounts using keyboard
arrows and mouse wheel on the account TextBox. Adds the same to the
SPA: ArrowUp/Down and wheel events on the account input cycle through
savedAccountsForRegion, prefilling password/remember/autoLogin.

Closes #241
---
 src/pages/IdPassForm.vue | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/pages/IdPassForm.vue b/src/pages/IdPassForm.vue
index 2e1702f..1da046c 100644
--- a/src/pages/IdPassForm.vue
+++ b/src/pages/IdPassForm.vue
@@ -234,6 +234,36 @@ function selectAccount(accountId: string): void {
   }
 }
 
+/**
+ * Cycle through saved accounts via arrow keys or mouse wheel on the
+ * account input. Mirrors WPF where the account TextBox responded to
+ * keyboard arrows and mouse wheel to switch between saved accounts.
+ */
+function cycleAccount(direction: 1 | -1): void {
+  const list = savedAccountsForRegion.value
+  if (list.length === 0) return
+  const currentIdx = list.findIndex((a) => a.account_id === account.value)
+  const nextIdx = currentIdx === -1 ? 0 : (currentIdx + direction + list.length) % list.length
+  selectAccount(list[nextIdx].account_id)
+}
+
+function handleAccountKeydown(e: Event | KeyboardEvent): void {
+  if (!(e instanceof KeyboardEvent)) return
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    cycleAccount(1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    cycleAccount(-1)
+  }
+}
+
+function handleAccountWheel(e: WheelEvent): void {
+  if (savedAccountsForRegion.value.length === 0) return
+  e.preventDefault()
+  cycleAccount(e.deltaY > 0 ? 1 : -1)
+}
+
 const submitting = computed(() => auth.pendingAction === AUTH_ACTIONS.LoginRegular)
 
 /**
@@ -479,6 +509,8 @@ async function persistAfterFullSuccess(intent: LoginIntent): Promise<void> {
           size="default"
           autocomplete="username"
           :placeholder="t('AcountOrEmail')"
+          @keydown="handleAccountKeydown"
+          @wheel.prevent="handleAccountWheel"
         />
         <button
           v-if="savedAccountsForRegion.length > 0"