archy/neode-ui/src/views/OnboardingIntro.vue

<template>
  <div class="min-h-full flex items-center justify-center p-4 sm:p-6">
    <div class="max-w-2xl w-full">
      <div class="glass-card p-8 pt-16 sm:p-12 sm:pt-20 text-center relative overflow-visible onb-card">
        <!-- Logo - half in, half out of container -->
        <div class="absolute -top-8 sm:-top-10 left-0 right-0 flex justify-center z-10 onb-logo">
          <div class="logo-gradient-border w-16 h-16 sm:w-20 sm:h-20">
            <AnimatedLogo no-border fit />
          </div>
        </div>

        <h1 class="text-2xl sm:text-4xl font-bold text-white mb-3 sm:mb-4 onb-title">
          Welcome to Archipelago
        </h1>

        <p class="text-base sm:text-xl text-white/80 mb-8 sm:mb-12 max-w-2xl mx-auto onb-tagline">
          Your personal server for a sovereign digital life
        </p>

        <button
          ref="ctaButton"
          @click="goToOptions"
          class="glass-button px-6 py-3 sm:px-8 sm:py-4 rounded-lg text-base sm:text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30 onb-cta"
        >
          Unlock your sovereignty →
        </button>

        <a
          class="text-white/50 hover:text-white/80 underline text-sm cursor-pointer mt-4 block text-center onb-cta"
          @click="showRestore = true"
        >
          Restore from backup
        </a>

        <!-- Restore Panel -->
        <div v-if="showRestore" class="mt-6 glass-card px-6 py-6 text-left">
          <h3 class="text-sm font-semibold text-white/80 mb-3 uppercase tracking-wide">Restore Identity from Backup</h3>
          <input
            type="file"
            accept=".json"
            class="block w-full text-sm text-white/60 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-white/10 file:text-white/80 hover:file:bg-white/20 mb-3"
            @change="onFileSelect"
          />
          <input
            v-model="passphrase"
            type="password"
            placeholder="Backup passphrase"
            class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white text-sm focus:outline-none focus:border-white/40 mb-3"
          />
          <p v-if="restoreError" class="text-red-400 text-xs mb-2">{{ restoreError }}</p>
          <p v-if="restoreSuccess" class="text-green-400 text-xs mb-2">Identity restored successfully!</p>
          <div class="flex gap-3">
            <button class="glass-button text-sm px-4 py-2" @click="showRestore = false">Cancel</button>
            <button
              class="glass-button text-sm px-4 py-2"
              :disabled="!restoreFile || !passphrase || restoreLoading"
              @click="performRestore"
            >
              {{ restoreLoading ? 'Restoring...' : 'Restore' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import AnimatedLogo from '@/components/AnimatedLogo.vue'
import { rpcClient } from '@/api/rpc-client'

const router = useRouter()
const ctaButton = ref<HTMLButtonElement | null>(null)

onMounted(() => {
  // Auto-focus after entry animation completes (1.4s animation delay + 0.6s duration)
  setTimeout(() => {
    ctaButton.value?.focus({ preventScroll: true })
  }, 2100)
})

function goToOptions() {
  router.push('/onboarding/path').catch(() => {})
}

// Restore from backup
const showRestore = ref(false)
const restoreFile = ref<Record<string, unknown> | null>(null)
const passphrase = ref('')
const restoreLoading = ref(false)
const restoreError = ref('')
const restoreSuccess = ref(false)

function onFileSelect(e: Event) {
  const target = e.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = () => {
    try {
      restoreFile.value = JSON.parse(reader.result as string)
      restoreError.value = ''
    } catch {
      restoreError.value = 'Invalid backup file format'
      restoreFile.value = null
    }
  }
  reader.readAsText(file)
}

async function performRestore() {
  if (!restoreFile.value || !passphrase.value) return
  restoreLoading.value = true
  restoreError.value = ''
  try {
    await rpcClient.call({
      method: 'backup.restore-identity',
      params: { backup: restoreFile.value, passphrase: passphrase.value },
    })
    restoreSuccess.value = true
    setTimeout(() => {
      router.push('/onboarding/did')
    }, 1500)
  } catch (err) {
    restoreError.value = err instanceof Error ? err.message : 'Restore failed'
  } finally {
    restoreLoading.value = false
  }
}
</script>

<style scoped>
.onb-card {
  opacity: 0;
  animation: onb-card-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
}
.onb-logo {
  opacity: 0;
  animation: onb-scale-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}
.onb-title {
  opacity: 0;
  animation: onb-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
}
.onb-tagline {
  opacity: 0;
  animation: onb-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.0s forwards;
}
.onb-cta {
  opacity: 0;
  animation: onb-fade-in 0.6s ease 1.4s forwards;
}

@keyframes onb-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes onb-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes onb-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes onb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>