82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { login } from "@/app/actions/auth";
|
||
|
||
export default function LoginClient() {
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
const formData = new FormData(e.currentTarget);
|
||
const result = await login(formData);
|
||
|
||
if (result.success) {
|
||
window.location.href = "/admin"; // Başarılı giriş
|
||
} else {
|
||
setError(result.error || "Giriş başarısız.");
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
|
||
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
|
||
|
||
<div className="bg-charcoal p-8 text-center flex flex-col items-center">
|
||
<img src="/logo.png" alt="Kozmos Logo" className="h-16 mb-2 brightness-0 invert opacity-90 object-contain" />
|
||
<p className="text-cream/70 text-sm mt-1">Yönetim Paneline Giriş Yapın</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="p-8 space-y-6">
|
||
{error && (
|
||
<div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm font-medium text-center">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">E-posta Adresi</label>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
required
|
||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none transition-all"
|
||
placeholder="admin@kozmosbeach.com"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Şifre</label>
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
required
|
||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none transition-all"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full py-3.5 bg-turquoise text-white rounded-xl font-medium hover:bg-turquoise/90 focus:ring-4 focus:ring-turquoise/20 transition-all disabled:opacity-70 mt-2"
|
||
>
|
||
{loading ? "Giriş Yapılıyor..." : "Giriş Yap"}
|
||
</button>
|
||
</form>
|
||
|
||
<div className="p-4 bg-gray-50 border-t border-gray-100 text-center">
|
||
<a href="/" className="text-sm text-gray-500 hover:text-turquoise transition-colors">
|
||
← Siteye Geri Dön
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|