first commit
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { signIn } from 'next-auth/react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Shield, Lock, ArrowRight, Loader2, KeyRound, Sparkles, Eye, EyeOff } from 'lucide-react'
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter()
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
const result = await signIn('credentials', {
|
||||
username,
|
||||
password,
|
||||
redirect: false,
|
||||
})
|
||||
|
||||
setLoading(false)
|
||||
if (result?.ok) {
|
||||
router.push('/dashboard')
|
||||
} else {
|
||||
setError('Geçersiz kullanıcı adı veya şifre')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4 relative z-10">
|
||||
<div className="w-full max-w-md animate-fade-in">
|
||||
{/* Brand header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center p-3.5 bg-gradient-to-tr from-emerald-600 to-emerald-400 rounded-2xl mb-4 shadow-xl shadow-emerald-500/20 border border-emerald-300/30 ring-4 ring-emerald-500/10">
|
||||
<Shield className="w-8 h-8 text-slate-950 stroke-[2.2]" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-extrabold text-white tracking-tight flex items-center justify-center gap-2">
|
||||
ConfigVault
|
||||
<span className="text-xs font-semibold px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
|
||||
v1.0
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-slate-400 text-sm mt-2 font-normal">
|
||||
Merkezi Remote Config & Gizli Anahtar Yönetimi
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Glass Card */}
|
||||
<div className="glass-panel rounded-3xl p-8 shadow-2xl relative overflow-hidden">
|
||||
{/* Subtle top glow line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/50 to-transparent" />
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
|
||||
Kullanıcı Adı
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
className="w-full glass-input rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none text-sm font-medium"
|
||||
placeholder="admin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider">
|
||||
Şifre
|
||||
</label>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
required
|
||||
className="w-full glass-input rounded-xl px-4 py-3 pr-11 text-white placeholder-slate-500 focus:outline-none text-sm font-medium"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-200 transition-colors p-1"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-rose-500/10 border border-rose-500/30 rounded-xl p-3.5 text-rose-300 text-sm flex items-center gap-2.5 animate-slide-up">
|
||||
<div className="w-2 h-2 rounded-full bg-rose-400 flex-shrink-0 animate-ping" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-emerald-500 hover:bg-emerald-400 active:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed text-slate-950 font-bold py-3 px-4 rounded-xl transition-all duration-200 shadow-lg shadow-emerald-500/25 flex items-center justify-center gap-2 text-sm mt-3"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span>Giriş Yapılıyor...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Yönetim Paneline Giriş</span>
|
||||
<ArrowRight className="w-4 h-4 stroke-[2.5]" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Security details pill */}
|
||||
<div className="mt-6 pt-6 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-500">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<KeyRound className="w-3.5 h-3.5 text-emerald-500/80" />
|
||||
<span>JWT & Bcrypt Korumalı</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Sparkles className="w-3.5 h-3.5 text-emerald-500/80" />
|
||||
<span>SSL / TLS Güvenli</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer info */}
|
||||
<p className="text-center text-slate-600 text-xs mt-6">
|
||||
ConfigVault • Tüm ortam ve dinamik ayarlarınız güvende
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user