WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added family image

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-11-08 10:42:54 -08:00
parent 0c1db6b4b5
commit 7e926cc7bc
2 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/Login/index.jsx
+49 -40
View File
@@ -17,14 +17,14 @@ import { updateUserDetails } from "../../../store/UserDetails";
import ReCAPTCHA from "react-google-recaptcha"; import ReCAPTCHA from "react-google-recaptcha";
export default function Login() { export default function Login() {
// eslint-disable-next-line no-restricted-globals
const queryParams = new URLSearchParams(location?.search); const queryParams = new URLSearchParams(location?.search);
const sessionExpired = queryParams.get("sessionExpired") const sessionExpired = queryParams.get("sessionExpired");
const dispatch = useDispatch(); const dispatch = useDispatch();
const { state } = useLocation(); const { state } = useLocation();
const [validCaptcha, setValidCaptcha] = useState({show: false, valid:''}); // FOR CAPTCHA const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
let [loginType, setLoginType] = useState(""); let [loginType, setLoginType] = useState("");
@@ -115,7 +115,8 @@ export default function Login() {
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)); }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
return; return;
} }
if(name == "full" && !validCaptcha.valid && validCaptcha.show){ // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
// RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
setMsgError("Please Verify Captcha"); setMsgError("Please Verify Captcha");
setLoginLoading(false); setLoginLoading(false);
setTimeout(() => { setTimeout(() => {
@@ -136,12 +137,15 @@ export default function Login() {
// setMsgError("Wrong, email/password"); // setMsgError("Wrong, email/password");
setLoginError(true); setLoginError(true);
setLoginLoading(false); setLoginLoading(false);
setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
return; return;
} }
localStorage.setItem("member_id", `${res.data.member_id}`); localStorage.setItem("member_id", `${res.data.member_id}`);
localStorage.setItem("uid", `${res.data.uid}`); localStorage.setItem("uid", `${res.data.uid}`);
localStorage.setItem("session_token", `${res.data.session}`); localStorage.setItem("session_token", `${res.data.session}`);
if (name === "family") {
sessionStorage.setItem("family_uid", res.data?.family_uid);
}
// localStorage.setItem("session", `${res.data.session}`); // localStorage.setItem("session", `${res.data.session}`);
dispatch(updateUserDetails({ ...res.data })); dispatch(updateUserDetails({ ...res.data }));
setTimeout(() => { setTimeout(() => {
@@ -152,7 +156,7 @@ export default function Login() {
.catch((error) => { .catch((error) => {
setMsgError("Unable to login, try again"); setMsgError("Unable to login, try again");
setLoginLoading(false); setLoginLoading(false);
setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
}) })
.finally(() => { .finally(() => {
setTimeout(() => { setTimeout(() => {
@@ -163,11 +167,12 @@ export default function Login() {
}); });
}; };
function captchaChecker(value) { // FUNCTION TO VALIDATE CAPTCHA function captchaChecker(value) {
if(value){ // FUNCTION TO VALIDATE CAPTCHA
setValidCaptcha({show: true, valid:value}) if (value) {
}else{ setValidCaptcha({ show: true, valid: value });
setValidCaptcha({show: true, valid:''}) } else {
setValidCaptcha({ show: true, valid: "" });
} }
} }
@@ -245,31 +250,32 @@ export default function Login() {
</div> </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="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"> <div className="w-full">
{/* HIDES THIS IF USER SESSION HAS EXPIRED */} {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
{sessionExpired != 'true' && {sessionExpired != "true" && (
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7"> <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]"> {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
Sign In to WrenchBoard Sign In to WrenchBoard
</h1> */} </h1> */}
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]"> <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
New Here?{" "} New Here?{" "}
<Link <Link
to="/signup" to="/signup"
className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition" className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
> >
Create an Account Create an Account
</Link> </Link>
</span> </span>
</div> </div>
} )}
{/* SHOWS THIS IF USER SESSION HAS EXPIRED */} {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
{sessionExpired == 'true' && {sessionExpired == "true" && (
<div className="w-full p-1 mb-7"> <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> <p className="text-red-500 text-base text-center">
</div> Your session expired and will need to login again
} </p>
</div>
)}
{/* switch login component */} {/* switch login component */}
<div className="ml-7 flex justify-start items-center gap-3"> <div className="ml-7 flex justify-start items-center gap-3">
@@ -335,14 +341,16 @@ export default function Login() {
</div> </div>
{/* hCaptha clone for the time being */} {/* hCaptha clone for the time being */}
{validCaptcha.show && {validCaptcha.show && (
<div className="mb-5 flex justify-center w-full"> <div className="mb-5 flex justify-center w-full">
<ReCAPTCHA <ReCAPTCHA
sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY} sitekey={
onChange={captchaChecker} process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
}
onChange={captchaChecker}
/> />
</div> </div>
} )}
{loginError && ( {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]"> <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]">
@@ -499,7 +507,8 @@ export default function Login() {
{loginType == "full" && ( {loginType == "full" && (
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]"> <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. This site is protected by a Captcha. Our Privacy Policy and
Terms of Service apply.
</div> </div>
)} )}
</div> </div>
src/components/Partials/Header.jsx
+11 -3
View File
@@ -37,11 +37,17 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
const image = localStorage.getItem("session_token") const image = localStorage.getItem("session_token")
? `${userDetails.session_image_server}${localStorage.getItem( ? userDetails.account_type === "FAMILY"
"session_token" ? `${userDetails.session_image_server}${localStorage.getItem(
)}/profile/${userDetails.uid}` "session_token"
)}/family/${sessionStorage.getItem("family_uid")}`
: `${userDetails.session_image_server}${localStorage.getItem(
"session_token"
)}/profile/${userDetails.uid}`
: ""; : "";
// 9308RDR122
const handlerBalance = () => { const handlerBalance = () => {
setbalanceValue.toggle(); setbalanceValue.toggle();
if (notificationDropdown) { if (notificationDropdown) {
@@ -99,6 +105,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
let userEmail = email?.split("@")[0]; let userEmail = email?.split("@")[0];
const userProfileImage = image || DEFAULT_PROFILE_IMAGE; const userProfileImage = image || DEFAULT_PROFILE_IMAGE;
console.log(userDetails);
return ( return (
<> <>
<div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5"> <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">