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:
@@ -22,6 +22,9 @@ type Mutation {
|
||||
# First-run setup.
|
||||
setup(input: SetupInput!): Boolean!
|
||||
|
||||
# Test an LDAP configuration before saving.
|
||||
testLdapConnection(input: LDAPInput!): LDAPTestResult!
|
||||
|
||||
# Authenticate and receive a bearer token.
|
||||
login(username: String!, password: String!): String!
|
||||
|
||||
@@ -54,6 +57,11 @@ type DocumentMeta {
|
||||
updatedAt: String!
|
||||
}
|
||||
|
||||
type LDAPTestResult {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
}
|
||||
|
||||
type CommitEntry {
|
||||
hash: String!
|
||||
author: String!
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
package graph
|
||||
|
||||
import (
|
||||
"io"
|
||||
"net/http"
|
||||
"os"
|
||||
"strings"
|
||||
|
||||
"github.com/brasse-b/archivum/internal/config"
|
||||
)
|
||||
|
||||
// NewServer wires up the HTTP handler for the GraphQL endpoint.
|
||||
// cfg may be nil when the system has not been configured yet; in that case
|
||||
// every GraphQL request returns {"data":{"systemStatus":"REQUIRE_SETUP"}} so
|
||||
// the frontend can redirect to the Setup Wizard.
|
||||
func NewServer(cfg *config.Config) http.Handler {
|
||||
mux := http.NewServeMux()
|
||||
|
||||
@@ -21,24 +20,67 @@ func NewServer(cfg *config.Config) http.Handler {
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
return
|
||||
}
|
||||
|
||||
if cfg == nil {
|
||||
w.WriteHeader(http.StatusOK)
|
||||
_, _ = w.Write([]byte(`{"data":{"systemStatus":"REQUIRE_SETUP"}}`))
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: replace with gqlgen handler once generated.
|
||||
w.WriteHeader(http.StatusOK)
|
||||
_, _ = w.Write([]byte(`{"data":{"systemStatus":"OK"}}`))
|
||||
// Stub: inspect operation name to return sensible responses.
|
||||
body, _ := io.ReadAll(r.Body)
|
||||
bs := string(body)
|
||||
switch {
|
||||
case strings.Contains(bs, "testLdapConnection"):
|
||||
_, _ = w.Write([]byte(`{"data":{"testLdapConnection":{"success":false,"message":"LDAP resolver not yet implemented"}}}`))
|
||||
case strings.Contains(bs, "setup"):
|
||||
_, _ = w.Write([]byte(`{"data":{"setup":true}}`))
|
||||
case strings.Contains(bs, "login"):
|
||||
_, _ = w.Write([]byte(`{"data":{"login":"stub-token"}}`))
|
||||
default:
|
||||
_, _ = w.Write([]byte(`{"data":{"systemStatus":"OK","documents":[]}}`))
|
||||
}
|
||||
})
|
||||
|
||||
mux.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
|
||||
w.WriteHeader(http.StatusOK)
|
||||
})
|
||||
|
||||
// Serve the embedded Vue SPA for every other path.
|
||||
mux.Handle("/", http.FileServer(http.Dir("/srv/archivum/ui")))
|
||||
uiDir := os.Getenv("UI_DIR")
|
||||
if uiDir == "" {
|
||||
uiDir = "/srv/archivum/ui"
|
||||
}
|
||||
mux.Handle("/", spaHandler(uiDir))
|
||||
|
||||
return mux
|
||||
}
|
||||
|
||||
// spaHandler serves static files and falls back to index.html for all paths
|
||||
// that don't resolve to a real file — required for client-side routing.
|
||||
func spaHandler(dir string) http.Handler {
|
||||
fs := http.Dir(dir)
|
||||
fileServer := http.FileServer(fs)
|
||||
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
// Assets (JS, CSS, images) must be served as-is.
|
||||
if isAssetPath(r.URL.Path) {
|
||||
fileServer.ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
// Try to open the path; if it exists serve it, otherwise serve SPA root.
|
||||
f, err := fs.Open(r.URL.Path)
|
||||
if err == nil {
|
||||
f.Close()
|
||||
fileServer.ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
http.ServeFile(w, r, dir+"/index.html")
|
||||
})
|
||||
}
|
||||
|
||||
func isAssetPath(path string) bool {
|
||||
return strings.HasPrefix(path, "/assets/") ||
|
||||
strings.HasPrefix(path, "/icons/") ||
|
||||
path == "/favicon.ico" ||
|
||||
path == "/favicon.svg" ||
|
||||
path == "/manifest.webmanifest" ||
|
||||
path == "/registerSW.js" ||
|
||||
path == "/sw.js"
|
||||
}
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#1e293b" />
|
||||
<link rel="icon" type="image/ico" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<title>Archivum</title>
|
||||
<!-- Dark class is applied by ThemeStore at runtime; avoid flash with inline script -->
|
||||
<script>
|
||||
(function () {
|
||||
var m = localStorage.getItem('theme-mode') || 'dark'
|
||||
document.documentElement.classList.add(m)
|
||||
})()
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-surface-900 text-slate-100 antialiased">
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
@@ -1,23 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
import AppLayout from '@/components/layout/AppLayout.vue'
|
||||
|
||||
const app = useAppStore()
|
||||
const theme = useThemeStore()
|
||||
const router = useRouter()
|
||||
const ready = ref(false)
|
||||
|
||||
// If backend signals REQUIRE_SETUP, redirect to wizard.
|
||||
app.checkStatus().then(() => {
|
||||
onMounted(async () => {
|
||||
theme.init()
|
||||
await app.checkStatus()
|
||||
if (app.requiresSetup) {
|
||||
router.replace('/setup')
|
||||
}
|
||||
ready.value = true
|
||||
})
|
||||
|
||||
const showLayout = computed(() => !app.requiresSetup)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout v-if="showLayout" />
|
||||
<router-view v-else />
|
||||
<!-- Splash while checking server status -->
|
||||
<div
|
||||
v-if="!ready"
|
||||
class="min-h-screen flex items-center justify-center bg-white dark:bg-slate-900"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-slate-400">
|
||||
<svg class="animate-spin w-8 h-8 text-accent-500" 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>
|
||||
<span class="text-sm">Loading Archivum…</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<AppLayout v-if="!app.requiresSetup" />
|
||||
<router-view v-else />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -2,22 +2,113 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ── Accent color variables (updated at runtime by ThemeStore) ─────────────── */
|
||||
:root {
|
||||
--accent-400: 96 165 250; /* blue-400 */
|
||||
--accent-500: 59 130 246; /* blue-500 */
|
||||
--accent-600: 37 99 235; /* blue-600 */
|
||||
--accent-700: 29 78 216; /* blue-700 */
|
||||
}
|
||||
|
||||
/* ── Base element styles ────────────────────────────────────────────────────── */
|
||||
@layer base {
|
||||
html {
|
||||
font-family: 'Inter', ui-sans-serif, system-ui;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* AsciiDoc rendered output */
|
||||
.adoc-content h1 { @apply text-2xl font-bold mb-4 mt-6; }
|
||||
.adoc-content h2 { @apply text-xl font-semibold mb-3 mt-5; }
|
||||
body {
|
||||
@apply bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: theme('colors.slate.600') transparent;
|
||||
}
|
||||
*::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
*::-webkit-scrollbar-track { background: transparent; }
|
||||
*::-webkit-scrollbar-thumb {
|
||||
@apply bg-slate-300 dark:bg-slate-600 rounded-full;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Reusable component classes ────────────────────────────────────────────── */
|
||||
@layer components {
|
||||
.card {
|
||||
@apply bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply w-full bg-slate-50 dark:bg-slate-900
|
||||
border border-slate-300 dark:border-slate-600
|
||||
rounded-lg px-3 py-2 text-sm
|
||||
text-slate-900 dark:text-slate-100
|
||||
placeholder-slate-400 dark:placeholder-slate-500
|
||||
focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent
|
||||
transition;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2
|
||||
px-4 py-2 rounded-lg text-sm font-medium text-white
|
||||
bg-accent-600 hover:bg-accent-500 active:bg-accent-700
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2
|
||||
px-4 py-2 rounded-lg text-sm font-medium
|
||||
bg-slate-100 dark:bg-slate-800
|
||||
text-slate-700 dark:text-slate-300
|
||||
hover:bg-slate-200 dark:hover:bg-slate-700
|
||||
border border-slate-200 dark:border-slate-700
|
||||
disabled:opacity-50 transition;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-2
|
||||
px-3 py-1.5 rounded-lg text-sm
|
||||
text-slate-600 dark:text-slate-400
|
||||
hover:bg-slate-100 dark:hover:bg-slate-800
|
||||
transition;
|
||||
}
|
||||
|
||||
.label {
|
||||
@apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── AsciiDoc rendered output ──────────────────────────────────────────────── */
|
||||
@layer utilities {
|
||||
.adoc-content { @apply text-slate-800 dark:text-slate-200 leading-relaxed; }
|
||||
.adoc-content h1 { @apply text-2xl font-bold mb-4 mt-6 text-slate-900 dark:text-white; }
|
||||
.adoc-content h2 { @apply text-xl font-semibold mb-3 mt-5 text-slate-900 dark:text-white; }
|
||||
.adoc-content h3 { @apply text-lg font-medium mb-2 mt-4; }
|
||||
.adoc-content p { @apply mb-3 leading-relaxed; }
|
||||
.adoc-content pre { @apply bg-surface-800 rounded-lg p-4 overflow-x-auto font-mono text-sm mb-4; }
|
||||
.adoc-content code { @apply font-mono text-sm bg-surface-800 px-1 rounded; }
|
||||
.adoc-content p { @apply mb-3; }
|
||||
.adoc-content pre {
|
||||
@apply bg-slate-100 dark:bg-slate-800/80
|
||||
border border-slate-200 dark:border-slate-700
|
||||
rounded-lg p-4 overflow-x-auto font-mono text-sm mb-4;
|
||||
}
|
||||
.adoc-content code {
|
||||
@apply font-mono text-sm
|
||||
bg-slate-100 dark:bg-slate-800
|
||||
text-accent-600 dark:text-accent-400
|
||||
px-1.5 py-0.5 rounded;
|
||||
}
|
||||
.adoc-content ul { @apply list-disc list-inside mb-3 space-y-1; }
|
||||
.adoc-content ol { @apply list-decimal list-inside mb-3 space-y-1; }
|
||||
.adoc-content blockquote { @apply border-l-4 border-slate-500 pl-4 italic text-slate-400 mb-3; }
|
||||
.adoc-content blockquote {
|
||||
@apply border-l-4 border-accent-500 pl-4 italic
|
||||
text-slate-600 dark:text-slate-400 mb-3;
|
||||
}
|
||||
.adoc-content table { @apply w-full text-sm border-collapse mb-4; }
|
||||
.adoc-content th { @apply bg-surface-800 px-3 py-2 text-left border border-slate-700; }
|
||||
.adoc-content td { @apply px-3 py-2 border border-slate-700; }
|
||||
.adoc-content th {
|
||||
@apply bg-slate-100 dark:bg-slate-800
|
||||
px-3 py-2 text-left
|
||||
border border-slate-200 dark:border-slate-700 font-medium;
|
||||
}
|
||||
.adoc-content td { @apply px-3 py-2 border border-slate-200 dark:border-slate-700; }
|
||||
}
|
||||
|
||||
@@ -1,25 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
import ThemeToggle from './ThemeToggle.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const app = useAppStore()
|
||||
const sidebarOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen overflow-hidden bg-surface-900 text-slate-100">
|
||||
<div class="flex h-screen overflow-hidden bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">
|
||||
|
||||
<!-- Mobile overlay -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="sidebarOpen"
|
||||
class="fixed inset-0 z-20 bg-black/60 lg:hidden"
|
||||
class="fixed inset-0 z-20 bg-black/50 backdrop-blur-sm lg:hidden"
|
||||
@click="sidebarOpen = false"
|
||||
/>
|
||||
</transition>
|
||||
|
||||
<!-- Sidebar — slide-over on mobile, static on desktop -->
|
||||
<!-- Sidebar -->
|
||||
<aside
|
||||
:class="[
|
||||
'fixed inset-y-0 left-0 z-30 w-64 flex-shrink-0 bg-surface-800 border-r border-slate-700 transform transition-transform duration-200',
|
||||
'fixed inset-y-0 left-0 z-30 w-64 flex-shrink-0',
|
||||
'bg-slate-50 dark:bg-slate-800/50',
|
||||
'border-r border-slate-200 dark:border-slate-700/60',
|
||||
'backdrop-blur-md',
|
||||
'transform transition-transform duration-250 ease-in-out',
|
||||
'lg:static lg:translate-x-0',
|
||||
sidebarOpen ? 'translate-x-0' : '-translate-x-full',
|
||||
]"
|
||||
@@ -27,20 +35,39 @@ const sidebarOpen = ref(false)
|
||||
<Sidebar @close="sidebarOpen = false" />
|
||||
</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<!-- Main area -->
|
||||
<div class="flex flex-col flex-1 min-w-0 overflow-hidden">
|
||||
<!-- Mobile top bar -->
|
||||
<header class="flex items-center gap-3 p-3 border-b border-slate-700 lg:hidden">
|
||||
|
||||
<!-- Top bar (always visible on mobile, only shows breadcrumb on desktop) -->
|
||||
<header class="flex items-center gap-2 px-4 py-3 border-b border-slate-200 dark:border-slate-700/60 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md">
|
||||
<!-- Hamburger (mobile only) -->
|
||||
<button
|
||||
class="p-1.5 rounded hover:bg-surface-700"
|
||||
class="btn-ghost p-2 -ml-2 lg:hidden"
|
||||
aria-label="Open navigation"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<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="M4 6h16M4 12h16M4 18h16" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="font-semibold">Archivum</span>
|
||||
|
||||
<span class="font-semibold text-slate-900 dark:text-white lg:hidden">Archivum</span>
|
||||
|
||||
<div class="flex-1" />
|
||||
|
||||
<!-- Right side controls -->
|
||||
<ThemeToggle />
|
||||
|
||||
<div class="flex items-center gap-1 pl-2 border-l border-slate-200 dark:border-slate-700 ml-1">
|
||||
<span class="text-sm text-slate-500 dark:text-slate-400 hidden sm:block">
|
||||
{{ app.username ?? 'Guest' }}
|
||||
</span>
|
||||
<button
|
||||
v-if="app.token"
|
||||
class="btn-ghost text-xs"
|
||||
@click="app.logout()"
|
||||
>Sign out</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 overflow-auto">
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { gql } from '@/lib/gql'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const emit = defineEmits<{ close: [] }>()
|
||||
|
||||
interface DocMeta { slug: string; title: string }
|
||||
|
||||
const docs = ref<DocMeta[]>([])
|
||||
const loading = ref(true)
|
||||
const app = useAppStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(async () => {
|
||||
const data = await gql<{ documents: DocMeta[] }>(`{ documents { slug title } }`)
|
||||
docs.value = data.documents
|
||||
try {
|
||||
const data = await gql<{ documents?: DocMeta[] }>(`{ documents { slug title } }`)
|
||||
docs.value = data.documents ?? []
|
||||
} catch {
|
||||
docs.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function navigate(slug: string) {
|
||||
@@ -22,38 +32,81 @@ function navigate(slug: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-b border-slate-700">
|
||||
<router-link to="/" class="font-bold text-lg" @click="emit('close')">Archivum</router-link>
|
||||
<button class="lg:hidden p-1 rounded hover:bg-surface-700" @click="emit('close')">
|
||||
<div class="flex flex-col h-full select-none">
|
||||
|
||||
<!-- Logo / header -->
|
||||
<div class="flex items-center justify-between px-4 py-4 border-b border-slate-200 dark:border-slate-700/60">
|
||||
<router-link
|
||||
to="/"
|
||||
class="flex items-center gap-2 font-bold text-slate-900 dark:text-white text-lg"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<!-- Book icon -->
|
||||
<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
|
||||
</router-link>
|
||||
<button
|
||||
class="btn-ghost p-1.5 lg:hidden"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search placeholder -->
|
||||
<div class="px-3 py-3 border-b border-slate-200 dark:border-slate-700/60">
|
||||
<div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-400 text-sm cursor-not-allowed">
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<span>Search…</span>
|
||||
<kbd class="ml-auto text-xs bg-slate-200 dark:bg-slate-700 rounded px-1.5 py-0.5">⌘K</kbd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document tree -->
|
||||
<nav class="flex-1 overflow-y-auto py-2">
|
||||
<nav class="flex-1 overflow-y-auto py-2 px-2">
|
||||
<div v-if="loading" class="space-y-1 px-2 mt-1">
|
||||
<div v-for="i in 4" :key="i" class="h-7 rounded-md bg-slate-200 dark:bg-slate-700 animate-pulse" :style="{ width: `${60 + i * 8}%` }" />
|
||||
</div>
|
||||
|
||||
<p v-else-if="docs.length === 0" class="text-xs text-slate-400 px-3 py-2">
|
||||
No documents yet.
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-for="doc in docs"
|
||||
:key="doc.slug"
|
||||
class="w-full text-left px-4 py-2 text-sm hover:bg-surface-700 truncate"
|
||||
:class="[
|
||||
'w-full text-left px-3 py-2 rounded-lg text-sm truncate transition',
|
||||
route.params.slug === doc.slug
|
||||
? 'bg-accent-500/10 text-accent-600 dark:text-accent-400 font-medium'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/60'
|
||||
]"
|
||||
@click="navigate(doc.slug)"
|
||||
>
|
||||
{{ doc.title }}
|
||||
{{ doc.title || doc.slug }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- New document button -->
|
||||
<div class="p-3 border-t border-slate-700">
|
||||
<!-- New document -->
|
||||
<div class="p-3 border-t border-slate-200 dark:border-slate-700/60">
|
||||
<router-link
|
||||
to="/doc/new"
|
||||
class="block w-full text-center py-2 rounded bg-blue-700 hover:bg-blue-600 text-sm font-medium"
|
||||
class="btn-primary w-full text-center text-sm py-2"
|
||||
@click="emit('close')"
|
||||
>
|
||||
+ New document
|
||||
<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>
|
||||
New document
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
122
frontend/src/components/layout/ThemeToggle.vue
Normal file
122
frontend/src/components/layout/ThemeToggle.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useThemeStore, ACCENT_PRESETS } from '@/stores/theme'
|
||||
|
||||
const theme = useThemeStore()
|
||||
const open = ref(false)
|
||||
const customHex = ref(theme.customAccent || '#6366f1')
|
||||
|
||||
function toggleMode() {
|
||||
theme.setMode(theme.mode === 'dark' ? 'light' : 'dark')
|
||||
}
|
||||
|
||||
const accentColors: Record<string, string> = {
|
||||
blue: '#3b82f6', violet: '#8b5cf6', rose: '#f43f5e',
|
||||
emerald: '#10b981', amber: '#f59e0b', cyan: '#06b6d4',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<!-- Trigger button -->
|
||||
<button
|
||||
class="btn-ghost p-2 rounded-lg"
|
||||
:title="open ? 'Close theme panel' : 'Appearance'"
|
||||
@click="open = !open"
|
||||
>
|
||||
<!-- Sun icon (light) / Moon icon (dark) -->
|
||||
<svg v-if="theme.mode === 'dark'" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
|
||||
</svg>
|
||||
<svg v-else 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 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Panel -->
|
||||
<transition
|
||||
enter-active-class="transition duration-150 ease-out"
|
||||
enter-from-class="opacity-0 scale-95 translate-y-1"
|
||||
enter-to-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-to-class="opacity-0 scale-95 translate-y-1"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="absolute right-0 top-full mt-2 w-72 card shadow-xl p-4 z-50 origin-top-right"
|
||||
>
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Appearance</p>
|
||||
|
||||
<!-- Mode toggle -->
|
||||
<div class="flex rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700 mb-4">
|
||||
<button
|
||||
:class="['flex-1 py-2 text-sm flex items-center justify-center gap-2 transition',
|
||||
theme.mode === 'light'
|
||||
? 'bg-accent-600 text-white'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-400']"
|
||||
@click="theme.setMode('light')"
|
||||
>
|
||||
<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 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
|
||||
</svg>
|
||||
Light
|
||||
</button>
|
||||
<button
|
||||
:class="['flex-1 py-2 text-sm flex items-center justify-center gap-2 transition',
|
||||
theme.mode === 'dark'
|
||||
? 'bg-accent-600 text-white'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-400']"
|
||||
@click="theme.setMode('dark')"
|
||||
>
|
||||
<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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
|
||||
</svg>
|
||||
Dark
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Accent presets -->
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Accent color</p>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<button
|
||||
v-for="preset in ACCENT_PRESETS"
|
||||
:key="preset.name"
|
||||
:title="preset.label"
|
||||
:style="{ backgroundColor: accentColors[preset.name] }"
|
||||
:class="['w-7 h-7 rounded-full transition ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800',
|
||||
theme.accentName === preset.name ? 'ring-slate-400 dark:ring-slate-500 scale-110' : 'ring-transparent hover:scale-110']"
|
||||
@click="theme.setAccent(preset.name)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Custom color -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
v-model="customHex"
|
||||
type="color"
|
||||
class="w-8 h-8 rounded cursor-pointer border-0 bg-transparent p-0"
|
||||
/>
|
||||
<input
|
||||
v-model="customHex"
|
||||
type="text"
|
||||
maxlength="7"
|
||||
placeholder="#6366f1"
|
||||
class="input flex-1 font-mono text-xs"
|
||||
/>
|
||||
<button
|
||||
class="btn-secondary text-xs px-3 py-2"
|
||||
@click="theme.setAccent('custom', customHex)"
|
||||
>Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div v-if="open" class="fixed inset-0 z-40" @click="open = false" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
|
||||
87
frontend/src/stores/theme.ts
Normal file
87
frontend/src/stores/theme.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
export type ThemeMode = 'dark' | 'light'
|
||||
|
||||
export interface AccentPreset {
|
||||
name: string
|
||||
label: string
|
||||
shades: { 400: string; 500: string; 600: string; 700: string }
|
||||
}
|
||||
|
||||
export const ACCENT_PRESETS: AccentPreset[] = [
|
||||
{ name: 'blue', label: 'Blue', shades: { 400: '96 165 250', 500: '59 130 246', 600: '37 99 235', 700: '29 78 216' } },
|
||||
{ name: 'violet', label: 'Violet', shades: { 400: '167 139 250', 500: '139 92 246', 600: '124 58 237', 700: '109 40 217' } },
|
||||
{ name: 'rose', label: 'Rose', shades: { 400: '251 113 133', 500: '244 63 94', 600: '225 29 72', 700: '190 18 60' } },
|
||||
{ name: 'emerald',label: 'Green', shades: { 400: '52 211 153', 500: '16 185 129', 600: '5 150 105', 700: '4 120 87' } },
|
||||
{ name: 'amber', label: 'Amber', shades: { 400: '251 191 36', 500: '245 158 11', 600: '217 119 6', 700: '180 83 9' } },
|
||||
{ name: 'cyan', label: 'Cyan', shades: { 400: '34 211 238', 500: '6 182 212', 600: '8 145 178', 700: '14 116 144' } },
|
||||
]
|
||||
|
||||
function hexToRgbTriple(hex: string): string {
|
||||
const h = hex.replace('#', '')
|
||||
const r = parseInt(h.slice(0, 2), 16)
|
||||
const g = parseInt(h.slice(2, 4), 16)
|
||||
const b = parseInt(h.slice(4, 6), 16)
|
||||
return `${r} ${g} ${b}`
|
||||
}
|
||||
|
||||
function darken(rgb: string, amount: number): string {
|
||||
return rgb.split(' ').map(c => Math.max(0, Math.round(Number(c) * (1 - amount))).toString()).join(' ')
|
||||
}
|
||||
|
||||
function lighten(rgb: string, amount: number): string {
|
||||
return rgb.split(' ').map(c => Math.min(255, Math.round(Number(c) + (255 - Number(c)) * amount)).toString()).join(' ')
|
||||
}
|
||||
|
||||
export const useThemeStore = defineStore('theme', () => {
|
||||
const mode = ref<ThemeMode>((localStorage.getItem('theme-mode') as ThemeMode) ?? 'dark')
|
||||
const accentName = ref<string>(localStorage.getItem('theme-accent') ?? 'blue')
|
||||
const customAccent = ref<string>(localStorage.getItem('theme-custom-accent') ?? '')
|
||||
|
||||
function applyMode(m: ThemeMode) {
|
||||
document.documentElement.classList.toggle('dark', m === 'dark')
|
||||
document.documentElement.classList.toggle('light', m === 'light')
|
||||
}
|
||||
|
||||
function applyAccent(name: string, custom = '') {
|
||||
let shades: AccentPreset['shades']
|
||||
if (name === 'custom' && custom.match(/^#[0-9a-fA-F]{6}$/)) {
|
||||
const base = hexToRgbTriple(custom)
|
||||
shades = {
|
||||
400: lighten(base, 0.15),
|
||||
500: base,
|
||||
600: darken(base, 0.1),
|
||||
700: darken(base, 0.25),
|
||||
}
|
||||
} else {
|
||||
shades = (ACCENT_PRESETS.find(p => p.name === name) ?? ACCENT_PRESETS[0]).shades
|
||||
}
|
||||
const root = document.documentElement
|
||||
root.style.setProperty('--accent-400', shades[400])
|
||||
root.style.setProperty('--accent-500', shades[500])
|
||||
root.style.setProperty('--accent-600', shades[600])
|
||||
root.style.setProperty('--accent-700', shades[700])
|
||||
}
|
||||
|
||||
function setMode(m: ThemeMode) {
|
||||
mode.value = m
|
||||
localStorage.setItem('theme-mode', m)
|
||||
applyMode(m)
|
||||
}
|
||||
|
||||
function setAccent(name: string, custom = '') {
|
||||
accentName.value = name
|
||||
customAccent.value = custom
|
||||
localStorage.setItem('theme-accent', name)
|
||||
localStorage.setItem('theme-custom-accent', custom)
|
||||
applyAccent(name, custom)
|
||||
}
|
||||
|
||||
function init() {
|
||||
applyMode(mode.value)
|
||||
applyAccent(accentName.value, customAccent.value)
|
||||
}
|
||||
|
||||
return { mode, accentName, customAccent, setMode, setAccent, init }
|
||||
})
|
||||
@@ -9,12 +9,12 @@ export default {
|
||||
mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
surface: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
950: '#020617',
|
||||
// Accent color driven by CSS variables set by the theme store.
|
||||
accent: {
|
||||
400: 'rgb(var(--accent-400) / <alpha-value>)',
|
||||
500: 'rgb(var(--accent-500) / <alpha-value>)',
|
||||
600: 'rgb(var(--accent-600) / <alpha-value>)',
|
||||
700: 'rgb(var(--accent-700) / <alpha-value>)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -8,19 +8,15 @@ export default defineConfig({
|
||||
vue(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
|
||||
manifest: {
|
||||
name: 'Archivum',
|
||||
short_name: 'Archivum',
|
||||
description: 'AsciiDoc wiki with Git history',
|
||||
theme_color: '#1e293b',
|
||||
theme_color: '#0f172a',
|
||||
background_color: '#0f172a',
|
||||
display: 'standalone',
|
||||
icons: [
|
||||
{ src: 'icons/icon-192.png', sizes: '192x192', type: 'image/png' },
|
||||
{ src: 'icons/icon-512.png', sizes: '512x512', type: 'image/png' },
|
||||
{ src: 'icons/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
|
||||
],
|
||||
// Icons are optional; add real PNG files to public/icons/ to enable PWA install.
|
||||
icons: [],
|
||||
},
|
||||
workbox: {
|
||||
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
|
||||
|
||||
Reference in New Issue
Block a user