Commit 9a21a2a1 authored by Rishad M.H.M's avatar Rishad M.H.M

Merge branch 'IT20613686/login-and-register-integration' into 'master'

Login & register integration

See merge request !3
parents 73cfa314 ebd68fcb
......@@ -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
......@@ -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;
......
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">
......
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>
......
.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;
}
......
......@@ -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>
......
......@@ -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>
......
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,
});
}
};
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";
......@@ -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
......
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;
}
};
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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment