fix+feat: SPA routing, theme system, modern UI, setup wizard improvements
Fixes: - Go server now serves index.html for all non-asset paths (SPA fallback) - Null guard on data.documents prevents undefined.length TypeError - App.vue waits for checkStatus() before rendering AppLayout (race condition) - PWA manifest no longer references missing icon files - index.html applies theme class before paint to prevent flash Features: - Theme store: dark/light toggle + 6 accent color presets + custom hex picker - ThemeToggle component in header dropdown - CSS custom properties for accent color (--accent-400/500/600/700) - Tailwind accent-* color utilities driven by CSS vars - SetupWizard: 3-step flow, password confirmation, LDAP test button, animated toggle, review step, proper error/success states - Sidebar: loading skeleton, active page highlight, null-safe document list - Global .input, .btn-primary, .btn-secondary, .card component classes - Stub GraphQL responses for setup/login/testLdapConnection Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,21 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { gql } from '@/lib/gql'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
import ThemeToggle from '@/components/layout/ThemeToggle.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const app = useAppStore()
|
||||
const theme = useThemeStore()
|
||||
|
||||
const step = ref(1)
|
||||
const totalSteps = 3
|
||||
const error = ref('')
|
||||
const submitting = ref(false)
|
||||
|
||||
// LDAP test state
|
||||
const ldapTesting = ref(false)
|
||||
const ldapTestResult = ref<{ ok: boolean; message: string } | null>(null)
|
||||
|
||||
// Admin password confirmation
|
||||
const adminPassConfirm = ref('')
|
||||
const passwordMismatch = computed(
|
||||
() => adminPassConfirm.value.length > 0 && adminPassConfirm.value !== form.adminPass
|
||||
)
|
||||
|
||||
const form = reactive({
|
||||
storagePath: '/data/wiki',
|
||||
adminUser: 'admin',
|
||||
adminPass: '',
|
||||
jwtSecret: crypto.randomUUID().replace(/-/g, ''),
|
||||
adminUser: 'admin',
|
||||
adminPass: '',
|
||||
jwtSecret: crypto.randomUUID().replace(/-/g, ''),
|
||||
ldapEnabled: false,
|
||||
ldap: {
|
||||
host: '',
|
||||
@@ -26,6 +40,38 @@ const form = reactive({
|
||||
},
|
||||
})
|
||||
|
||||
const stepValid = computed(() => {
|
||||
if (step.value === 1) {
|
||||
return form.storagePath.trim() !== ''
|
||||
&& form.adminUser.trim() !== ''
|
||||
&& form.adminPass.length >= 8
|
||||
&& !passwordMismatch.value
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
async function testLdap() {
|
||||
ldapTesting.value = true
|
||||
ldapTestResult.value = null
|
||||
try {
|
||||
const data = await gql<{ testLdapConnection: { success: boolean; message: string } }>(
|
||||
`mutation TestLdap($i: LDAPInput!) { testLdapConnection(input: $i) { success message } }`,
|
||||
{ i: form.ldap },
|
||||
)
|
||||
ldapTestResult.value = {
|
||||
ok: data.testLdapConnection.success,
|
||||
message: data.testLdapConnection.message,
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
ldapTestResult.value = {
|
||||
ok: false,
|
||||
message: e instanceof Error ? e.message : 'Connection failed',
|
||||
}
|
||||
} finally {
|
||||
ldapTesting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
submitting.value = true
|
||||
@@ -35,10 +81,10 @@ async function submit() {
|
||||
{
|
||||
i: {
|
||||
storagePath: form.storagePath,
|
||||
adminUser: form.adminUser,
|
||||
adminPass: form.adminPass,
|
||||
jwtSecret: form.jwtSecret,
|
||||
ldap: form.ldapEnabled ? form.ldap : null,
|
||||
adminUser: form.adminUser,
|
||||
adminPass: form.adminPass,
|
||||
jwtSecret: form.jwtSecret,
|
||||
ldap: form.ldapEnabled ? form.ldap : null,
|
||||
},
|
||||
},
|
||||
)
|
||||
@@ -46,7 +92,8 @@ async function submit() {
|
||||
await app.login(form.adminUser, form.adminPass)
|
||||
router.replace('/')
|
||||
} catch (e: unknown) {
|
||||
error.value = e instanceof Error ? e.message : String(e)
|
||||
error.value = e instanceof Error ? e.message : 'Setup failed'
|
||||
step.value = 1
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -54,81 +101,238 @@ async function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center bg-surface-900 px-4">
|
||||
<div class="w-full max-w-md bg-surface-800 rounded-2xl p-8 shadow-xl">
|
||||
<h1 class="text-2xl font-bold mb-1">Welcome to Archivum</h1>
|
||||
<p class="text-slate-400 text-sm mb-6">Complete setup to get started.</p>
|
||||
<div class="min-h-screen bg-slate-50 dark:bg-slate-900 flex flex-col">
|
||||
|
||||
<!-- Step 1: Storage & Admin -->
|
||||
<form v-if="step === 1" class="space-y-4" @submit.prevent="step = 2">
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Storage path</label>
|
||||
<input v-model="form.storagePath" required class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Admin username</label>
|
||||
<input v-model="form.adminUser" required class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Admin password</label>
|
||||
<input v-model="form.adminPass" type="password" required class="input" />
|
||||
</div>
|
||||
<button type="submit" class="btn-primary w-full">Next →</button>
|
||||
</form>
|
||||
<!-- Top bar with theme toggle -->
|
||||
<div class="flex items-center justify-between px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-slate-900 dark:text-white font-bold">
|
||||
<svg class="w-6 h-6 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
||||
</svg>
|
||||
Archivum
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<!-- Step 2: LDAP (optional) -->
|
||||
<form v-else-if="step === 2" class="space-y-4" @submit.prevent="submit">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input v-model="form.ldapEnabled" type="checkbox" class="rounded" />
|
||||
<span class="text-sm">Enable LDAP authentication</span>
|
||||
</label>
|
||||
<!-- Wizard card -->
|
||||
<div class="flex-1 flex items-center justify-center px-4 py-8">
|
||||
<div class="w-full max-w-lg">
|
||||
|
||||
<template v-if="form.ldapEnabled">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Host</label>
|
||||
<input v-model="form.ldap.host" required class="input" />
|
||||
<!-- Progress -->
|
||||
<div class="flex items-center gap-2 mb-8">
|
||||
<div
|
||||
v-for="i in totalSteps"
|
||||
:key="i"
|
||||
:class="[
|
||||
'h-1.5 flex-1 rounded-full transition-all duration-300',
|
||||
i <= step ? 'bg-accent-500' : 'bg-slate-200 dark:bg-slate-700'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="card p-8 shadow-xl shadow-slate-200/50 dark:shadow-black/30">
|
||||
|
||||
<!-- ── Step 1: Admin & Storage ─────────────────────────────────────── -->
|
||||
<template v-if="step === 1">
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-white mb-1">Welcome to Archivum</h1>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm mb-6">Create your admin account and set the storage location.</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="label">Storage path
|
||||
<span class="text-xs font-normal text-slate-400 ml-1">(where .adoc files are stored)</span>
|
||||
</label>
|
||||
<input v-model="form.storagePath" class="input" placeholder="/data/wiki" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Admin username</label>
|
||||
<input v-model="form.adminUser" class="input" placeholder="admin" autocomplete="username" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Password
|
||||
<span class="text-xs font-normal text-slate-400 ml-1">(min 8 characters)</span>
|
||||
</label>
|
||||
<input v-model="form.adminPass" type="password" class="input" placeholder="••••••••" autocomplete="new-password" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Confirm password</label>
|
||||
<input
|
||||
v-model="adminPassConfirm"
|
||||
type="password"
|
||||
:class="['input', passwordMismatch ? 'border-rose-500 focus:ring-rose-500' : '']"
|
||||
placeholder="••••••••"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<p v-if="passwordMismatch" class="mt-1 text-xs text-rose-500">Passwords do not match.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Port</label>
|
||||
<input v-model.number="form.ldap.port" type="number" required class="input" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Base DN</label>
|
||||
<input v-model="form.ldap.baseDN" required class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Bind DN</label>
|
||||
<input v-model="form.ldap.bindDN" required class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Bind password</label>
|
||||
<input v-model="form.ldap.bindPassword" type="password" required class="input" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
|
||||
<!-- ── Step 2: LDAP ───────────────────────────────────────────────── -->
|
||||
<template v-else-if="step === 2">
|
||||
<h2 class="text-xl font-bold text-slate-900 dark:text-white mb-1">LDAP Authentication</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm mb-6">Optional — leave disabled to use local accounts only.</p>
|
||||
|
||||
<label class="flex items-center gap-3 cursor-pointer mb-5 select-none">
|
||||
<div
|
||||
:class="[
|
||||
'w-10 h-6 rounded-full transition-colors relative',
|
||||
form.ldapEnabled ? 'bg-accent-600' : 'bg-slate-300 dark:bg-slate-600'
|
||||
]"
|
||||
@click="form.ldapEnabled = !form.ldapEnabled"
|
||||
>
|
||||
<div :class="['absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform', form.ldapEnabled ? 'translate-x-5' : 'translate-x-1']" />
|
||||
</div>
|
||||
<span class="text-sm font-medium text-slate-700 dark:text-slate-300">Enable LDAP</span>
|
||||
</label>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
enter-from-class="opacity-0 -translate-y-2"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
>
|
||||
<div v-if="form.ldapEnabled" class="space-y-4">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="col-span-2">
|
||||
<label class="label">Host</label>
|
||||
<input v-model="form.ldap.host" class="input" placeholder="ldap.example.com" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Port</label>
|
||||
<input v-model.number="form.ldap.port" type="number" class="input" placeholder="389" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Base DN</label>
|
||||
<input v-model="form.ldap.baseDN" class="input" placeholder="dc=example,dc=com" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Bind DN</label>
|
||||
<input v-model="form.ldap.bindDN" class="input" placeholder="cn=reader,dc=example,dc=com" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Bind password</label>
|
||||
<input v-model="form.ldap.bindPassword" type="password" class="input" />
|
||||
</div>
|
||||
|
||||
<!-- Test connection -->
|
||||
<div class="pt-1">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-secondary text-sm"
|
||||
:disabled="ldapTesting || !form.ldap.host"
|
||||
@click="testLdap"
|
||||
>
|
||||
<svg v-if="ldapTesting" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
|
||||
</svg>
|
||||
<svg v-else 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 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
{{ ldapTesting ? 'Testing…' : 'Test connection' }}
|
||||
</button>
|
||||
|
||||
<transition name="fade-y">
|
||||
<div
|
||||
v-if="ldapTestResult"
|
||||
:class="[
|
||||
'mt-3 flex items-start gap-2 rounded-lg px-3 py-2.5 text-sm',
|
||||
ldapTestResult.ok
|
||||
? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800'
|
||||
: 'bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-400 border border-rose-200 dark:border-rose-800'
|
||||
]"
|
||||
>
|
||||
<svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path v-if="ldapTestResult.ok" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
{{ ldapTestResult.message }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<!-- ── Step 3: Review ─────────────────────────────────────────────── -->
|
||||
<template v-else>
|
||||
<h2 class="text-xl font-bold text-slate-900 dark:text-white mb-1">Review & Finish</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm mb-6">Check your settings before completing setup.</p>
|
||||
|
||||
<dl class="space-y-3 text-sm">
|
||||
<div class="flex justify-between py-2 border-b border-slate-100 dark:border-slate-700">
|
||||
<dt class="text-slate-500 dark:text-slate-400">Storage path</dt>
|
||||
<dd class="font-mono text-slate-800 dark:text-slate-200">{{ form.storagePath }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b border-slate-100 dark:border-slate-700">
|
||||
<dt class="text-slate-500 dark:text-slate-400">Admin user</dt>
|
||||
<dd class="text-slate-800 dark:text-slate-200">{{ form.adminUser }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b border-slate-100 dark:border-slate-700">
|
||||
<dt class="text-slate-500 dark:text-slate-400">LDAP</dt>
|
||||
<dd :class="form.ldapEnabled ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-400'">
|
||||
{{ form.ldapEnabled ? `Enabled (${form.ldap.host}:${form.ldap.port})` : 'Disabled' }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<p v-if="error" class="mt-4 flex items-center gap-2 text-sm text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 rounded-lg px-3 py-2.5">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{{ error }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<!-- Navigation buttons -->
|
||||
<div class="flex items-center gap-3 mt-8">
|
||||
<button
|
||||
v-if="step > 1"
|
||||
class="btn-secondary"
|
||||
:disabled="submitting"
|
||||
@click="step--"
|
||||
>← Back</button>
|
||||
|
||||
<div class="flex-1" />
|
||||
|
||||
<button
|
||||
v-if="step < totalSteps"
|
||||
class="btn-primary"
|
||||
:disabled="!stepValid"
|
||||
@click="step++"
|
||||
>
|
||||
Continue →
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-primary min-w-32"
|
||||
:disabled="submitting"
|
||||
@click="submit"
|
||||
>
|
||||
<svg v-if="submitting" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
|
||||
</svg>
|
||||
{{ submitting ? 'Setting up…' : 'Finish setup' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button type="button" class="btn-secondary flex-1" @click="step = 1">← Back</button>
|
||||
<button type="submit" class="btn-primary flex-1" :disabled="submitting">
|
||||
{{ submitting ? 'Setting up…' : 'Finish setup' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="text-center text-xs text-slate-400 mt-4">
|
||||
Step {{ step }} of {{ totalSteps }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.input {
|
||||
@apply w-full bg-surface-900 border border-slate-600 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500;
|
||||
}
|
||||
.btn-primary {
|
||||
@apply py-2 rounded-lg bg-blue-600 hover:bg-blue-500 font-medium text-sm disabled:opacity-50 transition;
|
||||
}
|
||||
.btn-secondary {
|
||||
@apply py-2 rounded-lg bg-surface-900 hover:bg-surface-700 font-medium text-sm transition;
|
||||
}
|
||||
.fade-y-enter-active, .fade-y-leave-active { transition: opacity 0.2s, transform 0.2s; }
|
||||
.fade-y-enter-from, .fade-y-leave-to { opacity: 0; transform: translateY(-4px); }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user