Add first-run setup wizard and file browser for library creation

- On first start (no users in DB), show a setup page in the web UI
  to create the admin account instead of reading credentials from .env
- New public endpoints: GET /api/setup/status, POST /api/setup
- New admin endpoint: GET /api/filebrowser?path=... for directory listing
- FileBrowser modal component with navigation, used in Admin > Libraries
- Remove _seed_admin / _seed_default_library from server startup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Audiolib
2026-05-26 13:30:42 +02:00
parent adbe3c2507
commit afba751c21
7 changed files with 309 additions and 59 deletions

View File

@@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react'
import { Users, Library, Settings, Trash2, Plus, RefreshCw, Loader2, Check, X } from 'lucide-react'
import { Users, Library, Settings, Trash2, Plus, RefreshCw, Loader2, Check, X, FolderOpen } from 'lucide-react'
import { getUsers, createUser, deleteUser, getSettings, updateSettings } from '../api/me'
import { getLibraries, scanLibrary, createLibrary, deleteLibrary } from '../api/libraries'
import FileBrowser from '../components/common/FileBrowser'
type Tab = 'users' | 'libraries' | 'settings'
@@ -119,6 +120,7 @@ function LibrariesPanel() {
const [loading, setLoading] = useState(true)
const [scanning, setScanning] = useState<string | null>(null)
const [showCreate, setShowCreate] = useState(false)
const [showBrowser, setShowBrowser] = useState(false)
const [form, setForm] = useState({ name: '', path: '', mediaType: 'book' })
useEffect(() => { getLibraries().then(setLibraries).finally(() => setLoading(false)) }, [])
@@ -160,10 +162,27 @@ function LibrariesPanel() {
value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
/>
<input type="text" placeholder="Pfad (z.B. /audiofiles/hörbucher)"
value={form.path} onChange={(e) => setForm({ ...form, path: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
/>
<div className="flex gap-2">
<input type="text" placeholder="Pfad (z.B. /audiofiles)"
value={form.path} onChange={(e) => setForm({ ...form, path: e.target.value })}
className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
/>
<button
type="button"
onClick={() => setShowBrowser(true)}
className="flex items-center gap-1.5 bg-white/5 border border-white/10 px-3 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/10"
>
<FolderOpen size={14} />
Durchsuchen
</button>
</div>
{showBrowser && (
<FileBrowser
initialPath={form.path || '/'}
onSelect={(p) => setForm({ ...form, path: p })}
onClose={() => setShowBrowser(false)}
/>
)}
<select value={form.mediaType} onChange={(e) => setForm({ ...form, mediaType: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none">
<option value="book">Hörbücher</option>