first commit
This commit is contained in:
mstfyldz
222
app/login/page.tsx
Normal file
222
app/login/page.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { login } from "./actions";
|
||||
import { Lock, Mail, AlertCircle, ArrowRight, Loader2 } from "lucide-react";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const result = await login(formData);
|
||||
|
||||
if (result?.error) {
|
||||
setError(result.error);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-screen items-center justify-center p-4 relative overflow-hidden animated-gradient"
|
||||
style={{ fontFamily: "Inter, var(--font-geist-sans), system-ui, sans-serif" }}
|
||||
>
|
||||
{/* Ambient glow blobs */}
|
||||
<div
|
||||
className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full blur-3xl pointer-events-none"
|
||||
style={{ background: "rgba(99, 102, 241, 0.08)" }}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full blur-3xl pointer-events-none"
|
||||
style={{ background: "rgba(139, 92, 246, 0.06)" }}
|
||||
/>
|
||||
|
||||
{/* Card */}
|
||||
<div
|
||||
className="w-full max-w-sm relative z-10 rounded-2xl p-8"
|
||||
style={{
|
||||
background: "rgba(16, 16, 26, 0.85)",
|
||||
border: "1px solid rgba(255,255,255,0.09)",
|
||||
backdropFilter: "blur(24px)",
|
||||
boxShadow:
|
||||
"0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset",
|
||||
}}
|
||||
>
|
||||
{/* Logo / Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex justify-center mb-5">
|
||||
<div
|
||||
className="w-12 h-12 rounded-2xl flex items-center justify-center relative"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
|
||||
boxShadow:
|
||||
"0 0 32px rgba(99, 102, 241, 0.45), 0 0 0 1px rgba(255,255,255,0.12) inset",
|
||||
}}
|
||||
>
|
||||
<span className="text-white font-black text-xl">A</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
className="text-xl font-black tracking-wide mb-1"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e4e4f0, #a78bfa)",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
backgroundClip: "text",
|
||||
}}
|
||||
>
|
||||
AppAdmin
|
||||
</h1>
|
||||
<p className="text-xs font-medium" style={{ color: "rgba(255,255,255,0.3)" }}>
|
||||
Yönetim paneline erişmek için giriş yapın
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Email */}
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-[11px] font-bold uppercase tracking-wider"
|
||||
style={{ color: "rgba(255,255,255,0.35)" }}
|
||||
>
|
||||
E-posta
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail
|
||||
size={14}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
style={{ color: "rgba(255,255,255,0.22)" }}
|
||||
/>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="block w-full pl-9 pr-4 py-2.5 text-sm rounded-xl transition-all duration-200"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
border: "1px solid rgba(255,255,255,0.09)",
|
||||
color: "rgba(255,255,255,0.85)",
|
||||
outline: "none",
|
||||
}}
|
||||
placeholder="admin@admin.com"
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = "rgba(99, 102, 241, 0.5)";
|
||||
e.currentTarget.style.background = "rgba(99, 102, 241, 0.06)";
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = "rgba(255,255,255,0.09)";
|
||||
e.currentTarget.style.background = "rgba(255,255,255,0.05)";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-[11px] font-bold uppercase tracking-wider"
|
||||
style={{ color: "rgba(255,255,255,0.35)" }}
|
||||
>
|
||||
Şifre
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock
|
||||
size={14}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
style={{ color: "rgba(255,255,255,0.22)" }}
|
||||
/>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
className="block w-full pl-9 pr-4 py-2.5 text-sm rounded-xl transition-all duration-200"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
border: "1px solid rgba(255,255,255,0.09)",
|
||||
color: "rgba(255,255,255,0.85)",
|
||||
outline: "none",
|
||||
}}
|
||||
placeholder="••••••••"
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = "rgba(99, 102, 241, 0.5)";
|
||||
e.currentTarget.style.background = "rgba(99, 102, 241, 0.06)";
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = "rgba(255,255,255,0.09)";
|
||||
e.currentTarget.style.background = "rgba(255,255,255,0.05)";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div
|
||||
className="flex items-center gap-2.5 p-3 rounded-xl text-xs font-medium"
|
||||
style={{
|
||||
background: "rgba(239, 68, 68, 0.08)",
|
||||
border: "1px solid rgba(239, 68, 68, 0.2)",
|
||||
color: "#f87171",
|
||||
}}
|
||||
>
|
||||
<AlertCircle size={14} />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="relative w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-sm font-bold transition-all duration-200 mt-2 overflow-hidden group"
|
||||
style={{
|
||||
background: loading
|
||||
? "rgba(99, 102, 241, 0.4)"
|
||||
: "linear-gradient(135deg, #6366f1, #8b5cf6)",
|
||||
color: "white",
|
||||
boxShadow: loading
|
||||
? "none"
|
||||
: "0 0 24px rgba(99, 102, 241, 0.35)",
|
||||
cursor: loading ? "not-allowed" : "pointer",
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 size={15} className="animate-spin" />
|
||||
<span>Giriş yapılıyor...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Giriş Yap</span>
|
||||
<ArrowRight
|
||||
size={15}
|
||||
className="group-hover:translate-x-0.5 transition-transform duration-200"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Footer hint */}
|
||||
<p
|
||||
className="text-center text-[10px] mt-6"
|
||||
style={{ color: "rgba(255,255,255,0.15)" }}
|
||||
>
|
||||
AppAdmin v1.0 · Yönetim Paneli
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user