a2bf51615f
Replaced single hardcoded release note with scrollable history of all alpha releases (alpha.1 through alpha.9). Each release has version badge, date, and categorized highlights. Inner container scrolls independently with max-height 85vh. Current release highlighted with orange badge, older releases in muted style with left border timeline. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1631 lines
76 KiB
Vue
1631 lines
76 KiB
Vue
<template>
|
||
<div class="pb-6">
|
||
<!-- Controller indicator - Mobile only (desktop shows in sidebar) -->
|
||
<div class="md:hidden mb-4">
|
||
<ControllerIndicator />
|
||
</div>
|
||
|
||
<!-- Account Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<h2 class="text-xl font-semibold text-white/96 mb-6">{{ t('settings.account') }}</h2>
|
||
|
||
<!-- Info Grid -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||
<!-- Server Name Card (editable) -->
|
||
<div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||
</svg>
|
||
<p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.serverName') }}</p>
|
||
</div>
|
||
<div v-if="editingServerName" class="flex items-center gap-2">
|
||
<input
|
||
ref="serverNameInput"
|
||
v-model="serverNameDraft"
|
||
type="text"
|
||
maxlength="64"
|
||
class="flex-1 px-3 py-1.5 bg-white/10 border border-white/20 rounded-lg text-white text-lg font-semibold focus:outline-none focus:border-white/40 transition-colors"
|
||
@keydown.enter="saveServerName"
|
||
@keydown.escape="editingServerName = false"
|
||
/>
|
||
<button
|
||
class="px-3 py-1.5 bg-white/10 border border-white/20 rounded-lg text-white/70 hover:text-white hover:bg-white/15 transition-colors text-sm"
|
||
@click="saveServerName"
|
||
>Save</button>
|
||
<button
|
||
class="px-3 py-1.5 text-white/50 hover:text-white/70 transition-colors text-sm"
|
||
@click="editingServerName = false"
|
||
>Cancel</button>
|
||
</div>
|
||
<div v-else class="flex items-center gap-2 group cursor-pointer" @click="startEditServerName">
|
||
<p class="text-lg font-semibold text-white/95">{{ serverName }}</p>
|
||
<svg class="w-4 h-4 text-white/30 group-hover:text-white/60 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Version Card -->
|
||
<div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||
</svg>
|
||
<p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('common.version') }}</p>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<p class="text-lg font-semibold text-white/95">{{ version }}</p>
|
||
<button
|
||
@click="showReleaseNotes = true"
|
||
class="glass-button px-3 py-1.5 text-xs"
|
||
>What's New</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Release Notes Modal -->
|
||
<Teleport to="body">
|
||
<Transition name="modal">
|
||
<div v-if="showReleaseNotes" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click="showReleaseNotes = false">
|
||
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
|
||
<div @click.stop class="glass-card p-6 max-w-lg w-full relative z-10 flex flex-col" style="max-height: 85vh">
|
||
<div class="flex items-start justify-between gap-4 mb-5 shrink-0">
|
||
<h3 class="text-xl font-semibold text-white">What's New</h3>
|
||
<button @click="showReleaseNotes = false" class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors" aria-label="Close">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||
</button>
|
||
</div>
|
||
<div class="overflow-y-auto flex-1 min-h-0 space-y-6 pr-1">
|
||
<!-- alpha.9 — Current -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs font-mono px-2 py-0.5 rounded bg-orange-500/20 text-orange-300">v1.2.0-alpha.9</span>
|
||
<span class="text-xs text-white/40">Mar 18, 2026</span>
|
||
</div>
|
||
<div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Security Hardening Complete</h4>
|
||
<p>All 12 pentest findings fixed. CSRF tokens now survive restarts. Password hashing upgraded to Argon2id. Bitcoin RPC gets a unique random password on every install. Federation messages require ed25519 signatures.</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">7 Bugs Squashed</h4>
|
||
<p>Random logouts fixed (P0). Uninstall dialog is now a proper full-screen modal with an "Uninstalling..." overlay. App cards no longer flicker between Start/Launch during container scans. ElectrumX index estimate corrected.</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Bitcoin Sync on Dashboard</h4>
|
||
<p>Homepage System card now shows Bitcoin Core sync progress, block height, and green/orange status indicator when Bitcoin is running.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- alpha.8 -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.8</span>
|
||
<span class="text-xs text-white/40">Mar 18, 2026</span>
|
||
</div>
|
||
<div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Pentest Remediation (9/12)</h4>
|
||
<p>Fixed 9 of 12 security findings: session auth on LND connect info, DEV_MODE removed from production, ed25519 signature verification on node messages, path traversal protection, NIP-07 origin validation, AIUI session checks, strict onion validation.</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">UI Polish Batch</h4>
|
||
<p>Fedimint renamed to "Fedimint Guardian". Tab-launch icons. Marketplace sorts installed apps to end. Mesh mobile layout fixed. On-Chain first in receive modals. Federation shows names instead of DIDs. Cleaner iframe error screens.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- alpha.7 -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.7</span>
|
||
<span class="text-xs text-white/40">Mar 18, 2026</span>
|
||
</div>
|
||
<div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Marketplace & Credentials</h4>
|
||
<p>29 containers running rootless. Marketplace app aliases working. Credential injection for inter-container authentication.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- alpha.4–6 -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.4–6</span>
|
||
<span class="text-xs text-white/40">Mar 18, 2026</span>
|
||
</div>
|
||
<div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Rootless Podman Migration</h4>
|
||
<p>Migrated all containers from root to rootless Podman. UID namespace mapping, volume ownership fixes, sysctl tuning. Bitcoin RPC verified, all web services confirmed healthy. 29 containers up and running.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- alpha.2–3 -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.2–3</span>
|
||
<span class="text-xs text-white/40">Mar 18, 2026</span>
|
||
</div>
|
||
<div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Systemd Hardening Restored</h4>
|
||
<p>Full systemd security sandbox restored now that containers run rootless. NoNewPrivileges, restricted namespaces, and system call filtering re-enabled. Session persistence and boot sequence fixes.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- alpha.1 -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.1</span>
|
||
<span class="text-xs text-white/40">Mar 18, 2026</span>
|
||
</div>
|
||
<div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Mesh Radio & Container Stability</h4>
|
||
<p>LoRa mesh radio auto-detects USB port changes with a new Connect button. Fixed container crash loops — all apps start cleanly and stay stable. Apps starting up show progress instead of re-appearing in the store. Tor routing enabled by default for Bitcoin and Lightning.</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white font-medium mb-1">Off-Grid Bitcoin</h4>
|
||
<p>Receive Bitcoin block headers over mesh radio. Dead man's switch broadcasts location to trusted contacts if you go silent. GPS sharing is opt-in only.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button @click="showReleaseNotes = false" class="glass-button w-full mt-4 py-2 text-sm shrink-0">Close</button>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
|
||
<!-- Session Card -->
|
||
<div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.sessionStatus') }}</p>
|
||
</div>
|
||
<p class="text-base font-medium text-white/90">{{ t('settings.loggedIn') }}</p>
|
||
</div>
|
||
|
||
<!-- Identity Card: DID + Tor Address (onion below DID, with copy) -->
|
||
<div v-if="userDid || serverTorAddress" class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2 space-y-4">
|
||
<!-- DID -->
|
||
<div v-if="userDid">
|
||
<div class="flex items-center justify-between gap-2 mb-2">
|
||
<div class="flex items-center gap-3 min-w-0">
|
||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||
</svg>
|
||
<p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.yourDid') }}</p>
|
||
</div>
|
||
<button
|
||
@click="copyDid"
|
||
class="shrink-0 px-3 py-1.5 rounded-lg glass-button glass-button-sm text-xs font-medium text-white/90 hover:text-white transition-colors flex items-center gap-1.5"
|
||
>
|
||
<svg v-if="!copiedDid" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
<span v-else class="text-green-400 text-xs">{{ t('common.copied') }}</span>
|
||
<span v-if="!copiedDid">{{ t('common.copy') }}</span>
|
||
</button>
|
||
</div>
|
||
<p class="text-sm font-mono text-white/90 break-all" :title="userDid">{{ userDid }}</p>
|
||
<p class="text-xs text-white/50 mt-1">{{ t('settings.didHelper') }}</p>
|
||
</div>
|
||
|
||
<!-- Tor / Onion Address (below DID, with copy button) -->
|
||
<div v-if="serverTorAddress" :class="userDid ? 'pt-4 border-t border-white/10' : ''">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||
</svg>
|
||
<p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.onionAddress') }}</p>
|
||
</div>
|
||
<p class="text-sm font-mono text-amber-400/90 break-all mb-1" :title="serverTorAddress">{{ serverTorAddress }}</p>
|
||
<p class="text-xs text-white/50 mb-3">{{ t('settings.onionHelper') }}</p>
|
||
<button
|
||
@click="copyOnionAddress"
|
||
class="w-full min-h-[44px] rounded-lg glass-button text-sm font-medium text-white/90 hover:text-white transition-colors flex items-center justify-center gap-2"
|
||
>
|
||
<svg v-if="!copiedOnion" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
<span v-if="!copiedOnion">{{ t('common.copy') }}</span>
|
||
<span v-else class="text-green-400">{{ t('common.copied') }}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Change Password -->
|
||
<div data-controller-container tabindex="0" class="mb-6">
|
||
<button
|
||
@click="showChangePasswordModal = true"
|
||
class="w-full flex items-center justify-center gap-2 mb-4 px-4 py-2 rounded-lg border border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10 transition-colors"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||
</svg>
|
||
<span>{{ t('settings.changePassword') }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Change Password Modal -->
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="showChangePasswordModal"
|
||
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
|
||
@click.self="closeChangePasswordModal()"
|
||
>
|
||
<div ref="changePasswordModalRef" class="glass-card p-6 max-w-md w-full">
|
||
<h3 class="text-lg font-semibold text-white mb-4">{{ t('settings.changePasswordTitle') }}</h3>
|
||
<p class="text-white/70 text-sm mb-4">{{ t('settings.changePasswordDesc') }}</p>
|
||
<form @submit.prevent="handleChangePassword" class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.currentPassword') }}</label>
|
||
<input
|
||
v-model="changePasswordForm.currentPassword"
|
||
type="password"
|
||
required
|
||
autocomplete="current-password"
|
||
class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
|
||
:placeholder="t('login.enterPasswordPlaceholder')"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.newPassword') }}</label>
|
||
<input
|
||
v-model="changePasswordForm.newPassword"
|
||
type="password"
|
||
required
|
||
autocomplete="new-password"
|
||
class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
|
||
:placeholder="t('settings.passwordPlaceholder')"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.confirmNewPassword') }}</label>
|
||
<input
|
||
v-model="changePasswordForm.confirmPassword"
|
||
type="password"
|
||
required
|
||
autocomplete="new-password"
|
||
class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
|
||
:placeholder="t('settings.confirmNewPassword')"
|
||
/>
|
||
</div>
|
||
<label class="flex items-center gap-2 text-sm text-white/80">
|
||
<input v-model="changePasswordForm.alsoChangeSsh" type="checkbox" class="rounded border-white/30" />
|
||
{{ t('settings.updateSshCheckbox') }}
|
||
</label>
|
||
<p v-if="changePasswordError" class="text-sm text-red-400">{{ changePasswordError }}</p>
|
||
<p v-if="changePasswordSuccess" class="text-sm text-green-400">{{ changePasswordSuccess }}</p>
|
||
<div class="flex gap-3 pt-2">
|
||
<button
|
||
type="submit"
|
||
:disabled="changingPassword"
|
||
class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{{ changingPassword ? t('settings.updatingPassword') : t('settings.updatePassword') }}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
@click="closeChangePasswordModal"
|
||
class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors"
|
||
>
|
||
{{ t('common.cancel') }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- Two-Factor Authentication -->
|
||
<div class="mb-6">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="flex items-center gap-3">
|
||
<svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
<div>
|
||
<p class="text-sm font-medium text-white/90">{{ t('settings.twoFactorAuth') }}</p>
|
||
<p class="text-xs text-white/50">{{ t('settings.twoFaProtect') }}</p>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="text-xs font-semibold px-2 py-1 rounded-full"
|
||
:class="totpEnabled ? 'bg-green-500/20 text-green-400' : 'bg-white/10 text-white/50'"
|
||
>
|
||
{{ totpEnabled ? t('common.enabled') : t('common.disabled') }}
|
||
</span>
|
||
</div>
|
||
<button
|
||
v-if="!totpEnabled"
|
||
@click="showTotpSetupModal = true"
|
||
class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10 transition-colors"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
<span>{{ t('settings.enable2fa') }}</span>
|
||
</button>
|
||
<button
|
||
v-else
|
||
@click="showTotpDisableModal = true"
|
||
class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-red-500/50 text-red-400 font-medium hover:bg-red-500/10 transition-colors"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
|
||
</svg>
|
||
<span>{{ t('settings.disable2fa') }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- TOTP Setup Modal -->
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="showTotpSetupModal"
|
||
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
|
||
@click.self="closeTotpSetup"
|
||
@keydown.escape="closeTotpSetup"
|
||
>
|
||
<div class="glass-card p-6 max-w-md w-full" role="dialog" aria-modal="true" aria-labelledby="totp-setup-title">
|
||
<!-- Step 1: Enter password -->
|
||
<template v-if="totpSetupStep === 1">
|
||
<h3 id="totp-setup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.setup2faTitle') }}</h3>
|
||
<p class="text-white/60 text-sm mb-4">{{ t('settings.setup2faPasswordPrompt') }}</p>
|
||
<form @submit.prevent="beginTotpSetup" class="space-y-4">
|
||
<input
|
||
v-model="totpSetupPassword"
|
||
type="password"
|
||
required
|
||
autocomplete="current-password"
|
||
class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
|
||
:placeholder="t('login.enterPasswordPlaceholder')"
|
||
/>
|
||
<p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
|
||
<div class="flex gap-3">
|
||
<button
|
||
type="submit"
|
||
:disabled="totpSetupLoading"
|
||
class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{{ totpSetupLoading ? t('common.loading') : t('common.continue') }}
|
||
</button>
|
||
<button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
|
||
</div>
|
||
</form>
|
||
</template>
|
||
|
||
<!-- Step 2: Scan QR + verify code -->
|
||
<template v-else-if="totpSetupStep === 2">
|
||
<h3 class="text-lg font-semibold text-white mb-2">{{ t('settings.scanQrCode') }}</h3>
|
||
<p class="text-white/60 text-sm mb-4">{{ t('settings.scanQrInstruction') }}</p>
|
||
<div class="flex justify-center mb-4 bg-white rounded-xl p-4 mx-auto w-fit" v-html="sanitizedQrSvg" />
|
||
<div v-if="totpSecretBase32" class="bg-black/30 rounded-lg px-3 py-2 mb-4">
|
||
<p class="text-xs text-white/50 mb-1">Manual entry key (keep secret!):</p>
|
||
<div v-if="showTotpSecret" class="flex items-center gap-2">
|
||
<p class="text-sm font-mono text-orange-400 break-all">{{ totpSecretBase32 }}</p>
|
||
<button type="button" class="glass-button text-xs px-2 py-1" @click="showTotpSecret = false">Hide</button>
|
||
</div>
|
||
<button v-else type="button" class="glass-button text-xs px-3 py-1" @click="showTotpSecret = true">
|
||
Show manual entry key
|
||
</button>
|
||
</div>
|
||
<form @submit.prevent="confirmTotpSetup" class="space-y-4">
|
||
<input
|
||
v-model="totpSetupCode"
|
||
type="text"
|
||
inputmode="numeric"
|
||
pattern="[0-9]{6}"
|
||
maxlength="6"
|
||
required
|
||
autocomplete="one-time-code"
|
||
class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
|
||
:placeholder="t('login.totpPlaceholder')"
|
||
/>
|
||
<p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
|
||
<div class="flex gap-3">
|
||
<button
|
||
type="submit"
|
||
:disabled="totpSetupLoading || totpSetupCode.length !== 6"
|
||
class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{{ totpSetupLoading ? t('login.verifying') : t('settings.verifyAndEnable') }}
|
||
</button>
|
||
<button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
|
||
</div>
|
||
</form>
|
||
</template>
|
||
|
||
<!-- Step 3: Show backup codes -->
|
||
<template v-else-if="totpSetupStep === 3">
|
||
<h3 class="text-lg font-semibold text-white mb-2">{{ t('settings.saveBackupCodes') }}</h3>
|
||
<p class="text-white/60 text-sm mb-4">{{ t('settings.backupCodesInstruction') }}</p>
|
||
<div class="bg-black/30 rounded-xl p-4 mb-4">
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div
|
||
v-for="(code, i) in totpBackupCodes"
|
||
:key="i"
|
||
class="text-sm font-mono text-white/90 bg-white/5 rounded px-3 py-2 text-center"
|
||
>
|
||
{{ code }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
@click="copyBackupCodes"
|
||
class="w-full mb-3 flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-white/20 text-white/80 font-medium hover:bg-white/5 transition-colors"
|
||
>
|
||
<svg v-if="!backupCodesCopied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
<span>{{ backupCodesCopied ? t('common.copiedBang') : t('settings.copyAllCodes') }}</span>
|
||
</button>
|
||
<button
|
||
@click="closeTotpSetup"
|
||
class="w-full px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 transition-colors"
|
||
>
|
||
{{ t('common.done') }}
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- TOTP Disable Modal -->
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="showTotpDisableModal"
|
||
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
|
||
@click.self="closeTotpDisable"
|
||
@keydown.escape="closeTotpDisable"
|
||
>
|
||
<div class="glass-card p-6 max-w-md w-full" role="dialog" aria-modal="true" aria-labelledby="totp-disable-title">
|
||
<h3 id="totp-disable-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.disable2faTitle') }}</h3>
|
||
<p class="text-white/60 text-sm mb-4">{{ t('settings.disable2faDesc') }}</p>
|
||
<form @submit.prevent="disableTotp" class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-white/80 mb-2">{{ t('login.password') }}</label>
|
||
<input
|
||
v-model="totpDisablePassword"
|
||
type="password"
|
||
required
|
||
autocomplete="current-password"
|
||
class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
|
||
:placeholder="t('login.enterPasswordPlaceholder')"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.authenticatorCode') }}</label>
|
||
<input
|
||
v-model="totpDisableCode"
|
||
type="text"
|
||
inputmode="numeric"
|
||
pattern="[0-9]{6}"
|
||
maxlength="6"
|
||
required
|
||
autocomplete="one-time-code"
|
||
class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
|
||
:placeholder="t('login.totpPlaceholder')"
|
||
/>
|
||
</div>
|
||
<p v-if="totpDisableError" class="text-sm text-red-400">{{ totpDisableError }}</p>
|
||
<div class="flex gap-3">
|
||
<button
|
||
type="submit"
|
||
:disabled="totpDisableLoading"
|
||
class="flex-1 px-4 py-2 rounded-lg bg-red-500 text-white font-medium hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{{ totpDisableLoading ? t('common.disabling') : t('settings.disable2fa') }}
|
||
</button>
|
||
<button type="button" @click="closeTotpDisable" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- Logout Button -->
|
||
<button
|
||
@click="handleLogout"
|
||
class="w-full path-action-button path-action-button--continue flex items-center justify-center gap-2"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||
</svg>
|
||
<span>{{ t('settings.logout') }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Interface Mode Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.interfaceMode') }}</h2>
|
||
<p class="text-sm text-white/60 mb-6">{{ t('settings.interfaceModeDesc') }}</p>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<button
|
||
v-for="m in interfaceModes"
|
||
:key="m.id"
|
||
@click="uiMode.setMode(m.id)"
|
||
class="path-option-card text-left p-5"
|
||
:class="{ 'path-option-card--selected': uiMode.mode === m.id }"
|
||
>
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
v-for="(path, index) in m.iconPaths"
|
||
:key="index"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
:d="path"
|
||
/>
|
||
</svg>
|
||
<h3 class="text-lg font-semibold text-white/96">{{ m.label }}</h3>
|
||
</div>
|
||
<p class="text-sm text-white/60 leading-relaxed">{{ m.description }}</p>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Language Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<h2 class="text-xl font-semibold text-white/96 mb-2">Language</h2>
|
||
<p class="text-sm text-white/60 mb-4">Choose your preferred language</p>
|
||
<div class="flex gap-3 flex-wrap">
|
||
<button
|
||
v-for="loc in supportedLocales"
|
||
:key="loc.code"
|
||
@click="changeLocale(loc.code)"
|
||
class="glass-button px-4 py-2 rounded-lg text-sm font-medium transition-all"
|
||
:class="currentLocale === loc.code ? 'ring-2 ring-orange-400/60 bg-white/10' : ''"
|
||
>
|
||
<span class="mr-2">{{ loc.flag }}</span>{{ loc.name }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Claude Authentication Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.claudeAuth') }}</h2>
|
||
<p class="text-sm text-white/60 mb-6">{{ t('settings.claudeAuthDesc') }}</p>
|
||
|
||
<!-- Status -->
|
||
<div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 mb-4">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<svg class="w-5 h-5 shrink-0" :class="claudeConnected ? 'text-green-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path v-if="claudeConnected" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 11-12.728 0M12 9v4m0 4h.01" />
|
||
</svg>
|
||
<p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.connectionStatus') }}</p>
|
||
</div>
|
||
<p class="text-base font-medium" :class="claudeConnected ? 'text-green-400' : 'text-white/50'">
|
||
{{ claudeConnected ? t('common.connected') : t('settings.notConnected') }}
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
@click="showClaudeLoginModal = true"
|
||
class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors"
|
||
:class="claudeConnected
|
||
? 'border-white/20 text-white/70 hover:bg-white/5'
|
||
: 'border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10'"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
|
||
</svg>
|
||
<span>{{ claudeConnected ? t('settings.reAuthenticate') : t('settings.loginWithClaude') }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Claude Login Modal (iframe) -->
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="showClaudeLoginModal"
|
||
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
|
||
@click.self="showClaudeLoginModal = false"
|
||
>
|
||
<div class="glass-card p-0 max-w-lg w-full overflow-hidden" style="height: 480px">
|
||
<div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
|
||
<h3 class="text-sm font-semibold text-white/80">{{ t('settings.claudeAuth') }}</h3>
|
||
<button @click="showClaudeLoginModal = false" class="text-white/50 hover:text-white/80 transition-colors">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<iframe
|
||
src="/claude-login"
|
||
class="w-full border-0"
|
||
style="height: calc(100% - 49px)"
|
||
@load="onClaudeIframeLoad"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- AI Data Access Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<div class="mb-2">
|
||
<h2 class="text-xl font-semibold text-white/96">{{ t('settings.aiDataAccess') }}</h2>
|
||
</div>
|
||
<p class="text-sm text-white/60 mb-6">{{ t('settings.aiDataAccessDesc') }}</p>
|
||
|
||
<!-- Enable All toggle -->
|
||
<button
|
||
@click="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()"
|
||
class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left mb-6"
|
||
:class="aiPermissions.allEnabled
|
||
? 'bg-white/10 border-orange-500/40'
|
||
: 'bg-black/20 border-white/10 hover:border-white/20'"
|
||
>
|
||
<svg class="w-5 h-5 shrink-0" :class="aiPermissions.allEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium" :class="aiPermissions.allEnabled ? 'text-white/95' : 'text-white/70'">{{ t('common.enableAll') }}</p>
|
||
<p class="text-xs text-white/50 mt-0.5">{{ t('settings.enableAllDesc') }}</p>
|
||
</div>
|
||
<div
|
||
class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
|
||
:class="aiPermissions.allEnabled ? 'bg-orange-500' : 'bg-white/15'"
|
||
>
|
||
<div
|
||
class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
|
||
:class="aiPermissions.allEnabled ? 'translate-x-5' : 'translate-x-1'"
|
||
/>
|
||
</div>
|
||
</button>
|
||
|
||
<div class="space-y-5">
|
||
<div v-for="group in aiCategoryGroups" :key="group.label">
|
||
<p class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 px-1">{{ group.label }}</p>
|
||
<div class="space-y-2">
|
||
<button
|
||
v-for="cat in group.items"
|
||
:key="cat.id"
|
||
@click="aiPermissions.toggle(cat.id)"
|
||
class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left"
|
||
:class="aiPermissions.isEnabled(cat.id)
|
||
? 'bg-white/10 border-orange-500/40'
|
||
: 'bg-black/20 border-white/10 hover:border-white/20'"
|
||
>
|
||
<svg class="w-5 h-5 shrink-0" :class="aiPermissions.isEnabled(cat.id) ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="cat.icon" />
|
||
</svg>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium" :class="aiPermissions.isEnabled(cat.id) ? 'text-white/95' : 'text-white/70'">{{ cat.label }}</p>
|
||
<p class="text-xs text-white/50 mt-0.5">{{ cat.description }}</p>
|
||
</div>
|
||
<div
|
||
class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
|
||
:class="aiPermissions.isEnabled(cat.id) ? 'bg-orange-500' : 'bg-white/15'"
|
||
>
|
||
<div
|
||
class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
|
||
:class="aiPermissions.isEnabled(cat.id) ? 'translate-x-5' : 'translate-x-1'"
|
||
/>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- System Updates Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h2 class="text-xl font-semibold text-white/96">{{ t('settings.systemUpdates') }}</h2>
|
||
<p class="text-sm text-white/60 mt-1">{{ t('settings.systemUpdatesDesc') }}</p>
|
||
</div>
|
||
<RouterLink to="/dashboard/settings/update" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||
</svg>
|
||
{{ t('common.manageUpdates') }}
|
||
</RouterLink>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Webhook Notifications Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div>
|
||
<h2 class="text-xl font-semibold text-white/96">{{ t('settings.webhookNotifications') }}</h2>
|
||
<p class="text-sm text-white/60 mt-1">{{ t('settings.webhookNotificationsDesc') }}</p>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<button
|
||
@click="toggleWebhookEnabled"
|
||
role="switch"
|
||
:aria-checked="webhookConfig.enabled"
|
||
:aria-label="webhookConfig.enabled ? t('settings.disableWebhooks') : t('settings.enableWebhooks')"
|
||
class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
|
||
:class="webhookConfig.enabled ? 'bg-orange-500' : 'bg-white/15'"
|
||
:title="webhookConfig.enabled ? t('settings.disableWebhooks') : t('settings.enableWebhooks')"
|
||
>
|
||
<div
|
||
class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
|
||
:class="webhookConfig.enabled ? 'translate-x-5' : 'translate-x-1'"
|
||
/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<!-- Webhook URL -->
|
||
<div>
|
||
<label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookUrlLabel') }}</label>
|
||
<input
|
||
v-model="webhookConfig.url"
|
||
type="url"
|
||
:placeholder="t('settings.webhookUrlPlaceholder')"
|
||
class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Secret (optional) -->
|
||
<div>
|
||
<label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookSecretLabel') }}</label>
|
||
<input
|
||
v-model="webhookConfig.secret"
|
||
type="password"
|
||
:placeholder="t('settings.webhookSecretPlaceholderFull')"
|
||
class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Event Types -->
|
||
<div>
|
||
<label class="text-xs text-white/50 block mb-2">{{ t('settings.eventsToNotify') }}</label>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||
<button
|
||
v-for="evt in webhookEventTypes"
|
||
:key="evt.id"
|
||
@click="toggleWebhookEvent(evt.id)"
|
||
role="checkbox"
|
||
:aria-checked="webhookConfig.events.includes(evt.id)"
|
||
:aria-label="evt.label"
|
||
class="flex items-center gap-3 p-3 rounded-lg border transition-colors text-left"
|
||
:class="webhookConfig.events.includes(evt.id)
|
||
? 'bg-orange-500/10 border-orange-500/30'
|
||
: 'bg-white/5 border-white/10 hover:border-white/20'"
|
||
>
|
||
<div
|
||
class="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors"
|
||
:class="webhookConfig.events.includes(evt.id)
|
||
? 'border-orange-500 bg-orange-500'
|
||
: 'border-white/30'"
|
||
>
|
||
<svg v-if="webhookConfig.events.includes(evt.id)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<p class="text-sm text-white/90 font-medium">{{ evt.label }}</p>
|
||
<p class="text-xs text-white/50">{{ evt.description }}</p>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex flex-col sm:flex-row gap-2 pt-2">
|
||
<button
|
||
@click="saveWebhookConfig"
|
||
:disabled="savingWebhook"
|
||
class="glass-button px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 bg-orange-500/20 border-orange-500/30 disabled:opacity-50"
|
||
>
|
||
{{ savingWebhook ? t('settings.savingWebhook') : t('common.saveConfiguration') }}
|
||
</button>
|
||
<button
|
||
@click="testWebhook"
|
||
:disabled="testingWebhook || !webhookConfig.url"
|
||
class="glass-button px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
{{ testingWebhook ? t('common.sending') : t('common.sendTest') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Webhook status message -->
|
||
<div v-if="webhookStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="webhookStatusType === 'error' ? 'bg-red-500/15 text-red-300' : 'bg-green-500/15 text-green-300'">
|
||
{{ webhookStatusMsg }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Backup & Restore Section -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<div class="mb-4">
|
||
<h2 class="text-xl font-semibold text-white/96 mb-1">{{ t('settings.backup') }}</h2>
|
||
<p class="text-sm text-white/60 mb-3">{{ t('settings.backupRestoreDesc') }}</p>
|
||
<button @click="showCreateBackupModal = true" class="w-full min-h-[44px] glass-button rounded-lg text-sm font-medium flex items-center justify-center gap-2">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
{{ t('settings.createBackup') }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Backup List -->
|
||
<div v-if="loadingBackups" class="text-sm text-white/40 py-4 text-center">{{ t('settings.loadingBackups') }}</div>
|
||
<div v-else-if="backupList.length === 0" class="text-sm text-white/40 py-4 text-center">{{ t('settings.noBackups') }}</div>
|
||
<div v-else class="space-y-2">
|
||
<div v-for="b in backupList" :key="b.id" class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 bg-white/5 rounded-lg gap-2">
|
||
<div class="min-w-0">
|
||
<div class="text-sm text-white font-medium">{{ b.description || t('settings.systemBackup') }}</div>
|
||
<div class="text-xs text-white/50">{{ new Date(b.created_at).toLocaleString() }} · {{ formatBackupSize(b.size_bytes) }}</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 shrink-0 flex-wrap">
|
||
<button @click="verifyBackup(b.id)" :disabled="verifyingBackupId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs disabled:opacity-50" :title="t('common.verify')">
|
||
{{ verifyingBackupId === b.id ? '...' : t('common.verify') }}
|
||
</button>
|
||
<button @click="backupToUsb(b.id)" :disabled="usbCopyingId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-blue-400 disabled:opacity-50" :title="t('settings.copyToUsb')">
|
||
{{ usbCopyingId === b.id ? '...' : 'USB' }}
|
||
</button>
|
||
<button @click="confirmRestoreBackup(b.id)" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-orange-400" :title="t('common.restore')">
|
||
{{ t('common.restore') }}
|
||
</button>
|
||
<button @click="deleteBackup(b.id)" :disabled="deletingBackupId === b.id" :aria-label="t('settings.deleteBackup')" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-red-400 disabled:opacity-50" :title="t('common.delete')">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Backup status message -->
|
||
<div v-if="backupStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="backupStatusType === 'error' ? 'bg-red-500/15 text-red-300' : 'bg-green-500/15 text-green-300'">
|
||
{{ backupStatusMsg }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create Backup Modal -->
|
||
<Teleport to="body">
|
||
<div v-if="showCreateBackupModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showCreateBackupModal = false">
|
||
<div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="create-backup-title">
|
||
<h3 id="create-backup-title" class="text-lg font-semibold text-white mb-4">{{ t('settings.createEncryptedBackup') }}</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
|
||
<input v-model="backupPassphrase" type="password" :placeholder="t('settings.enterPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
|
||
</div>
|
||
<div>
|
||
<label class="text-xs text-white/50 block mb-1">{{ t('settings.descriptionOptional') }}</label>
|
||
<input v-model="backupDescription" type="text" :placeholder="t('settings.descriptionPlaceholder')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 mt-5">
|
||
<button @click="showCreateBackupModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
|
||
<button @click="createBackup" :disabled="creatingBackup || !backupPassphrase" class="glass-button px-4 py-2 rounded-lg text-sm flex-1 bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
|
||
{{ creatingBackup ? t('settings.creatingBackup') : t('settings.createBackup') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- Restore Backup Modal -->
|
||
<Teleport to="body">
|
||
<div v-if="showRestoreModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showRestoreModal = false">
|
||
<div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="restore-backup-title">
|
||
<h3 id="restore-backup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.restoreBackupTitle') }}</h3>
|
||
<p class="text-sm text-red-400/80 mb-4">{{ t('settings.restoreWarning') }}</p>
|
||
<div>
|
||
<label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
|
||
<input v-model="restorePassphrase" type="password" :placeholder="t('settings.enterBackupPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
|
||
</div>
|
||
<div class="flex gap-3 mt-5">
|
||
<button @click="showRestoreModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
|
||
<button @click="restoreBackup" :disabled="restoringBackup || !restorePassphrase" class="glass-button px-4 py-2 rounded-lg text-sm flex-1 bg-red-500/20 border-red-500/30 disabled:opacity-50">
|
||
{{ restoringBackup ? t('common.restoring') : t('common.restore') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- Network Diagnostics Link -->
|
||
<div class="glass-card px-6 py-6 mb-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h2 class="text-xl font-semibold text-white/96">{{ t('common.network') }}</h2>
|
||
<p class="text-sm text-white/60 mt-1">{{ t('settings.networkDesc') }}</p>
|
||
</div>
|
||
<button @click="router.push('/dashboard/server')" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||
</svg>
|
||
{{ t('common.networkDiagnostics') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Factory Reset Section -->
|
||
<div class="path-option-card px-6 py-6 mt-6 border-red-500/30">
|
||
<h2 class="text-xl font-semibold text-red-400/90 mb-3">Factory Reset</h2>
|
||
<p class="text-sm text-white/60 mb-4">
|
||
Wipe all user data, identities, and credentials. Container images are preserved. The node will restart and show the onboarding screen.
|
||
</p>
|
||
<button
|
||
class="glass-button text-red-400 border-red-500/30 hover:border-red-500/50"
|
||
@click="showFactoryResetConfirm = true"
|
||
>
|
||
Factory Reset
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Factory Reset Confirmation Modal -->
|
||
<Teleport to="body">
|
||
<div v-if="showFactoryResetConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||
<div class="glass-card px-8 py-8 max-w-md mx-4">
|
||
<h3 class="text-lg font-semibold text-white/90 mb-3">Are you sure?</h3>
|
||
<p class="text-sm text-white/60 mb-6">
|
||
This will delete all identities, credentials, and settings. This cannot be undone.
|
||
</p>
|
||
<div class="flex gap-3 justify-end">
|
||
<button class="glass-button" @click="showFactoryResetConfirm = false">Cancel</button>
|
||
<button
|
||
class="glass-button text-red-400 border-red-500/30"
|
||
:disabled="factoryResetLoading"
|
||
@click="performFactoryReset"
|
||
>
|
||
{{ factoryResetLoading ? 'Resetting...' : 'Yes, Reset' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, ref, onMounted, nextTick } from 'vue'
|
||
import DOMPurify from 'dompurify'
|
||
import { useRouter } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { SUPPORTED_LOCALES, setLocale, type SupportedLocale } from '@/i18n'
|
||
import { useAppStore } from '../stores/app'
|
||
import { useUIModeStore } from '@/stores/uiMode'
|
||
import { useAIPermissionsStore, AI_PERMISSION_CATEGORIES } from '@/stores/aiPermissions'
|
||
import ControllerIndicator from '@/components/ControllerIndicator.vue'
|
||
import { rpcClient } from '@/api/rpc-client'
|
||
import { useModalKeyboard } from '@/composables/useModalKeyboard'
|
||
import type { UIMode } from '@/types/api'
|
||
|
||
const router = useRouter()
|
||
const { t, locale } = useI18n()
|
||
const store = useAppStore()
|
||
|
||
// Factory Reset
|
||
const showFactoryResetConfirm = ref(false)
|
||
const factoryResetLoading = ref(false)
|
||
async function performFactoryReset() {
|
||
factoryResetLoading.value = true
|
||
try {
|
||
await rpcClient.call({ method: 'system.factory-reset', params: { confirm: true } })
|
||
localStorage.clear()
|
||
showFactoryResetConfirm.value = false
|
||
router.push('/onboarding/intro')
|
||
} catch (err) {
|
||
// Service likely restarted — redirect anyway
|
||
localStorage.clear()
|
||
showFactoryResetConfirm.value = false
|
||
router.push('/onboarding/intro')
|
||
}
|
||
}
|
||
const supportedLocales = SUPPORTED_LOCALES
|
||
const currentLocale = computed(() => locale.value)
|
||
async function changeLocale(code: string) {
|
||
await setLocale(code as SupportedLocale)
|
||
}
|
||
const uiMode = useUIModeStore()
|
||
const aiPermissions = useAIPermissionsStore()
|
||
const aiCategoryGroups = computed(() => {
|
||
const groups: { label: string; items: typeof AI_PERMISSION_CATEGORIES }[] = []
|
||
for (const cat of AI_PERMISSION_CATEGORIES) {
|
||
const existing = groups.find(g => g.label === cat.group)
|
||
if (existing) {
|
||
existing.items.push(cat)
|
||
} else {
|
||
groups.push({ label: cat.group, items: [cat] })
|
||
}
|
||
}
|
||
return groups
|
||
})
|
||
|
||
const interfaceModes = computed<{ id: UIMode; label: string; description: string; iconPaths: string[] }[]>(() => [
|
||
{
|
||
id: 'easy',
|
||
label: t('settings.modeEasy'),
|
||
description: t('settings.modeEasyDesc'),
|
||
iconPaths: ['M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
|
||
},
|
||
{
|
||
id: 'gamer',
|
||
label: t('settings.modePro'),
|
||
description: t('settings.modeProDesc'),
|
||
iconPaths: ['M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z', 'M15 12a3 3 0 11-6 0 3 3 0 016 0z'],
|
||
},
|
||
{
|
||
id: 'chat',
|
||
label: t('settings.modeChat'),
|
||
description: t('settings.modeChatDesc'),
|
||
iconPaths: ['M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
|
||
},
|
||
])
|
||
|
||
const serverName = computed(() => store.serverName)
|
||
const editingServerName = ref(false)
|
||
const serverNameDraft = ref('')
|
||
const serverNameInput = ref<HTMLInputElement | null>(null)
|
||
|
||
function startEditServerName() {
|
||
serverNameDraft.value = serverName.value
|
||
editingServerName.value = true
|
||
nextTick(() => serverNameInput.value?.select())
|
||
}
|
||
|
||
async function saveServerName() {
|
||
const name = serverNameDraft.value.trim()
|
||
if (!name || name === serverName.value) {
|
||
editingServerName.value = false
|
||
return
|
||
}
|
||
try {
|
||
await rpcClient.call({ method: 'server.set-name', params: { name } })
|
||
} catch (e) {
|
||
if (import.meta.env.DEV) console.error('Failed to rename server:', e)
|
||
}
|
||
editingServerName.value = false
|
||
}
|
||
|
||
const version = computed(() => store.serverInfo?.version || '0.0.0')
|
||
const showReleaseNotes = ref(false)
|
||
const serverTorAddressFromStore = computed(() => store.serverInfo?.['tor-address'] || null)
|
||
const torAddressFromRpc = ref<string | null>(null)
|
||
const serverTorAddress = computed(() => serverTorAddressFromStore.value || torAddressFromRpc.value)
|
||
const userDid = computed(() => {
|
||
try {
|
||
return localStorage.getItem('neode_did') || null
|
||
} catch {
|
||
return null
|
||
}
|
||
})
|
||
|
||
const claudeConnected = ref(false)
|
||
const showClaudeLoginModal = ref(false)
|
||
|
||
function checkClaudeStatus() {
|
||
fetch('/aiui/api/claude/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'haiku', messages: [{ role: 'user', content: 'ping' }] }) })
|
||
.then(r => {
|
||
if (!r.ok) { claudeConnected.value = false; return }
|
||
const reader = r.body?.getReader()
|
||
if (!reader) return
|
||
const decoder = new TextDecoder()
|
||
let text = ''
|
||
function read(): Promise<void> {
|
||
return reader!.read().then(({ done, value }) => {
|
||
if (done) {
|
||
claudeConnected.value = !text.includes('Not logged in') && !text.includes('error')
|
||
return
|
||
}
|
||
text += decoder.decode(value, { stream: true })
|
||
return read()
|
||
})
|
||
}
|
||
read()
|
||
})
|
||
.catch(() => { claudeConnected.value = false })
|
||
}
|
||
|
||
function onClaudeIframeLoad() {
|
||
// Listen for success message from login iframe
|
||
window.addEventListener('message', handleClaudeLoginMessage)
|
||
}
|
||
|
||
function handleClaudeLoginMessage(e: MessageEvent) {
|
||
if (e.data?.type === 'claude-auth-success') {
|
||
claudeConnected.value = true
|
||
showClaudeLoginModal.value = false
|
||
window.removeEventListener('message', handleClaudeLoginMessage)
|
||
}
|
||
}
|
||
|
||
// --- 2FA State ---
|
||
const totpEnabled = ref(false)
|
||
const showTotpSetupModal = ref(false)
|
||
const showTotpDisableModal = ref(false)
|
||
const totpSetupStep = ref(1)
|
||
const totpSetupPassword = ref('')
|
||
const totpSetupCode = ref('')
|
||
const totpSetupError = ref('')
|
||
const totpSetupLoading = ref(false)
|
||
const totpQrSvg = ref('')
|
||
const sanitizedQrSvg = computed(() => DOMPurify.sanitize(totpQrSvg.value, { USE_PROFILES: { svg: true } }))
|
||
const totpSecretBase32 = ref('')
|
||
const showTotpSecret = ref(false)
|
||
const totpPendingToken = ref('')
|
||
const totpBackupCodes = ref<string[]>([])
|
||
const backupCodesCopied = ref(false)
|
||
const totpDisablePassword = ref('')
|
||
const totpDisableCode = ref('')
|
||
const totpDisableError = ref('')
|
||
const totpDisableLoading = ref(false)
|
||
|
||
async function loadTotpStatus() {
|
||
try {
|
||
const res = await rpcClient.totpStatus()
|
||
totpEnabled.value = res.enabled
|
||
} catch (e) {
|
||
if (import.meta.env.DEV) console.warn('TOTP status may not be available', e)
|
||
}
|
||
}
|
||
|
||
async function beginTotpSetup() {
|
||
totpSetupError.value = ''
|
||
totpSetupLoading.value = true
|
||
try {
|
||
const res = await rpcClient.totpSetupBegin(totpSetupPassword.value)
|
||
totpQrSvg.value = res.qr_svg
|
||
totpSecretBase32.value = res.secret_base32
|
||
totpPendingToken.value = res.pending_token
|
||
totpSetupStep.value = 2
|
||
} catch (e) {
|
||
totpSetupError.value = e instanceof Error ? e.message : t('settings.setupFailed')
|
||
} finally {
|
||
totpSetupLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function confirmTotpSetup() {
|
||
totpSetupError.value = ''
|
||
totpSetupLoading.value = true
|
||
try {
|
||
const res = await rpcClient.totpSetupConfirm({
|
||
code: totpSetupCode.value,
|
||
password: totpSetupPassword.value,
|
||
pendingToken: totpPendingToken.value,
|
||
})
|
||
totpBackupCodes.value = res.backup_codes
|
||
totpEnabled.value = true
|
||
totpSetupStep.value = 3
|
||
} catch (e) {
|
||
totpSetupError.value = e instanceof Error ? e.message : t('settings.verificationFailed')
|
||
} finally {
|
||
totpSetupLoading.value = false
|
||
}
|
||
}
|
||
|
||
function closeTotpSetup() {
|
||
showTotpSetupModal.value = false
|
||
totpSetupStep.value = 1
|
||
totpSetupPassword.value = ''
|
||
totpSetupCode.value = ''
|
||
totpSetupError.value = ''
|
||
totpQrSvg.value = ''
|
||
totpSecretBase32.value = ''
|
||
totpPendingToken.value = ''
|
||
totpBackupCodes.value = []
|
||
backupCodesCopied.value = false
|
||
}
|
||
|
||
async function disableTotp() {
|
||
totpDisableError.value = ''
|
||
totpDisableLoading.value = true
|
||
try {
|
||
await rpcClient.totpDisable(totpDisablePassword.value, totpDisableCode.value)
|
||
totpEnabled.value = false
|
||
closeTotpDisable()
|
||
} catch (e) {
|
||
totpDisableError.value = e instanceof Error ? e.message : t('settings.disableFailed')
|
||
} finally {
|
||
totpDisableLoading.value = false
|
||
}
|
||
}
|
||
|
||
function closeTotpDisable() {
|
||
showTotpDisableModal.value = false
|
||
totpDisablePassword.value = ''
|
||
totpDisableCode.value = ''
|
||
totpDisableError.value = ''
|
||
}
|
||
|
||
async function copyBackupCodes() {
|
||
const text = totpBackupCodes.value.join('\n')
|
||
try {
|
||
await navigator.clipboard.writeText(text)
|
||
} catch {
|
||
const ta = document.createElement('textarea')
|
||
ta.value = text
|
||
ta.style.position = 'fixed'
|
||
ta.style.opacity = '0'
|
||
document.body.appendChild(ta)
|
||
ta.select()
|
||
document.execCommand('copy')
|
||
document.body.removeChild(ta)
|
||
}
|
||
backupCodesCopied.value = true
|
||
setTimeout(() => { backupCodesCopied.value = false }, 2000)
|
||
}
|
||
|
||
const copiedOnion = ref(false)
|
||
const copiedDid = ref(false)
|
||
const showChangePasswordModal = ref(false)
|
||
const changePasswordModalRef = ref<HTMLElement | null>(null)
|
||
const changePasswordRestoreFocusRef = ref<HTMLElement | null>(null)
|
||
useModalKeyboard(changePasswordModalRef, showChangePasswordModal, closeChangePasswordModal, { restoreFocusRef: changePasswordRestoreFocusRef })
|
||
const changingPassword = ref(false)
|
||
const changePasswordError = ref('')
|
||
const changePasswordSuccess = ref('')
|
||
const changePasswordForm = ref({
|
||
currentPassword: '',
|
||
newPassword: '',
|
||
confirmPassword: '',
|
||
alsoChangeSsh: true,
|
||
})
|
||
|
||
function validatePasswordStrength(pw: string): string | null {
|
||
if (pw.length < 12) return t('settings.passwordMinLength')
|
||
if (!/[A-Z]/.test(pw)) return t('settings.passwordNeedUppercase')
|
||
if (!/[a-z]/.test(pw)) return t('settings.passwordNeedLowercase')
|
||
if (!/\d/.test(pw)) return t('settings.passwordNeedDigit')
|
||
if (!/[^A-Za-z0-9]/.test(pw)) return t('settings.passwordNeedSpecial')
|
||
return null
|
||
}
|
||
|
||
async function handleChangePassword() {
|
||
changePasswordError.value = ''
|
||
changePasswordSuccess.value = ''
|
||
const { currentPassword, newPassword, confirmPassword, alsoChangeSsh } = changePasswordForm.value
|
||
if (!currentPassword || !newPassword || !confirmPassword) {
|
||
changePasswordError.value = t('settings.passwordAllFieldsRequired')
|
||
return
|
||
}
|
||
if (newPassword !== confirmPassword) {
|
||
changePasswordError.value = t('settings.passwordMismatch')
|
||
return
|
||
}
|
||
const strengthError = validatePasswordStrength(newPassword)
|
||
if (strengthError) {
|
||
changePasswordError.value = strengthError
|
||
return
|
||
}
|
||
changingPassword.value = true
|
||
try {
|
||
await rpcClient.changePassword({
|
||
currentPassword,
|
||
newPassword,
|
||
alsoChangeSsh,
|
||
})
|
||
changePasswordSuccess.value = t('settings.passwordUpdatedSuccess')
|
||
changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
|
||
setTimeout(() => {
|
||
closeChangePasswordModal()
|
||
}, 2000)
|
||
} catch (e) {
|
||
changePasswordError.value = e instanceof Error ? e.message : t('settings.passwordChangeFailed')
|
||
} finally {
|
||
changingPassword.value = false
|
||
}
|
||
}
|
||
|
||
let copiedTimer: ReturnType<typeof setTimeout> | null = null
|
||
|
||
async function copyOnionAddress() {
|
||
const addr = serverTorAddress.value
|
||
if (!addr) return
|
||
try {
|
||
await navigator.clipboard.writeText(addr)
|
||
} catch {
|
||
const ta = document.createElement('textarea')
|
||
ta.value = addr
|
||
ta.style.position = 'fixed'
|
||
ta.style.opacity = '0'
|
||
document.body.appendChild(ta)
|
||
ta.select()
|
||
document.execCommand('copy')
|
||
document.body.removeChild(ta)
|
||
}
|
||
copiedOnion.value = true
|
||
if (copiedTimer) clearTimeout(copiedTimer)
|
||
copiedTimer = setTimeout(() => { copiedOnion.value = false }, 2000)
|
||
}
|
||
|
||
async function copyDid() {
|
||
if (!userDid.value) return
|
||
try {
|
||
await navigator.clipboard.writeText(userDid.value)
|
||
} catch {
|
||
const ta = document.createElement('textarea')
|
||
ta.value = userDid.value
|
||
ta.style.position = 'fixed'
|
||
ta.style.opacity = '0'
|
||
document.body.appendChild(ta)
|
||
ta.select()
|
||
document.execCommand('copy')
|
||
document.body.removeChild(ta)
|
||
}
|
||
copiedDid.value = true
|
||
setTimeout(() => { copiedDid.value = false }, 2000)
|
||
}
|
||
|
||
function closeChangePasswordModal() {
|
||
changePasswordRestoreFocusRef.value?.focus?.()
|
||
showChangePasswordModal.value = false
|
||
changePasswordError.value = ''
|
||
changePasswordSuccess.value = ''
|
||
changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
|
||
}
|
||
|
||
onMounted(async () => {
|
||
checkClaudeStatus()
|
||
loadTotpStatus()
|
||
loadBackups()
|
||
loadWebhookConfig()
|
||
if (!serverTorAddressFromStore.value) {
|
||
try {
|
||
const res = await rpcClient.getTorAddress()
|
||
torAddressFromRpc.value = res.tor_address ?? null
|
||
} catch (e) {
|
||
if (import.meta.env.DEV) console.warn('Tor address may not be available yet', e)
|
||
}
|
||
}
|
||
})
|
||
|
||
async function handleLogout() {
|
||
try { await store.logout() } catch (e) { if (import.meta.env.DEV) console.warn('Logout failed, proceeding anyway', e) }
|
||
router.push('/login').catch(() => { window.location.href = '/login' })
|
||
}
|
||
|
||
// Backup & Restore
|
||
interface BackupEntry {
|
||
id: string
|
||
created_at: string
|
||
size_bytes: number
|
||
encrypted: boolean
|
||
description: string | null
|
||
}
|
||
const backupList = ref<BackupEntry[]>([])
|
||
const loadingBackups = ref(false)
|
||
const showCreateBackupModal = ref(false)
|
||
const backupPassphrase = ref('')
|
||
const backupDescription = ref('')
|
||
const creatingBackup = ref(false)
|
||
const showRestoreModal = ref(false)
|
||
const restoreBackupId = ref('')
|
||
const restorePassphrase = ref('')
|
||
const restoringBackup = ref(false)
|
||
const verifyingBackupId = ref<string | null>(null)
|
||
const deletingBackupId = ref<string | null>(null)
|
||
|
||
const backupStatusMsg = ref('')
|
||
const backupStatusType = ref<'success' | 'error'>('success')
|
||
|
||
function formatBackupSize(bytes: number): string {
|
||
if (bytes < 1024) return `${bytes} B`
|
||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
|
||
}
|
||
|
||
function showBackupStatus(msg: string, type: 'success' | 'error') {
|
||
backupStatusMsg.value = msg
|
||
backupStatusType.value = type
|
||
setTimeout(() => { backupStatusMsg.value = '' }, 5000)
|
||
}
|
||
|
||
async function loadBackups() {
|
||
loadingBackups.value = true
|
||
try {
|
||
const res = await rpcClient.call<{ backups: BackupEntry[] }>({ method: 'backup.list' })
|
||
backupList.value = res.backups || []
|
||
} catch {
|
||
backupList.value = []
|
||
} finally {
|
||
loadingBackups.value = false
|
||
}
|
||
}
|
||
|
||
async function createBackup() {
|
||
if (creatingBackup.value || !backupPassphrase.value) return
|
||
creatingBackup.value = true
|
||
try {
|
||
await rpcClient.call({ method: 'backup.create', params: { passphrase: backupPassphrase.value, description: backupDescription.value || undefined } })
|
||
showCreateBackupModal.value = false
|
||
backupPassphrase.value = ''
|
||
backupDescription.value = ''
|
||
showBackupStatus(t('settings.backupCreatedSuccess'), 'success')
|
||
await loadBackups()
|
||
} catch {
|
||
showBackupStatus(t('settings.backupCreateFailed'), 'error')
|
||
} finally {
|
||
creatingBackup.value = false
|
||
}
|
||
}
|
||
|
||
async function verifyBackup(id: string) {
|
||
const passphrase = prompt(t('settings.verifyPassphrasePrompt'))
|
||
if (!passphrase) return
|
||
verifyingBackupId.value = id
|
||
try {
|
||
const res = await rpcClient.call<{ valid: boolean; error: string | null }>({ method: 'backup.verify', params: { id, passphrase } })
|
||
if (res.valid) {
|
||
showBackupStatus(t('settings.backupVerifiedOk'), 'success')
|
||
} else {
|
||
showBackupStatus(t('settings.backupVerifyFailed', { error: res.error || 'Unknown error' }), 'error')
|
||
}
|
||
} catch {
|
||
showBackupStatus(t('settings.backupVerifyRequestFailed'), 'error')
|
||
} finally {
|
||
verifyingBackupId.value = null
|
||
}
|
||
}
|
||
|
||
function confirmRestoreBackup(id: string) {
|
||
restoreBackupId.value = id
|
||
restorePassphrase.value = ''
|
||
showRestoreModal.value = true
|
||
}
|
||
|
||
async function restoreBackup() {
|
||
if (restoringBackup.value || !restorePassphrase.value) return
|
||
restoringBackup.value = true
|
||
try {
|
||
await rpcClient.call({ method: 'backup.restore', params: { id: restoreBackupId.value, passphrase: restorePassphrase.value } })
|
||
showRestoreModal.value = false
|
||
showBackupStatus(t('settings.backupRestored'), 'success')
|
||
} catch {
|
||
showBackupStatus(t('settings.backupRestoreFailed'), 'error')
|
||
} finally {
|
||
restoringBackup.value = false
|
||
}
|
||
}
|
||
|
||
async function deleteBackup(id: string) {
|
||
if (!confirm(t('settings.deleteBackupConfirm'))) return
|
||
deletingBackupId.value = id
|
||
try {
|
||
await rpcClient.call({ method: 'backup.delete', params: { id } })
|
||
showBackupStatus(t('settings.backupDeleted'), 'success')
|
||
await loadBackups()
|
||
} catch {
|
||
showBackupStatus(t('settings.backupDeleteFailed'), 'error')
|
||
} finally {
|
||
deletingBackupId.value = null
|
||
}
|
||
}
|
||
|
||
// Webhook Notifications
|
||
interface WebhookConfigData {
|
||
enabled: boolean
|
||
url: string
|
||
secret: string
|
||
events: string[]
|
||
}
|
||
const webhookConfig = ref<WebhookConfigData>({
|
||
enabled: false,
|
||
url: '',
|
||
secret: '',
|
||
events: [],
|
||
})
|
||
const savingWebhook = ref(false)
|
||
const testingWebhook = ref(false)
|
||
const webhookStatusMsg = ref('')
|
||
const webhookStatusType = ref<'success' | 'error'>('success')
|
||
|
||
const webhookEventTypes = computed(() => [
|
||
{ id: 'container_crash', label: t('settings.containerCrash'), description: t('settings.containerCrashDesc') },
|
||
{ id: 'update_available', label: t('settings.updateAvailableEvent'), description: t('settings.updateAvailableDesc') },
|
||
{ id: 'disk_warning', label: t('settings.diskSpaceWarning'), description: t('settings.diskWarningDesc') },
|
||
{ id: 'backup_complete', label: t('settings.backupComplete'), description: t('settings.backupCompleteDesc') },
|
||
])
|
||
|
||
function showWebhookStatus(msg: string, type: 'success' | 'error') {
|
||
webhookStatusMsg.value = msg
|
||
webhookStatusType.value = type
|
||
setTimeout(() => { webhookStatusMsg.value = '' }, 5000)
|
||
}
|
||
|
||
function toggleWebhookEvent(id: string) {
|
||
const idx = webhookConfig.value.events.indexOf(id)
|
||
if (idx >= 0) {
|
||
webhookConfig.value.events.splice(idx, 1)
|
||
} else {
|
||
webhookConfig.value.events.push(id)
|
||
}
|
||
}
|
||
|
||
function toggleWebhookEnabled() {
|
||
webhookConfig.value.enabled = !webhookConfig.value.enabled
|
||
}
|
||
|
||
async function loadWebhookConfig() {
|
||
try {
|
||
const res = await rpcClient.call<{ enabled: boolean; url: string; events: string[]; has_secret: boolean }>({ method: 'webhook.get-config' })
|
||
webhookConfig.value.enabled = res.enabled
|
||
webhookConfig.value.url = res.url
|
||
webhookConfig.value.events = res.events || []
|
||
// Don't overwrite secret — server doesn't return it
|
||
} catch {
|
||
// Webhook system may not be available
|
||
}
|
||
}
|
||
|
||
async function saveWebhookConfig() {
|
||
savingWebhook.value = true
|
||
try {
|
||
await rpcClient.call({
|
||
method: 'webhook.configure',
|
||
params: {
|
||
enabled: webhookConfig.value.enabled,
|
||
url: webhookConfig.value.url,
|
||
secret: webhookConfig.value.secret || null,
|
||
events: webhookConfig.value.events,
|
||
},
|
||
})
|
||
showWebhookStatus(t('settings.webhookSaved'), 'success')
|
||
} catch {
|
||
showWebhookStatus(t('settings.webhookSaveFailed'), 'error')
|
||
} finally {
|
||
savingWebhook.value = false
|
||
}
|
||
}
|
||
|
||
async function testWebhook() {
|
||
testingWebhook.value = true
|
||
try {
|
||
const res = await rpcClient.call<{ sent: boolean; url: string }>({ method: 'webhook.test' })
|
||
if (res.sent) {
|
||
showWebhookStatus(t('settings.webhookTestSent'), 'success')
|
||
} else {
|
||
showWebhookStatus(t('settings.webhookTestFailed'), 'error')
|
||
}
|
||
} catch {
|
||
showWebhookStatus(t('settings.webhookSendFailed'), 'error')
|
||
} finally {
|
||
testingWebhook.value = false
|
||
}
|
||
}
|
||
|
||
// USB Drive Backup
|
||
interface UsbDriveInfo {
|
||
device: string
|
||
mount_point: string | null
|
||
label: string | null
|
||
size_bytes: number
|
||
removable: boolean
|
||
}
|
||
const usbCopyingId = ref<string | null>(null)
|
||
|
||
async function backupToUsb(backupId: string) {
|
||
usbCopyingId.value = backupId
|
||
try {
|
||
const drivesRes = await rpcClient.call<{ drives: UsbDriveInfo[] }>({ method: 'backup.list-drives' })
|
||
const drives = drivesRes.drives || []
|
||
const mounted = drives.filter(d => d.mount_point)
|
||
const target = mounted[0]
|
||
if (!target?.mount_point) {
|
||
showBackupStatus(t('settings.noUsbDrives'), 'error')
|
||
return
|
||
}
|
||
const label = target.label || target.device
|
||
if (!confirm(`Copy backup to USB drive "${label}" at ${target.mount_point}?`)) return
|
||
await rpcClient.call({ method: 'backup.to-usb', params: { id: backupId, mount_point: target.mount_point } })
|
||
showBackupStatus(t('settings.backupCopiedToUsb', { path: target.mount_point }), 'success')
|
||
} catch {
|
||
showBackupStatus(t('settings.backupUsbFailed'), 'error')
|
||
} finally {
|
||
usbCopyingId.value = null
|
||
}
|
||
}
|
||
</script> |