Merge pull request #15 from CMP26Projects/auth-forntend

🌟 Login an signup and authentication done

client/package.json

@@ -10,15 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.0.1",
     "@heroicons/react": "^2.0.18",
+    "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.6.2",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-
     "react-redux": "^9.0.2",
     "react-router-dom": "^6.21.0",
+    "react-toastify": "^9.1.3",
     "sass": "^1.69.5"
   },
   "devDependencies": {

client/src/App.jsx

@@ -4,11 +4,21 @@ import "./theme.scss";
 import "./assets/styles/global/global.scss";
 // Import Routes
 import Routes from "./routes";
+// Import Store
+import store from "./redux/store";
+// Import Provider
+import { Provider } from "react-redux";
+// Import Toastify
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (
     <>
-      <Routes />
+      <ToastContainer />
+      <Provider store={store}>
+        <Routes />
+      </Provider>
     </>
   );
 }

client/src/assets/styles/components/Button.scss

@@ -4,6 +4,10 @@
   padding: 12px 20px;
   border-radius: 6px;
   cursor: pointer;
+  color: inherit;
+  font-size: 19px;
+  font-weight: 500;
+  text-align: center;
 
   a {
     color: inherit;
@@ -23,7 +27,7 @@
 
   &--medium {
     a {
-    font-size: 1rem;
+      font-size: 1rem;
     }
   }
 

client/src/components/common/Button.jsx

@@ -8,9 +8,17 @@ export default function Button(props) {
   const { children, className, linkTo, ...rest } = props;
 
   return (
-    <button className={`Button ${className}`} {...rest}>
-      {linkTo ? <Link to={linkTo}>{children}</Link> : <>{children}</>}
-    </button>
+    <>
+      {linkTo ? (
+        <Link to={linkTo} className={`Button ${className}`} {...rest}>
+          {children}
+        </Link>
+      ) : (
+        <button className={`Button ${className}`} {...rest}>
+          {children}
+        </button>
+      )}
+    </>
   );
 }
 

client/src/components/login/logIn.jsx

@@ -1,26 +1,74 @@
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 import Button from "../common/Button";
+import TextInput from "../common/Inputs";
 import "./logIn.scss";
+import { useLoginMutation } from "../../redux/slices/usersApiSlice";
+import { setCredentials } from "../../redux/slices/authSlice";
 
 export default function LogIn() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const [login, { isLoading, error }] = useLoginMutation();
+
+  const { userInfo } = useSelector((state) => state.auth);
+
+  useEffect(() => {
+    if (userInfo) {
+      /* TODO: Add later the home page not the landing page */
+      navigate("/");
+    }
+  }, [navigate, userInfo]);
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await login({ email, password }).unwrap();
+      dispatch(setCredentials({ ...res?.data }));
+      navigate("/");
+    } catch (err) {
+      toast.error(err?.data?.message || err.error);
+      console.error(err);
+    }
+  };
+
   return (
     <div className="login">
-      <div className="hero">
+      <form onSubmit={submitHandler} className="hero">
         <h2>تسجيل الدخول</h2>
         <div className="card">
-          <label className="input-field">
-            الحساب
-            <input type="email" />
-          </label>
-          <label className="input-field">
-            الرمز السري
-            <input type="password" />
-          </label>
-          <Button className="Button--medium Button--success" linkTo="/signUp">
+          <TextInput
+            label="البريد الالكتروني"
+            type="email"
+            name="email"
+            value={email}
+            placeholder="أكتب بريدك الالكتروني"
+            onChange={(e) => setEmail(e.target.value)}
+            required={true}
+          />
+          <TextInput
+            label="الرمز السري"
+            type="password"
+            name="password"
+            value={password}
+            placeholder="أكتب الرمز السري"
+            onChange={(e) => setPassword(e.target.value)}
+            required={true}
+          />
+          <Button type="submit" className="Button--medium Button--success">
             تسجيل الدخول
           </Button>
         </div>
-        <div className="small no-account">ليس لديك حساب؟</div>
-      </div>
+        <Link to="/signUp" className="small no-account">
+          ليس لديك حساب؟
+        </Link>
+      </form>
     </div>
   );
 }

client/src/components/login/logIn.scss

@@ -15,13 +15,14 @@
     background-color: var(--grey-800);
     border-radius: 1.875rem;
     display: flex;
-    width: 16.9375rem;
     padding: 1.0625rem 0rem;
     margin-top: 3rem;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 0.875rem;
+    gap: 1rem;
+    padding: 3rem 1rem;
+
     .input-field {
       display: flex;
       width: 14.16319rem;