refactor(frontend): refactor migration components #75

+61 -20

frontend/src/components/migration/ChooseHandleStep.svelte

··· 1 1 <script lang="ts"> 2 2 - import type { AuthMethod, HandlePreservation, ServerDescription } from '../../lib/migration/types' 2 2 + import type { AuthMethod, HandlePreservation, ServerDescription, VerificationChannel } from '../../lib/migration/types' 3 3 + import type { VerificationChannel as ApiVerificationChannel } from '../../lib/types/api' 3 4 import { _ } from '../../lib/i18n' 4 5 import HandleInput from '../HandleInput.svelte' 6 6 + import CommsChannelPicker from '../CommsChannelPicker.svelte' 5 7 6 8 interface Props { 7 9 handleInput: string 8 10 selectedDomain: string 9 9 - handleAvailable: boolean | null 10 10 - checkingHandle: boolean 11 11 email: string 12 12 password: string 13 13 authMethod: AuthMethod 14 14 inviteCode: string 15 15 serverInfo: ServerDescription | null 16 16 + availableCommsChannels: ApiVerificationChannel[] 17 17 + verificationChannel: VerificationChannel 18 18 + discordUsername: string 19 19 + telegramUsername: string 20 20 + signalUsername: string 16 21 migratingFromLabel: string 17 22 migratingFromValue: string 18 23 loading?: boolean 19 24 sourceHandle: string 20 25 sourceDid: string 26 26 + sourcePdsDomains?: string[] 21 27 handlePreservation: HandlePreservation 22 28 existingHandleVerified: boolean 23 29 verifyingExistingHandle?: boolean 24 30 existingHandleError?: string | null 31 31 + checkAvailability: (fullHandle: string) => Promise<boolean> 25 32 onHandleChange: (handle: string) => void 26 33 onDomainChange: (domain: string) => void 27 27 - onCheckHandle: () => void 28 34 onEmailChange: (email: string) => void 29 35 onPasswordChange: (password: string) => void 30 36 onAuthMethodChange: (method: AuthMethod) => void 31 37 onInviteCodeChange: (code: string) => void 38 38 + onVerificationChannelChange: (channel: VerificationChannel) => void 39 39 + onDiscordChange: (value: string) => void 40 40 + onTelegramChange: (value: string) => void 41 41 + onSignalChange: (value: string) => void 32 42 onHandlePreservationChange?: (preservation: HandlePreservation) => void 33 43 onVerifyExistingHandle?: () => void 34 44 onBack: () => void ··· 38 48 let { 39 49 handleInput, 40 50 selectedDomain, 41 41 - handleAvailable, 42 42 - checkingHandle, 43 51 email, 44 52 password, 45 53 authMethod, 46 54 inviteCode, 47 55 serverInfo, 56 56 + availableCommsChannels, 57 57 + verificationChannel, 58 58 + discordUsername, 59 59 + telegramUsername, 60 60 + signalUsername, 48 61 migratingFromLabel, 49 62 migratingFromValue, 50 63 loading = false, 51 64 sourceHandle, 52 65 sourceDid, 66 66 + sourcePdsDomains = [], 53 67 handlePreservation, 54 68 existingHandleVerified, 55 69 verifyingExistingHandle = false, 56 70 existingHandleError = null, 71 71 + checkAvailability, 57 72 onHandleChange, 58 73 onDomainChange, 59 59 - onCheckHandle, 60 74 onEmailChange, 61 75 onPasswordChange, 62 76 onAuthMethodChange, 63 77 onInviteCodeChange, 78 78 + onVerificationChannelChange, 79 79 + onDiscordChange, 80 80 + onTelegramChange, 81 81 + onSignalChange, 64 82 onHandlePreservationChange, 65 83 onVerifyExistingHandle, 66 84 onBack, 67 85 onContinue, 68 86 }: Props = $props() 69 87 88 88 + let handleAvailable = $state<boolean | null>(null) 89 89 + let checkingHandle = $state(false) 90 90 + 70 91 const handleTooShort = $derived(handleInput.trim().length > 0 && handleInput.trim().length < 3) 71 92 93 93 + const isSourcePdsManaged = $derived( 94 94 + sourcePdsDomains.length > 0 && 95 95 + sourceHandle.includes('.') && 96 96 + sourcePdsDomains.some(d => sourceHandle.endsWith(`.${d}`)) 97 97 + ) 98 98 + 72 99 const isExternalHandle = $derived( 73 73 - serverInfo != null && 74 100 sourceHandle.includes('.') && 101 101 + !isSourcePdsManaged && 102 102 + serverInfo != null && 75 103 !serverInfo.availableUserDomains.some(d => sourceHandle.endsWith(`.${d}`)) 76 104 ) 77 105 106 106 + const hasVerificationIdentifier = $derived( 107 107 + (verificationChannel === 'email' && email.trim().length > 0) || 108 108 + (verificationChannel === 'discord' && discordUsername.trim().length > 0) || 109 109 + (verificationChannel === 'telegram' && telegramUsername.trim().length > 0) || 110 110 + (verificationChannel === 'signal' && signalUsername.trim().length > 0) 111 111 + ) 112 112 + 78 113 const canContinue = $derived( 79 79 - email && 114 114 + hasVerificationIdentifier && 80 115 (authMethod === 'passkey' || password) && 81 116 ( 82 117 (handlePreservation === 'existing' && existingHandleVerified) || ··· 178 213 domains={serverInfo?.availableUserDomains ?? []} 179 214 {selectedDomain} 180 215 placeholder="username" 216 216 + {checkAvailability} 217 217 + bind:available={handleAvailable} 218 218 + bind:checking={checkingHandle} 181 219 onInput={onHandleChange} 182 220 onDomainChange={onDomainChange} 183 221 /> ··· 196 234 </div> 197 235 {/if} 198 236 199 199 - <div class="field"> 200 200 - <label for="email">{$_('migration.inbound.chooseHandle.email')}</label> 201 201 - <input 202 202 - id="email" 203 203 - type="email" 204 204 - placeholder="you@example.com" 205 205 - value={email} 206 206 - oninput={(e) => onEmailChange((e.target as HTMLInputElement).value)} 207 207 - required 208 208 - /> 209 209 - </div> 237 237 + <CommsChannelPicker 238 238 + channel={verificationChannel} 239 239 + {email} 240 240 + {discordUsername} 241 241 + {telegramUsername} 242 242 + {signalUsername} 243 243 + availableChannels={availableCommsChannels} 244 244 + disabled={loading} 245 245 + onChannelChange={onVerificationChannelChange} 246 246 + onEmailChange={onEmailChange} 247 247 + onDiscordChange={onDiscordChange} 248 248 + onTelegramChange={onTelegramChange} 249 249 + onSignalChange={onSignalChange} 250 250 + /> 210 251 211 252 <div class="field"> 212 253 <span class="field-label">{$_('migration.inbound.chooseHandle.authMethod')}</span>

+94 -34

frontend/src/components/migration/EmailVerifyStep.svelte

··· 1 1 <script lang="ts"> 2 2 + import { onDestroy, onMount } from 'svelte' 3 3 + import type { VerificationChannel } from '../../lib/migration/types' 4 4 + import { api } from '../../lib/api' 2 5 import { _ } from '../../lib/i18n' 3 6 4 7 interface Props { 5 5 - email: string 8 8 + channel: VerificationChannel 9 9 + identifier: string 6 10 token: string 7 11 loading: boolean 8 12 error: string | null 13 13 + handle?: string 9 14 onTokenChange: (token: string) => void 10 15 onSubmit: (e: Event) => void 11 16 onResend: () => void 17 17 + onVerified?: () => void 12 18 } 13 19 14 20 let { 15 15 - email, 21 21 + channel, 22 22 + identifier, 16 23 token, 17 24 loading, 18 25 error, 26 26 + handle, 19 27 onTokenChange, 20 28 onSubmit, 21 29 onResend, 30 30 + onVerified, 22 31 }: Props = $props() 32 32 + 33 33 + let telegramBotUsername = $state<string | undefined>(undefined) 34 34 + let discordBotUsername = $state<string | undefined>(undefined) 35 35 + let discordAppId = $state<string | undefined>(undefined) 36 36 + 37 37 + const isTelegram = $derived(channel === 'telegram') 38 38 + const isDiscord = $derived(channel === 'discord') 39 39 + const isBotChannel = $derived(isTelegram || isDiscord) 40 40 + 41 41 + onMount(async () => { 42 42 + if (isBotChannel) { 43 43 + try { 44 44 + const serverInfo = await api.describeServer() 45 45 + telegramBotUsername = serverInfo.telegramBotUsername 46 46 + discordBotUsername = serverInfo.discordBotUsername 47 47 + discordAppId = serverInfo.discordAppId 48 48 + } catch {} 49 49 + } 50 50 + }) 51 51 + 52 52 + function channelLabel(ch: string): string { 53 53 + switch (ch) { 54 54 + case 'email': return 'email' 55 55 + case 'discord': return 'Discord' 56 56 + case 'telegram': return 'Telegram' 57 57 + case 'signal': return 'Signal' 58 58 + default: return ch 59 59 + } 60 60 + } 23 61 </script> 24 62 25 63 <div class="step-content"> 26 64 <h2>{$_('migration.inbound.emailVerify.title')}</h2> 27 27 - <p>{@html $_('migration.inbound.emailVerify.desc', { values: { email: `<strong>${email}</strong>` } })}</p> 28 28 - 29 29 - <div class="info-box"> 30 30 - <p> 31 31 - {$_('migration.inbound.emailVerify.hint')} 32 32 - </p> 33 33 - </div> 34 65 35 35 - {#if error} 36 36 - <div class="message error"> 37 37 - {error} 66 66 + {#if isTelegram && telegramBotUsername && handle} 67 67 + {@const encodedHandle = handle.replaceAll('.', '_')} 68 68 + <p>{$_('migration.inbound.emailVerify.telegramInstructions')}</p> 69 69 + <div class="info-box"> 70 70 + <p> 71 71 + <a href="https://t.me/{telegramBotUsername}?start={encodedHandle}" target="_blank" rel="noopener">{$_('migration.inbound.emailVerify.openTelegram')}</a>, 72 72 + or send <code>/start {handle}</code> to <code>@{telegramBotUsername}</code> 73 73 + </p> 38 74 </div> 39 39 - {/if} 40 40 - 41 41 - <form onsubmit={onSubmit}> 42 42 - <div> 43 43 - <label for="email-verify-token">{$_('migration.inbound.emailVerify.tokenLabel')}</label> 44 44 - <input 45 45 - id="email-verify-token" 46 46 - type="text" 47 47 - placeholder={$_('migration.inbound.emailVerify.tokenPlaceholder')} 48 48 - value={token} 49 49 - oninput={(e) => onTokenChange((e.target as HTMLInputElement).value)} 50 50 - disabled={loading} 51 51 - required 52 52 - /> 75 75 + <p class="hint">{$_('migration.inbound.emailVerify.waitingForVerification')}</p> 76 76 + {:else if isDiscord && discordAppId && handle} 77 77 + <p>{$_('migration.inbound.emailVerify.discordInstructions')}</p> 78 78 + <div class="info-box"> 79 79 + <p> 80 80 + <a href="https://discord.com/users/{discordAppId}" target="_blank" rel="noopener">{$_('migration.inbound.emailVerify.openDiscord')}</a>, 81 81 + or send <code>/start {handle}</code> to <strong>{discordBotUsername ?? 'the bot'}</strong> 82 82 + </p> 53 83 </div> 84 84 + <p class="hint">{$_('migration.inbound.emailVerify.waitingForVerification')}</p> 85 85 + {:else} 86 86 + <p>{@html $_('migration.inbound.emailVerify.desc', { values: { email: `<strong>${identifier}</strong>`, channel: channelLabel(channel) } })}</p> 54 87 55 55 - <div class="button-row"> 56 56 - <button type="button" class="ghost" onclick={onResend} disabled={loading}> 57 57 - {$_('migration.inbound.emailVerify.resend')} 58 58 - </button> 59 59 - <button type="submit" disabled={loading || !token}> 60 60 - {loading ? $_('common.verifying') : $_('common.verify')} 61 61 - </button> 88 88 + <div class="info-box"> 89 89 + <p> 90 90 + {$_('migration.inbound.emailVerify.hint')} 91 91 + </p> 62 92 </div> 63 63 - </form> 93 93 + 94 94 + {#if error} 95 95 + <div class="message error"> 96 96 + {error} 97 97 + </div> 98 98 + {/if} 99 99 + 100 100 + <form onsubmit={onSubmit}> 101 101 + <div> 102 102 + <label for="email-verify-token">{$_('migration.inbound.emailVerify.tokenLabel')}</label> 103 103 + <input 104 104 + id="email-verify-token" 105 105 + type="text" 106 106 + placeholder={$_('migration.inbound.emailVerify.tokenPlaceholder')} 107 107 + value={token} 108 108 + oninput={(e) => onTokenChange((e.target as HTMLInputElement).value)} 109 109 + disabled={loading} 110 110 + required 111 111 + /> 112 112 + </div> 113 113 + 114 114 + <div class="button-row"> 115 115 + <button type="button" class="ghost" onclick={onResend} disabled={loading}> 116 116 + {$_('migration.inbound.emailVerify.resend')} 117 117 + </button> 118 118 + <button type="submit" disabled={loading || !token}> 119 119 + {loading ? $_('common.verifying') : $_('common.verify')} 120 120 + </button> 121 121 + </div> 122 122 + </form> 123 123 + {/if} 64 124 </div>

+79 -174

frontend/src/components/migration/InboundWizard.svelte

··· 1 1 <script lang="ts"> 2 2 import type { InboundMigrationFlow } from '../../lib/migration' 3 3 import type { AuthMethod, HandlePreservation, ServerDescription } from '../../lib/migration/types' 4 4 + import { resolveVerificationIdentifier } from '../../lib/flows/migration-shared' 4 5 import { getErrorMessage } from '../../lib/migration/types' 5 5 - import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client' 6 6 + import { createPasskeyCredential, PasskeyCancelledError } from '../../lib/flows/perform-passkey-registration' 6 7 import { _ } from '../../lib/i18n' 7 8 import ErrorStep from './ErrorStep.svelte' 8 9 import SuccessStep from './SuccessStep.svelte' ··· 10 11 import EmailVerifyStep from './EmailVerifyStep.svelte' 11 12 import PasskeySetupStep from './PasskeySetupStep.svelte' 12 13 import AppPasswordStep from './AppPasswordStep.svelte' 14 14 + import StepIndicator from './StepIndicator.svelte' 15 15 + import ProgressStep from './ProgressStep.svelte' 16 16 + import ReviewStep from './ReviewStep.svelte' 13 17 14 18 interface ResumeInfo { 15 19 direction: 'inbound' ··· 38 42 let localPasswordInput = $state('') 39 43 let understood = $state(false) 40 44 let selectedDomain = $state('') 41 41 - let handleAvailable = $state<boolean | null>(null) 42 42 - let checkingHandle = $state(false) 43 45 let selectedAuthMethod = $state<AuthMethod>('password') 44 46 let passkeyName = $state('') 45 47 let verifyingExistingHandle = $state(false) 46 48 let existingHandleError = $state<string | null>(null) 49 49 + let sourcePdsDomains = $state<string[]>([]) 47 50 48 51 const isResuming = $derived(flow.state.needsReauth === true) 49 52 const isDidWeb = $derived(flow.state.sourceDid.startsWith("did:web:")) 50 53 54 54 + function verificationIdentifier(): string { 55 55 + return resolveVerificationIdentifier( 56 56 + flow.state.verificationChannel, 57 57 + flow.state.targetEmail, 58 58 + flow.state.discordUsername, 59 59 + flow.state.telegramUsername, 60 60 + flow.state.signalUsername, 61 61 + ) 62 62 + } 63 63 + 51 64 $effect(() => { 52 65 if (flow.state.step === 'welcome' || flow.state.step === 'choose-handle') { 53 66 loadServerInfo() 54 67 } 55 68 if (flow.state.step === 'choose-handle') { 56 69 handleInput = '' 57 57 - handleAvailable = null 58 70 existingHandleError = null 59 71 flow.updateField('handlePreservation', 'new') 60 72 flow.updateField('existingHandleVerified', false) 73 73 + flow.loadSourcePdsDomains().then((d) => { sourcePdsDomains = d }) 61 74 } 62 75 if (flow.state.step === 'source-handle' && resumeInfo) { 63 76 handleInput = resumeInfo.sourceHandle ··· 79 92 80 93 $effect(() => { 81 94 if (flow.state.step === 'email-verify') { 95 95 + const isBotChannel = flow.state.verificationChannel === 'telegram' || flow.state.verificationChannel === 'discord' 82 96 const interval = setInterval(async () => { 83 83 - if (flow.state.emailVerifyToken.trim()) return 97 97 + if (!isBotChannel && flow.state.emailVerifyToken.trim()) return 84 98 await flow.checkEmailVerifiedAndProceed() 85 99 }, 3000) 86 100 return () => clearInterval(interval) ··· 97 111 } 98 112 } 99 113 100 100 - async function checkHandle() { 101 101 - if (!handleInput.trim()) return 102 102 - 103 103 - const fullHandle = handleInput.includes('.') 104 104 - ? handleInput 105 105 - : `${handleInput}.${selectedDomain}` 106 106 - 107 107 - checkingHandle = true 108 108 - handleAvailable = null 109 109 - 110 110 - try { 111 111 - handleAvailable = await flow.checkHandleAvailability(fullHandle) 112 112 - } catch { 113 113 - handleAvailable = true 114 114 - } finally { 115 115 - checkingHandle = false 116 116 - } 117 117 - } 118 118 - 119 114 function handlePreservationChange(preservation: HandlePreservation) { 120 115 flow.updateField('handlePreservation', preservation) 121 116 existingHandleError = null ··· 224 219 flow.setError(null) 225 220 226 221 try { 227 227 - if (!window.PublicKeyCredential) { 228 228 - throw new Error('Passkeys are not supported in this browser. Please use a modern browser with WebAuthn support.') 229 229 - } 230 230 - 231 231 - const { options } = await flow.startPasskeyRegistration() 232 232 - 233 233 - const publicKeyOptions = prepareWebAuthnCreationOptions( 234 234 - options as { publicKey: Record<string, unknown> } 222 222 + const credential = await createPasskeyCredential( 223 223 + () => flow.startPasskeyRegistration(), 235 224 ) 236 236 - const credential = await navigator.credentials.create({ 237 237 - publicKey: publicKeyOptions, 238 238 - }) 239 239 - 240 240 - if (!credential) { 241 241 - throw new Error('Passkey creation was cancelled') 242 242 - } 243 243 - 244 244 - const publicKeyCredential = credential as PublicKeyCredential 245 245 - const response = publicKeyCredential.response as AuthenticatorAttestationResponse 246 246 - 247 247 - const credentialData = { 248 248 - id: publicKeyCredential.id, 249 249 - rawId: base64UrlEncode(publicKeyCredential.rawId), 250 250 - type: publicKeyCredential.type, 251 251 - response: { 252 252 - clientDataJSON: base64UrlEncode(response.clientDataJSON), 253 253 - attestationObject: base64UrlEncode(response.attestationObject), 254 254 - }, 255 255 - } 256 256 - 257 257 - await flow.completePasskeyRegistration(credentialData, passkeyName || undefined) 225 225 + await flow.completePasskeyRegistration(credential, passkeyName || undefined) 258 226 } catch (err) { 259 259 - const message = getErrorMessage(err) 260 260 - if (message.includes('cancelled') || message.includes('AbortError')) { 227 227 + if (err instanceof PasskeyCancelledError || (err instanceof DOMException && err.name === 'NotAllowedError')) { 261 228 flow.setError('Passkey registration was cancelled. Please try again.') 262 229 } else { 263 263 - flow.setError(message) 230 230 + flow.setError(getErrorMessage(err)) 264 231 } 265 232 } finally { 266 233 loading = false ··· 334 301 </script> 335 302 336 303 <div class="migration-wizard"> 337 337 - <div class="step-indicator"> 338 338 - {#each steps as _, i} 339 339 - <div class="step" class:active={i === getCurrentStepIndex()} class:completed={i < getCurrentStepIndex()}> 340 340 - <div class="step-dot">{i < getCurrentStepIndex() ? '✓' : i + 1}</div> 341 341 - </div> 342 342 - {#if i < steps.length - 1} 343 343 - <div class="step-line" class:completed={i < getCurrentStepIndex()}></div> 344 344 - {/if} 345 345 - {/each} 346 346 - </div> 347 347 - <div class="current-step-label"> 348 348 - <strong>{steps[getCurrentStepIndex()]}</strong> · Step {getCurrentStepIndex() + 1} of {steps.length} 349 349 - </div> 304 304 + <StepIndicator steps={steps} currentIndex={getCurrentStepIndex()} /> 350 305 351 306 {#if flow.state.error} 352 307 <div class="message error">{flow.state.error}</div> ··· 443 398 <ChooseHandleStep 444 399 {handleInput} 445 400 {selectedDomain} 446 446 - {handleAvailable} 447 447 - {checkingHandle} 448 401 email={flow.state.targetEmail} 449 402 password={flow.state.targetPassword} 450 403 authMethod={selectedAuthMethod} 451 404 inviteCode={flow.state.inviteCode} 452 405 {serverInfo} 406 406 + availableCommsChannels={serverInfo?.availableCommsChannels ?? ['email']} 407 407 + verificationChannel={flow.state.verificationChannel} 408 408 + discordUsername={flow.state.discordUsername} 409 409 + telegramUsername={flow.state.telegramUsername} 410 410 + signalUsername={flow.state.signalUsername} 453 411 migratingFromLabel={$_('migration.inbound.chooseHandle.migratingFrom')} 454 412 migratingFromValue={flow.state.sourceHandle} 455 413 {loading} 456 414 sourceHandle={flow.state.sourceHandle} 457 415 sourceDid={flow.state.sourceDid} 416 416 + {sourcePdsDomains} 458 417 handlePreservation={flow.state.handlePreservation} 459 418 existingHandleVerified={flow.state.existingHandleVerified} 460 419 {verifyingExistingHandle} 461 420 {existingHandleError} 421 421 + checkAvailability={(h) => flow.checkHandleAvailability(h)} 462 422 onHandleChange={(h) => handleInput = h} 463 423 onDomainChange={(d) => selectedDomain = d} 464 464 - onCheckHandle={checkHandle} 465 424 onEmailChange={(e) => flow.updateField('targetEmail', e)} 466 425 onPasswordChange={(p) => flow.updateField('targetPassword', p)} 467 426 onAuthMethodChange={(m) => selectedAuthMethod = m} 468 427 onInviteCodeChange={(c) => flow.updateField('inviteCode', c)} 428 428 + onVerificationChannelChange={(ch) => flow.updateField('verificationChannel', ch)} 429 429 + onDiscordChange={(v) => flow.updateField('discordUsername', v)} 430 430 + onTelegramChange={(v) => flow.updateField('telegramUsername', v)} 431 431 + onSignalChange={(v) => flow.updateField('signalUsername', v)} 469 432 onHandlePreservationChange={handlePreservationChange} 470 433 onVerifyExistingHandle={verifyExistingHandle} 471 434 onBack={() => flow.setStep('source-handle')} ··· 473 436 /> 474 437 475 438 {:else if flow.state.step === 'review'} 476 476 - <div class="step-content"> 477 477 - <h2>{$_('migration.inbound.review.title')}</h2> 478 478 - <p>{$_('migration.inbound.review.desc')}</p> 479 479 - 480 480 - <div class="review-card"> 481 481 - <div class="review-row"> 482 482 - <span class="label">{$_('migration.inbound.review.currentHandle')}:</span> 483 483 - <span class="value">{flow.state.sourceHandle}</span> 484 484 - </div> 485 485 - <div class="review-row"> 486 486 - <span class="label">{$_('migration.inbound.review.newHandle')}:</span> 487 487 - <span class="value">{flow.state.targetHandle}</span> 488 488 - </div> 489 489 - <div class="review-row"> 490 490 - <span class="label">{$_('migration.inbound.review.did')}:</span> 491 491 - <span class="value mono">{flow.state.sourceDid}</span> 492 492 - </div> 493 493 - <div class="review-row"> 494 494 - <span class="label">{$_('migration.inbound.review.sourcePds')}:</span> 495 495 - <span class="value">{flow.state.sourcePdsUrl}</span> 496 496 - </div> 497 497 - <div class="review-row"> 498 498 - <span class="label">{$_('migration.inbound.review.targetPds')}:</span> 499 499 - <span class="value">{window.location.origin}</span> 500 500 - </div> 501 501 - <div class="review-row"> 502 502 - <span class="label">{$_('migration.inbound.review.email')}:</span> 503 503 - <span class="value">{flow.state.targetEmail}</span> 504 504 - </div> 505 505 - <div class="review-row"> 506 506 - <span class="label">{$_('migration.inbound.review.authentication')}:</span> 507 507 - <span class="value">{flow.state.authMethod === 'passkey' ? $_('migration.inbound.review.authPasskey') : $_('migration.inbound.review.authPassword')}</span> 508 508 - </div> 509 509 - </div> 510 510 - 511 511 - <div class="warning-box"> 439 439 + <ReviewStep 440 440 + description={$_('migration.inbound.review.desc')} 441 441 + rows={[ 442 442 + { label: $_('migration.inbound.review.currentHandle'), value: flow.state.sourceHandle }, 443 443 + { label: $_('migration.inbound.review.newHandle'), value: flow.state.targetHandle }, 444 444 + { label: $_('migration.inbound.review.did'), value: flow.state.sourceDid, mono: true }, 445 445 + { label: $_('migration.inbound.review.sourcePds'), value: flow.state.sourcePdsUrl }, 446 446 + { label: $_('migration.inbound.review.targetPds'), value: window.location.origin }, 447 447 + { label: $_(`register.${flow.state.verificationChannel}`), value: verificationIdentifier() }, 448 448 + { label: $_('migration.inbound.review.authentication'), value: flow.state.authMethod === 'passkey' ? $_('migration.inbound.review.authPasskey') : $_('migration.inbound.review.authPassword') }, 449 449 + ]} 450 450 + {loading} 451 451 + onBack={() => flow.setStep('choose-handle')} 452 452 + onContinue={startMigration} 453 453 + > 454 454 + {#snippet warning()} 512 455 {$_('migration.inbound.review.warning')} 513 513 - </div> 514 514 - 515 515 - <div class="button-row"> 516 516 - <button class="ghost" onclick={() => flow.setStep('choose-handle')} disabled={loading}>{$_('migration.inbound.common.back')}</button> 517 517 - <button onclick={startMigration} disabled={loading}> 518 518 - {loading ? $_('migration.inbound.review.starting') : $_('migration.inbound.review.startMigration')} 519 519 - </button> 520 520 - </div> 521 521 - </div> 456 456 + {/snippet} 457 457 + </ReviewStep> 522 458 523 459 {:else if flow.state.step === 'migrating'} 524 524 - <div class="step-content"> 525 525 - <h2>{$_('migration.inbound.migrating.title')}</h2> 526 526 - <p>{$_('migration.inbound.migrating.desc')}</p> 527 527 - 528 528 - <div class="progress-section"> 529 529 - <div class="progress-item" class:completed={flow.state.progress.repoExported}> 530 530 - <span class="icon">{flow.state.progress.repoExported ? '✓' : '○'}</span> 531 531 - <span>{$_('migration.inbound.migrating.exportRepo')}</span> 532 532 - </div> 533 533 - <div class="progress-item" class:completed={flow.state.progress.repoImported}> 534 534 - <span class="icon">{flow.state.progress.repoImported ? '✓' : '○'}</span> 535 535 - <span>{$_('migration.inbound.migrating.importRepo')}</span> 536 536 - </div> 537 537 - <div class="progress-item" class:active={flow.state.progress.repoImported && !flow.state.progress.prefsMigrated}> 538 538 - <span class="icon">{flow.state.progress.blobsMigrated === flow.state.progress.blobsTotal && flow.state.progress.blobsTotal > 0 ? '✓' : '○'}</span> 539 539 - <span>{$_('migration.inbound.migrating.migrateBlobs')} ({flow.state.progress.blobsMigrated}/{flow.state.progress.blobsTotal})</span> 540 540 - </div> 541 541 - <div class="progress-item" class:completed={flow.state.progress.prefsMigrated}> 542 542 - <span class="icon">{flow.state.progress.prefsMigrated ? '✓' : '○'}</span> 543 543 - <span>{$_('migration.inbound.migrating.migratePrefs')}</span> 544 544 - </div> 545 545 - </div> 546 546 - 547 547 - {#if flow.state.progress.blobsTotal > 0} 548 548 - <div class="progress-bar"> 549 549 - <div 550 550 - class="progress-fill" 551 551 - style="width: {(flow.state.progress.blobsMigrated / flow.state.progress.blobsTotal) * 100}%" 552 552 - ></div> 553 553 - </div> 554 554 - {/if} 555 555 - 556 556 - <p class="status-text">{flow.state.progress.currentOperation}</p> 557 557 - </div> 460 460 + <ProgressStep 461 461 + title={$_('migration.inbound.migrating.title')} 462 462 + description={$_('migration.inbound.migrating.desc')} 463 463 + items={[ 464 464 + { label: $_('migration.inbound.migrating.exportRepo'), completed: flow.state.progress.repoExported }, 465 465 + { label: $_('migration.inbound.migrating.importRepo'), completed: flow.state.progress.repoImported }, 466 466 + { label: `${$_('migration.inbound.migrating.migrateBlobs')} (${flow.state.progress.blobsMigrated}/${flow.state.progress.blobsTotal})`, completed: flow.state.progress.blobsMigrated === flow.state.progress.blobsTotal && flow.state.progress.blobsTotal > 0, active: flow.state.progress.repoImported && !flow.state.progress.prefsMigrated }, 467 467 + { label: $_('migration.inbound.migrating.migratePrefs'), completed: flow.state.progress.prefsMigrated }, 468 468 + ]} 469 469 + statusText={flow.state.progress.currentOperation} 470 470 + progressBar={flow.state.progress.blobsTotal > 0 ? { current: flow.state.progress.blobsMigrated, total: flow.state.progress.blobsTotal } : undefined} 471 471 + /> 558 472 559 473 {:else if flow.state.step === 'passkey-setup'} 560 474 <PasskeySetupStep ··· 575 489 576 490 {:else if flow.state.step === 'email-verify'} 577 491 <EmailVerifyStep 578 578 - email={flow.state.targetEmail} 492 492 + channel={flow.state.verificationChannel} 493 493 + identifier={verificationIdentifier()} 494 494 + handle={flow.state.targetHandle} 579 495 token={flow.state.emailVerifyToken} 580 496 {loading} 581 497 error={flow.state.error} ··· 675 591 </div> 676 592 677 593 {:else if flow.state.step === 'finalizing'} 678 678 - <div class="step-content"> 679 679 - <h2>{$_('migration.inbound.finalizing.title')}</h2> 680 680 - <p>{$_('migration.inbound.finalizing.desc')}</p> 681 681 - 682 682 - <div class="progress-section"> 683 683 - <div class="progress-item" class:completed={flow.state.progress.plcSigned}> 684 684 - <span class="icon">{flow.state.progress.plcSigned ? '✓' : '○'}</span> 685 685 - <span>{$_('migration.inbound.finalizing.signingPlc')}</span> 686 686 - </div> 687 687 - <div class="progress-item" class:completed={flow.state.progress.activated}> 688 688 - <span class="icon">{flow.state.progress.activated ? '✓' : '○'}</span> 689 689 - <span>{$_('migration.inbound.finalizing.activating')}</span> 690 690 - </div> 691 691 - <div class="progress-item" class:completed={flow.state.progress.deactivated}> 692 692 - <span class="icon">{flow.state.progress.deactivated ? '✓' : '○'}</span> 693 693 - <span>{$_('migration.inbound.finalizing.deactivating')}</span> 694 694 - </div> 695 695 - </div> 696 696 - 697 697 - <p class="status-text">{flow.state.progress.currentOperation}</p> 698 698 - </div> 594 594 + <ProgressStep 595 595 + title={$_('migration.inbound.finalizing.title')} 596 596 + description={$_('migration.inbound.finalizing.desc')} 597 597 + items={[ 598 598 + { label: $_('migration.inbound.finalizing.signingPlc'), completed: flow.state.progress.plcSigned }, 599 599 + { label: $_('migration.inbound.finalizing.activating'), completed: flow.state.progress.activated }, 600 600 + { label: $_('migration.inbound.finalizing.deactivating'), completed: flow.state.progress.deactivated }, 601 601 + ]} 602 602 + statusText={flow.state.progress.currentOperation} 603 603 + /> 699 604 700 605 {:else if flow.state.step === 'success'} 701 606 <SuccessStep handle={flow.state.targetHandle} did={flow.state.sourceDid}>

+80 -159

frontend/src/components/migration/OfflineInboundWizard.svelte

··· 1 1 <script lang="ts"> 2 2 import type { OfflineInboundMigrationFlow } from '../../lib/migration' 3 3 import type { AuthMethod, ServerDescription } from '../../lib/migration/types' 4 4 + import { resolveVerificationIdentifier } from '../../lib/flows/migration-shared' 4 5 import { getErrorMessage } from '../../lib/migration/types' 5 5 - import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client' 6 6 + import { PasskeyCancelledError } from '../../lib/flows/perform-passkey-registration' 6 7 import { _ } from '../../lib/i18n' 7 8 import ErrorStep from './ErrorStep.svelte' 8 9 import SuccessStep from './SuccessStep.svelte' ··· 10 11 import EmailVerifyStep from './EmailVerifyStep.svelte' 11 12 import PasskeySetupStep from './PasskeySetupStep.svelte' 12 13 import AppPasswordStep from './AppPasswordStep.svelte' 14 14 + import StepIndicator from './StepIndicator.svelte' 15 15 + import ProgressStep from './ProgressStep.svelte' 16 16 + import ReviewStep from './ReviewStep.svelte' 13 17 14 18 interface Props { 15 19 flow: OfflineInboundMigrationFlow ··· 24 28 let understood = $state(false) 25 29 let handleInput = $state('') 26 30 let selectedDomain = $state('') 27 27 - let handleAvailable = $state<boolean | null>(null) 28 28 - let checkingHandle = $state(false) 29 31 let validatingKey = $state(false) 30 32 let keyValid = $state<boolean | null>(null) 31 33 let fileInputRef = $state<HTMLInputElement | null>(null) 32 34 let selectedAuthMethod = $state<AuthMethod>('password') 33 35 let passkeyName = $state('') 34 36 37 37 + function verificationIdentifier(): string { 38 38 + return resolveVerificationIdentifier( 39 39 + flow.state.verificationChannel, 40 40 + flow.state.targetEmail, 41 41 + flow.state.discordUsername, 42 42 + flow.state.telegramUsername, 43 43 + flow.state.signalUsername, 44 44 + ) 45 45 + } 46 46 + 35 47 let redirectTriggered = $state(false) 36 48 37 49 $effect(() => { ··· 40 52 } 41 53 if (flow.state.step === 'choose-handle') { 42 54 handleInput = '' 43 43 - handleAvailable = null 44 55 } 45 56 }) 46 57 ··· 55 66 56 67 $effect(() => { 57 68 if (flow.state.step === 'email-verify') { 69 69 + const isBotChannel = flow.state.verificationChannel === 'telegram' || flow.state.verificationChannel === 'discord' 58 70 const interval = setInterval(async () => { 59 59 - if (flow.state.emailVerifyToken.trim()) return 71 71 + if (!isBotChannel && flow.state.emailVerifyToken.trim()) return 60 72 await flow.checkEmailVerifiedAndProceed() 61 73 }, 3000) 62 74 return () => clearInterval(interval) ··· 145 157 } 146 158 } 147 159 148 148 - async function checkHandle() { 149 149 - if (!handleInput.trim()) return 150 150 - 151 151 - const fullHandle = handleInput.includes('.') 152 152 - ? handleInput 153 153 - : `${handleInput}.${selectedDomain}` 154 154 - 155 155 - checkingHandle = true 156 156 - handleAvailable = null 157 157 - 158 158 - try { 159 159 - handleAvailable = await flow.checkHandleAvailability(fullHandle) 160 160 - } catch { 161 161 - handleAvailable = true 162 162 - } finally { 163 163 - checkingHandle = false 164 164 - } 165 165 - } 166 166 - 167 160 function proceedToReview() { 168 161 const fullHandle = handleInput.includes('.') 169 162 ? handleInput ··· 203 196 flow.setError(null) 204 197 205 198 try { 206 206 - if (!window.PublicKeyCredential) { 207 207 - throw new Error('Passkeys are not supported in this browser. Please use a modern browser with WebAuthn support.') 208 208 - } 209 209 - 210 199 await flow.registerPasskey(passkeyName || undefined) 211 200 } catch (err) { 212 212 - const message = getErrorMessage(err) 213 213 - if (message.includes('cancelled') || message.includes('AbortError')) { 201 201 + if (err instanceof PasskeyCancelledError || (err instanceof DOMException && err.name === 'NotAllowedError')) { 214 202 flow.setError('Passkey registration was cancelled. Please try again.') 215 203 } else { 216 216 - flow.setError(message) 204 204 + flow.setError(getErrorMessage(err)) 217 205 } 218 206 } finally { 219 207 loading = false ··· 233 221 </script> 234 222 235 223 <div class="migration-wizard"> 236 236 - <div class="step-indicator"> 237 237 - {#each steps as _, i} 238 238 - <div class="step" class:active={i === getCurrentStepIndex()} class:completed={i < getCurrentStepIndex()}> 239 239 - <div class="step-dot">{i < getCurrentStepIndex() ? '✓' : i + 1}</div> 240 240 - </div> 241 241 - {#if i < steps.length - 1} 242 242 - <div class="step-line" class:completed={i < getCurrentStepIndex()}></div> 243 243 - {/if} 244 244 - {/each} 245 245 - </div> 246 246 - <div class="current-step-label"> 247 247 - <strong>{steps[getCurrentStepIndex()]}</strong> · Step {getCurrentStepIndex() + 1} of {steps.length} 248 248 - </div> 224 224 + <StepIndicator steps={steps} currentIndex={getCurrentStepIndex()} /> 249 225 250 226 {#if flow.state.error} 251 227 <div class="message error">{flow.state.error}</div> ··· 401 377 <ChooseHandleStep 402 378 {handleInput} 403 379 {selectedDomain} 404 404 - {handleAvailable} 405 405 - {checkingHandle} 406 380 email={flow.state.targetEmail} 407 381 password={flow.state.targetPassword} 408 382 authMethod={selectedAuthMethod} 409 383 inviteCode={flow.state.inviteCode} 410 384 {serverInfo} 385 385 + availableCommsChannels={serverInfo?.availableCommsChannels ?? ['email']} 386 386 + verificationChannel={flow.state.verificationChannel} 387 387 + discordUsername={flow.state.discordUsername} 388 388 + telegramUsername={flow.state.telegramUsername} 389 389 + signalUsername={flow.state.signalUsername} 411 390 migratingFromLabel={$_('migration.offline.chooseHandle.migratingDid')} 412 391 migratingFromValue={flow.state.userDid} 413 392 {loading} ··· 417 396 existingHandleVerified={false} 418 397 verifyingExistingHandle={false} 419 398 existingHandleError={null} 399 399 + checkAvailability={(h) => flow.checkHandleAvailability(h)} 420 400 onHandleChange={(h) => handleInput = h} 421 401 onDomainChange={(d) => selectedDomain = d} 422 422 - onCheckHandle={checkHandle} 423 402 onEmailChange={(e) => flow.setTargetEmail(e)} 424 403 onPasswordChange={(p) => flow.setTargetPassword(p)} 425 404 onAuthMethodChange={(m) => selectedAuthMethod = m} 426 405 onInviteCodeChange={(c) => flow.setInviteCode(c)} 406 406 + onVerificationChannelChange={(ch) => flow.updateField('verificationChannel', ch)} 407 407 + onDiscordChange={(v) => flow.updateField('discordUsername', v)} 408 408 + onTelegramChange={(v) => flow.updateField('telegramUsername', v)} 409 409 + onSignalChange={(v) => flow.updateField('signalUsername', v)} 427 410 onBack={() => flow.setStep('provide-rotation-key')} 428 411 onContinue={proceedToReview} 429 412 /> 430 413 431 414 {:else if flow.state.step === 'review'} 432 432 - <div class="step-content"> 433 433 - <h2>{$_('migration.inbound.review.title')}</h2> 434 434 - <p>{$_('migration.offline.review.desc')}</p> 435 435 - 436 436 - <div class="review-card"> 437 437 - <div class="review-row"> 438 438 - <span class="label">{$_('migration.inbound.review.did')}:</span> 439 439 - <span class="value mono">{flow.state.userDid}</span> 440 440 - </div> 441 441 - <div class="review-row"> 442 442 - <span class="label">{$_('migration.inbound.review.newHandle')}:</span> 443 443 - <span class="value">{flow.state.targetHandle}</span> 444 444 - </div> 445 445 - <div class="review-row"> 446 446 - <span class="label">{$_('migration.offline.review.carFile')}:</span> 447 447 - <span class="value">{flow.state.carFileName} ({(flow.state.carSizeBytes / 1024 / 1024).toFixed(2)} MB)</span> 448 448 - </div> 449 449 - <div class="review-row"> 450 450 - <span class="label">{$_('migration.offline.review.rotationKey')}:</span> 451 451 - <span class="value mono">{flow.state.rotationKeyDidKey}</span> 452 452 - </div> 453 453 - <div class="review-row"> 454 454 - <span class="label">{$_('migration.inbound.review.targetPds')}:</span> 455 455 - <span class="value">{window.location.origin}</span> 456 456 - </div> 457 457 - <div class="review-row"> 458 458 - <span class="label">{$_('migration.inbound.review.email')}:</span> 459 459 - <span class="value">{flow.state.targetEmail}</span> 460 460 - </div> 461 461 - <div class="review-row"> 462 462 - <span class="label">{$_('migration.inbound.review.authentication')}:</span> 463 463 - <span class="value">{flow.state.authMethod === 'passkey' ? $_('migration.inbound.review.authPasskey') : $_('migration.inbound.review.authPassword')}</span> 464 464 - </div> 465 465 - </div> 466 466 - 467 467 - <div class="warning-box"> 415 415 + <ReviewStep 416 416 + description={$_('migration.offline.review.desc')} 417 417 + rows={[ 418 418 + { label: $_('migration.inbound.review.did'), value: flow.state.userDid, mono: true }, 419 419 + { label: $_('migration.inbound.review.newHandle'), value: flow.state.targetHandle }, 420 420 + { label: $_('migration.offline.review.carFile'), value: `${flow.state.carFileName} (${(flow.state.carSizeBytes / 1024 / 1024).toFixed(2)} MB)` }, 421 421 + { label: $_('migration.offline.review.rotationKey'), value: flow.state.rotationKeyDidKey, mono: true }, 422 422 + { label: $_('migration.inbound.review.targetPds'), value: window.location.origin }, 423 423 + { label: $_(`register.${flow.state.verificationChannel}`), value: verificationIdentifier() }, 424 424 + { label: $_('migration.inbound.review.authentication'), value: flow.state.authMethod === 'passkey' ? $_('migration.inbound.review.authPasskey') : $_('migration.inbound.review.authPassword') }, 425 425 + ]} 426 426 + {loading} 427 427 + onBack={() => flow.setStep('choose-handle')} 428 428 + onContinue={startMigration} 429 429 + > 430 430 + {#snippet warning()} 468 431 <strong>{$_('migration.offline.review.plcWarningTitle')}</strong> 469 432 <p>{$_('migration.offline.review.plcWarning')}</p> 470 470 - </div> 471 471 - 472 472 - <div class="button-row"> 473 473 - <button class="ghost" onclick={() => flow.setStep('choose-handle')} disabled={loading}>{$_('migration.inbound.common.back')}</button> 474 474 - <button onclick={startMigration} disabled={loading}> 475 475 - {loading ? $_('migration.inbound.review.starting') : $_('migration.inbound.review.startMigration')} 476 476 - </button> 477 477 - </div> 478 478 - </div> 433 433 + {/snippet} 434 434 + </ReviewStep> 479 435 480 436 {:else if flow.state.step === 'creating' || flow.state.step === 'importing'} 481 481 - <div class="step-content"> 482 482 - <h2>{$_('migration.offline.migrating.title')}</h2> 483 483 - <p>{$_('migration.offline.migrating.desc')}</p> 484 484 - 485 485 - <div class="progress-section"> 486 486 - <div class="progress-item" class:completed={flow.state.step !== 'creating'} class:active={flow.state.step === 'creating'}> 487 487 - <span class="icon">{flow.state.step !== 'creating' ? '✓' : '○'}</span> 488 488 - <span>{$_('migration.offline.migrating.creating')}</span> 489 489 - </div> 490 490 - <div class="progress-item" class:active={flow.state.step === 'importing'}> 491 491 - <span class="icon">○</span> 492 492 - <span>{$_('migration.offline.migrating.importing')}</span> 493 493 - </div> 494 494 - </div> 495 495 - 496 496 - <p class="status-text">{flow.state.progress.currentOperation}</p> 497 497 - </div> 437 437 + <ProgressStep 438 438 + title={$_('migration.offline.migrating.title')} 439 439 + description={$_('migration.offline.migrating.desc')} 440 440 + items={[ 441 441 + { label: $_('migration.offline.migrating.creating'), completed: flow.state.step !== 'creating', active: flow.state.step === 'creating' }, 442 442 + { label: $_('migration.offline.migrating.importing'), completed: false, active: flow.state.step === 'importing' }, 443 443 + ]} 444 444 + statusText={flow.state.progress.currentOperation} 445 445 + /> 498 446 499 447 {:else if flow.state.step === 'migrating-blobs'} 500 500 - <div class="step-content"> 501 501 - <h2>{$_('migration.offline.blobs.title')}</h2> 502 502 - <p>{$_('migration.offline.blobs.desc')}</p> 503 503 - 504 504 - <div class="progress-section"> 505 505 - <div class="progress-item completed"> 506 506 - <span class="icon">✓</span> 507 507 - <span>{$_('migration.offline.migrating.importing')}</span> 508 508 - </div> 509 509 - <div class="progress-item active"> 510 510 - <span class="icon">○</span> 511 511 - <span>{$_('migration.offline.blobs.migrating')}</span> 512 512 - </div> 513 513 - </div> 514 514 - 515 515 - {#if flow.state.progress.blobsTotal > 0} 516 516 - <div class="blob-progress"> 517 517 - <div class="blob-progress-bar"> 518 518 - <div 519 519 - class="blob-progress-fill" 520 520 - style="width: {(flow.state.progress.blobsMigrated / flow.state.progress.blobsTotal) * 100}%" 521 521 - ></div> 522 522 - </div> 523 523 - <p class="blob-progress-text"> 524 524 - {flow.state.progress.blobsMigrated} / {flow.state.progress.blobsTotal} blobs 525 525 - </p> 526 526 - </div> 527 527 - {/if} 528 528 - 529 529 - <p class="status-text">{flow.state.progress.currentOperation}</p> 530 530 - 448 448 + <ProgressStep 449 449 + title={$_('migration.offline.blobs.title')} 450 450 + description={$_('migration.offline.blobs.desc')} 451 451 + items={[ 452 452 + { label: $_('migration.offline.migrating.importing'), completed: true }, 453 453 + { label: `${$_('migration.offline.blobs.migrating')} (${flow.state.progress.blobsMigrated}/${flow.state.progress.blobsTotal})`, completed: false, active: true }, 454 454 + ]} 455 455 + statusText={flow.state.progress.currentOperation} 456 456 + progressBar={flow.state.progress.blobsTotal > 0 ? { current: flow.state.progress.blobsMigrated, total: flow.state.progress.blobsTotal } : undefined} 457 457 + > 531 458 {#if flow.state.progress.blobsFailed.length > 0} 532 459 <div class="warning-box"> 533 460 <strong>{$_('migration.offline.blobs.failedTitle')}</strong> 534 461 <p>{$_('migration.offline.blobs.failedDesc', { values: { count: flow.state.progress.blobsFailed.length } })}</p> 535 462 </div> 536 463 {/if} 537 537 - </div> 464 464 + </ProgressStep> 538 465 539 466 {:else if flow.state.step === 'email-verify'} 540 467 <EmailVerifyStep 541 541 - email={flow.state.targetEmail} 468 468 + channel={flow.state.verificationChannel} 469 469 + identifier={verificationIdentifier()} 470 470 + handle={flow.state.targetHandle} 542 471 token={flow.state.emailVerifyToken} 543 472 {loading} 544 473 error={flow.state.error} ··· 565 494 /> 566 495 567 496 {:else if flow.state.step === 'plc-signing' || flow.state.step === 'finalizing'} 568 568 - <div class="step-content"> 569 569 - <h2>{$_('migration.inbound.finalizing.title')}</h2> 570 570 - <p>{$_('migration.inbound.finalizing.desc')}</p> 571 571 - 572 572 - <div class="progress-section"> 573 573 - <div class="progress-item" class:completed={flow.state.progress.plcSigned}> 574 574 - <span class="icon">{flow.state.progress.plcSigned ? '✓' : '○'}</span> 575 575 - <span>{$_('migration.inbound.finalizing.signingPlc')}</span> 576 576 - </div> 577 577 - <div class="progress-item" class:completed={flow.state.progress.activated}> 578 578 - <span class="icon">{flow.state.progress.activated ? '✓' : '○'}</span> 579 579 - <span>{$_('migration.inbound.finalizing.activating')}</span> 580 580 - </div> 581 581 - </div> 582 582 - 583 583 - <p class="status-text">{flow.state.progress.currentOperation}</p> 584 584 - </div> 497 497 + <ProgressStep 498 498 + title={$_('migration.inbound.finalizing.title')} 499 499 + description={$_('migration.inbound.finalizing.desc')} 500 500 + items={[ 501 501 + { label: $_('migration.inbound.finalizing.signingPlc'), completed: flow.state.progress.plcSigned }, 502 502 + { label: $_('migration.inbound.finalizing.activating'), completed: flow.state.progress.activated }, 503 503 + ]} 504 504 + statusText={flow.state.progress.currentOperation} 505 505 + /> 585 506 586 507 {:else if flow.state.step === 'success'} 587 508 <SuccessStep

+46

frontend/src/components/migration/ProgressStep.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { Snippet } from 'svelte' 3 3 + 4 4 + interface ProgressItem { 5 5 + label: string 6 6 + completed: boolean 7 7 + active?: boolean 8 8 + } 9 9 + 10 10 + interface Props { 11 11 + title: string 12 12 + description: string 13 13 + items: ProgressItem[] 14 14 + statusText: string 15 15 + progressBar?: { current: number; total: number } 16 16 + children?: Snippet 17 17 + } 18 18 + 19 19 + let { title, description, items, statusText, progressBar, children }: Props = $props() 20 20 + </script> 21 21 + 22 22 + <div class="step-content"> 23 23 + <h2>{title}</h2> 24 24 + <p>{description}</p> 25 25 + 26 26 + <div class="progress-section"> 27 27 + {#each items as item} 28 28 + <div class="progress-item" class:completed={item.completed} class:active={item.active}> 29 29 + <span class="icon">{item.completed ? '✓' : '○'}</span> 30 30 + <span>{item.label}</span> 31 31 + </div> 32 32 + {/each} 33 33 + </div> 34 34 + 35 35 + {#if progressBar && progressBar.total > 0} 36 36 + <div class="progress-bar"> 37 37 + <div class="progress-fill" style="width: {(progressBar.current / progressBar.total) * 100}%"></div> 38 38 + </div> 39 39 + {/if} 40 40 + 41 41 + <p class="status-text">{statusText}</p> 42 42 + 43 43 + {#if children} 44 44 + {@render children()} 45 45 + {/if} 46 46 + </div>

+48

frontend/src/components/migration/ReviewStep.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { Snippet } from 'svelte' 3 3 + import { _ } from '../../lib/i18n' 4 4 + 5 5 + interface ReviewRow { 6 6 + label: string 7 7 + value: string 8 8 + mono?: boolean 9 9 + } 10 10 + 11 11 + interface Props { 12 12 + description: string 13 13 + rows: ReviewRow[] 14 14 + loading: boolean 15 15 + onBack: () => void 16 16 + onContinue: () => void 17 17 + warning?: Snippet 18 18 + } 19 19 + 20 20 + let { description, rows, loading, onBack, onContinue, warning }: Props = $props() 21 21 + </script> 22 22 + 23 23 + <div class="step-content"> 24 24 + <h2>{$_('migration.inbound.review.title')}</h2> 25 25 + <p>{description}</p> 26 26 + 27 27 + <div class="review-card"> 28 28 + {#each rows as row} 29 29 + <div class="review-row"> 30 30 + <span class="label">{row.label}:</span> 31 31 + <span class="value" class:mono={row.mono}>{row.value}</span> 32 32 + </div> 33 33 + {/each} 34 34 + </div> 35 35 + 36 36 + {#if warning} 37 37 + <div class="warning-box"> 38 38 + {@render warning()} 39 39 + </div> 40 40 + {/if} 41 41 + 42 42 + <div class="button-row"> 43 43 + <button class="ghost" onclick={onBack} disabled={loading}>{$_('migration.inbound.common.back')}</button> 44 44 + <button onclick={onContinue} disabled={loading}> 45 45 + {loading ? $_('migration.inbound.review.starting') : $_('migration.inbound.review.startMigration')} 46 46 + </button> 47 47 + </div> 48 48 + </div>

+22

frontend/src/components/migration/StepIndicator.svelte

··· 1 1 + <script lang="ts"> 2 2 + interface Props { 3 3 + steps: string[] 4 4 + currentIndex: number 5 5 + } 6 6 + 7 7 + let { steps, currentIndex }: Props = $props() 8 8 + </script> 9 9 + 10 10 + <div class="step-indicator"> 11 11 + {#each steps as _, i} 12 12 + <div class="step" class:active={i === currentIndex} class:completed={i < currentIndex}> 13 13 + <div class="step-dot">{i < currentIndex ? '✓' : i + 1}</div> 14 14 + </div> 15 15 + {#if i < steps.length - 1} 16 16 + <div class="step-line" class:completed={i < currentIndex}></div> 17 17 + {/if} 18 18 + {/each} 19 19 + </div> 20 20 + <div class="current-step-label"> 21 21 + <strong>{steps[currentIndex]}</strong> · Step {currentIndex + 1} of {steps.length} 22 22 + </div>

+1 -93

frontend/src/styles/migration.css

··· 92 92 margin: 0 0 var(--space-5) 0; 93 93 } 94 94 95 95 - .info-box { 96 96 - background: var(--accent-muted); 97 97 - padding: var(--space-5); 98 98 - margin-bottom: var(--space-5); 99 99 - } 100 100 - 101 95 .info-box h3 { 102 96 margin: 0 0 var(--space-3) 0; 103 97 font-size: var(--text-base); ··· 119 113 color: var(--text-secondary); 120 114 } 121 115 122 122 - .warning-box { 123 123 - background: var(--warning-bg); 124 124 - padding: var(--space-5); 125 125 - margin-bottom: var(--space-5); 126 126 - font-size: var(--text-sm); 127 127 - } 128 128 - 129 116 .warning-box strong { 130 117 color: var(--warning-text); 131 118 } ··· 158 145 159 146 .button-row { 160 147 display: flex; 148 148 + flex-direction: row; 161 149 gap: var(--space-3); 162 150 justify-content: flex-end; 163 151 margin-top: var(--space-5); ··· 260 248 font-size: var(--text-sm); 261 249 } 262 250 263 263 - .blob-progress { 264 264 - margin: var(--space-4) 0; 265 265 - } 266 266 - 267 267 - .blob-progress-bar { 268 268 - height: 8px; 269 269 - background: var(--bg-primary); 270 270 - overflow: hidden; 271 271 - margin-bottom: var(--space-2); 272 272 - } 273 273 - 274 274 - .blob-progress-fill { 275 275 - height: 100%; 276 276 - background: var(--accent); 277 277 - } 278 278 - 279 279 - .blob-progress-text { 280 280 - text-align: center; 281 281 - color: var(--text-secondary); 282 282 - font-size: var(--text-sm); 283 283 - margin: 0; 284 284 - } 285 251 286 252 .success-content { 287 253 text-align: center; ··· 411 377 color: var(--text-secondary); 412 378 } 413 379 414 414 - .app-password-display { 415 415 - background: var(--bg-primary); 416 416 - padding: var(--space-5); 417 417 - margin-bottom: var(--space-5); 418 418 - text-align: center; 419 419 - } 420 420 - 421 421 - .app-password-label { 422 422 - font-size: var(--text-sm); 423 423 - color: var(--text-secondary); 424 424 - margin-bottom: var(--space-3); 425 425 - } 426 426 - 427 427 - .app-password-code { 428 428 - display: block; 429 429 - font-family: var(--font-mono); 430 430 - font-size: var(--text-lg); 431 431 - letter-spacing: 0.1em; 432 432 - padding: var(--space-4); 433 433 - background: var(--bg-tertiary); 434 434 - margin-bottom: var(--space-4); 435 435 - user-select: all; 436 436 - } 437 437 - 438 438 - .copy-btn { 439 439 - font-size: var(--text-sm); 440 440 - } 441 441 - 442 442 - .current-account { 443 443 - background: var(--bg-primary); 444 444 - padding: var(--space-4); 445 445 - margin-bottom: var(--space-5); 446 446 - display: flex; 447 447 - justify-content: space-between; 448 448 - align-items: center; 449 449 - } 450 450 - 451 380 .current-account .label { 452 381 color: var(--text-secondary); 453 382 } ··· 457 386 font-size: var(--text-lg); 458 387 } 459 388 460 460 - .server-info { 461 461 - background: var(--bg-primary); 462 462 - padding: var(--space-4); 463 463 - margin-top: var(--space-5); 464 464 - } 465 465 - 466 389 .server-info h3 { 467 390 margin: 0 0 var(--space-3) 0; 468 391 font-size: var(--text-base); ··· 488 411 font-size: var(--text-sm); 489 412 } 490 413 491 491 - .final-warning { 492 492 - background: var(--error-bg); 493 493 - border-color: var(--error-border); 494 494 - } 495 495 - 496 414 .final-warning strong { 497 415 color: var(--error-text); 498 416 } ··· 596 514 margin-bottom: var(--space-4); 597 515 } 598 516 599 599 - .message.success { 600 600 - background: var(--success-bg); 601 601 - color: var(--success-text); 602 602 - } 603 603 - 604 604 - .message.error { 605 605 - background: var(--error-bg); 606 606 - color: var(--error-text); 607 607 - } 608 608 - 609 517 .handle-choice-options { 610 518 display: flex; 611 519 flex-direction: column;