link front to back in login and singup

package.json

@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-console-emulator": "^5.0.1",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/App.js

@@ -7,31 +7,34 @@ import SearchPan from "./containers/searchPan/SearchPan";
 import SignUp from "./containers/SignUp/SignUp";
 import NavBar from "./hoc/navBar/NavBar";
 import LogIn from "./containers/LogIn/LogIn";
-
+import store from "./store/store";
+import { Provider } from "react-redux";
 
 function App() {
   return (
     <Router>
-      <NavBar />
-      <Switch>
-        <Route path="/search">
-          <SearchPan />
-        </Route>
-        <Route path="/terminal">
-          <MainLayot>
-            <Terminal />
-          </MainLayot>
-        </Route>
-        <Route path="/scoreBoard">
-          <ScoreBoard />
-        </Route>
-        <Route path="/signup">
-          <SignUp />
-        </Route>
-        <Route path="/login">
-          <LogIn />
-        </Route>
-      </Switch>
+      <Provider store={store}>
+        <NavBar />
+        <Switch>
+          <Route path="/search">
+            <SearchPan />
+          </Route>
+          <Route path="/terminal">
+            <MainLayot>
+              <Terminal />
+            </MainLayot>
+          </Route>
+          <Route path="/scoreBoard">
+            <ScoreBoard />
+          </Route>
+          <Route path="/signup">
+            <SignUp />
+          </Route>
+          <Route path="/login">
+            <LogIn />
+          </Route>
+        </Switch>
+      </Provider>
     </Router>
   );
 }

src/api/info.js

@@ -0,0 +1,3 @@
+const apiAddresses = "http://localhost:8080";
+
+export default apiAddresses;

src/api/user.js

