174 lines
7.7 KiB
Vue
174 lines
7.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { rpcClient } from '@/api/rpc-client'
|
|
|
|
// Lightning seed (aezeed) backup card. Shown on the LND app detail page.
|
|
// The backend captures the aezeed at wallet-init time; until the user
|
|
// confirms writing it down (`acknowledged`), the card renders as a
|
|
// prominent first-launch prompt.
|
|
|
|
const available = ref(false)
|
|
const acknowledged = ref(true)
|
|
const statusLoaded = ref(false)
|
|
|
|
async function loadStatus() {
|
|
try {
|
|
const res = await rpcClient.call<{ available: boolean; acknowledged: boolean }>({
|
|
method: 'lnd.seed-backup-status',
|
|
timeout: 5000,
|
|
})
|
|
available.value = !!res.available
|
|
acknowledged.value = !!res.acknowledged
|
|
statusLoaded.value = true
|
|
} catch {
|
|
statusLoaded.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(loadStatus)
|
|
|
|
// Reveal modal — re-auth gated (password + 2FA when enabled), same UX as
|
|
// the recovery-phrase reveal in Settings → Backup.
|
|
const showRevealModal = ref(false)
|
|
const revealPassword = ref('')
|
|
const revealCode = ref('')
|
|
const revealing = ref(false)
|
|
const revealError = ref('')
|
|
const revealedWords = ref<string[]>([])
|
|
const wordsHidden = ref(true)
|
|
const wordsCopied = ref(false)
|
|
const acking = ref(false)
|
|
|
|
function openReveal() {
|
|
revealPassword.value = ''
|
|
revealCode.value = ''
|
|
revealError.value = ''
|
|
revealedWords.value = []
|
|
wordsHidden.value = true
|
|
showRevealModal.value = true
|
|
}
|
|
|
|
async function submitReveal() {
|
|
if (revealing.value || !revealPassword.value) return
|
|
revealing.value = true
|
|
revealError.value = ''
|
|
try {
|
|
const params: Record<string, string> = { password: revealPassword.value }
|
|
if (revealCode.value) params.code = revealCode.value
|
|
const res = await rpcClient.call<{ words: string[] }>({ method: 'lnd.seed-reveal', params })
|
|
revealedWords.value = res.words || []
|
|
wordsHidden.value = true
|
|
} catch (e: unknown) {
|
|
revealError.value = e instanceof Error ? e.message : 'Failed to reveal the Lightning seed'
|
|
} finally {
|
|
revealing.value = false
|
|
}
|
|
}
|
|
|
|
function closeReveal() {
|
|
showRevealModal.value = false
|
|
revealedWords.value = []
|
|
revealPassword.value = ''
|
|
revealCode.value = ''
|
|
}
|
|
|
|
async function copyRevealedWords() {
|
|
try {
|
|
await navigator.clipboard.writeText(revealedWords.value.join(' '))
|
|
wordsCopied.value = true
|
|
setTimeout(() => { wordsCopied.value = false }, 2000)
|
|
} catch { /* clipboard unavailable */ }
|
|
}
|
|
|
|
async function confirmBackedUp() {
|
|
if (acking.value) return
|
|
acking.value = true
|
|
try {
|
|
await rpcClient.call({ method: 'lnd.seed-backup-ack' })
|
|
acknowledged.value = true
|
|
closeReveal()
|
|
} catch { /* keep the modal open; user can retry */ } finally {
|
|
acking.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="statusLoaded && available" class="glass-card px-6 py-6 mb-6" :class="!acknowledged ? 'border border-orange-400/40' : ''">
|
|
<div v-if="!acknowledged" class="flex items-center gap-2 mb-3 text-orange-300 text-sm font-medium" role="alert">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86l-8.4 14.55A1.5 1.5 0 003.19 21h17.62a1.5 1.5 0 001.3-2.59l-8.4-14.55a1.5 1.5 0 00-2.62 0z" />
|
|
</svg>
|
|
Your Lightning seed hasn't been backed up yet
|
|
</div>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="min-w-0">
|
|
<h2 class="text-xl font-semibold text-white/96 mb-1">Lightning wallet seed</h2>
|
|
<p class="text-sm text-white/60">
|
|
View the 24-word recovery seed for this node's Lightning wallet. You'll need to
|
|
confirm your password (and 2FA code, if enabled). Write it down and store it
|
|
offline — anyone with these words controls your Lightning funds.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="shrink-0 glass-button rounded-lg px-4 py-2 text-sm font-medium"
|
|
:class="!acknowledged ? 'bg-orange-500/20 border-orange-400/30' : ''"
|
|
@click="openReveal"
|
|
>{{ acknowledged ? 'Reveal' : 'Back up now' }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Teleport to="body">
|
|
<div v-if="showRevealModal" class="fixed inset-0 z-[3000] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="closeReveal">
|
|
<div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="reveal-lnd-seed-title">
|
|
<h3 id="reveal-lnd-seed-title" class="text-lg font-semibold text-white mb-1">Reveal Lightning seed</h3>
|
|
|
|
<template v-if="revealedWords.length === 0">
|
|
<p class="text-sm text-white/60 mb-4">Confirm your credentials to display the 24-word Lightning seed.</p>
|
|
<form @submit.prevent="submitReveal" class="space-y-3">
|
|
<div>
|
|
<label class="block text-xs text-white/60 mb-1">Password</label>
|
|
<input v-model="revealPassword" type="password" autocomplete="current-password" class="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:border-white/30" placeholder="Your login password" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-white/60 mb-1">2FA code <span class="text-white/30">(if enabled)</span></label>
|
|
<input v-model="revealCode" inputmode="numeric" autocomplete="one-time-code" class="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm font-mono tracking-widest focus:outline-none focus:border-white/30" placeholder="123456" />
|
|
</div>
|
|
<p v-if="revealError" class="text-xs text-red-300 bg-red-500/10 border border-red-400/20 rounded-lg px-3 py-2">{{ revealError }}</p>
|
|
<div class="flex gap-2 pt-1">
|
|
<button type="button" @click="closeReveal" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium">Cancel</button>
|
|
<button type="submit" :disabled="revealing || !revealPassword" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium bg-orange-500/20 border-orange-400/30 disabled:opacity-50">
|
|
{{ revealing ? 'Verifying…' : 'Reveal' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<p class="text-sm text-white/60 mb-3">Write these down and store them offline. Tap to {{ wordsHidden ? 'reveal' : 'hide' }}.</p>
|
|
<div class="relative">
|
|
<div
|
|
class="grid grid-cols-2 sm:grid-cols-3 gap-2 p-3 bg-white/5 rounded-lg transition-all select-text"
|
|
:class="wordsHidden ? 'blur-md' : ''"
|
|
@click="wordsHidden = !wordsHidden"
|
|
>
|
|
<div v-for="(w, i) in revealedWords" :key="i" class="flex items-center gap-1.5 text-sm">
|
|
<span class="text-white/30 text-xs w-5 text-right">{{ i + 1 }}.</span>
|
|
<span class="text-white font-mono">{{ w }}</span>
|
|
</div>
|
|
</div>
|
|
<button v-if="wordsHidden" type="button" class="absolute inset-0 flex items-center justify-center text-xs text-white/70 font-medium" @click="wordsHidden = false">Tap to reveal</button>
|
|
</div>
|
|
<div class="flex gap-2 pt-4">
|
|
<button type="button" @click="copyRevealedWords" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium">{{ wordsCopied ? 'Copied!' : 'Copy' }}</button>
|
|
<button type="button" :disabled="acking" @click="confirmBackedUp" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium bg-orange-500/20 border-orange-400/30 disabled:opacity-50">
|
|
{{ acking ? 'Saving…' : "I've backed it up" }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|