From b773ba610f71969f2a76d998311d4237f5696d39 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Mon, 30 Mar 2026 09:42:26 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20backup=20screen=20=E2=80=94=20autofocus?=
 =?UTF-8?q?=20passphrase,=20rename=20button,=20focus=20Continue=20after=20?=
 =?UTF-8?q?download?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Passphrase input autofocused on mount
- "Download Backup" renamed to "Backup to Continue"
- Continue button autofocused after successful backup download

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/views/OnboardingBackup.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/neode-ui/src/views/OnboardingBackup.vue b/neode-ui/src/views/OnboardingBackup.vue
index a8e6ade9..4fb5ef24 100644
--- a/neode-ui/src/views/OnboardingBackup.vue
+++ b/neode-ui/src/views/OnboardingBackup.vue
@@ -30,6 +30,7 @@
                   </svg>
                 </div>
                 <input
+                  ref="passphraseInput"
                   v-model="passphrase"
                   type="password"
                   placeholder="Enter a strong passphrase"
@@ -48,7 +49,7 @@
             :disabled="!passphrase || isDownloading"
             class="path-action-button path-action-button--continue w-full"
           >
-            <span v-if="!isDownloading && !downloaded">Download Backup</span>
+            <span v-if="!isDownloading && !downloaded">Backup to Continue</span>
             <span v-else-if="isDownloading" class="flex items-center justify-center gap-2">
               <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -76,6 +77,7 @@
       <!-- Action Buttons -->
       <div class="flex justify-center max-w-[600px] mx-auto flex-shrink-0 px-3 sm:px-4 pb-4 sm:pb-6">
         <button
+          ref="continueButton"
           @click="proceed"
           :disabled="!downloaded"
           class="path-action-button path-action-button--continue disabled:opacity-50"
@@ -88,12 +90,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { rpcClient } from '@/api/rpc-client'
 
 const router = useRouter()
+const passphraseInput = ref<HTMLInputElement | null>(null)
+const continueButton = ref<HTMLButtonElement | null>(null)
 const passphrase = ref('')
+
+onMounted(() => {
+  setTimeout(() => {
+    passphraseInput.value?.focus({ preventScroll: true })
+  }, 500)
+})
 const isDownloading = ref(false)
 const downloaded = ref(false)
 const errorMessage = ref('')
@@ -127,6 +137,10 @@ async function downloadBackup() {
 
     downloaded.value = true
     localStorage.setItem('neode_backup_created', '1')
+    // Focus Continue button after backup completes
+    setTimeout(() => {
+      continueButton.value?.focus({ preventScroll: true })
+    }, 100)
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err)
     if (/502|503|504|timeout|fetch|network|Failed to fetch/i.test(msg)) {