248 lines
9.6 KiB
JavaScript
248 lines
9.6 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { useRouter } from 'next/navigation';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import {
|
||
|
|
User,
|
||
|
|
Shield,
|
||
|
|
Trash2,
|
||
|
|
LogOut,
|
||
|
|
ChevronLeft,
|
||
|
|
Bell,
|
||
|
|
Lock,
|
||
|
|
Eye,
|
||
|
|
FileText,
|
||
|
|
HelpCircle,
|
||
|
|
MessageCircle,
|
||
|
|
Loader2,
|
||
|
|
AlertTriangle,
|
||
|
|
X
|
||
|
|
} from 'lucide-react';
|
||
|
|
import toast, { Toaster } from 'react-hot-toast';
|
||
|
|
import AuthService from '../services/AuthService';
|
||
|
|
import { changePassword, deleteMyAccount } from '../utils/api';
|
||
|
|
|
||
|
|
export default function SettingsPage() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||
|
|
const [deletePassword, setDeletePassword] = useState('');
|
||
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
||
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||
|
|
|
||
|
|
const handleSignOut = () => {
|
||
|
|
AuthService.deleteToken();
|
||
|
|
toast.success('تم تسجيل الخروج بنجاح');
|
||
|
|
router.push('/');
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDeleteAccount = async () => {
|
||
|
|
if (!deletePassword) {
|
||
|
|
toast.error('الرجاء إدخال كلمة المرور');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setIsDeleting(true);
|
||
|
|
try {
|
||
|
|
await deleteMyAccount(deletePassword);
|
||
|
|
AuthService.deleteToken();
|
||
|
|
toast.success('تم حذف الحساب بنجاح');
|
||
|
|
router.push('/');
|
||
|
|
} catch (err) {
|
||
|
|
toast.error(err.message || 'فشل حذف الحساب');
|
||
|
|
} finally {
|
||
|
|
setIsDeleting(false);
|
||
|
|
setShowDeleteDialog(false);
|
||
|
|
setDeletePassword('');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const sections = [
|
||
|
|
{
|
||
|
|
title: 'الحساب',
|
||
|
|
items: [
|
||
|
|
{ icon: User, label: 'الملف الشخصي', href: '/profile', desc: 'عرض وتعديل معلوماتك الشخصية' },
|
||
|
|
{ icon: Lock, label: 'تغيير كلمة المرور', href: '/change-password', desc: 'تحديث كلمة المرور الخاصة بك' },
|
||
|
|
{ icon: Shield, label: 'التحقق من الحساب', href: '/account-verification', desc: 'تأكيد البريد الإلكتروني ورقم الهاتف' },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'الإشعارات',
|
||
|
|
items: [
|
||
|
|
{ icon: Bell, label: 'الإشعارات', href: '/notifications', desc: 'إدارة تفضيلات الإشعارات' },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'الدعم',
|
||
|
|
items: [
|
||
|
|
{ icon: HelpCircle, label: 'الأسئلة الشائعة', href: '/faq', desc: 'إجابات للأسئلة المتكررة' },
|
||
|
|
{ icon: MessageCircle, label: 'تواصل معنا', href: '/support', desc: 'الحصول على المساعدة والدعم' },
|
||
|
|
{ icon: FileText, label: 'الشروط والأحكام', href: '/terms', desc: 'سياسة الاستخدام والخصوصية' },
|
||
|
|
{ icon: Eye, label: 'سياسة الخصوصية', href: '/privacy', desc: 'كيف نحمي بياناتك' },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const containerVariants = {
|
||
|
|
hidden: { opacity: 0 },
|
||
|
|
visible: {
|
||
|
|
opacity: 1,
|
||
|
|
transition: { staggerChildren: 0.08 }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const itemVariants = {
|
||
|
|
hidden: { opacity: 0, y: 20 },
|
||
|
|
visible: { opacity: 1, y: 0 }
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50 py-8" dir="rtl">
|
||
|
|
<Toaster position="top-center" reverseOrder={false} />
|
||
|
|
|
||
|
|
<div className="container mx-auto px-4 max-w-2xl">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: -20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="flex items-center gap-3 mb-8"
|
||
|
|
>
|
||
|
|
<Link
|
||
|
|
href="/profile"
|
||
|
|
className="p-2 rounded-xl hover:bg-gray-200 transition-colors text-gray-600"
|
||
|
|
>
|
||
|
|
<ChevronLeft className="w-5 h-5" />
|
||
|
|
</Link>
|
||
|
|
<h1 className="text-2xl font-bold text-gray-900">الإعدادات</h1>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
variants={containerVariants}
|
||
|
|
initial="hidden"
|
||
|
|
animate="visible"
|
||
|
|
className="space-y-6"
|
||
|
|
>
|
||
|
|
{sections.map((section) => (
|
||
|
|
<motion.div
|
||
|
|
key={section.title}
|
||
|
|
variants={itemVariants}
|
||
|
|
className="bg-white rounded-2xl shadow-sm overflow-hidden"
|
||
|
|
>
|
||
|
|
<div className="px-6 py-4 border-b border-gray-100">
|
||
|
|
<h2 className="text-lg font-semibold text-gray-800">{section.title}</h2>
|
||
|
|
</div>
|
||
|
|
<div className="divide-y divide-gray-50">
|
||
|
|
{section.items.map((item) => {
|
||
|
|
const Icon = item.icon;
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={item.label}
|
||
|
|
href={item.href}
|
||
|
|
className="flex items-center gap-4 px-6 py-4 hover:bg-gray-50 transition-colors group"
|
||
|
|
>
|
||
|
|
<div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-100 transition-colors">
|
||
|
|
<Icon className="w-5 h-5 text-amber-600" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<p className="text-sm font-medium text-gray-900">{item.label}</p>
|
||
|
|
<p className="text-xs text-gray-500 truncate">{item.desc}</p>
|
||
|
|
</div>
|
||
|
|
<ChevronLeft className="w-4 h-4 text-gray-400" />
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
<motion.div variants={itemVariants} className="space-y-4">
|
||
|
|
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||
|
|
<div className="px-6 py-4 border-b border-gray-100">
|
||
|
|
<h2 className="text-lg font-semibold text-gray-800">الأمان</h2>
|
||
|
|
</div>
|
||
|
|
<div className="p-6">
|
||
|
|
<button
|
||
|
|
onClick={() => setShowDeleteDialog(true)}
|
||
|
|
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
|
||
|
|
>
|
||
|
|
<Trash2 className="w-5 h-5" />
|
||
|
|
<span className="text-sm font-medium">حذف الحساب</span>
|
||
|
|
</button>
|
||
|
|
<p className="text-xs text-gray-500 mt-2 pr-12">
|
||
|
|
سيتم حذف جميع بياناتك بشكل دائم ولا يمكن التراجع عن هذا الإجراء
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||
|
|
<div className="p-6">
|
||
|
|
<button
|
||
|
|
onClick={handleSignOut}
|
||
|
|
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
|
||
|
|
>
|
||
|
|
<LogOut className="w-5 h-5" />
|
||
|
|
<span className="text-sm font-medium">تسجيل الخروج</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{showDeleteDialog && (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
|
||
|
|
<AlertTriangle className="w-5 h-5 text-red-600" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900">حذف الحساب</h3>
|
||
|
|
<p className="text-sm text-gray-500">هذا الإجراء لا يمكن التراجع عنه</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
|
||
|
|
className="mr-auto p-1 hover:bg-gray-100 rounded-lg transition-colors"
|
||
|
|
>
|
||
|
|
<X className="w-5 h-5 text-gray-400" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p className="text-sm text-gray-600 mb-4">
|
||
|
|
أدخل كلمة المرور لتأكيد حذف حسابك نهائياً. سيتم حذف جميع بياناتك وملفاتك بشكل دائم.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
value={deletePassword}
|
||
|
|
onChange={(e) => setDeletePassword(e.target.value)}
|
||
|
|
placeholder="كلمة المرور"
|
||
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="flex gap-3">
|
||
|
|
<button
|
||
|
|
onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
|
||
|
|
className="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
|
||
|
|
>
|
||
|
|
إلغاء
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={handleDeleteAccount}
|
||
|
|
disabled={isDeleting}
|
||
|
|
className="flex-1 px-4 py-3 rounded-xl bg-red-600 text-white hover:bg-red-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
|
||
|
|
>
|
||
|
|
{isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
|
||
|
|
{isDeleting ? 'جاري الحذف...' : 'تأكيد الحذف'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|