File size: 3,580 Bytes
5d68d7e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import React, { useState, useEffect } from "react"
import { useAuth } from "../services/authService"
export default function SignInPage() {
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [error, setError] = useState("")
const { login, isAuthenticated, isLoading } = useAuth()
useEffect(() => {
// Redirect if already authenticated
if (isAuthenticated) {
window.location.href = "/"
}
}, [isAuthenticated])
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError("")
const result = await login({ username, password })
if (!result.success) {
setError(result.error || "Invalid credentials")
} else {
// Redirect to main app
window.location.href = "/"
}
}
// Show loading spinner if checking auth state
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-900">
<div className="text-white">Loading...</div>
</div>
)
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-900">
<div className="max-w-md w-full space-y-8 p-8">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-white">
ACE UI Login
</h2>
<p className="mt-2 text-center text-sm text-gray-400">
Enter your credentials to access the dashboard
</p>
</div>
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<div className="space-y-4">
<div>
<label htmlFor="username" className="sr-only">
Username
</label>
<input
id="username"
name="username"
type="text"
required
className="relative block w-full px-3 py-2 border border-gray-600 rounded-md placeholder-gray-400 text-white bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div>
<label htmlFor="password" className="sr-only">
Password
</label>
<input
id="password"
name="password"
type="password"
required
className="relative block w-full px-3 py-2 border border-gray-600 rounded-md placeholder-gray-400 text-white bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
</div>
{error && (
<div className="text-red-400 text-sm text-center">{error}</div>
)}
<div>
<button
type="submit"
disabled={isLoading}
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? "Signing in..." : "Sign in"}
</button>
</div>
</form>
</div>
</div>
)
} |