Implement onboarding reset functionality and enhance backup features

- Added a new method to reset the onboarding state, allowing users to re-initiate the onboarding process.
- Integrated backup creation functionality, enabling users to create encrypted backups of their node identity.
- Updated API endpoints to handle onboarding reset and backup creation requests.
- Enhanced UI components to support the new onboarding reset and backup features, including error handling and user feedback.
- Introduced new dependencies for cryptographic operations and data encoding.

neode-ui/src/views/OnboardingBackup.vue

@@ -15,6 +15,7 @@
       <!-- Content Area -->
       <div class="flex flex-col items-center gap-4 sm:gap-6 mb-4 sm:mb-6 px-3 sm:px-4">
         <div class="w-full max-w-[600px] space-y-4 sm:space-y-6">
+          <p v-if="errorMessage" class="text-red-400 text-sm">{{ errorMessage }}</p>
           <!-- Passphrase Input -->
           <div class="path-option-card cursor-default px-4 py-4 sm:px-6 sm:py-6">
             <div class="text-left w-full">
@@ -65,7 +66,7 @@
           <!-- Success Message -->
           <div v-if="downloaded" class="text-center">
             <p class="text-sm text-white/70">
-              Backup saved as <span class="font-mono text-white/90">neode-did-backup.json</span>
+              Backup saved as <span class="font-mono text-white/90">archipelago-did-backup.json</span>
             </p>
           </div>
         </div>
@@ -81,8 +82,8 @@
         </button>
         <button
           @click="proceed"
-          :disabled="!passphrase"
-          class="path-action-button path-action-button--continue"
+          :disabled="!downloaded"
+          class="path-action-button path-action-button--continue disabled:opacity-50"
         >
           Continue
         </button>
@@ -94,48 +95,40 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { rpcClient } from '@/api/rpc-client'
 
 const router = useRouter()
 const passphrase = ref('')
 const isDownloading = ref(false)
 const downloaded = ref(false)
+const errorMessage = ref('')
 
 async function downloadBackup() {
   if (!passphrase.value) return
-  
+
   isDownloading.value = true
-  
-  // Simulate backup creation
-  await new Promise(resolve => setTimeout(resolve, 1000))
-  
-  // Get DID from localStorage
-  const didStateStr = localStorage.getItem('neode_did_state')
-  const didState = didStateStr ? JSON.parse(didStateStr) : { did: 'did:key:unknown', kid: 'kid:mock' }
-  
-  // Create backup data
-  const backupData = {
-    version: '1.0',
-    did: didState.did,
-    kid: didState.kid,
-    encrypted: true,
-    timestamp: new Date().toISOString(),
-    // In production, this would be properly encrypted with the passphrase
-    note: 'This is a mock backup. In production, this would contain encrypted key material.'
+  errorMessage.value = ''
+
+  try {
+    const backupData = await rpcClient.createBackup(passphrase.value)
+
+    const blob = new Blob([JSON.stringify(backupData, null, 2)], {
+      type: 'application/json',
+    })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = 'archipelago-did-backup.json'
+    a.click()
+    URL.revokeObjectURL(a.href)
+
+    downloaded.value = true
+    localStorage.setItem('neode_backup_created', '1')
+  } catch (err) {
+    errorMessage.value =
+      err instanceof Error ? err.message : 'Failed to create backup. Please try again.'
+  } finally {
+    isDownloading.value = false
   }
-  
-  // Create and download file
-  const blob = new Blob([JSON.stringify(backupData, null, 2)], { type: 'application/json' })
-  const a = document.createElement('a')
-  a.href = URL.createObjectURL(blob)
-  a.download = 'neode-did-backup.json'
-  a.click()
-  URL.revokeObjectURL(a.href)
-  
-  downloaded.value = true
-  isDownloading.value = false
-  
-  // Store passphrase hint (not the actual passphrase!)
-  localStorage.setItem('neode_backup_created', '1')
 }
 
 function proceed() {