صفحة تغيير الرمز السري

---

محتويات الفولدر

الفايلات
ChangePasswordRequest.ts
useChangePassword.ts
ChangePasswordView.tsx

---

ChangePasswordRequest.ts

export const baseSchema = (t: TFunction) =>
  z
    .object({
      oldPassword: z.string({
        required_error: "يجب ادخال كلمة المرور القديمة",
      }),
      newPassword: z.string({
        required_error: "يجب ادخال كلمة المرور الجديدة",
      }),
      confirmNewPassword: z.string({
        required_error: "يجب ادخال تأكيد كلمة المرور",
      }),
    })
    .superRefine((value, ctx) => {
      if (value.newPassword !== value.confirmNewPassword) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          message: "كلمة المرور الجديدة وتأكيد كلمة المرور غير متطابقين",
          path: ["confirmNewPassword"],
        });
      }
    });

• هنا عندي السكيما مال الفورمة مال تحديث الرمز السري القديم مال حسابك
• راح يكونن كلها مطلوبات المدخلات مثل ما تلاحظ وياها ارجاع رسالة في حال ما دخلت بيانات بيها
• superRefine: هذي دالة خاصة من Zod راح تتحقق من حقلين او اكثر
• راح يجيك هنا اذا الرمز الجديد ويا المطابقة مالتة متاشبهين لو لا واذا لا راح يرجع رسالة
• ctx.addIssue : هنا يسمح انو اضيف رسالة خطأ ويا مجموعة من الباراميترات الي تفيد وراح نشرحها
  • بالنسبة لل path فهو هنا بكل بساطة يكلك حطلي المتغير الي كاعد تتحقق من عندة والي هو هنا التأكيد على الرمز الجديد
  • اما بالنسبة للكود مال الخطأ الي هو code فهذا اختارينة نوع الخطأ وهنا راح يكون مخصص

---

useChangePassword.ts

const {
  register,
  reset,
  control,
  handleSubmit,
  formState: { errors },
} = useForm<ChangePasswordRequest>({
  resolver: zodResolver(schema),
  defaultValues: defaultValues,
});
// --------------------- //
const changePasswordMutation = useMutation({
  mutationFn: changePasswordEndPoint,
  onSuccess: () => {
    reset(defaultValues);
    setSuccessResponse(t("pages.general.changePassword.success"));
    toast.success(t("pages.general.changePassword.success"));
    setErrorResponse(null);
  },
  onError: (error: any) => {
    console.log(error);
    toast.error(error.response?.data.message || "An unknown error occurred");
    console.log(error.response.data);

    setErrorResponse(
      error.response?.data?.message || "An unknown error occurred"
    );
    setSuccessResponse(null);
    console.log(errorResponse);
  },
});
// ----------------------- //
const onSubmit = (data: ChangePasswordRequest) => {
  changePasswordMutation.mutate(data);
};

• useForm : بالنسبة الهاي فهنا راح نستخدم مكتبتين والي هنة ال zodResolver , react-hook-form
• علمود نسوي ال Validation على الحقول ونطبق المعايير الي سويناها بال ChangePasswordRequest الي شفناها قبل شوية
• وراح ترجع دالة ال useForm مجموعة من الدوال المفيدة مثل reset , watch ...etc

const changePasswordMutation = useMutation({
  mutationFn: changePasswordEndPoint,
  onSuccess: () => {
    reset(defaultValues);
    setSuccessResponse(t("pages.general.changePassword.success"));
    toast.success(t("pages.general.changePassword.success"));
    setErrorResponse(null);
  },
  onError: (error: any) => {
    console.log(error);
    toast.error(error.response?.data.message || "An unknown error occurred");
    console.log(error.response.data);

    setErrorResponse(
      error.response?.data?.message || "An unknown error occurred"
    );
    setSuccessResponse(null);
    console.log(errorResponse);
  },
});
// ------------------------ //
const onSubmit = (data: ChangePasswordRequest) => {
  console.log(data);
  changePasswordMutation.mutate(data);
};

• هاي راح تسوي عملية التحديث للرمز مالتك القديم
• راح تستقبل داتا من نوع ال ChangePasswordRequest الي سويناها بالسكيما مالتنة بالبداية
• لمن تنجح راح تظهر رسالة تكلك تمت العملية بنجاح وتصفر بيانات المبنية فوك

---

ChangePasswordView.tsx

const {
  reset,
  register,
  errors,
  handleSubmit,
  control,
  onSubmit,
  errorResponse,
  successResponse,
  setShowNewPassword,
  showNewPassword,
  setShowConfirmPassword,
  showConfirmPassword,
} = useChangePassword();
const { t, i18n } = useTranslation();
const { updateBreadcrumbs } = useBreadcrumbs();
useTitle(t("pages.general.changePassword.title"));
useEffect(() => {
  updateBreadcrumbs([
    { label: t("pages.general.changePassword.title"), link: "/passwordChange" },
  ]);
}, [i18n.language]);

• هنا استدعيت الدوال مالتي المحتاجها من الملف السابق
• هنا ايضا استخدمت الدوال مال الترجمة من والى العربي والانكليزي
• وهمينة حطيت تايتيل للصفحة والي جبتة من مخزن الترجمة الموجود بال ar.json , en.json
• باقي الكود هو عبارة عن عرض للصفحة مال تغيير الرمز وياه شوية لوجك يخص الصفحة