اذهب إلى المحتوى

السؤال

نشر

اريد تعلم jsx قمت ببعض الخطوات والان لدي مشكلة عدم استجابة عند ارسال الطلب في الواجهة الامامية

import CommonForm from "@/components/common/form";
import { registerForm } from "@/config";
import { registerUser } from "@/srore/auth-slice";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { Link, useNavigate } from "react-router-dom";


const initialState = {
    name: "",
    email: "",
    password: "",
  };

function AuthRegister() {
    const [formData, setFormData] = useState(initialState);
    const Navigate = useNavigate()


    const dispatch = useDispatch()

    function onSubmit(event){
      event.preventDefault()
      dispatch(registerUser(formData)).then(() => Navigate("/auth/login"));
    }
    

    return (  
        <div className="mx-auto w-full max-w-md space-y-6">
      <div className="text-center">
        <h1 className="text-3xl font-bold tracking-tight text-foreground">
          Create new account
        </h1>
        <p className="mt-2">
        Already have an account
        <Link className="font-medium ml-2 text-primary hover:underline" to="/auth/login">
        Login
        </Link>
        </p>
        </div>
        <CommonForm 
        formControls={registerForm}
        buttonText={"Sign Up"}
        formData={formData}
        setFormData={setFormData}
        onSubmit={onSubmit}
       
        />
        </div>
    );
}

export default AuthRegister;
import {createAsyncThunk, createSlice} from "@reduxjs/toolkit";
import axios from "axios";


    //معلومات المستخدم
    const initialState = {
        isAuthenticated: false,
        isLoading: true,
        user: null,
      };
      
      export const registerUser = createAsyncThunk(
        "/register",
      
        async (formData) => {
          const response = await axios.post(
            "http://localhost:3000/register",
            formData,
            {
              withCredentials: true,
            }
          );
      
          return response.data;
        }
      );




const authSlice = createSlice({
    name:"auth",
    initialState,
    reducers: {
        setUser: (state, action) => {},
        
      },
      extraReducers:(builder) =>{
        builder
      .addCase(registerUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(registerUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.user = null;
        state.isAuthenticated = false;
      })
      .addCase(registerUser.rejected, (state, action) => {
        state.isLoading = false;
        state.user = null;
        state.isAuthenticated = false;
      })
      }
})
export const { setUser } = authSlice.actions;
export default authSlice.reducer;

 

1.png

3.png

Screenshot 2025-03-03 225533.png

frontendjsx.zip backend.zip

Recommended Posts

  • 0
نشر

في ملف src\components\common\form.jsx في الواجهة الأمامية كتبت onSubmit بشكل غير صحيح، في المكون، يجب كتابته onSubmit عند عمل  props destructuring هنا:

function CommonForm({ 
  formControls, 
  formData, 
  setFormData, 
  onSubmit, 
  buttonText, 
  isBtnDisabled 
})

وعند تمريره هنا:

  <form onSubmit={onSubmit}> 

بعد ذلك سيظهر لك خطأ آخر بسبب أنك في الواجهة الخلفية في ملف controller\userController.js تتحقق من من حقل configPassword وهو غير موجود في الواجهة الأمامية:

    if (findEmail === null && password === configPassword) {

لذا عليك تعديل دالة register في ذلك الملف إلى التالي:

exports.register = async (req, res) => {
  const { name, email, password } = req.body;

  try {
    const hashPassword = await bcrypt.hash(password, 10);
    const findEmail = await User.findOne({ where: { email } });

    if (!findEmail) {
      const user = await User.create({
        name,
        email,
        password: hashPassword,
        configPassword: hashPassword,
        role: 'user',
      });
      res.status(200).json({ message: 'تم انشاء الحساب بنجاح' });
    } else {
      res.status(401).json({ message: 'الحساب موجود بالفعل ' });
    }
  } catch (e) {
    res.status(500).json(e.message);
  }
};

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...