589 lines
23 KiB
React
589 lines
23 KiB
React
import React, { useEffect, useLayoutEffect, useState } from "react";
|
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
|
import linkedInLogo from "../../../assets/images/Linkedin.png";
|
|
import appleLogo from "../../../assets/images/apple-black.svg";
|
|
import facebookLogo from "../../../assets/images/facebook.svg";
|
|
import googleLogo from "../../../assets/images/google-logo.svg";
|
|
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
|
import usersService from "../../../services/UsersService";
|
|
import InputCom from "../../Helpers/Inputs/InputCom";
|
|
import AuthLayout from "../AuthLayout";
|
|
// import { GoogleOAuthProvider } from '@react-oauth/google';
|
|
import { useGoogleLogin } from "@react-oauth/google";
|
|
|
|
import { useDispatch } from "react-redux";
|
|
import { updateUserDetails } from "../../../store/UserDetails";
|
|
|
|
import ReCAPTCHA from "react-google-recaptcha";
|
|
|
|
export default function Login() {
|
|
// eslint-disable-next-line no-restricted-globals
|
|
const queryParams = new URLSearchParams(location?.search);
|
|
// const sessionExpired = queryParams.get("sessionExpired");
|
|
|
|
const dispatch = useDispatch();
|
|
const { state } = useLocation();
|
|
|
|
const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired"))
|
|
|
|
const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
|
|
|
|
let [loginType, setLoginType] = useState("");
|
|
|
|
const [loginLoading, setLoginLoading] = useState(false);
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
//login error state
|
|
const [loginError, setLoginError] = useState(false);
|
|
// for the catch error
|
|
const [msgError, setMsgError] = useState("");
|
|
|
|
// To Show and Hide Password
|
|
const togglePasswordVisibility = () => {
|
|
setShowPassword(!showPassword);
|
|
};
|
|
|
|
//FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
|
|
const handleLoginType = ({ target: { name } }) => {
|
|
setLoginType(name);
|
|
let currentDate = new Date();
|
|
let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
|
|
// Convert the expiration date to the appropriate format
|
|
let expirationDateString = expirationDate.toUTCString();
|
|
document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
|
|
};
|
|
|
|
// 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 } }) => {
|
|
setMsgError("");
|
|
setLoginError(false);
|
|
setLoginLoading(true);
|
|
let postData; // Post Data for API
|
|
if (!email || !password) {
|
|
setLoginLoading(false);
|
|
setMsgError("Please fill all the fields");
|
|
setTimeout(() => {
|
|
setMsgError("");
|
|
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
|
|
return;
|
|
}
|
|
|
|
if (name == "full") {
|
|
//checks if email is a valid email address
|
|
let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
|
|
if (regEx.test(email) == false) {
|
|
setLoginLoading(false);
|
|
setMsgError("Invalid Email");
|
|
return setTimeout(() => {
|
|
setMsgError("");
|
|
}, 3000);
|
|
}
|
|
// Post Data Info for normal Login
|
|
postData = {
|
|
username: email,
|
|
password: password,
|
|
sessionid: "STARTING",
|
|
login_mode: 1100,
|
|
};
|
|
} else if (name == "family") {
|
|
// Post Data Info for family Login
|
|
postData = {
|
|
username: email,
|
|
pin: password,
|
|
sessionid: "20067A92714",
|
|
login_mode: 1105,
|
|
};
|
|
} else {
|
|
setLoginLoading(false);
|
|
setMsgError("Invalid Login Type. Consider refreshing the page");
|
|
setTimeout(() => {
|
|
setMsgError("");
|
|
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
|
|
return;
|
|
}
|
|
if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
|
|
// RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
|
|
setMsgError("Please Verify Captcha");
|
|
setLoginLoading(false);
|
|
setTimeout(() => {
|
|
setMsgError("");
|
|
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
|
|
return;
|
|
}
|
|
userApi
|
|
.logInUser(postData)
|
|
.then((res) => {
|
|
if (
|
|
res.status != 200 ||
|
|
res.data.internal_return < 0 ||
|
|
!res.data.member_id ||
|
|
!res.data.uid ||
|
|
!res.data.session
|
|
) {
|
|
// setMsgError("Wrong, email/password");
|
|
setLoginError(true);
|
|
setLoginLoading(false);
|
|
setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
|
|
return;
|
|
}
|
|
localStorage.setItem("member_id", `${res.data.member_id}`);
|
|
localStorage.setItem("uid", `${res.data.uid}`);
|
|
localStorage.setItem("session_token", `${res.data.session}`);
|
|
if (name === "family") {
|
|
sessionStorage.setItem("family_uid", res.data?.family_uid);
|
|
}
|
|
// 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);
|
|
setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
setLoginError(false);
|
|
setMsgError("");
|
|
setLoginLoading(false);
|
|
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
|
|
});
|
|
};
|
|
|
|
function captchaChecker(value) {
|
|
// FUNCTION TO VALIDATE CAPTCHA
|
|
if (value) {
|
|
setValidCaptcha({ show: true, valid: value });
|
|
} else {
|
|
setValidCaptcha({ show: true, valid: "" });
|
|
}
|
|
}
|
|
|
|
const googleLogin = useGoogleLogin({
|
|
flow: "auth-code",
|
|
ux_mode: "redirect",
|
|
redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
|
|
onSuccess: async (codeResponse) => {
|
|
console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
|
|
},
|
|
onError: (errorResponse) => console.log(errorResponse),
|
|
});
|
|
|
|
// In order to update the selected login type whenever the component renders
|
|
// useEffect(() => {
|
|
// Clear the loginType cookie if the user switches to loginfull
|
|
// document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
|
// }, []);
|
|
|
|
useLayoutEffect(() => {
|
|
// checks the cookie in order to set the login type before components mounts
|
|
// if(document.cookie.includes("loginType=family")){
|
|
// setLoginType('family')
|
|
// }else if(document.cookie.includes("loginType=full")){
|
|
// setLoginType('full')
|
|
// }else{
|
|
// setLoginType('full')
|
|
// }
|
|
function readCookie(cname) {
|
|
// checks the cookie in order to set the login type before components mounts
|
|
let name = cname + "=";
|
|
let decoded_cookie = decodeURIComponent(document.cookie);
|
|
let carr = decoded_cookie.split(";");
|
|
for (let i = 0; i < carr.length; i++) {
|
|
let c = carr[i];
|
|
while (c.charAt(0) == " ") {
|
|
c = c.substring(1);
|
|
}
|
|
if (c.indexOf(name) == 0) {
|
|
return c.substring(name.length, c.length);
|
|
}
|
|
}
|
|
return "full";
|
|
}
|
|
let loginValue = readCookie("loginType");
|
|
setLoginType(loginValue);
|
|
|
|
if (state?.error) {
|
|
//check if the login path has an error state indicating any social handle login with error
|
|
setMsgError("Unexpected Error, Please try again soon.");
|
|
setTimeout(() => {
|
|
setMsgError("");
|
|
navigate("/login", { replace: true });
|
|
}, 4000);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setMail("");
|
|
setPassword("");
|
|
}, [loginType]);
|
|
|
|
|
|
// EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
|
|
useEffect(()=>{
|
|
let timer;
|
|
if(sessionExpired == "true"){
|
|
timer = setTimeout(()=>{
|
|
setSessionExpired(false)
|
|
},5000)
|
|
}
|
|
return () => {
|
|
clearTimeout(timer)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<AuthLayout slogan="Welcome to WrenchBoard">
|
|
<div className="w-full">
|
|
<div className="mb-5">
|
|
<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-[530px] 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">
|
|
{/* HIDES THIS IF USER SESSION HAS EXPIRED */}
|
|
{sessionExpired != "true" && (
|
|
<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>
|
|
)}
|
|
|
|
{/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
|
|
{sessionExpired == "true" && (
|
|
<div className="w-full p-1 mb-7">
|
|
<p className="text-red-500 text-base text-center">
|
|
Your session expired and will need to login again
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* switch login component */}
|
|
<div className="ml-7 flex justify-start items-center gap-3">
|
|
<button
|
|
name="full"
|
|
className={`login-type-btn px-4 py-1 rounded-t-2xl ${
|
|
loginType == "full"
|
|
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
|
: "bg-white text-[#000] border-t-[2px]"
|
|
}`}
|
|
onClick={handleLoginType}
|
|
>
|
|
Sign in
|
|
</button>
|
|
<button
|
|
name="family"
|
|
className={`login-type-btn px-4 py-1 rounded-t-2xl ${
|
|
loginType == "family"
|
|
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
|
: "bg-white text-[#000] border-t-[2px]"
|
|
}`}
|
|
onClick={handleLoginType}
|
|
>
|
|
Family Account
|
|
</button>
|
|
</div>
|
|
|
|
{/* END of switch login component */}
|
|
|
|
{/* for login component */}
|
|
{
|
|
loginType == "full" ? (
|
|
//user login component
|
|
<div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass="tracking-wider"
|
|
fieldClass="sm:px-6 px-2"
|
|
value={email}
|
|
inputHandler={handleEmail}
|
|
placeholder="Your Email"
|
|
label="Email"
|
|
name="email"
|
|
type="email"
|
|
iconName="message"
|
|
/>
|
|
</div>
|
|
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass="tracking-wider"
|
|
fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
|
|
value={password}
|
|
inputHandler={handlePassword}
|
|
placeholder="● ● ● ● ● ●"
|
|
label="Password"
|
|
name="password"
|
|
type={showPassword ? "text" : "password"}
|
|
onClick={togglePasswordVisibility}
|
|
passIcon={showPassword ? "password" : "password"}
|
|
forgotPassword
|
|
/>
|
|
</div>
|
|
|
|
{/* hCaptha clone for the time being */}
|
|
{validCaptcha.show && (
|
|
<div className="mb-5 flex justify-center w-full">
|
|
<ReCAPTCHA
|
|
sitekey={
|
|
process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
|
|
}
|
|
onChange={captchaChecker}
|
|
/>
|
|
</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="full"
|
|
onClick={doLogin}
|
|
type="button"
|
|
disabled={loginLoading}
|
|
className={`btn-login rounded-full 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>
|
|
) : (
|
|
<>Continue</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="sm:grid grid-cols-2 gap-1">
|
|
<div className="w-full">
|
|
<BrandBtn
|
|
link="#"
|
|
imgSrc={googleLogo}
|
|
brand="Google"
|
|
onClick={googleLogin}
|
|
/>
|
|
</div>
|
|
<div
|
|
className={`w-full ${
|
|
process.env.REACT_APP_APPLE_SOCIAL_LOGIN !== 0 &&
|
|
"hidden"
|
|
}`}
|
|
>
|
|
<BrandBtn
|
|
// link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
|
|
link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
|
|
imgSrc={appleLogo}
|
|
brand="Apple"
|
|
isAnchor={true}
|
|
// style={{visibility: 'hidden'}}
|
|
/>
|
|
</div>
|
|
<div className="w-full">
|
|
<BrandBtn
|
|
link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
|
|
imgSrc={facebookLogo}
|
|
brand="Facebook"
|
|
isAnchor={true}
|
|
/>
|
|
</div>
|
|
<div
|
|
className={`w-full ${
|
|
process.env.REACT_APP_LINKEDIN_SOCIAL_LOGIN !== 0 &&
|
|
"hidden"
|
|
}`}
|
|
>
|
|
<BrandBtn
|
|
// link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
|
|
imgSrc={linkedInLogo}
|
|
brand="LinkedIn"
|
|
isAnchor={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
// END of user login compoenent
|
|
// family login compoenent
|
|
<div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass="tracking-wider"
|
|
fieldClass="px-6"
|
|
value={email}
|
|
inputHandler={handleEmail}
|
|
placeholder="Account ID"
|
|
label="Username"
|
|
name="email"
|
|
type="email"
|
|
iconName="family-id"
|
|
/>
|
|
</div>
|
|
|
|
<div className="input-item mb-5">
|
|
<InputCom
|
|
labelClass="tracking-wider"
|
|
fieldClass="px-6"
|
|
value={password}
|
|
inputHandler={handlePassword}
|
|
placeholder="● ● ● ● ● ●"
|
|
label="Pin"
|
|
name="password"
|
|
type={showPassword ? "text" : "password"}
|
|
onClick={togglePasswordVisibility}
|
|
passIcon={showPassword ? "family-pin" : "family-pin"}
|
|
/>
|
|
</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="family"
|
|
onClick={doLogin}
|
|
disabled={loginLoading}
|
|
type="button"
|
|
className={`btn-login rounded-full 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>
|
|
) : (
|
|
<>Continue</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
// END of family login compoenent
|
|
}
|
|
{/* END of login component */}
|
|
|
|
{loginType == "full" && (
|
|
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
|
|
This site is protected by a Captcha. Our Privacy Policy and
|
|
Terms of Service apply.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthLayout>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const BrandBtn = ({
|
|
link,
|
|
imgSrc,
|
|
brand,
|
|
onClick,
|
|
isAnchor = false,
|
|
style = { visibility: "visible" },
|
|
}) => {
|
|
// 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="w-full flex justify-center bottomMargin" style={style}>
|
|
{isAnchor ? (
|
|
<a
|
|
href={link}
|
|
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>
|
|
) : (
|
|
<button
|
|
onClick={onClick}
|
|
// 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>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|