118 lines
4.9 KiB
TypeScript
118 lines
4.9 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
|
||
export default function AdminLogin() {
|
||
const router = useRouter();
|
||
const [credentials, setCredentials] = useState({ username: '', password: '' });
|
||
const [error, setError] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const handleLogin = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
setError('');
|
||
|
||
try {
|
||
const response = await fetch('/api/auth/login', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(credentials),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (!response.ok) {
|
||
setError(data.error || 'Giriş başarısız');
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
// Başarılı giriş
|
||
router.push('/yonetim-paneli-a2m-secure/dashboard');
|
||
} catch (error) {
|
||
console.error('Login error:', error);
|
||
setError('Bir hata oluştu. Lütfen tekrar deneyin.');
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-linear-to-br from-[#003366] via-[#004B87] to-[#005f99] flex items-center justify-center p-4">
|
||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDEzNEgxMnYxMmgyNHYtMTJ6bTAtMThIMTJ2MTJoMjR2LTEyem0wLTE4SDEydjEyaDI0Vjk4em0wLTE4SDEydjEyaDI0Vjgwem0wLTE4SDEydjEyaDI0VjYyem0yNCAxMDhoLTEydjEyaDEydi0xMnptMC0xOGgtMTJ2MTJoMTJ2LTEyem0wLTE4aC0xMnYxMmgxMnYtMTJ6bTAtMThoLTEydjEyaDEyVjk4em0wLTE4aC0xMnYxMmgxMlY4MHptMC0xOGgtMTJ2MTJoMTJWNjJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-30"></div>
|
||
|
||
<div className="relative z-10 w-full max-w-md">
|
||
<div className="bg-white rounded-2xl shadow-2xl p-8">
|
||
{/* Logo ve Başlık */}
|
||
<div className="text-center mb-8">
|
||
<div className="inline-flex items-center justify-center w-16 h-16 bg-linear-to-br from-[#004B87] to-[#00B4D8] rounded-xl mb-4">
|
||
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
|
||
</svg>
|
||
</div>
|
||
<h1 className="text-2xl font-bold text-[#004B87] mb-2">Yönetim Paneli</h1>
|
||
<p className="text-gray-600 text-sm">A2 Metro Hattı İnşaat Projesi</p>
|
||
</div>
|
||
|
||
{/* Login Form */}
|
||
<form onSubmit={handleLogin} className="space-y-6">
|
||
{error && (
|
||
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label htmlFor="username" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||
Kullanıcı Adı
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="username"
|
||
value={credentials.username}
|
||
onChange={(e) => setCredentials({ ...credentials, username: e.target.value })}
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900"
|
||
placeholder="Kullanıcı adınızı girin"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="password" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||
Şifre
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="password"
|
||
value={credentials.password}
|
||
onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900"
|
||
placeholder="Şifrenizi girin"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
|
||
</button>
|
||
</form>
|
||
|
||
{/* Footer */}
|
||
<div className="mt-6 text-center">
|
||
<p className="text-xs text-gray-500">
|
||
© 2025 Ankara Büyükşehir Belediyesi
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|