victorAnumudu
346 lines
13 KiB
React
346 lines
13 KiB
React
import React, { useState } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import appleLogo from "../../../assets/images/apple-black.svg";
|
|
import facebookLogo from "../../../assets/images/facebook-4.svg";
|
|
import googleLogo from "../../../assets/images/google-logo.svg";
|
|
import WrenchBoard from "../../../assets/images/wrenchboard.png";
|
|
import usersService from "../../../services/UsersService";
|
|
import InputCom from "../../Helpers/Inputs/InputCom";
|
|
import AuthLayout from "../AuthLayout";
|
|
//import { GoogleOAuthProvider } from '@react-oauth/google';
|
|
// import { googleLogout, useGoogleLogin } from '@react-oauth/google';
|
|
|
|
import { useDispatch } from "react-redux";
|
|
import { updateUserDetails } from "../../../store/UserDetails";
|
|
|
|
export default function Login() {
|
|
const dispatch = useDispatch();
|
|
|
|
let [loginCom, setLoginCom] = useState({user: true, family: false})
|
|
|
|
const [checked, setValue] = useState(false);
|
|
const [loginLoading, setLoginLoading] = useState(false);
|
|
|
|
//login error state
|
|
const [loginError, setLoginError] = useState(false);
|
|
// for the catch error
|
|
const [msgError, setMsgError] = useState("");
|
|
|
|
const rememberMe = () => {
|
|
setValue(!checked);
|
|
};
|
|
|
|
//FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
|
|
const handleLoginCom = ({target:{name}}) => {
|
|
if(name == 'user'){
|
|
setLoginCom({[name]: true, family: false})
|
|
}else{
|
|
setLoginCom({[name]: false, family: true})
|
|
}
|
|
}
|
|
|
|
// email
|
|
const [email, setMail] = useState("");
|
|
const handleEmail = (e) => {
|
|
setMail(e.target.value);
|
|
};
|
|
// password
|
|
const [password, setPassword] = useState("");
|
|
const handlePassword = (e) => {
|
|
setPassword(e.target.value);
|
|
};
|
|
const navigate = useNavigate();
|
|
const userApi = new usersService();
|
|
|
|
// FUNCTION TO HANDLE USER LOGIN
|
|
const doLogin = ({target:{name}}) => {
|
|
setLoginLoading(true);
|
|
let postData = {}; // Post Data for API
|
|
if(!email || !password){
|
|
setLoginLoading(false);
|
|
setMsgError("Please fill in the fields");
|
|
return
|
|
}
|
|
|
|
if(name == 'userlogin'){ // Post Data Info for normal Login
|
|
postData = {
|
|
username: email,
|
|
password: password,
|
|
sessionid: "STARTING",
|
|
};
|
|
}else{
|
|
postData = { // Post Data Info for family Login
|
|
username: email,
|
|
pin: password,
|
|
sessionid: "20067A92714",
|
|
login_mode: 1105,
|
|
action: 11025
|
|
};
|
|
}
|
|
|
|
userApi.logInUser(postData).then((res)=>{
|
|
if(res.status != 200 || res.data.internal_return < 0){
|
|
// setMsgError("Wrong, email/password");
|
|
setLoginError(true);
|
|
setLoginLoading(false);
|
|
return
|
|
}
|
|
localStorage.setItem("member_id", `${res.data.member_id}`);
|
|
localStorage.setItem("uid", `${res.data.uid}`);
|
|
localStorage.setItem("session_token", `${res.data.session}`);
|
|
// localStorage.setItem("session", `${res.data.session}`);
|
|
dispatch(updateUserDetails(res.data));
|
|
setTimeout(() => {
|
|
navigate("/", { replace: true });
|
|
setLoginLoading(false);
|
|
}, 2000);
|
|
}).catch(error => {
|
|
setMsgError("Unable to login, try again");
|
|
setLoginLoading(false);
|
|
}).finally(()=>{
|
|
setTimeout(() => {
|
|
setLoginError(false);
|
|
setMsgError(null);
|
|
setLoginLoading(false);
|
|
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
|
|
})
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<AuthLayout slogan="Welcome to WrenchBoard">
|
|
<div className="w-full">
|
|
<div className="mb-12">
|
|
<Link to="#">
|
|
<img
|
|
src={WrenchBoard}
|
|
alt="wrenchboard"
|
|
className="h-10 mx-auto"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
|
|
<div className="w-full">
|
|
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
|
{/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
|
|
Sign In to WrenchBoard
|
|
</h1> */}
|
|
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
|
New Here?{" "}
|
|
<Link
|
|
to="/signup"
|
|
className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
|
|
>
|
|
Create an Account
|
|
</Link>
|
|
</span>
|
|
</div>
|
|
|
|
{/* switch login component */}
|
|
<div className="flex justify-start items-end">
|
|
<button
|
|
name='user'
|
|
className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${loginCom.user && 'border-r-2 h-[45px]'}`}
|
|
onClick={handleLoginCom}
|
|
>Sign in
|
|
</button>
|
|
<button
|
|
name='family'
|
|
className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${loginCom.family && 'border-l-2 h-[45px]'}`}
|
|
onClick={handleLoginCom}
|
|
>Family
|
|
</button>
|
|
</div>
|
|
|
|
{/* END of switch login component */}
|
|
|
|
{/* for login component */}
|
|
{loginCom.user ?
|
|
//user login compoenent
|
|
<div className="p-2 input-area border-2 border-[#4687ba]">
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass='tracking-wider'
|
|
fieldClass="px-6"
|
|
value={email}
|
|
inputHandler={handleEmail}
|
|
placeholder="support@mermsemr.com"
|
|
label="Email"
|
|
name="email"
|
|
type="email"
|
|
iconName="message"
|
|
/>
|
|
</div>
|
|
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass='tracking-wider'
|
|
fieldClass="px-6"
|
|
value={password}
|
|
inputHandler={handlePassword}
|
|
placeholder="● ● ● ● ● ●"
|
|
label="Password"
|
|
name="password"
|
|
type="password"
|
|
iconName="password"
|
|
forgotPassword
|
|
/>
|
|
</div>
|
|
{loginError && (
|
|
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
|
|
Invalid username or password- Please{" "}
|
|
<Link to="/#" className="text-[#009ef7]">
|
|
reset your password
|
|
</Link>{" "}
|
|
or{" "}
|
|
<Link to="/signup" className="text-[#009ef7]">
|
|
create a new account
|
|
</Link>
|
|
</div>
|
|
)}
|
|
{msgError && (
|
|
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
|
|
{msgError}
|
|
</div>
|
|
)}
|
|
<div className="signin-area mb-3.5">
|
|
<div className="flex justify-center">
|
|
<button
|
|
name='userlogin'
|
|
onClick={doLogin}
|
|
type="button"
|
|
disabled={loginLoading}
|
|
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
|
|
>
|
|
{loginLoading ? (
|
|
<div className="signup btn-loader"></div>
|
|
) : (
|
|
<span>Continue</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
|
|
<BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
|
|
<BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
|
|
</div>
|
|
</div>
|
|
// END of user login compoenent
|
|
:
|
|
// family login compoenent
|
|
<div className="p-2 input-area border-2 border-[#4687ba]">
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass='tracking-wider'
|
|
fieldClass="px-6"
|
|
value={email}
|
|
inputHandler={handleEmail}
|
|
placeholder="support@mermsemr.com"
|
|
label="Username"
|
|
name="email"
|
|
type="email"
|
|
iconName="message"
|
|
/>
|
|
</div>
|
|
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass='tracking-wider'
|
|
fieldClass="px-6"
|
|
value={password}
|
|
inputHandler={handlePassword}
|
|
placeholder="● ● ● ● ● ●"
|
|
label="Pin"
|
|
name="password"
|
|
type="password"
|
|
iconName="password"
|
|
// forgotPassword
|
|
/>
|
|
</div>
|
|
{loginError && (
|
|
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
|
|
Invalid username or password{" "}
|
|
{/* <Link to="/#" className="text-[#009ef7]">
|
|
reset your password
|
|
</Link>{" "}
|
|
or{" "}
|
|
<Link to="/signup" className="text-[#009ef7]">
|
|
create a new account
|
|
</Link> */}
|
|
</div>
|
|
)}
|
|
{msgError && (
|
|
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
|
|
{msgError}
|
|
</div>
|
|
)}
|
|
<div className="signin-area mb-1.5">
|
|
<div className="flex justify-center">
|
|
<button
|
|
name='familylogin'
|
|
onClick={doLogin}
|
|
disabled={loginLoading}
|
|
type="button"
|
|
className={`btn-login rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
|
|
>
|
|
{loginLoading ? (
|
|
<div className="signup btn-loader"></div>
|
|
) : (
|
|
<span>Continue</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
// END of family login compoenent
|
|
}
|
|
{/* END of login component */}
|
|
|
|
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
|
|
This site is protected by hCaptcha and the our Privacy Policy
|
|
and Terms of Service apply.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthLayout>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const BrandBtn = ({ link, imgSrc, brand }) => {
|
|
|
|
const doGoogle = async ()=>{
|
|
alert('start google');
|
|
}
|
|
|
|
// onSuccess: (codeResponse) => setUser(codeResponse),
|
|
|
|
// const doGoogle = useGoogleLogin({
|
|
// onSuccess: (codeResponse) => console.log('Login onSuccess:', codeResponse),
|
|
// onError: (error) => console.log('Login Failed:', error)
|
|
// });
|
|
|
|
const doApple = async ()=>{
|
|
alert('start apple');
|
|
}
|
|
|
|
const doFacebook = async ()=>{
|
|
alert('start facebook');
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-center bottomMargin">
|
|
<a
|
|
// onClick={doGoogle}
|
|
href="#dd"
|
|
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer"
|
|
>
|
|
<img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
|
|
<span className="text-lg text-thin-light-gray font-normal text-[15px]">
|
|
Continue with {brand}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|