import { useState, FormEvent } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuthStore } from '@/stores/authStore'
export default function Login() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [showPassword, setShowPassword] = useState(false)
const { login, isLoading, error, clearError } = useAuthStore()
const navigate = useNavigate()
const handleSubmit = async (e: FormEvent) => {
e.preventDefault()
clearError()
await login({ email, password })
// Navigate to dashboard on successful login
const { user } = useAuthStore.getState()
if (user) {
navigate('/')
}
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-900 px-4">
<div className="max-w-md w-full space-y-8">
{/* Header */}
<div className="text-center">
<h1 className="text-3xl font-bold text-white mb-2">
Clean Cut Video
</h1>
<p className="text-gray-400">
Professional video generation platform
</p>
</div>
{/* Login Form */}
<div className="card">
<div className="card-header">
<h2 className="card-title">Sign in to your account</h2>
</div>
{error && (
<div className="mb-4 p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-200 text-sm">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
{/* Email */}
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
Email address
</label>
<input
id="email"
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="input"
placeholder="Enter your email"
/>
</div>
{/* Password */}
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
Password
</label>
<div className="relative">
<input
id="password"
type={showPassword ? 'text' : 'password'}
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="input pr-10"
placeholder="Enter your password"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-300"
>
{showPassword ? 'Hide' : 'Show'}
</button>
</div>
</div>
{/* Submit Button */}
<button
type="submit"
disabled={isLoading}
className="btn btn-primary w-full py-3 text-base disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? (
<div className="flex items-center justify-center">
<div className="loading-spinner mr-2"></div>
Signing in...
</div>
) : (
'Sign in'
)}
</button>
</form>
{/* Footer */}
<div className="mt-6 text-center">
<p className="text-gray-400">
Don't have an account?{' '}
<Link
to="/register"
className="text-primary-400 hover:text-primary-300 font-medium"
>
Sign up
</Link>
</p>
</div>
</div>
</div>
</div>
)
}
