Added translation to all site with edit style

app/change-password/page.js

@@ -5,11 +5,13 @@ import { motion } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import toast, { Toaster } from 'react-hot-toast';
 import { Lock, Eye, EyeOff, ArrowLeft, Shield } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { changePassword } from '../utils/api';
 import AuthService from '../services/AuthService';
 
 export default function ChangePasswordPage() {
   const router = useRouter();
+  const { t } = useTranslation();
   const [form, setForm] = useState({ oldPassword: '', newPassword: '', confirmPassword: '' });
   const [show, setShow] = useState({ old: false, new: false, confirm: false });
   const [isLoading, setIsLoading] = useState(false);
@@ -22,28 +24,28 @@ export default function ChangePasswordPage() {
     e.preventDefault();
 
     if (!AuthService.isAuthenticated()) {
-      toast.error('يرجى تسجيل الدخول أولاً');
+      toast.error(t('changePassword.loginRequired'));
       router.push('/login');
       return;
     }
 
     if (form.newPassword !== form.confirmPassword) {
-      toast.error('كلمة المرور الجديدة وتأكيدها غير متطابقتين');
+      toast.error(t('changePassword.passwordsDoNotMatch'));
       return;
     }
 
     if (form.newPassword.length < 6) {
-      toast.error('كلمة المرور الجديدة يجب أن تكون 6 أحرف على الأقل');
+      toast.error(t('validation.passwordMinLength'));
       return;
     }
 
     setIsLoading(true);
     try {
       await changePassword(form.oldPassword, form.newPassword);
-      toast.success('تم تغيير كلمة المرور بنجاح');
+      toast.success(t('changePassword.changeSuccess'));
       setTimeout(() => router.push('/profile'), 1200);
     } catch (err) {
-      toast.error(err?.message || 'فشل تغيير كلمة المرور');
+      toast.error(err?.message || t('changePassword.changeFailed'));
     } finally {
       setIsLoading(false);
     }
@@ -71,7 +73,7 @@ export default function ChangePasswordPage() {
             className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
           >
             <ArrowLeft className="w-5 h-5" />
-            <span>العودة للملف الشخصي</span>
+            <span>{t('changePassword.backToProfile')}</span>
           </button>
         </motion.div>
 
@@ -90,7 +92,7 @@ export default function ChangePasswordPage() {
               animate={{ y: 0, opacity: 1 }}
               className="text-3xl font-bold text-white mb-2"
             >
-              تغيير كلمة المرور
+              {t('changePassword.title')}
             </motion.h1>
             <motion.p
               initial={{ y: 20, opacity: 0 }}
@@ -98,14 +100,14 @@ export default function ChangePasswordPage() {
               transition={{ delay: 0.1 }}
               className="text-amber-100"
             >
-              أدخل كلمة المرور الحالية والجديدة
+              {t('changePassword.subtitle')}
             </motion.p>
           </div>
 
           <form onSubmit={handleSubmit} className="p-8 space-y-6">
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-2">
-                كلمة المرور الحالية
+                {t('changePassword.currentPasswordLabel')}
               </label>
               <div className="relative">
                 <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
@@ -116,7 +118,7 @@ export default function ChangePasswordPage() {
                   value={form.oldPassword}
                   onChange={handleChange('oldPassword')}
                   className={inputClass}
-                  placeholder="أدخل كلمة المرور الحالية"
+                  placeholder={t('changePassword.currentPasswordPlaceholder')}
                   required
                 />
                 <button
@@ -131,7 +133,7 @@ export default function ChangePasswordPage() {
 
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-2">
-                كلمة المرور الجديدة
+                {t('changePassword.newPasswordLabel')}
               </label>
               <div className="relative">
                 <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
@@ -142,7 +144,7 @@ export default function ChangePasswordPage() {
                   value={form.newPassword}
                   onChange={handleChange('newPassword')}
                   className={inputClass}
-                  placeholder="أدخل كلمة المرور الجديدة"
+                  placeholder={t('changePassword.newPasswordPlaceholder')}
                   required
                   minLength={6}
                 />
@@ -158,7 +160,7 @@ export default function ChangePasswordPage() {
 
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-2">
-                تأكيد كلمة المرور الجديدة
+                {t('changePassword.confirmNewPasswordLabel')}
               </label>
               <div className="relative">
                 <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
@@ -169,7 +171,7 @@ export default function ChangePasswordPage() {
                   value={form.confirmPassword}
                   onChange={handleChange('confirmPassword')}
                   className={inputClass}
-                  placeholder="أعد إدخال كلمة المرور الجديدة"
+                  placeholder={t('changePassword.confirmPasswordPlaceholder')}
                   required
                   minLength={6}
                 />
@@ -193,10 +195,10 @@ export default function ChangePasswordPage() {
               {isLoading ? (
                 <div className="flex items-center justify-center gap-2">
                   <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                  <span>جاري الحفظ...</span>
+                  <span>{t('changePassword.saving')}</span>
                 </div>
               ) : (
-                'تغيير كلمة المرور'
+                t('changePassword.changePassword')
               )}
             </motion.button>
           </form>