the best in the west is mouaz

app/change-password/page.js

@@ -0,0 +1,207 @@
+'use client';
+
+import { useState } from 'react';
+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 { changePassword } from '../utils/api';
+import AuthService from '../services/AuthService';
+
+export default function ChangePasswordPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({ oldPassword: '', newPassword: '', confirmPassword: '' });
+  const [show, setShow] = useState({ old: false, new: false, confirm: false });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (field) => (e) => setForm({ ...form, [field]: e.target.value });
+
+  const toggleShow = (field) => setShow({ ...show, [field]: !show[field] });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!AuthService.isAuthenticated()) {
+      toast.error('يرجى تسجيل الدخول أولاً');
+      router.push('/login');
+      return;
+    }
+
+    if (form.newPassword !== form.confirmPassword) {
+      toast.error('كلمة المرور الجديدة وتأكيدها غير متطابقتين');
+      return;
+    }
+
+    if (form.newPassword.length < 6) {
+      toast.error('كلمة المرور الجديدة يجب أن تكون 6 أحرف على الأقل');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await changePassword(form.oldPassword, form.newPassword);
+      toast.success('تم تغيير كلمة المرور بنجاح');
+      setTimeout(() => router.push('/profile'), 1200);
+    } catch (err) {
+      toast.error(err?.message || 'فشل تغيير كلمة المرور');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const inputClass = "w-full pr-12 pl-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400 transition-all";
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <Toaster position="top-center" reverseOrder={false} />
+
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-md"
+      >
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="mb-6"
+        >
+          <button
+            onClick={() => router.push('/profile')}
+            className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            <span>العودة للملف الشخصي</span>
+          </button>
+        </motion.div>
+
+        <div className="bg-white rounded-3xl shadow-xl overflow-hidden">
+          <div className="bg-gradient-to-l from-amber-500 to-amber-600 p-8 text-center">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: 'spring', stiffness: 200 }}
+              className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4"
+            >
+              <Shield className="w-8 h-8 text-white" />
+            </motion.div>
+            <motion.h1
+              initial={{ y: 20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              className="text-3xl font-bold text-white mb-2"
+            >
+              تغيير كلمة المرور
+            </motion.h1>
+            <motion.p
+              initial={{ y: 20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className="text-amber-100"
+            >
+              أدخل كلمة المرور الحالية والجديدة
+            </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">
+                كلمة المرور الحالية
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                  <Lock className="w-5 h-5 text-gray-400" />
+                </div>
+                <input
+                  type={show.old ? 'text' : 'password'}
+                  value={form.oldPassword}
+                  onChange={handleChange('oldPassword')}
+                  className={inputClass}
+                  placeholder="أدخل كلمة المرور الحالية"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => toggleShow('old')}
+                  className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 hover:text-gray-600"
+                >
+                  {show.old ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                كلمة المرور الجديدة
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                  <Lock className="w-5 h-5 text-gray-400" />
+                </div>
+                <input
+                  type={show.new ? 'text' : 'password'}
+                  value={form.newPassword}
+                  onChange={handleChange('newPassword')}
+                  className={inputClass}
+                  placeholder="أدخل كلمة المرور الجديدة"
+                  required
+                  minLength={6}
+                />
+                <button
+                  type="button"
+                  onClick={() => toggleShow('new')}
+                  className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 hover:text-gray-600"
+                >
+                  {show.new ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                تأكيد كلمة المرور الجديدة
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                  <Lock className="w-5 h-5 text-gray-400" />
+                </div>
+                <input
+                  type={show.confirm ? 'text' : 'password'}
+                  value={form.confirmPassword}
+                  onChange={handleChange('confirmPassword')}
+                  className={inputClass}
+                  placeholder="أعد إدخال كلمة المرور الجديدة"
+                  required
+                  minLength={6}
+                />
+                <button
+                  type="button"
+                  onClick={() => toggleShow('confirm')}
+                  className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 hover:text-gray-600"
+                >
+                  {show.confirm ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
+            </div>
+
+            <motion.button
+              type="submit"
+              disabled={isLoading}
+              whileHover={{ scale: isLoading ? 1 : 1.02 }}
+              whileTap={{ scale: isLoading ? 1 : 0.98 }}
+              className="w-full bg-gradient-to-l from-amber-500 to-amber-600 text-white py-3 rounded-xl font-bold text-lg hover:from-amber-600 hover:to-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-500/25"
+            >
+              {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>
+                </div>
+              ) : (
+                'تغيير كلمة المرور'
+              )}
+            </motion.button>
+          </form>
+        </div>
+      </motion.div>
+    </div>
+  );
+}