Merge branch 'main' into release
This commit is contained in:
cynfo3000
@@ -68,10 +68,28 @@ class ApiClient {
|
||||
// Auth
|
||||
async login(username, password) {
|
||||
const data = await this.post('/api/v1/auth/login', { username, password })
|
||||
this.setToken(data.token)
|
||||
if (data.token) this.setToken(data.token)
|
||||
return data
|
||||
}
|
||||
|
||||
async validateTOTP(totpToken, code) {
|
||||
const data = await this.post('/api/v1/auth/2fa/validate', { totp_token: totpToken, code })
|
||||
if (data.token) this.setToken(data.token)
|
||||
return data
|
||||
}
|
||||
|
||||
async setupTOTP() {
|
||||
return this.post('/api/v1/auth/2fa/setup')
|
||||
}
|
||||
|
||||
async confirmTOTP(code) {
|
||||
return this.post('/api/v1/auth/2fa/confirm', { code })
|
||||
}
|
||||
|
||||
async disableTOTP(password, code) {
|
||||
return this.post('/api/v1/auth/2fa/disable', { password, code })
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.setToken(null)
|
||||
}
|
||||
|
||||
@@ -4,10 +4,11 @@ import StatusBadge from './StatusBadge'
|
||||
import { copyToClipboard } from '../utils/clipboard'
|
||||
import { useSettingsStore } from '../stores/settings'
|
||||
import TerminalModal from './TerminalModal'
|
||||
import ScriptModal from './ScriptModal'
|
||||
import {
|
||||
X, Cpu, MemoryStick, HardDrive, Clock, Network, Shield, Route,
|
||||
Globe, Key, Download, Terminal, Wifi, Search, Plus, Trash2, Copy, Check, ExternalLink, Unplug, Plug, MonitorSmartphone, Ban,
|
||||
FileKey, UserCheck, Database, CalendarClock, Cable, Settings, Server, GitBranch, Play, Power, ChevronDown, ChevronRight, Pencil,
|
||||
FileKey, UserCheck, Database, CalendarClock, Cable, Settings, Server, GitBranch, Play, Power, ChevronDown, ChevronRight, Pencil, FileCode,
|
||||
} from 'lucide-react'
|
||||
|
||||
// Two-level navigation structure (DATAZONE style)
|
||||
@@ -909,6 +910,7 @@ function TunnelTab({ agentId, agent }) {
|
||||
const [error, setError] = useState('')
|
||||
const [sshCopied, setSshCopied] = useState(null)
|
||||
const [terminalOpen, setTerminalOpen] = useState(false)
|
||||
const [scriptOpen, setScriptOpen] = useState(false)
|
||||
|
||||
const backendHost = useSettingsStore.getState().getBackendHost()
|
||||
|
||||
@@ -981,6 +983,9 @@ function TunnelTab({ agentId, agent }) {
|
||||
{terminalOpen && (
|
||||
<TerminalModal agentId={agentId} agentName={agent?.name} onClose={() => setTerminalOpen(false)} />
|
||||
)}
|
||||
{scriptOpen && (
|
||||
<ScriptModal agentId={agentId} agentName={agent?.name} onClose={() => setScriptOpen(false)} />
|
||||
)}
|
||||
|
||||
{/* Quick Buttons */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
@@ -1008,6 +1013,13 @@ function TunnelTab({ agentId, agent }) {
|
||||
<Terminal className="w-4 h-4" />
|
||||
Web Terminal
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setScriptOpen(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-purple-700 hover:bg-purple-600 rounded text-sm text-white transition-colors"
|
||||
>
|
||||
<FileCode className="w-4 h-4" />
|
||||
Script
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCustomOpen(!customOpen)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded text-sm text-gray-300 transition-colors"
|
||||
|
||||
@@ -3,11 +3,12 @@ import api from '../api/client'
|
||||
import { useSettingsStore } from '../stores/settings'
|
||||
import StatusBadge from './StatusBadge'
|
||||
import TerminalModal from './TerminalModal'
|
||||
import ScriptModal from './ScriptModal'
|
||||
import { copyToClipboard } from '../utils/clipboard'
|
||||
import {
|
||||
X, Cpu, MemoryStick, HardDrive, Clock, Network, Server, Monitor,
|
||||
Container, Database, FolderTree, Settings, Download, Trash2, Copy, Check,
|
||||
MonitorSmartphone, Terminal, Cable, ExternalLink, Plus, Unplug, Search, Shield, Play,
|
||||
MonitorSmartphone, Terminal, Cable, ExternalLink, Plus, Unplug, Search, Shield, Play, FileCode,
|
||||
} from 'lucide-react'
|
||||
|
||||
const buildTabs = (hasPBS) => [
|
||||
@@ -252,6 +253,7 @@ function LinuxTasksTab({ agentId, agentName }) {
|
||||
scheduled_at: '', schedule_weekday: 1, schedule_monthday: 1,
|
||||
reboot: true, health_check: true, health_check_timeout: 600,
|
||||
security_only: false, webhook_url: '', active: true,
|
||||
script: '', script_timeout: 300,
|
||||
}
|
||||
const [form, setForm] = useState(defaultForm)
|
||||
|
||||
@@ -261,6 +263,9 @@ function LinuxTasksTab({ agentId, agentName }) {
|
||||
{ label: 'Wöchentlich nur Security', form: { name: 'Wöchentliche Security-Updates', action: 'update', schedule_type: 'weekly', schedule_time: '03:00', schedule_weekday: 3, reboot: false, health_check: true, health_check_timeout: 300, security_only: true, active: true } },
|
||||
{ label: 'Täglich Security (kein Reboot)', form: { name: 'Tägliche Security-Updates', action: 'update', schedule_type: 'daily', schedule_time: '04:00', reboot: false, health_check: false, security_only: true, active: true } },
|
||||
{ label: 'Update + Webhook', form: { name: 'Monatliches Update + Servicebericht', action: 'update', schedule_type: 'monthly', schedule_time: '02:00', schedule_monthday: 1, reboot: true, health_check: true, health_check_timeout: 600, security_only: false, webhook_url: '', active: true } },
|
||||
{ label: 'ZFS Scrub (monatlich)', form: { name: 'Monatlicher ZFS Pool Scrub', action: 'zpoolscrub', schedule_type: 'monthly', schedule_time: '01:37', schedule_monthday: 20, reboot: false, health_check: false, active: true } },
|
||||
{ label: 'ZFS Scrub (wöchentlich)', form: { name: 'Wöchentlicher ZFS Pool Scrub', action: 'zpoolscrub', schedule_type: 'weekly', schedule_time: '01:00', schedule_weekday: 0, reboot: false, health_check: false, active: true } },
|
||||
{ label: 'Custom Script', form: { name: 'Benutzerdefiniertes Script', action: 'script', schedule_type: 'monthly', schedule_time: '03:00', schedule_monthday: 1, reboot: false, health_check: false, script: '#!/bin/bash\n\n', script_timeout: 300, active: true } },
|
||||
]
|
||||
|
||||
const loadTasks = () => {
|
||||
@@ -281,6 +286,8 @@ function LinuxTasksTab({ agentId, agentName }) {
|
||||
reboot: form.reboot, health_check: form.health_check,
|
||||
health_check_timeout: parseInt(form.health_check_timeout) || 600,
|
||||
security_only: form.security_only || false,
|
||||
script: form.script || '',
|
||||
script_timeout: parseInt(form.script_timeout) || 300,
|
||||
}
|
||||
if (form.schedule_type === 'once' && form.scheduled_at) data.scheduled_at = new Date(form.scheduled_at).toISOString()
|
||||
if (form.schedule_type === 'weekly') data.schedule_weekday = parseInt(form.schedule_weekday)
|
||||
@@ -298,6 +305,7 @@ function LinuxTasksTab({ agentId, agentName }) {
|
||||
active: form.active, reboot: form.reboot, health_check: form.health_check,
|
||||
health_check_timeout: parseInt(form.health_check_timeout) || 600,
|
||||
security_only: form.security_only || false, webhook_url: form.webhook_url,
|
||||
script: form.script || '', script_timeout: parseInt(form.script_timeout) || 300,
|
||||
}
|
||||
if (form.schedule_type === 'weekly') data.schedule_weekday = parseInt(form.schedule_weekday)
|
||||
if (form.schedule_type === 'monthly') data.schedule_monthday = parseInt(form.schedule_monthday)
|
||||
@@ -394,28 +402,61 @@ function LinuxTasksTab({ agentId, agentName }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Update-Optionen */}
|
||||
<div className="space-y-2 pl-1">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" checked={form.security_only || false} onChange={e => setForm({...form, security_only: e.target.checked})} className="accent-orange-500" />
|
||||
<span className="flex items-center gap-1"><Shield className="w-3.5 h-3.5 text-red-400" /> Nur Security-Updates</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" checked={form.reboot} onChange={e => setForm({...form, reboot: e.target.checked})} className="accent-orange-500" />
|
||||
Reboot nach Update
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" checked={form.health_check} onChange={e => setForm({...form, health_check: e.target.checked})} className="accent-orange-500" />
|
||||
Health-Check nach Update
|
||||
</label>
|
||||
{form.health_check && (
|
||||
<div className="pl-6">
|
||||
<label className={labelCls}>Timeout (Sekunden)</label>
|
||||
<input type="number" value={form.health_check_timeout} onChange={e => setForm({...form, health_check_timeout: e.target.value})} className={inputCls + ' max-w-[160px]'} />
|
||||
</div>
|
||||
)}
|
||||
{/* Aktion wählen */}
|
||||
<div>
|
||||
<label className={labelCls}>Aktion *</label>
|
||||
<select value={form.action} onChange={e => setForm({...form, action: e.target.value})} className={inputCls} disabled={!!editTask}>
|
||||
<option value="update">Update (apt-get)</option>
|
||||
<option value="zpoolscrub">ZFS Pool Scrub</option>
|
||||
<option value="script">Custom Script</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Script-Eingabe (nur bei action=script) */}
|
||||
{form.action === 'script' && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className={labelCls}>Script-Inhalt *</label>
|
||||
<textarea
|
||||
value={form.script}
|
||||
onChange={e => setForm({...form, script: e.target.value})}
|
||||
rows={8}
|
||||
spellCheck={false}
|
||||
placeholder={'#!/bin/bash\n\n# Script hier eingeben...'}
|
||||
className="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-xs font-mono text-gray-200 focus:outline-none focus:border-orange-500 resize-y"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelCls}>Timeout (Sekunden)</label>
|
||||
<input type="number" value={form.script_timeout} onChange={e => setForm({...form, script_timeout: e.target.value})} className={inputCls + ' max-w-[160px]'} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Update-Optionen (nur bei action=update) */}
|
||||
{form.action === 'update' && (
|
||||
<div className="space-y-2 pl-1">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" checked={form.security_only || false} onChange={e => setForm({...form, security_only: e.target.checked})} className="accent-orange-500" />
|
||||
<span className="flex items-center gap-1"><Shield className="w-3.5 h-3.5 text-red-400" /> Nur Security-Updates</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" checked={form.reboot} onChange={e => setForm({...form, reboot: e.target.checked})} className="accent-orange-500" />
|
||||
Reboot nach Update
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" checked={form.health_check} onChange={e => setForm({...form, health_check: e.target.checked})} className="accent-orange-500" />
|
||||
Health-Check nach Update
|
||||
</label>
|
||||
{form.health_check && (
|
||||
<div className="pl-6">
|
||||
<label className={labelCls}>Timeout (Sekunden)</label>
|
||||
<input type="number" value={form.health_check_timeout} onChange={e => setForm({...form, health_check_timeout: e.target.value})} className={inputCls + ' max-w-[160px]'} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className={labelCls}>Webhook-URL (optional)</label>
|
||||
<input type="text" value={form.webhook_url} onChange={e => setForm({...form, webhook_url: e.target.value})} placeholder="https://..." className={inputCls} />
|
||||
@@ -473,7 +514,7 @@ function LinuxTasksTab({ agentId, agentName }) {
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex gap-1">
|
||||
<button onClick={() => api.runTaskNow(t.id).then(() => setTimeout(loadTasks, 1500))} title="Jetzt ausführen" className="p-1 text-gray-500 hover:text-orange-400"><Download className="w-3.5 h-3.5" /></button>
|
||||
<button onClick={() => { setEditTask(t); setForm({ name: t.name, action: t.action, schedule_type: t.schedule_type || 'once', schedule_time: t.schedule_time || '02:00', scheduled_at: '', schedule_weekday: t.schedule_weekday ?? 1, schedule_monthday: t.schedule_monthday ?? 1, reboot: t.reboot || false, health_check: t.health_check || false, health_check_timeout: t.health_check_timeout || 600, security_only: t.security_only || false, webhook_url: t.webhook_url || '', active: t.active !== false }); setShowDialog(true) }} title="Bearbeiten" className="p-1 text-gray-500 hover:text-blue-400"><Settings className="w-3.5 h-3.5" /></button>
|
||||
<button onClick={() => { setEditTask(t); setForm({ name: t.name, action: t.action, schedule_type: t.schedule_type || 'once', schedule_time: t.schedule_time || '02:00', scheduled_at: '', schedule_weekday: t.schedule_weekday ?? 1, schedule_monthday: t.schedule_monthday ?? 1, reboot: t.reboot || false, health_check: t.health_check || false, health_check_timeout: t.health_check_timeout || 600, security_only: t.security_only || false, script: t.script || '', script_timeout: t.script_timeout || 300, webhook_url: t.webhook_url || '', active: t.active !== false }); setShowDialog(true) }} title="Bearbeiten" className="p-1 text-gray-500 hover:text-blue-400"><Settings className="w-3.5 h-3.5" /></button>
|
||||
<button onClick={() => api.toggleTask(t.id).then(loadTasks)} title={t.active ? 'Deaktivieren' : 'Aktivieren'} className="p-1 text-gray-500 hover:text-yellow-400"><Monitor className="w-3.5 h-3.5" /></button>
|
||||
<button onClick={() => confirm('Job löschen?') && api.deleteTask(t.id).then(loadTasks)} title="Löschen" className="p-1 text-gray-500 hover:text-red-400"><Trash2 className="w-3.5 h-3.5" /></button>
|
||||
</div>
|
||||
@@ -1015,6 +1056,7 @@ function TunnelTab({ agentId, agent, webguiPort = 8006 }) {
|
||||
const [error, setError] = useState('')
|
||||
const [sshCopied, setSshCopied] = useState(null)
|
||||
const [terminalOpen, setTerminalOpen] = useState(false)
|
||||
const [scriptOpen, setScriptOpen] = useState(false)
|
||||
|
||||
const backendHost = useSettingsStore.getState().getBackendHost()
|
||||
|
||||
@@ -1085,6 +1127,9 @@ function TunnelTab({ agentId, agent, webguiPort = 8006 }) {
|
||||
{terminalOpen && (
|
||||
<TerminalModal agentId={agentId} agentName={agent?.name} onClose={() => setTerminalOpen(false)} />
|
||||
)}
|
||||
{scriptOpen && (
|
||||
<ScriptModal agentId={agentId} agentName={agent?.name} onClose={() => setScriptOpen(false)} />
|
||||
)}
|
||||
|
||||
{/* Schnellzugriff */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
@@ -1112,6 +1157,13 @@ function TunnelTab({ agentId, agent, webguiPort = 8006 }) {
|
||||
<Terminal className="w-4 h-4" />
|
||||
Web Terminal
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setScriptOpen(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-purple-700 hover:bg-purple-600 rounded text-sm text-white transition-colors"
|
||||
>
|
||||
<FileCode className="w-4 h-4" />
|
||||
Script
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCustomOpen(!customOpen)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded text-sm text-gray-300 transition-colors"
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { X, Play, Loader, Terminal, Copy, Check } from 'lucide-react'
|
||||
import api from '../api/client'
|
||||
|
||||
export default function ScriptModal({ agentId, agentName, onClose }) {
|
||||
const [script, setScript] = useState('#!/bin/bash\n\n')
|
||||
const [timeout, setTimeout_] = useState(60)
|
||||
const [running, setRunning] = useState(false)
|
||||
const [output, setOutput] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const outputRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (output !== null && outputRef.current) {
|
||||
outputRef.current.scrollTop = outputRef.current.scrollHeight
|
||||
}
|
||||
}, [output])
|
||||
|
||||
const run = async () => {
|
||||
if (!script.trim()) return
|
||||
setRunning(true)
|
||||
setOutput(null)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await api.execCommand(agentId, script, timeout)
|
||||
setOutput(res?.data?.output ?? res?.output ?? '(kein Output)')
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
if (e.data?.output) setOutput(e.data.output)
|
||||
} finally {
|
||||
setRunning(false)
|
||||
}
|
||||
}
|
||||
|
||||
const copyOutput = () => {
|
||||
if (output) {
|
||||
navigator.clipboard.writeText(output)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
|
||||
onClick={onClose}>
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-700 shadow-2xl flex flex-col"
|
||||
style={{ width: '80vw', maxWidth: '1000px', height: '80vh' }}
|
||||
onClick={e => e.stopPropagation()}>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 px-5 py-3 border-b border-gray-700/60 bg-gray-800/50 rounded-t-xl">
|
||||
<Terminal className="w-4 h-4 text-orange-400" />
|
||||
<span className="text-sm font-mono text-gray-200">Script ausführen — <span className="text-orange-400">{agentName}</span></span>
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<label className="flex items-center gap-2 text-xs text-gray-400">
|
||||
Timeout (s):
|
||||
<input type="number" value={timeout} onChange={e => setTimeout_(parseInt(e.target.value) || 60)}
|
||||
className="w-16 bg-gray-700 border border-gray-600 rounded px-2 py-1 text-white text-xs focus:outline-none focus:border-orange-500" />
|
||||
</label>
|
||||
<button onClick={run} disabled={running || !script.trim()}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 disabled:text-gray-500 rounded text-sm text-white transition-colors">
|
||||
{running ? <><Loader className="w-3.5 h-3.5 animate-spin" /> Läuft...</> : <><Play className="w-3.5 h-3.5" /> Ausführen</>}
|
||||
</button>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-white">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Split: Editor + Output */}
|
||||
<div className="flex flex-1 min-h-0 divide-x divide-gray-700/60">
|
||||
{/* Script Editor */}
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<div className="px-3 py-1.5 text-[10px] text-gray-500 uppercase tracking-wider bg-gray-800/30">Script</div>
|
||||
<textarea
|
||||
value={script}
|
||||
onChange={e => setScript(e.target.value)}
|
||||
spellCheck={false}
|
||||
className="flex-1 w-full bg-transparent text-sm font-mono text-gray-200 p-3 resize-none focus:outline-none"
|
||||
placeholder="#!/bin/bash # Script hier eingeben..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Output */}
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<div className="flex items-center px-3 py-1.5 bg-gray-800/30">
|
||||
<span className="text-[10px] text-gray-500 uppercase tracking-wider flex-1">Output</span>
|
||||
{output && (
|
||||
<button onClick={copyOutput} className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300">
|
||||
{copied ? <><Check className="w-3 h-3 text-green-400" /> Kopiert</> : <><Copy className="w-3 h-3" /> Kopieren</>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div ref={outputRef}
|
||||
className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed">
|
||||
{running && (
|
||||
<div className="flex items-center gap-2 text-yellow-400">
|
||||
<Loader className="w-3 h-3 animate-spin" /> Script läuft...
|
||||
</div>
|
||||
)}
|
||||
{error && !running && (
|
||||
<div className="text-red-400 mb-2">Fehler: {error}</div>
|
||||
)}
|
||||
{output !== null && (
|
||||
<pre className={`whitespace-pre-wrap break-all ${error ? 'text-red-300' : 'text-green-300'}`}>
|
||||
{output || '(kein Output)'}
|
||||
</pre>
|
||||
)}
|
||||
{output === null && !running && (
|
||||
<span className="text-gray-600">Noch kein Script ausgeführt</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+113
-40
@@ -1,14 +1,21 @@
|
||||
import { useState } from 'react'
|
||||
import { useRef, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { Shield } from 'lucide-react'
|
||||
import { Shield, KeyRound } from 'lucide-react'
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const login = useAuthStore((s) => s.login)
|
||||
|
||||
// 2FA-Schritt
|
||||
const [totpRequired, setTotpRequired] = useState(false)
|
||||
const [totpToken, setTotpToken] = useState('')
|
||||
const [totpCode, setTotpCode] = useState('')
|
||||
const totpRef = useRef(null)
|
||||
|
||||
const { login, validateTOTP } = useAuthStore()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
@@ -16,8 +23,14 @@ export default function Login() {
|
||||
setError('')
|
||||
setLoading(true)
|
||||
try {
|
||||
await login(username, password)
|
||||
navigate('/')
|
||||
const result = await login(username, password)
|
||||
if (result?.totp_required) {
|
||||
setTotpToken(result.totp_token)
|
||||
setTotpRequired(true)
|
||||
setTimeout(() => totpRef.current?.focus(), 100)
|
||||
} else {
|
||||
navigate('/')
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message || 'Login fehlgeschlagen')
|
||||
} finally {
|
||||
@@ -25,6 +38,23 @@ export default function Login() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleTOTP = async (e) => {
|
||||
e.preventDefault()
|
||||
if (totpCode.length !== 6) return
|
||||
setError('')
|
||||
setLoading(true)
|
||||
try {
|
||||
await validateTOTP(totpToken, totpCode)
|
||||
navigate('/')
|
||||
} catch (err) {
|
||||
setError(err.message || 'Ungültiger Code')
|
||||
setTotpCode('')
|
||||
totpRef.current?.focus()
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-950">
|
||||
<div className="w-full max-w-sm">
|
||||
@@ -34,42 +64,85 @@ export default function Login() {
|
||||
<p className="text-gray-500 text-sm mt-1">Remote Monitoring & Management</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="bg-gray-900 rounded-lg border border-gray-800 p-6 space-y-4">
|
||||
{error && (
|
||||
<div className="bg-red-900/30 border border-red-800 text-red-400 px-3 py-2 rounded text-sm">
|
||||
{error}
|
||||
{!totpRequired ? (
|
||||
<form onSubmit={handleSubmit} className="bg-gray-900 rounded-lg border border-gray-800 p-6 space-y-4">
|
||||
{error && (
|
||||
<div className="bg-red-900/30 border border-red-800 text-red-400 px-3 py-2 rounded text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Benutzer</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white focus:outline-none focus:border-orange-500"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Benutzer</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white focus:outline-none focus:border-orange-500"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white focus:outline-none focus:border-orange-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 text-white font-medium py-2 rounded transition-colors"
|
||||
>
|
||||
{loading ? 'Anmelden...' : 'Anmelden'}
|
||||
</button>
|
||||
</form>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white focus:outline-none focus:border-orange-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 text-white font-medium py-2 rounded transition-colors"
|
||||
>
|
||||
{loading ? 'Anmelden...' : 'Anmelden'}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleTOTP} className="bg-gray-900 rounded-lg border border-gray-800 p-6 space-y-4">
|
||||
<div className="text-center mb-2">
|
||||
<KeyRound className="w-8 h-8 text-orange-500 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-300 font-medium">2-Faktor-Authentifizierung</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Code aus der Authenticator-App eingeben</p>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="bg-red-900/30 border border-red-800 text-red-400 px-3 py-2 rounded text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">6-stelliger Code</label>
|
||||
<input
|
||||
ref={totpRef}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxLength={6}
|
||||
value={totpCode}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value.replace(/\D/g, '')
|
||||
setTotpCode(v)
|
||||
}}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-center text-xl tracking-widest focus:outline-none focus:border-orange-500"
|
||||
placeholder="000000"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || totpCode.length !== 6}
|
||||
className="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 text-white font-medium py-2 rounded transition-colors"
|
||||
>
|
||||
{loading ? 'Prüfen...' : 'Bestätigen'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setTotpRequired(false); setError(''); setTotpCode('') }}
|
||||
className="w-full text-gray-500 hover:text-gray-300 text-sm py-1"
|
||||
>
|
||||
Zurück
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
|
||||
import api from '../api/client'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { copyToClipboard } from '../utils/clipboard'
|
||||
import { Plus, Trash2, KeyRound, ShieldAlert, Copy, Check, Key, Save, Settings } from 'lucide-react'
|
||||
import { Plus, Trash2, KeyRound, ShieldAlert, Copy, Check, Key, Save, Settings, QrCode, ShieldCheck, ShieldOff } from 'lucide-react'
|
||||
import { useSettingsStore } from '../stores/settings'
|
||||
|
||||
export default function SettingsPage() {
|
||||
@@ -191,18 +191,7 @@ export default function SettingsPage() {
|
||||
<APIKeysSection />
|
||||
|
||||
{/* 2FA */}
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-800">
|
||||
<span className="text-sm font-medium text-gray-300">Zwei-Faktor-Authentifizierung (2FA)</span>
|
||||
</div>
|
||||
<div className="px-4 py-6 flex items-center gap-3">
|
||||
<ShieldAlert className="w-6 h-6 text-gray-600" />
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">2FA ist noch nicht verfuegbar</div>
|
||||
<div className="text-xs text-gray-600 mt-0.5">TOTP-basierte Zwei-Faktor-Authentifizierung wird in einer zukuenftigen Version implementiert.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TwoFactorSection />
|
||||
|
||||
{/* System Settings */}
|
||||
<SystemSettingsSection />
|
||||
@@ -362,6 +351,158 @@ function APIKeysSection() {
|
||||
)
|
||||
}
|
||||
|
||||
function TwoFactorSection() {
|
||||
const { user } = useAuthStore()
|
||||
const [step, setStep] = useState('idle') // idle | setup | confirm | disable
|
||||
const [setupData, setSetupData] = useState(null)
|
||||
const [code, setCode] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [msg, setMsg] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const totpEnabled = user?.totp_enabled
|
||||
|
||||
const handleSetup = async () => {
|
||||
setError(''); setMsg('')
|
||||
try {
|
||||
const data = await api.setupTOTP()
|
||||
setSetupData(data)
|
||||
setStep('setup')
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirm = async () => {
|
||||
setError('')
|
||||
try {
|
||||
await api.confirmTOTP(code)
|
||||
setMsg('2FA aktiviert')
|
||||
setStep('idle')
|
||||
setCode('')
|
||||
setSetupData(null)
|
||||
// user neu laden
|
||||
await useAuthStore.getState().checkAuth()
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDisable = async () => {
|
||||
setError('')
|
||||
try {
|
||||
await api.disableTOTP(password, code)
|
||||
setMsg('2FA deaktiviert')
|
||||
setStep('idle')
|
||||
setCode(''); setPassword('')
|
||||
await useAuthStore.getState().checkAuth()
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-300">Zwei-Faktor-Authentifizierung (2FA)</span>
|
||||
{totpEnabled
|
||||
? <span className="flex items-center gap-1 text-xs text-green-400"><ShieldCheck className="w-3.5 h-3.5" />Aktiv</span>
|
||||
: <span className="flex items-center gap-1 text-xs text-gray-500"><ShieldOff className="w-3.5 h-3.5" />Inaktiv</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-4 space-y-4">
|
||||
{error && <div className="bg-red-900/30 border border-red-800 text-red-400 px-3 py-2 rounded text-sm">{error}</div>}
|
||||
{msg && <div className="bg-green-900/30 border border-green-800 text-green-400 px-3 py-2 rounded text-sm">{msg}</div>}
|
||||
|
||||
{step === 'idle' && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-gray-400">
|
||||
{totpEnabled
|
||||
? 'TOTP-Authentifizierung ist aktiv. Jeder Login erfordert einen 6-stelligen Code.'
|
||||
: 'Schütze deinen Account mit einer Authenticator-App (z.B. Google Authenticator, Aegis).'}
|
||||
</div>
|
||||
{totpEnabled
|
||||
? <button onClick={() => { setStep('disable'); setMsg('') }}
|
||||
className="ml-4 shrink-0 text-sm text-red-400 hover:text-red-300">Deaktivieren</button>
|
||||
: <button onClick={handleSetup}
|
||||
className="ml-4 shrink-0 flex items-center gap-1 text-sm text-orange-400 hover:text-orange-300">
|
||||
<QrCode className="w-4 h-4" />Einrichten
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'setup' && setupData && (
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm text-gray-300">
|
||||
1. Scanne den QR-Code mit deiner Authenticator-App oder gib den Secret manuell ein.
|
||||
</div>
|
||||
<div className="bg-gray-800 rounded p-3">
|
||||
<div className="text-xs text-gray-500 mb-1">Secret (manuell)</div>
|
||||
<code className="text-orange-400 text-sm tracking-widest break-all">{setupData.secret}</code>
|
||||
</div>
|
||||
<div className="bg-gray-800 rounded p-3">
|
||||
<div className="text-xs text-gray-500 mb-1">OTP URI (für QR-Code-Scanner)</div>
|
||||
<code className="text-gray-400 text-xs break-all">{setupData.uri}</code>
|
||||
</div>
|
||||
<div className="text-sm text-gray-300">
|
||||
2. Gib den ersten Code ein um die Einrichtung zu bestätigen:
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
maxLength={6}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
|
||||
placeholder="000000"
|
||||
className="w-40 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-center text-lg tracking-widest focus:outline-none focus:border-orange-500"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleConfirm} disabled={code.length !== 6}
|
||||
className="px-4 py-2 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 disabled:text-gray-500 rounded text-sm text-white">
|
||||
Aktivieren
|
||||
</button>
|
||||
<button onClick={() => { setStep('idle'); setCode(''); setSetupData(null); setError('') }}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-sm text-gray-300">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'disable' && (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-gray-300">Zur Deaktivierung: Passwort + aktuellen 2FA-Code eingeben.</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-500">Passwort</label>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-orange-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-500">2FA-Code</label>
|
||||
<input type="text" inputMode="numeric" maxLength={6} value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
|
||||
placeholder="000000"
|
||||
className="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm text-center tracking-widest focus:outline-none focus:border-orange-500" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleDisable} disabled={!password || code.length !== 6}
|
||||
className="px-4 py-2 bg-red-700 hover:bg-red-600 disabled:bg-gray-700 disabled:text-gray-500 rounded text-sm text-white">
|
||||
2FA deaktivieren
|
||||
</button>
|
||||
<button onClick={() => { setStep('idle'); setCode(''); setPassword(''); setError('') }}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-sm text-gray-300">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SystemSettingsSection() {
|
||||
const { settings, fetchSettings } = useSettingsStore()
|
||||
const [form, setForm] = useState({})
|
||||
|
||||
@@ -9,8 +9,18 @@ export const useAuthStore = create((set) => ({
|
||||
|
||||
login: async (username, password) => {
|
||||
const data = await api.login(username, password)
|
||||
if (data.totp_required) {
|
||||
// Noch nicht eingeloggt — TOTP-Schritt nötig
|
||||
return data
|
||||
}
|
||||
set({ user: data.user, isAuthenticated: true })
|
||||
useSettingsStore.getState().fetchSettings()
|
||||
return data
|
||||
},
|
||||
|
||||
validateTOTP: async (totpToken, code) => {
|
||||
const data = await api.validateTOTP(totpToken, code)
|
||||
set({ user: data.user, isAuthenticated: true })
|
||||
// Load system settings after login
|
||||
useSettingsStore.getState().fetchSettings()
|
||||
return data
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user