90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useAuth } from '../contexts/AuthContext'
|
|
import { Shield } from 'lucide-react'
|
|
|
|
export default function Login() {
|
|
const { login } = useAuth()
|
|
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('/')
|
|
} catch (err: unknown) {
|
|
const msg = err instanceof Error ? err.message : 'Login failed'
|
|
setError((err as { response?: { data?: { error?: string } } })?.response?.data?.error ?? msg)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0f1117] flex items-center justify-center p-4">
|
|
<div className="w-full max-w-sm">
|
|
{/* Logo */}
|
|
<div className="flex flex-col items-center mb-8">
|
|
<div className="w-12 h-12 rounded-2xl bg-indigo-600 flex items-center justify-center mb-3">
|
|
<Shield size={24} className="text-white" />
|
|
</div>
|
|
<h1 className="text-white text-xl font-bold">NixPanel WHM</h1>
|
|
<p className="text-[#64748b] text-sm mt-1">Web Host Manager</p>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="bg-[#1a1d27] border border-[#2a2d3e] rounded-xl p-6 space-y-4">
|
|
{error && (
|
|
<div className="bg-red-500/10 border border-red-500/20 text-red-400 text-sm px-3 py-2 rounded-lg">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-[#94a3b8] text-xs font-medium mb-1.5">Username</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={e => setUsername(e.target.value)}
|
|
required
|
|
autoFocus
|
|
className="w-full bg-[#0f1117] border border-[#2a2d3e] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-indigo-500 transition-colors"
|
|
placeholder="root"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[#94a3b8] text-xs font-medium mb-1.5">Password</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
required
|
|
className="w-full bg-[#0f1117] border border-[#2a2d3e] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-indigo-500 transition-colors"
|
|
placeholder="••••••••"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-medium py-2.5 rounded-lg transition-colors"
|
|
>
|
|
{loading ? 'Signing in...' : 'Sign in'}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="text-center text-[#64748b] text-xs mt-4">
|
|
NixPanel v0.1.0 · WHM Port 2087
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|