341 lines
14 KiB
Vue
341 lines
14 KiB
Vue
<script setup lang="ts">
|
|
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'
|
|
import FolderPicker from '@/components/FolderPicker.vue'
|
|
|
|
const router = useRouter()
|
|
const app = useAppStore()
|
|
useThemeStore() // ensures theme is initialized before ThemeToggle renders
|
|
|
|
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, ''),
|
|
ldapEnabled: false,
|
|
ldap: {
|
|
host: '',
|
|
port: 389,
|
|
baseDN: '',
|
|
bindDN: '',
|
|
bindPassword: '',
|
|
},
|
|
})
|
|
|
|
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
|
|
try {
|
|
await gql(
|
|
`mutation Setup($i: SetupInput!) { setup(input: $i) }`,
|
|
{
|
|
i: {
|
|
storagePath: form.storagePath,
|
|
adminUser: form.adminUser,
|
|
adminPass: form.adminPass,
|
|
jwtSecret: form.jwtSecret,
|
|
ldap: form.ldapEnabled ? form.ldap : null,
|
|
},
|
|
},
|
|
)
|
|
app.requiresSetup = false
|
|
await app.login(form.adminUser, form.adminPass)
|
|
router.replace('/')
|
|
} catch (e: unknown) {
|
|
error.value = e instanceof Error ? e.message : 'Setup failed'
|
|
step.value = 1
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-slate-50 dark:bg-slate-900 flex flex-col">
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Wizard card -->
|
|
<div class="flex-1 flex items-center justify-center px-4 py-8">
|
|
<div class="w-full max-w-lg">
|
|
|
|
<!-- 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>
|
|
<FolderPicker v-model="form.storagePath" 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>
|
|
</template>
|
|
|
|
<!-- ── 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>
|
|
|
|
<p class="text-center text-xs text-slate-400 mt-4">
|
|
Step {{ step }} of {{ totalSteps }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.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>
|
|
|