120 lines
5.5 KiB
TypeScript
120 lines
5.5 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { Plus, X, Save, AlertCircle } from "lucide-react";
|
||
import { createAdminAdmin } from "../../actions";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
export default function AddAdminModal() {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [errorMsg, setErrorMsg] = useState("");
|
||
const [username, setUsername] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const router = useRouter();
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
setErrorMsg("");
|
||
|
||
const formData = new FormData();
|
||
formData.append("username", username);
|
||
formData.append("password", password);
|
||
|
||
const res = await createAdminAdmin(formData);
|
||
setIsLoading(false);
|
||
|
||
if (res.error) {
|
||
setErrorMsg(res.error);
|
||
} else {
|
||
setIsOpen(false);
|
||
setUsername("");
|
||
setPassword("");
|
||
router.refresh();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<button
|
||
onClick={() => setIsOpen(true)}
|
||
className="bg-primary text-white px-6 py-2 rounded-xl font-bold hover:bg-primary/80 transition-colors flex items-center gap-2 cursor-pointer text-sm"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
Yeni Yönetici Ekle
|
||
</button>
|
||
|
||
{isOpen && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm animate-fadeIn">
|
||
<div className="relative w-full max-w-md bg-zinc-950 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
|
||
|
||
{/* Header */}
|
||
<div className="flex justify-between items-center pb-4 border-b border-white/10">
|
||
<h2 className="text-xl font-black uppercase tracking-widest text-white">Yeni Yönetici Ekle</h2>
|
||
<button
|
||
onClick={() => setIsOpen(false)}
|
||
className="text-white/40 hover:text-white transition-colors p-1"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Kullanıcı Adı</label>
|
||
<input
|
||
required
|
||
type="text"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
placeholder="Örn: ayrisdev"
|
||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Geçici Şifre</label>
|
||
<input
|
||
required
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
placeholder="••••••••"
|
||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||
/>
|
||
</div>
|
||
|
||
{errorMsg && (
|
||
<div className="flex items-center gap-2 text-red-500 text-xs font-bold bg-red-500/10 p-4 rounded-xl">
|
||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||
<span>{errorMsg}</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="pt-4 flex gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsOpen(false)}
|
||
className="flex-1 border border-white/10 text-white font-bold py-3 px-6 rounded-xl hover:bg-white/5 transition-colors"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading}
|
||
className="flex-1 bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary/80 transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
<Save className="w-4 h-4" />
|
||
{isLoading ? "Kaydediliyor..." : "Kaydet"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|