Login & register integration

frontend/src/App.css

@@ -8,5 +8,5 @@
 }
 
 body {
-  background-color: rgba(127, 127, 127, 0.184);
+  background: linear-gradient(to right, purple, #1F3D88);
 }
\ No newline at end of file

frontend/src/Component/Login/Login.css

@@ -27,6 +27,10 @@
     background-color: #192FA2;
     color: white;
 }
+.login-btn:hover {
+    background-color: #192FA2;
+    color: white;
+}
 .logo-container {
     width: 250px;
     margin-right: 50px;
@@ -41,6 +45,10 @@
     background-color: #192FA2;
     color: white;
 }
+.create-account:hover {
+    background-color: #192FA2;
+    color: white;
+}
 .register-container {
     background-color: white;
     color: black;

frontend/src/Component/Login/Login.js

-import React from 'react'
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { login } from "../../actions/userAction";
 import './Login.css'
 
 function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const navigate = useNavigate();
+
+  //call the user Action for login
+  const dispatch = useDispatch();
+  //reducers
+  const userLogin = useSelector((state) => state.userLogin);
+  //3`
+  const { userInfo } = userLogin;
+
+  useEffect(() => {
+    const userInfo = localStorage.getItem("userInfo");
+    if (userInfo) {
+      navigate("/");
+    }
+  }, [navigate, userInfo]);
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+    dispatch(login(email, password));
+  };
+
   return (
     <div className="login-bg">
       <div
@@ -22,19 +49,23 @@ function Login() {
                 </div>
                 <h4
                   className="card-title mt-5"
-                  style={{ width: "150px", fontFamily: "serif", fontWeight: "bold" }}
+                  style={{
+                    width: "150px",
+                    fontFamily: "serif",
+                    fontWeight: "bold",
+                  }}
                 >
                   Login into your account
                 </h4>
                 <div
-                  className="card-text mt-1"
+                  className="card-text mt-3"
                   style={{ fontSize: "17px", fontFamily: "serif" }}
                 >
                   Let us make your life easier!
                 </div>
               </div>
               <div className="login-container">
-                <form className="login-form">
+                <form className="login-form" onSubmit={submitHandler}>
                   <div className="mb-1">
                     <label
                       htmlFor="email"
@@ -47,6 +78,7 @@ function Login() {
                       className="form-control login-form-input"
                       id="email"
                       placeholder="name@example.com"
+                      onChange={(e) => setEmail(e.target.value)}
                     />
                   </div>
                   <div className="mb-1">
@@ -61,6 +93,7 @@ function Login() {
                       className="form-control login-form-input"
                       id="password"
                       placeholder="Your password"
+                      onChange={(e) => setPassword(e.target.value)}
                     />
                   </div>
                   <div className="d-flex mt-4">

frontend/src/Component/Register/Register.js

-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, use } from "react-router-dom";
+import { register } from "../../actions/userAction";
 import '../Login/Login.css'
 
 function Register() {
+  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [password, setPassword] = useState("");
+
+  const dispatch = useDispatch();
+
+  const userRegister = useSelector((state) => state.userRegister);
+  const { userInfo } = userRegister;
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (userInfo) {
+      navigate("/register");
+    }
+  }, [navigate, userInfo]);
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+    dispatch(register(firstName, lastName, email, password)).then(() => {
+      alert("Successfully registered!");
+      window.location.href = "/";
+    });
+  };
+
   return (
     <div className="login-bg">
       <div
@@ -31,14 +60,14 @@ function Register() {
                   Create an account here
                 </h4>
                 <div
-                  className="card-text mt-1"
+                  className="card-text mt-3"
                   style={{ fontSize: "17px", fontFamily: "serif" }}
                 >
                   Let's make it happen together!
                 </div>
               </div>
               <div className="register-container">
-                <form className="login-form">
+                <form className="login-form" onSubmit={submitHandler}>
                   <div className="mb-1">
                     <label
                       htmlFor="First Name"
@@ -51,6 +80,8 @@ function Register() {
                       className="form-control login-form-input"
                       id="fname"
                       placeholder="Your first name"
+                      onChange={(e) => setFirstName(e.target.value)}
+                      required
                     />
                   </div>
                   <div className="mb-1">
@@ -65,6 +96,8 @@ function Register() {
                       className="form-control login-form-input"
                       id="lname"
                       placeholder="Your last name"
+                      onChange={(e) => setLastName(e.target.value)}
+                      required
                     />
                   </div>
                   <div className="mb-1">
@@ -79,6 +112,8 @@ function Register() {
                       className="form-control login-form-input"
                       id="email"
                       placeholder="name@example.com"
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
                     />
                   </div>
                   <div className="mb-1">
@@ -93,9 +128,11 @@ function Register() {
                       className="form-control login-form-input"
                       id="password"
                       placeholder="Your password"
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
                     />
                   </div>
-                  <div className='mt-4' style={{textAlign: "center"}}>
+                  <div className="mt-4" style={{ textAlign: "center" }}>
                     <button type="submit" className="btn create-account">
                       Create Account
                     </button>

frontend/src/Component/Sidebar.css

 .logout {
     margin-top: 80vh;
+    cursor: pointer;
 }
 
 .sidebar {
@@ -12,8 +13,8 @@
 }
 
 .list-group-item.active {
-  background-color: #ffffff;
-  color: #001061;
+  background: linear-gradient(to left, purple, #1F3D88);
+  color: white;
   border-color: #001061;
   font-weight: 500;
 }

frontend/src/Component/Sidebar.js

@@ -2,8 +2,16 @@ import React from "react";
 import './Sidebar.css';
 import { LogOut } from "lucide-react";
 import { NavLink } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { logout } from "../actions/userAction";
 
 const Sidebar = () => {
+  const dispatch = useDispatch();
+
+  const logoutHandler = () => {
+    dispatch(logout());
+  };
+
   return (
     <div className="border-right sidebar" id="sidebar-wrapper">
       <div>
@@ -29,7 +37,7 @@ const Sidebar = () => {
         </NavLink>
       </div>
       <div className="list-group list-group-flush logout">
-        <a to="#" className="list-group-item list-group-item-action">
+        <a onClick={logoutHandler} className="list-group-item list-group-item-action">
           <LogOut size={18} /> Logout
         </a>
       </div>

frontend/src/Component/UserSidebar.js

@@ -2,8 +2,16 @@ import React from 'react'
 import "./Sidebar.css";
 import { LogOut } from "lucide-react";
 import { NavLink } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { logout } from "../actions/userAction";
 
 const UserSidebar = () => {
+  const dispatch = useDispatch();
+
+  const logoutHandler = () => {
+    dispatch(logout());
+  };
+
   return (
     <div className="border-right sidebar" id="sidebar-wrapper">
       <div>
@@ -31,7 +39,7 @@ const UserSidebar = () => {
         </NavLink>
       </div>
       <div className="list-group list-group-flush logout">
-        <a to="#" className="list-group-item list-group-item-action">
+        <a onClick={logoutHandler} className="list-group-item list-group-item-action">
           <LogOut size={18} /> Logout
         </a>
       </div>

frontend/src/actions/userAction.js

+import {
+  USER_LOGIN_FAIL,
+  USER_LOGIN_REQUEST,
+  USER_LOGIN_SUCCESS,
+  USER_LOGOUT,
+  USER_REGISTER_FAIL,
+  USER_REGISTER_REQUEST,
+  USER_REGISTER_SUCCESS,
+} from "../constants/userConstants";
+import axios from "axios";
+
+const token = localStorage.getItem("token");
+
+export const login = (email, password) => async (dispatch) => {
+  try {
+    dispatch({ type: USER_LOGIN_REQUEST });
+
+    const config = {
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    };
+
+    const { data } = await axios.post(
+      "http://localhost:8070/api/users/login",
+      { email, password },
+      config
+    );
+
+    dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
+
+    //call the user info
+    localStorage.setItem("userInfo", JSON.stringify(data));
+
+    if (email === "instahire@gmail.com") {
+      alert("login successfull");
+      window.location.href = "/job-posting";
+    } else {
+      alert("login successfull");
+      window.location.href = "/job-vacancies";
+    }
+  } catch (error) {
+    dispatch({
+      type: USER_LOGIN_FAIL,
+      payload:
+        error.response && error.response.data.message
+          ? error.response.data.message
+          : error.message,
+    });
+  }
+};
+
+//clear the localstorage
+
+export const logout = () => async (dispatch) => {
+  localStorage.removeItem("userInfo");
+  window.location.href = "/";
+  dispatch({ type: USER_LOGOUT });
+};
+
+export const register =
+  (firstName, lastName, email, password) => async (dispatch) => {
+    try {
+      dispatch({ type: USER_REGISTER_REQUEST });
+
+      const config = {
+        headers: {
+          "Content-type": "application/json",
+        },
+      };
+
+      const { data } = await axios.post(
+        "http://localhost:8070/api/users/register",
+        { firstName, lastName, email, password },
+        config
+      );
+
+      dispatch({ type: USER_REGISTER_SUCCESS, payload: data });
+
+      dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
+
+      localStorage.setItem("userInfo", JSON.stringify(data));
+    } catch (error) {
+      dispatch({
+        type: USER_REGISTER_FAIL,
+        payload:
+          error.response && error.response.data.message
+            ? error.response.data.message
+            : error.message,
+      });
+    }
+  };

frontend/src/constants/userConstants.js

+export const USER_LOGIN_REQUEST = "USER_LOGIN_REQUEST";
+export const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS";
+export const USER_LOGIN_FAIL = "USER_LOGIN_FAIL";
+
+export const USER_LOGOUT = "USER_LOGOUT";
+
+export const USER_REGISTER_REQUEST = "USER_REGISTER_REQUEST";
+export const USER_REGISTER_SUCCESS = "USER_REGISTER_SUCCESS";
+export const USER_REGISTER_FAIL = "USER_REGISTER_FAIL";

frontend/src/index.js

@@ -3,12 +3,14 @@ import ReactDOM from 'react-dom/client';
 import "bootstrap/dist/css/bootstrap.min.css";
 import './index.css';
 import App from './App';
+import { Provider } from "react-redux";
+import store from "./store";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <Provider store={store}>
     <App />
-  </React.StrictMode>
+  </Provider>
 );
 
 // If you want to start measuring performance in your app, pass a function

frontend/src/reducers/userReducers.js

+import {
+  USER_LOGIN_FAIL,
+  USER_LOGIN_REQUEST,
+  USER_LOGIN_SUCCESS,
+  USER_LOGOUT,
+  USER_REGISTER_FAIL,
+  USER_REGISTER_REQUEST,
+  USER_REGISTER_SUCCESS,
+} from "../constants/userConstants";
+
+export const userLoginReducer = (state = {}, action) => {
+  switch (action.type) {
+    case USER_LOGIN_REQUEST:
+      return { loading: true };
+    case USER_LOGIN_SUCCESS:
+      //1
+      return { loading: false, userInfo: action.payload };
+    case USER_LOGIN_FAIL:
+      //when get error loading will dispear
+      return { loading: false, error: action.payload };
+    case USER_LOGOUT:
+      return {};
+    default:
+      return state;
+  }
+};
+
+export const userRegisterReducer = (state = {}, action) => {
+  switch (action.type) {
+    case USER_REGISTER_REQUEST:
+      return { loading: true };
+    case USER_REGISTER_SUCCESS:
+      return { loading: false, userInfo: action.payload };
+    case USER_REGISTER_FAIL:
+      return { loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};

frontend/src/store.js

+import { createStore, combineReducers, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import { composeWithDevTools } from "@redux-devtools/extension";
+import {
+  userLoginReducer,
+  userRegisterReducer,
+} from "./reducers/userReducers";
+
+// import {configureStore} from "@reduxjs/toolkit";
+
+const reducer = combineReducers({
+  userLogin: userLoginReducer,
+  userRegister: userRegisterReducer,
+});
+
+const userInfoFromStorage = localStorage.getItem("userInfo")
+  ? JSON.parse(localStorage.getItem("userInfo"))
+  : null;
+
+const initialState = {
+  userLogin: { userInfo: userInfoFromStorage },
+};
+
+const middleware = [thunk];
+
+const store = createStore(
+  reducer,
+  initialState,
+  composeWithDevTools(applyMiddleware(...middleware))
+);
+
+export default store;