feat: complete all page components

- Dashboard: system stats with cards - Tasks: task management table with filters - Scripts: script management grid - Logs: execution log viewer - Interconnect: node management - Terminal: xterm.js integration - Settings: theme and site config - Login: authentication page
2026-07-19 18:47:35 +00:00
parent e734026078
commit 2f76060c39
14 changed files with 1684 additions and 90 deletions
@@ -0,0 +1,153 @@
+import { useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { login } from '@/api/endpoints'
+import { Lock, User, AlertCircle } from 'lucide-react'
+
+export default function Login() {
+  const navigate = useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      await login(username, password)
+      navigate({ to: '/' })
+    } catch (err: any) {
+      setError(err.message || 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div style={{
+      minHeight: '100vh',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'var(--bg-primary)',
+      padding: 20,
+    }}>
+      <div style={{
+        width: '100%',
+        maxWidth: 400,
+        background: 'var(--bg-secondary)',
+        border: '1px solid var(--border)',
+        borderRadius: 12,
+        padding: 32,
+      }}>
+        {/* Logo */}
+        <div style={{ textAlign: 'center', marginBottom: 32 }}>
+          <div style={{
+            width: 56,
+            height: 56,
+            background: 'var(--bg-accent)',
+            borderRadius: 12,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            margin: '0 auto 16px',
+          }}>
+            <span style={{ color: 'white', fontSize: 24, fontWeight: 700 }}>T</span>
+          </div>
+          <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 8 }}>TaskPool</h1>
+          <p style={{ color: 'var(--text-muted)', fontSize: 14 }}>Sign in to your account</p>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: 12,
+            background: '#ef444415',
+            borderRadius: 6,
+            marginBottom: 20,
+          }}>
+            <AlertCircle size={16} style={{ color: '#ef4444' }} />
+            <span style={{ color: '#ef4444', fontSize: 13 }}>{error}</span>
+          </div>
+        )}
+
+        {/* Form */}
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', fontWeight: 500, marginBottom: 8, fontSize: 13 }}>
+              Username
+            </label>
+            <div style={{ position: 'relative' }}>
+              <User size={16} strokeWidth={1.5} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="Enter username"
+                required
+                style={{
+                  width: '100%',
+                  padding: '10px 12px 10px 40px',
+                  background: 'var(--bg-primary)',
+                  border: '1px solid var(--border)',
+                  borderRadius: 6,
+                  color: 'var(--text-primary)',
+                  fontSize: 14,
+                }}
+              />
+            </div>
+          </div>
+
+          <div style={{ marginBottom: 24 }}>
+            <label style={{ display: 'block', fontWeight: 500, marginBottom: 8, fontSize: 13 }}>
+              Password
+            </label>
+            <div style={{ position: 'relative' }}>
+              <Lock size={16} strokeWidth={1.5} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter password"
+                required
+                style={{
+                  width: '100%',
+                  padding: '10px 12px 10px 40px',
+                  background: 'var(--bg-primary)',
+                  border: '1px solid var(--border)',
+                  borderRadius: 6,
+                  color: 'var(--text-primary)',
+                  fontSize: 14,
+                }}
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            style={{
+              width: '100%',
+              padding: 12,
+              background: 'var(--bg-accent)',
+              border: 'none',
+              borderRadius: 6,
+              color: 'white',
+              fontSize: 14,
+              fontWeight: 500,
+              cursor: loading ? 'not-allowed' : 'pointer',
+              opacity: loading ? 0.7 : 1,
+            }}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}