diff --git a/extension/src/setup/setup.ts b/extension/src/setup/setup.ts index 218c554..df67d90 100644 --- a/extension/src/setup/setup.ts +++ b/extension/src/setup/setup.ts @@ -1,9 +1,10 @@ -/// Vault initialization wizard — 4-step flow for creating new relicario vaults. +/// Vault initialization wizard — 5-step flow for creating new relicario vaults. /// /// Step 1: Choose host type (Gitea / GitHub) /// Step 2: Configure connection (URL, repo, token) + test /// Step 3: Create vault (carrier image, passphrase, generate secrets, push files) -/// Step 4: Finish (download reference image, push config to extension or copy JSON) +/// Step 4: Name this device (generates ed25519 keypair, registers with vault) +/// Step 5: Finish (download reference image, push config to extension or copy JSON) import { createGitHost, uint8ArrayToBase64 } from '../service-worker/git-host'; import type { VaultConfig } from '../shared/types'; @@ -46,6 +47,7 @@ interface WizardState { error: string | null; extensionDetected: boolean; configPushed: boolean; + deviceName: string; } const state: WizardState = { @@ -67,6 +69,7 @@ const state: WizardState = { error: null, extensionDetected: false, configPushed: false, + deviceName: '', }; // --- Helpers --- @@ -225,6 +228,7 @@ function render(): void {
+ `; @@ -234,6 +238,7 @@ function render(): void { case 2: stepHtml = renderStep2(); break; case 3: stepHtml = renderStep3(); break; case 4: stepHtml = renderStep4(); break; + case 5: stepHtml = renderStep5(); break; } app.innerHTML = ` @@ -251,6 +256,7 @@ function render(): void { case 2: attachStep2(); break; case 3: attachStep3(); break; case 4: attachStep4(); break; + case 5: attachStep5(); break; } } @@ -645,11 +651,10 @@ function attachStep3(): void { stage = 'release handle'; w.lock(handle); - log('vault created — advancing to step 4'); + log('vault created — advancing to step 4 (device name)'); state.creating = false; - state.step = 4; + state.step = 4; // device name step state.error = null; - detectExtension(); render(); } catch (err: unknown) { // eslint-disable-next-line no-console @@ -662,7 +667,59 @@ function attachStep3(): void { }); } -// --- Step 4: Finish --- +// --- Step 4: Device Name --- + +function renderStep4(): string { + const platform = navigator.platform.toLowerCase(); + const isChrome = /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent); + const isFirefox = /firefox/i.test(navigator.userAgent); + const browser = isFirefox ? 'Firefox' : isChrome ? 'Chrome' : 'Browser'; + const os = platform.includes('mac') ? 'macOS' : platform.includes('win') ? 'Windows' : 'Linux'; + const defaultName = state.deviceName || `${browser} on ${os}`; + + return ` ++ This helps you identify which devices have access to your vault. +
+