adding login

eduquik/package.json

@@ -3,11 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

eduquik/src/App.jsx

@@ -0,0 +1,16 @@
+import logo from "./logo.svg";
+import "./App.css";
+import Login from "./Pages/Login";
+import Signup from "./Pages/SingUp";
+
+function App() {
+  return (
+    <div className="App">
+      {/* <Login />
+       */}
+      <Signup />
+    </div>
+  );
+}
+
+export default App;

eduquik/src/Pages/Login.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import styled from "styled-components";
+import { login } from "../redux/Authentication/action";
+import { Link, Navigate, useLocation, useNavigate } from "react-router-dom";
+import { useRef } from "react";
+import { LOGIN_SUCCESS } from "../redux/actionTypes";
+
+function Login() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const emailRef = useRef();
+  const passwordRef = useRef();
+  const dispatch = useDispatch();
+  const isAuth = useSelector((store) => store.authReducer.isAuth);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const email = emailRef.current.value;
+    const password = passwordRef.current.value;
+
+    dispatch(login(email, password)).then((res) => {
+      if (res.length > 0) {
+        dispatch({ type: LOGIN_SUCCESS, payload: res[0] });
+        localStorage.setItem("userDetails", JSON.stringify(res[0]));
+        navigate(location.state || "/", { replace: true });
+      } else {
+        alert("Incorrect Credentials");
+      }
+    });
+  };
+
+  //  if(isAuth){
+  //   return <Navigate to="/"/>
+  //  }
+  return (
+    <DIV auth={isAuth.toString()}>
+      <div className="box">
+        <h1>Login</h1>
+
+        <form onSubmit={handleSubmit} className="formData">
+          <input
+            type="email"
+            placeholder="Enter email"
+            ref={emailRef}
+            required
+          />
+          <input
+            type="password"
+            placeholder="Enter password"
+            ref={passwordRef}
+            required
+          />
+          <button>Login</button>
+          <p>
+            Don't have account{" "}
+            <Link to="/signup">
+              <span style={{ color: "red" }}>Register</span>
+            </Link>
+          </p>
+        </form>
+      </div>
+    </DIV>
+  );
+}
+
+const DIV = styled.div`
+  width: 100%;
+  .box {
+    width: 400px;
+    margin: auto;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
+    padding: 20px;
+    border-radius: 10px;
+    margin-top: 50px;
+  }
+  .formData {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  input {
+    padding: 5px;
+  }
+  button {
+    padding: 5px;
+    border-radius: 10px;
+    background-color: #47bd47;
+    color: aliceblue;
+    font-size: 20px;
+  }
+  h1 {
+    font-size: 30px;
+    margin-bottom: 20px;
+    color: red;
+  }
+  input {
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px solid grey;
+  }
+`;
+
+export default Login;

eduquik/src/Pages/SingUp.jsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { signup } from "../redux/Authentication/action";
+import { Link, Navigate } from "react-router-dom";
+import styled from "styled-components";
+
+const initialState = {
+  email: "",
+  password: "",
+  name: "",
+};
+
+function Signup() {
+  const dispatch = useDispatch();
+  const [userData, setUserData] = useState(initialState);
+  const [gotoLogin, setGotoLogin] = useState(false);
+
+  const handleSignup = (e) => {
+    e.preventDefault();
+    if (userData.email && userData.password && userData.name) {
+      let user = {
+        email: userData.email,
+        password: userData.password,
+        name: userData.name,
+      };
+      dispatch(signup(user)).then((res) => {
+        setGotoLogin(true);
+      });
+    } else {
+      alert("Please fill All Sections");
+    }
+  };
+  if (gotoLogin) {
+    return <Navigate to="/login" />;
+  }
+  const { email, password, name } = userData;
+  return (
+    <DIV>
+      <div className="box">
+        <h1> Signup</h1>
+        <form className="formData">
+          <input
+            type="text"
+            placeholder="Enter username"
+            name="name"
+            value={name}
+            onChange={(e) => setUserData({ ...userData, name: e.target.value })}
+          />
+          <input
+            type="email"
+            placeholder="Enter email"
+            name="email"
+            value={email}
+            onChange={(e) =>
+              setUserData({ ...userData, email: e.target.value })
+            }
+          />
+          <input
+            type="password"
+            placeholder="Enter password"
+            name="password"
+            value={password}
+            onChange={(e) =>
+              setUserData({ ...userData, password: e.target.value })
+            }
+          />
+          <button type="submit" onClick={handleSignup}>
+            Submit
+          </button>
+          <p>
+            Already have an account{" "}
+            <Link to="/login">
+              <span style={{ color: "red" }}>Register</span>
+            </Link>
+          </p>
+        </form>
+      </div>
+    </DIV>
+  );
+}
+
+export default Signup;
+
+const DIV = styled.div`
+  width: 100%;
+  .box {
+    width: 400px;
+    margin: auto;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
+    padding: 20px 30px;
+    border-radius: 10px;
+    margin-top: 50px;
+  }
+
+  .formData {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  h1 {
+    font-size: 30px;
+    color: red;
+    margin-bottom: 20px;
+  }
+  input {
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px solid grey;
+  }
+  button {
+    padding: 5px;
+    border-radius: 10px;
+    background-color: #47bd47;
+    color: aliceblue;
+    font-size: 20px;
+  }
+`;

