the best in the west is mouaz
All checks were successful
Build frontend / build (push) Successful in 55s
All checks were successful
Build frontend / build (push) Successful in 55s
This commit is contained in:
mouazkh
247
app/settings/page.js
Normal file
247
app/settings/page.js
Normal file
@ -0,0 +1,247 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user