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

<template>
  <div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
    <!-- Main Glass Container -->
    <div class="max-w-[800px] w-full relative z-10 path-glass-container onb-scroll-container">
      <!-- Header (before DID is retrieved) -->
      <div v-if="!generatedDid" class="text-center flex-shrink-0">
        <h1 class="text-xl sm:text-2xl md:text-[26px] font-semibold text-white/96 mb-3 sm:mb-6 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
          Your node's identity
        </h1>
        <p class="text-sm sm:text-base md:text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto mb-4 sm:mb-6">
          Your node has a Decentralized Identifier (DID) for secure, passwordless authentication.
        </p>
      </div>

      <!-- Content Area -->
      <div class="flex flex-col items-center gap-6 mb-6">
        <!-- Generating state — spinning lock -->
        <div v-if="!generatedDid && isGenerating" class="text-center">
          <div class="flex justify-center mb-4">
            <div class="w-16 h-16 rounded-full bg-white/10 flex items-center justify-center onb-lock-spin">
              <svg class="w-8 h-8 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
            </div>
          </div>
          <p class="text-lg text-white/80">Generating your identity key...</p>
        </div>

        <!-- Connection failed - retry -->
        <div v-if="!generatedDid && !isGenerating && connectionFailed" class="text-center">
          <p class="text-white/60 text-base mb-4">{{ errorMessage }}</p>
          <button
            @click="fetchDid"
            class="path-action-button path-action-button--continue"
          >
            Retry
          </button>
        </div>

        <!-- Generated DID Display -->
        <div v-if="generatedDid" class="w-full max-w-[600px] space-y-4">
          <!-- Success Message -->
          <div class="text-center mb-6">
            <div class="flex justify-center mb-6">
              <div class="path-option-card cursor-default w-20 h-20 rounded-full flex items-center justify-center">
                <svg class="w-10 h-10 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
              </div>
            </div>
            <p v-if="autoAdvancing" class="text-lg text-white/80 mb-2">DID retrieved, continuing...</p>
            <p v-else class="text-[20px] text-white/80 leading-relaxed max-w-[600px] mx-auto mb-6">
              Your node's decentralized identifier
            </p>
          </div>

          <!-- DID Display Card -->
          <div class="path-option-card cursor-default px-6 py-6">
            <div class="text-left">
              <h3 class="text-sm font-semibold text-white/80 mb-2 uppercase tracking-wide">Your DID</h3>
              <div class="bg-black/40 rounded-lg p-4 mb-3 backdrop-blur-sm border border-white/10 flex items-start gap-3">
                <p class="text-white/95 font-mono text-sm break-all leading-relaxed flex-1">
                  {{ generatedDid }}
                </p>
                <button
                  @click="copyDid"
                  class="shrink-0 p-1.5 rounded hover:bg-white/10 transition-colors text-white/50 hover:text-white/90"
                  :title="didCopied ? 'Copied!' : 'Copy DID'"
                >
                  <svg v-if="!didCopied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                  </svg>
                  <svg v-else class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                </button>
              </div>
              <p class="text-base text-white/60">
                This is your sovereign digital identity. It proves you are you, without any company in the middle.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="flex gap-4 max-w-[600px] mx-auto flex-shrink-0">
        <button
          @click="skipForNow"
          class="path-action-button path-action-button--skip"
        >
          Skip
        </button>
        <button
          v-if="generatedDid"
          @click="proceed"
          class="path-action-button path-action-button--continue"
        >
          Continue
        </button>
      </div>
    </div>
  </div>
</template>

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

const router = useRouter()
const generatedDid = ref<string>('')
const isGenerating = ref(false)
const connectionFailed = ref(false)
const autoAdvancing = ref(false)
const errorMessage = ref<string>('')
const didCopied = ref(false)

function storeDidState(did: string, pubkey: string) {
  localStorage.setItem('neode_did', did)
  localStorage.setItem('neode_did_state', JSON.stringify({ did, kid: `${did}#key-1`, pubkey }))
}

async function fetchDid() {
  isGenerating.value = true
  connectionFailed.value = false
  errorMessage.value = ''

  for (let attempt = 0; attempt < 3; attempt++) {
    try {
      const { did, pubkey } = await rpcClient.getNodeDid()
      generatedDid.value = did
      storeDidState(did, pubkey)
      autoAdvanceAfterDelay()
      isGenerating.value = false
      return
    } catch (err) {
      if (attempt < 2) {
        await new Promise((r) => setTimeout(r, 1000 * (attempt + 1)))
      }
    }
  }

  isGenerating.value = false
  connectionFailed.value = true
  errorMessage.value = 'Could not connect to your server. Please check that it is running and try again.'
}

function autoAdvanceAfterDelay() {
  autoAdvancing.value = true
  setTimeout(() => {
    router.push('/onboarding/identity').catch(() => {})
  }, 2000)
}

onMounted(() => {
  const cached = localStorage.getItem('neode_did')
  if (cached && !cached.includes('...')) {
    generatedDid.value = cached
  } else {
    fetchDid()
  }
})

function proceed() {
  router.push('/onboarding/identity').catch(() => {})
}

function skipForNow() {
  router.push('/onboarding/identity').catch(() => {})
}

function copyDid() {
  if (!generatedDid.value) return
  navigator.clipboard.writeText(generatedDid.value).catch(() => {})
  didCopied.value = true
  setTimeout(() => { didCopied.value = false }, 2000)
}
</script>

<style scoped>
.onb-lock-spin {
  animation: onb-lock-pulse 1.2s ease-in-out infinite;
}
@keyframes onb-lock-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.7; }
}
</style>