110 lines
4.5 KiB
TypeScript
110 lines
4.5 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState } from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import { useRouter } from 'next/navigation';
|
||
|
||
export default function LoginPage() {
|
||
const [username, setUsername] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [error, setError] = useState('');
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const router = useRouter();
|
||
|
||
const handleLogin = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
setError('');
|
||
|
||
try {
|
||
const res = await fetch('/admin/api/login', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ username, password }),
|
||
});
|
||
|
||
if (res.ok) {
|
||
router.push('/admin/projects');
|
||
router.refresh();
|
||
} else {
|
||
setError('Geçersiz kullanıcı adı veya şifre.');
|
||
}
|
||
} catch (err) {
|
||
setError('Bir hata oluştu. Lütfen tekrar deneyin.');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<main className="min-h-screen bg-[#050505] flex items-center justify-center p-6 overflow-hidden relative">
|
||
<div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-cyan-500/10 rounded-full blur-[120px]" />
|
||
<div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-purple-500/10 rounded-full blur-[120px]" />
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="w-full max-w-md relative z-10"
|
||
>
|
||
<div className="bg-white/5 backdrop-blur-2xl border border-white/10 p-10 rounded-[40px] shadow-2xl">
|
||
<div className="flex flex-col items-center mb-10 text-center">
|
||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center font-bold text-3xl shadow-lg shadow-cyan-500/20 mb-6">A</div>
|
||
<h1 className="text-3xl font-bold tracking-tight text-white mb-2">Hoş Geldiniz</h1>
|
||
<p className="text-gray-500 text-sm uppercase tracking-widest font-mono">Yönetim Paneli Girişi</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleLogin} className="space-y-6">
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500 ml-2">Kullanıcı Adı</label>
|
||
<input
|
||
required
|
||
type="text"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white placeholder:text-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 transition-all font-medium"
|
||
placeholder="isminiz..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500 ml-2">Şifre</label>
|
||
<input
|
||
required
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white placeholder:text-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 transition-all font-medium"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
|
||
{error && (
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
className="bg-rose-500/10 border border-rose-500/20 p-4 rounded-xl text-rose-400 text-xs text-center font-medium"
|
||
>
|
||
{error}
|
||
</motion.div>
|
||
)}
|
||
|
||
<button
|
||
disabled={isLoading}
|
||
type="submit"
|
||
className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-extrabold py-4 rounded-2xl transition-all shadow-lg shadow-cyan-500/20 active:scale-[0.98] uppercase tracking-widest text-sm flex items-center justify-center gap-3 disabled:opacity-50"
|
||
>
|
||
{isLoading ? (
|
||
<div className="w-5 h-5 border-2 border-black/30 border-t-black rounded-full animate-spin" />
|
||
) : 'Giriş Yap'}
|
||
</button>
|
||
</form>
|
||
|
||
<div className="mt-10 flex justify-center">
|
||
<p className="text-[10px] text-gray-600 font-mono tracking-widest uppercase">SECURED BY ANT-ARCHITECT</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</main>
|
||
);
|
||
}
|