@@ -0,0 +1,47 @@
+import axios from "axios";
+import apiAddresses from "./info";
+
+async function login(info) {
+  return await axios.post(
+    apiAddresses + "/user/login",
+    {
+      username: "" + info.username,
+      password: "" + info.password,
+      student_number: "" + info.student_number,
+    },
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+}
+
+async function register(info) {
+  const sentInfo = {
+    username: "" + info.username,
+    password: "" + info.password,
+    student_number: "" + info.student_number,
+  };
+  console.log(sentInfo);
+  return await axios.post(apiAddresses + "/user/register", sentInfo, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
+
+async function logout(token) {
+  return await axios.post(
+    apiAddresses + "/user/logout",
+    {},
+    {
+      headers: {
+        "Content-Type": "application/json",
+        authorization: "Bearer " + token,
+      },
+    }
+  );
+}
+
+export { register, login, logout };

src/hoc/authentication/Authentication.js

@@ -1,127 +1,148 @@
-import React , {useState} from "react";
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { loginUser, registerUser } from "../../store/features/userSlice";
 
 import classes from "./authentication.module.css";
 
+function Authentication(props) {
+  const [enteredName, setEnteredName] = useState("");
+  const [enteredNameIsValid, setEnteredNameIsValid] = useState(true);
 
-function Authentication(props){
+  const [enteredPassword, setEnteredPassword] = useState("");
+  const [enteredPasswordIsValid, setEnteredPasswordIsValid] = useState(true);
 
+  const [enterndStudent_number, setEnterndStudent_number] = useState("");
 
-    const [enteredName, setEnteredName] = useState("");
-    const [enteredNameIsValid, setEnteredNameIsValid] = useState(true);
+  const [enteredSecpass, setEnteredSecpass] = useState("");
+  const [enteredSecpassIsValid, setEnteredSecpassIsValid] = useState(true);
 
-    const [enteredPassword, setEnteredPassword] = useState("");
-    const [enteredPasswordIsValid, setEnteredPasswordIsValid] = useState(true);
+  const [passwordmatch, setIspasswordmatch] = useState("true");
 
-    const [enteredSecpass, setEnteredSecpass] = useState("");
-    const [enteredSecpassIsValid, setEnteredSecpassIsValid] = useState(true);
+  const dispatch = useDispatch();
 
-    const [passwordmatch, setIspasswordmatch] = useState("true");
-
+  const usernameChangehandler = (event) => {
+    setEnteredName(event.target.value);
+  };
+  const passwordChangeHandler = (event) => {
+    setEnteredPassword(event.target.value);
+  };
+  const secondpassChangeHandler = (event) => {
+    setEnteredSecpass(event.target.value);
+  };
 
-    const usernameChangehandler = (event) => {
-      setEnteredName(event.target.value);
-    };
-    const passwordChangeHandler = (event) => {
-      setEnteredPassword(event.target.value);
-    };
-    const secondpassChangeHandler = (event) => {
-      setEnteredSecpass(event.target.value);
-    };
+  const submithandler = (event) => {
+    event.preventDefault();
+    console.log("hello");
 
-    const submithandler = (event) => {
-      event.preventDefault();
-      console.log("hello");
+    if (enteredName.trim() === "") {
+      setEnteredNameIsValid(false);
+    } else {
+      setEnteredNameIsValid(true);
+    }
 
-      if (enteredName.trim() === "") {
-        setEnteredNameIsValid(false);
-      } else {
-        setEnteredNameIsValid(true);
-      }
+    if (enteredPassword.trim() === "") {
+      setEnteredPasswordIsValid(false);
+    } else {
+      setEnteredPasswordIsValid(true);
+    }
 
-      if (enteredPassword.trim() === "") {
-        setEnteredPasswordIsValid(false);
+    if (props.type === "signUp") {
+      if (enteredSecpass.trim() === "") {
+        setEnteredSecpassIsValid(false);
       } else {
-        setEnteredPasswordIsValid(true);
+        setEnteredSecpassIsValid(true);
       }
 
-      if (props.type === "signUp") {
-        if (enteredSecpass.trim() === "") {
-          setEnteredSecpassIsValid(false);
-        } else {
-          setEnteredSecpassIsValid(true);
-        }
-
-        if (
-          enteredPassword.trim() !== "" &&
-          enteredSecpass.trim() !== "" &&
-          enteredPassword !== enteredSecpass
-        ) {
-          setIspasswordmatch(false);
-        } else {
-          setIspasswordmatch(true);
-        }
+      if (
+        enteredPassword.trim() !== "" &&
+        enteredSecpass.trim() !== "" &&
+        enteredPassword !== enteredSecpass
+      ) {
+        setIspasswordmatch(false);
+      } else {
+        setIspasswordmatch(true);
       }
-    };
-
-
-
-
-        const buttonText = props.type === 'signUp' ? "ثبت نام" : "ورود";
-
-
-
-
-    return (
-      <div className={`${classes.AuthPage}`}>
-        <div className={`${classes.AuthForm} form-group`}>
-          <form onSubmit={submithandler}>
-            <label>نام کاربری</label>
-            <input
-              type="text"
-              className="form-control"
-              onChange={usernameChangehandler}
-            />
-            {!enteredNameIsValid && (
-              <p className="text-danger">نام کاربری نباید خالی باشد</p>
-            )}
-
-            <label> رمز عبور</label>
-            <input
-              type="password"
-              className="form-control"
-              onChange={passwordChangeHandler}
-            />
-            {!enteredPasswordIsValid && (
-              <p className="text-danger">رمز عبور نباید خالی باشد</p>
-            )}
-
-            {props.type === "signUp" && (
-              <React.Fragment>
-                <label>تکرار رمز عبور</label>
-                <input
-                  type="password"
-                  className="form-control"
-                  onChange={secondpassChangeHandler}
-                />
-              </React.Fragment>
-            )}
-            {!enteredSecpassIsValid && props.type === "signUp" && (
-              <p className="text-danger">این فیلد نباید خالی باشد</p>
-            )}
-
-            {!passwordmatch && props.type === "signUp" && (
-              <p className="text-danger">
-                تکرار رمز عبور با اصل رمز عبور همخوانی ندارد
-              </p>
-            )}
-
-            <div className="d-flex flex-column justify-content-center align-content-center m-4 flex-wrap ">
-              <button className="btn btn-primary w-50">{buttonText}</button>
-            </div>
-          </form>
-        </div>
+    }
+  };
+
+  const buttonText = props.type === "signUp" ? "ثبت نام" : "ورود";
+  let buttonAction = loginUser;
+  if (props.type === "signUp") {
+    buttonAction = registerUser;
+  }
+
+  return (
+    <div className={`${classes.AuthPage}`}>
+      <div className={`${classes.AuthForm} form-group`}>
+        <form onSubmit={submithandler}>
+          <label>نام کاربری</label>
+          <input
+            type="text"
+            className="form-control"
+            onChange={usernameChangehandler}
+          />
+          {!enteredNameIsValid && (
+            <p className="text-danger">نام کاربری نباید خالی باشد</p>
+          )}
+
+          <label>شماره دانشجویی</label>
+          <input
+            type="text"
+            className="form-control"
+            onChange={(event) => setEnterndStudent_number(event.target.value)}
+          />
+
+          <label> رمز عبور</label>
+          <input
+            type="password"
+            className="form-control"
+            onChange={passwordChangeHandler}
+          />
+          {!enteredPasswordIsValid && (
+            <p className="text-danger">رمز عبور نباید خالی باشد</p>
+          )}
+
+          {props.type === "signUp" && (
+            <React.Fragment>
+              <label>تکرار رمز عبور</label>
+              <input
+                type="password"
+                className="form-control"
+                onChange={secondpassChangeHandler}
+              />
+            </React.Fragment>
+          )}
+          {!enteredSecpassIsValid && props.type === "signUp" && (
+            <p className="text-danger">این فیلد نباید خالی باشد</p>
+          )}
+
+          {!passwordmatch && props.type === "signUp" && (
+            <p className="text-danger">
+              تکرار رمز عبور با اصل رمز عبور همخوانی ندارد
+            </p>
+          )}
+
+          <div className="d-flex flex-column justify-content-center align-content-center m-4 flex-wrap ">
+            <button
+              onClick={() => {
+                console.log("ahhhhhhhhhhhhhhhhhhh");
+                const info = {
+                  username: enteredName,
+                  password: enteredPassword,
+                  student_number: enterndStudent_number,
+                };
+                console.log(info);
+                dispatch(buttonAction(info));
+              }}
+              className="btn btn-primary w-50"
+            >
+              {buttonText}
+            </button>
+          </div>
+        </form>
       </div>
-    );
+    </div>
+  );
 }
 
-export default Authentication;
+export default Authentication;