eduquik/src/index.js

@@ -1,14 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import { ChakraProvider } from "@chakra-ui/react";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <ChakraProvider>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </ChakraProvider>
 );
 
 // If you want to start measuring performance in your app, pass a function

eduquik/src/redux/Authentication/action.js

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { FETCH_FAILURE, FETCH_RQUEST,LOGIN_SUCCESS, SIGNUP_SUCCESS } from "../actionTypes";
+const api="https://64b65d04df0839c97e156cc4.mockapi.io/users";
+
+export const login = (email,password) => (dispatch) => {
+  return (
+    dispatch({type:FETCH_RQUEST}),
+    axios.get(`https://64b65d04df0839c97e156cc4.mockapi.io/users?email=${email}&password=${password}`)
+    .then(res => res.data )
+    .catch(err=> {
+      dispatch({type:FETCH_FAILURE});
+    })
+  )
+};
+
+
+export const signup = (user) => (dispatch) => {
+  return (
+    dispatch({type:FETCH_RQUEST}),
+    axios.post(`${api}`,user)
+    .then(res => dispatch({type:SIGNUP_SUCCESS}))
+    .catch(err=> dispatch({type:FETCH_FAILURE}))
+  )
+};

eduquik/src/redux/Authentication/reducer.js

@@ -0,0 +1,31 @@
+import { FETCH_FAILURE, FETCH_RQUEST, LOGIN_SUCCESS, LOGOUT_SUCCESS, SIGNUP_SUCCESS } from "../actionTypes"
+
+const data = JSON.parse(localStorage.getItem("userDetails"));
+const initialState = {
+    isLoading: false,
+    isError: false,
+    user: JSON.parse(localStorage.getItem("userDetails")) || {},
+    isAuth: data?.name !== undefined ? true : false,
+}
+
+export const reducer = (state = initialState, { type, payload }) => {
+    switch (type) {
+        case FETCH_RQUEST: {
+            return { ...state, isLoading: true }
+        }
+        case FETCH_FAILURE: {
+            return { ...state, isLoading: false, isError: true }
+        }
+        case LOGIN_SUCCESS: {
+            return { ...state, isLoading: false, isAuth: true, user: payload }
+        }
+        case SIGNUP_SUCCESS: {
+            return { ...state, isLoading: false }
+        }
+        case LOGOUT_SUCCESS: {
+            return { ...state, user: {}, isAuth: false }
+        }
+        default:
+            return state;
+    }
+}

eduquik/src/redux/actionTypes.js

@@ -0,0 +1,13 @@
+
+export const FETCH_RQUEST = "FETCH_RQUEST"
+export const FETCH_FAILURE = "FETCH_FAILURE"
+
+
+export const LOGIN_SUCCESS = "LOGIN_SUCCESS"
+export const SIGNUP_SUCCESS = "SIGNUP_SUCCESS";
+export const HOME_PRODUCT = "HOME_PRODUCT";
+export const All_PRODUCT = "ALL_PRODUCT";
+export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
+
+export const CART_ADD = "CART_ADD";
+export const CART_DELETE = "CART_DELETE"