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:
@@ -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>
|
||||
|
||||
84
frontend/src/pages/Setup.tsx
Normal file
84
frontend/src/pages/Setup.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { useState } from 'react'
|
||||
import { BookOpen, Loader2, Eye, EyeOff } from 'lucide-react'
|
||||
import api from '../api/client'
|
||||
|
||||
interface Props {
|
||||
onComplete: () => void
|
||||
}
|
||||
|
||||
export default function Setup({ onComplete }: Props) {
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPwd, setShowPwd] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
try {
|
||||
await api.post('/api/setup', { username, password })
|
||||
onComplete()
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Fehler beim Anlegen')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="flex items-center justify-center gap-3 mb-3">
|
||||
<BookOpen className="text-primary" size={32} />
|
||||
<h1 className="text-3xl font-bold text-white">Audiolib</h1>
|
||||
</div>
|
||||
<p className="text-center text-gray-400 text-sm mb-8">Erster Start — Admin-Konto anlegen</p>
|
||||
|
||||
<form onSubmit={submit} className="bg-surface rounded-xl p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Benutzername</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
placeholder="admin"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Passwort</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPwd ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 pr-10 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPwd(!showPwd)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPwd ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="text-red-400 text-sm">{error}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !username || !password}
|
||||
className="w-full bg-primary text-black font-semibold py-2.5 rounded-lg hover:bg-primary/80 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading && <Loader2 size={16} className="animate-spin" />}
|
||||
Konto anlegen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user