118 lines
5.5 KiB
TypeScript
118 lines
5.5 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { X, Save, AlertCircle, KeyRound, CheckCircle } from "lucide-react";
|
||
import { updateAdminPassword } from "../../actions";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
export default function ChangePasswordModal({ admin }: { admin: { id: number; username: string } }) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [errorMsg, setErrorMsg] = useState("");
|
||
const [successMsg, setSuccessMsg] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const router = useRouter();
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
setErrorMsg("");
|
||
setSuccessMsg("");
|
||
|
||
const res = await updateAdminPassword(admin.id, password);
|
||
setIsLoading(false);
|
||
|
||
if (res.error) {
|
||
setErrorMsg(res.error);
|
||
} else {
|
||
setSuccessMsg("Şifre başarıyla güncellendi!");
|
||
setPassword("");
|
||
setTimeout(() => {
|
||
setIsOpen(false);
|
||
setSuccessMsg("");
|
||
router.refresh();
|
||
}, 1000);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<button
|
||
onClick={() => setIsOpen(true)}
|
||
className="p-2 bg-white/5 text-white/40 rounded-lg hover:bg-primary hover:text-white transition-all cursor-pointer"
|
||
title="Şifre Değiştir"
|
||
>
|
||
<KeyRound className="w-4.5 h-4.5" />
|
||
</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">
|
||
<div>
|
||
<h2 className="text-xl font-black uppercase tracking-widest text-white">Şifre Değiştir</h2>
|
||
<p className="text-xs text-white/40 mt-1">"{admin.username}" kullanıcısının şifresini güncelleyin.</p>
|
||
</div>
|
||
<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">Yeni Ş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>
|
||
)}
|
||
|
||
{successMsg && (
|
||
<div className="flex items-center gap-2 text-green-500 text-xs font-bold bg-green-500/10 p-4 rounded-xl">
|
||
<CheckCircle className="w-4 h-4 shrink-0" />
|
||
<span>{successMsg}</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 ? "Güncelleniyor..." : "Güncelle"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|