مقدمة

صفحة تسجيل الدخول راح يكون بداخل فولدر اسمة Auth => Login وراح تلكة 3 فايلات والي هنة :

// Auth => Login folder
LoginRequest.ts;
LoginView.tsx;
useLoginView.tsx;

LoginRequest.ts

//LoginRequest.ts
import * as z from "zod";

export const loginSchema = z.object({
  authId: z.string().min(1, "الاسم يجب ان يكول حرف واحد على الاقل"),
  password: z.string().min(1, "كلمة المرور يجب ان تتكون من 1 رموز"),
});

export type LoginRequest = z.infer<typeof loginSchema>;

• محتوى الملف حيكون على السكيما مال الفورمة مالتك وشنو ال Validation مالتها حيكون
• راح يتم استدعاء الفايل بصفحة ال useLoginView.tsx علمود تطبق المعايير الفوك على المدخلات الي جتي من اليوزر

---

useLoginView.tsx

const {
  register,
  reset,
  clearErrors,
  handleSubmit,
  formState: { errors },
  setValue,
  watch,
  setFocus,
} = useForm<LoginRequest>({
  resolver: zodResolver(loginSchema),
});

• useForm عبارة عن دالة جبناها من مكتبة ال React-hook-form
• راح ترجعلي مجموعة من الدوال الي تفيدني بالمستقبل مثل تتبع ال State او مسح القيم من المتغيرات وغيرها
• resolver: zodResolver هاي راح تنفذ المعايير مال السكيما الي حطيناها بالفايل مال الValidation بدال ما اكتب التحقق بكل انبوت

const handleNumPadInput = (value: string) => {
  if (!activeInput) return;
  const currentValue = watch(activeInput) || "";
  if (value == "backspace") {
    setValue(activeInput, currentValue.slice(0, -1));
  } else {
    setValue(activeInput, currentValue + value);
  }
};

• عندك بال View اكو لوحة ارقام تدخل بيها الرمز مالتك وهاي الدالة تجيك اذا انت دخلت رقم او مسحت رقم وراح تزيد القيمة او تقللها بناءً على الدكمة الي ضغطتها

// login mutation request (post api)
const mutation = useMutation<loginResponse, unknown, loginRequestData>({
  mutationFn: loginRequest,
  onSuccess: (data) => {
    const structuredData = {
      accessToken: data.accessToken,
      refreshToken: data.refreshToken,
      user: {
        id: data.user.id,
        authId: data.user.authId,
        name: data.user.name,
        role: data.user.role,
        roleId: data.user.roleId,
        isAdmin: data.user.isAdmin,
      },
    };

    setUser(structuredData);
    localStorage.setItem("user", JSON.stringify(structuredData));
    reset();
    navigate("/home");
  },
  onError: (error: any) => {
    setErrorResponse(`${error?.response?.data?.errors[0].message}`);
    console.error("Login failed", error);
  },
});
// function to trigger the post mutation
const onSubmit = (data: LoginRequest) => {
  mutation.mutate(data);
};

• هاي دالتين الشغل مالتهن راح يكون ارسال البيانات الي جتي من الفورمة مال تسجيل الدخول و اذا انت مدخل صحيح راح يرجع توكن ورفرش توكن وراح يرجع يخزن يوزر اوبجكت بداخل local-storage وبعدين القيم راح تتصفر
• اذا اي غلط صار بالباك وما قبل منك الريكوست راح يرجعلك رسالة بالمحتوى مال الخطأ مالتك ملاحظة : كود البوست ريكوست هو =>

// API => Auth => LoginReq.tsx (path to the file)
const loginRequest = async (
  userData: loginRequestData
): Promise<loginResponse> => {
  const response = await axiosInstance.post<loginResponse>(
    "/auth/login",
    userData
  );
  response;
  return response.data;
};

---

LoginView.tsx

useEffect(() => {
  if (user) {
    setTimeout(() => {
      navigate("/home");
    }, 100);
  }
}, [user, navigate]);

• صفحة ال UI اللوجيك مالتها حاليا هو فقط هذا الباقي هو فقط عرض للواجهة
• هنانة بال useEffect اذا اكو يوزر بال localStorage راح ينقلني للهوم راوت مباشرة

function loginUser(user: any) {
  setSelectedUser(user);
  clearErrors();
  setErrorResponse("");
  reset({ authId: user.userName, password: undefined });
  setTimeout(() => {
    setFocus("password");
  }, 100);
}

• من راح تشوف الواجهة تظهر بيها عدة مستخدمين مثل ادمن , محمد , علي وغيرها راح تختار يوزر => هو هذا الشغل مال هاي الدالة راح يحدد اليوزر الحالي + راح يركز البوينتر على الباسورد وهم راح يمسح الاخطاء السابقة ان وجدت واخطاء الباك ويرست القيم القديمة في حال دخل اليوزر على غير بروفايل
• الباقي هو عرض الواجهة المتواجدة بصفحة تسجيل الدخول ويا لوجك موجود في بعض الحقول وعرض اليوزرية الي كاعد يجون من الباك ديسوي لووب عليهم ويعرضهم قبل لا يدخل الرمز مالتة

هاي بالنسبة الفولدر تسجيل الدخول .