85 lines
3.1 KiB
React
85 lines
3.1 KiB
React
import { useState } from 'react'
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
import { useAuth } from '../context/AuthContext'
|
|
import ThemeToggle from '../components/ThemeToggle'
|
|
|
|
export default function LoginPage() {
|
|
const [username, setUsername] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [error, setError] = useState('')
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const { login } = useAuth()
|
|
const navigate = useNavigate()
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault()
|
|
setError('')
|
|
setIsSubmitting(true)
|
|
try {
|
|
await login(username, password)
|
|
navigate('/dashboard')
|
|
} catch {
|
|
setError('Benutzername oder Passwort falsch.')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-900">
|
|
<div className="absolute right-4 top-4">
|
|
<ThemeToggle />
|
|
</div>
|
|
<div className="w-full max-w-sm">
|
|
<h1 className="mb-6 text-center text-2xl font-semibold text-gray-900 dark:text-gray-50">
|
|
KalorienTracker
|
|
</h1>
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="space-y-4 rounded-xl bg-white p-6 shadow-sm dark:bg-gray-800"
|
|
>
|
|
<div>
|
|
<label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Benutzername
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
required
|
|
autoFocus
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-base text-gray-900 focus:border-emerald-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-50"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Passwort
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-base text-gray-900 focus:border-emerald-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-50"
|
|
/>
|
|
</div>
|
|
{error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="w-full rounded-lg bg-emerald-600 py-2.5 text-base font-medium text-white active:bg-emerald-700 disabled:opacity-60"
|
|
>
|
|
{isSubmitting ? 'Anmelden…' : 'Anmelden'}
|
|
</button>
|
|
</form>
|
|
<p className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
|
|
Noch kein Konto?{' '}
|
|
<Link to="/register" className="font-medium text-emerald-600 dark:text-emerald-400">
|
|
Registrieren
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|