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 @@ ...@@ -8,5 +8,5 @@
} }
body { 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 @@ ...@@ -27,6 +27,10 @@
background-color: #192FA2; background-color: #192FA2;
color: white; color: white;
} }
.login-btn:hover {
background-color: #192FA2;
color: white;
}
.logo-container { .logo-container {
width: 250px; width: 250px;
margin-right: 50px; margin-right: 50px;
...@@ -41,6 +45,10 @@ ...@@ -41,6 +45,10 @@
background-color: #192FA2; background-color: #192FA2;
color: white; color: white;
} }
.create-account:hover {
background-color: #192FA2;
color: white;
}
.register-container { .register-container {
background-color: white; background-color: white;
color: black; 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' import './Login.css'
function Login() { 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 ( return (
<div className="login-bg"> <div className="login-bg">
<div <div
...@@ -22,19 +49,23 @@ function Login() { ...@@ -22,19 +49,23 @@ function Login() {
</div> </div>
<h4 <h4
className="card-title mt-5" className="card-title mt-5"
style={{ width: "150px", fontFamily: "serif", fontWeight: "bold" }} style={{
width: "150px",
fontFamily: "serif",
fontWeight: "bold",
}}
> >
Login into your account Login into your account
</h4> </h4>
<div <div
className="card-text mt-1" className="card-text mt-3"
style={{ fontSize: "17px", fontFamily: "serif" }} style={{ fontSize: "17px", fontFamily: "serif" }}
> >
Let us make your life easier! Let us make your life easier!
</div> </div>
</div> </div>
<div className="login-container"> <div className="login-container">
<form className="login-form"> <form className="login-form" onSubmit={submitHandler}>
<div className="mb-1"> <div className="mb-1">
<label <label
htmlFor="email" htmlFor="email"
...@@ -47,6 +78,7 @@ function Login() { ...@@ -47,6 +78,7 @@ function Login() {
className="form-control login-form-input" className="form-control login-form-input"
id="email" id="email"
placeholder="name@example.com" placeholder="name@example.com"
onChange={(e) => setEmail(e.target.value)}
/> />
</div> </div>
<div className="mb-1"> <div className="mb-1">
...@@ -61,6 +93,7 @@ function Login() { ...@@ -61,6 +93,7 @@ function Login() {
className="form-control login-form-input" className="form-control login-form-input"
id="password" id="password"
placeholder="Your password" placeholder="Your password"
onChange={(e) => setPassword(e.target.value)}
/> />
</div> </div>
<div className="d-flex mt-4"> <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' import '../Login/Login.css'
function Register() { 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 ( return (
<div className="login-bg"> <div className="login-bg">
<div <div
...@@ -31,14 +60,14 @@ function Register() { ...@@ -31,14 +60,14 @@ function Register() {
Create an account here Create an account here
</h4> </h4>
<div <div
className="card-text mt-1" className="card-text mt-3"
style={{ fontSize: "17px", fontFamily: "serif" }} style={{ fontSize: "17px", fontFamily: "serif" }}
> >
Let's make it happen together! Let's make it happen together!
</div> </div>
</div> </div>
<div className="register-container"> <div className="register-container">
<form className="login-form"> <form className="login-form" onSubmit={submitHandler}>
<div className="mb-1"> <div className="mb-1">
<label <label
htmlFor="First Name" htmlFor="First Name"
...@@ -51,6 +80,8 @@ function Register() { ...@@ -51,6 +80,8 @@ function Register() {
className="form-control login-form-input" className="form-control login-form-input"
id="fname" id="fname"
placeholder="Your first name" placeholder="Your first name"
onChange={(e) => setFirstName(e.target.value)}
required
/> />
</div> </div>
<div className="mb-1"> <div className="mb-1">
...@@ -65,6 +96,8 @@ function Register() { ...@@ -65,6 +96,8 @@ function Register() {
className="form-control login-form-input" className="form-control login-form-input"
id="lname" id="lname"
placeholder="Your last name" placeholder="Your last name"
onChange={(e) => setLastName(e.target.value)}
required
/> />
</div> </div>
<div className="mb-1"> <div className="mb-1">
...@@ -79,6 +112,8 @@ function Register() { ...@@ -79,6 +112,8 @@ function Register() {
className="form-control login-form-input" className="form-control login-form-input"
id="email" id="email"
placeholder="name@example.com" placeholder="name@example.com"
onChange={(e) => setEmail(e.target.value)}
required
/> />
</div> </div>
<div className="mb-1"> <div className="mb-1">
...@@ -93,9 +128,11 @@ function Register() { ...@@ -93,9 +128,11 @@ function Register() {
className="form-control login-form-input" className="form-control login-form-input"
id="password" id="password"
placeholder="Your password" placeholder="Your password"
onChange={(e) => setPassword(e.target.value)}
required
/> />
</div> </div>
<div className='mt-4' style={{textAlign: "center"}}> <div className="mt-4" style={{ textAlign: "center" }}>
<button type="submit" className="btn create-account"> <button type="submit" className="btn create-account">
Create Account Create Account
</button> </button>
......
.logout { .logout {
margin-top: 80vh; margin-top: 80vh;
cursor: pointer;
} }
.sidebar { .sidebar {
...@@ -12,8 +13,8 @@ ...@@ -12,8 +13,8 @@
} }
.list-group-item.active { .list-group-item.active {
background-color: #ffffff; background: linear-gradient(to left, purple, #1F3D88);
color: #001061; color: white;
border-color: #001061; border-color: #001061;
font-weight: 500; font-weight: 500;
} }
......
...@@ -2,8 +2,16 @@ import React from "react"; ...@@ -2,8 +2,16 @@ import React from "react";
import './Sidebar.css'; import './Sidebar.css';
import { LogOut } from "lucide-react"; import { LogOut } from "lucide-react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { useDispatch } from "react-redux";
import { logout } from "../actions/userAction";
const Sidebar = () => { const Sidebar = () => {
const dispatch = useDispatch();
const logoutHandler = () => {
dispatch(logout());
};
return ( return (
<div className="border-right sidebar" id="sidebar-wrapper"> <div className="border-right sidebar" id="sidebar-wrapper">
<div> <div>
...@@ -29,7 +37,7 @@ const Sidebar = () => { ...@@ -29,7 +37,7 @@ const Sidebar = () => {
</NavLink> </NavLink>
</div> </div>
<div className="list-group list-group-flush logout"> <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 <LogOut size={18} /> Logout
</a> </a>
</div> </div>
......
...@@ -2,8 +2,16 @@ import React from 'react' ...@@ -2,8 +2,16 @@ import React from 'react'
import "./Sidebar.css"; import "./Sidebar.css";
import { LogOut } from "lucide-react"; import { LogOut } from "lucide-react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { useDispatch } from "react-redux";
import { logout } from "../actions/userAction";
const UserSidebar = () => { const UserSidebar = () => {
const dispatch = useDispatch();
const logoutHandler = () => {
dispatch(logout());
};
return ( return (
<div className="border-right sidebar" id="sidebar-wrapper"> <div className="border-right sidebar" id="sidebar-wrapper">
<div> <div>
...@@ -31,7 +39,7 @@ const UserSidebar = () => { ...@@ -31,7 +39,7 @@ const UserSidebar = () => {
</NavLink> </NavLink>
</div> </div>
<div className="list-group list-group-flush logout"> <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 <LogOut size={18} /> Logout
</a> </a>
</div> </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'; ...@@ -3,12 +3,14 @@ import ReactDOM from 'react-dom/client';
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import { Provider } from "react-redux";
import store from "./store";
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <Provider store={store}>
<App /> <App />
</React.StrictMode> </Provider>
); );
// If you want to start measuring performance in your app, pass a function // 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