Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
99d4301588 | ||
|
CHIEFSOFT\ameye
|
dbdc028ed4 | ||
|
CHIEFSOFT\ameye
|
c3a5a2fe34 | ||
 ameye
|
eed2e62f62 | ||
|
victorAnumudu
|
824f46fd9f | ||
|
victorAnumudu
|
ff5a73bec7 | ||
|
victorAnumudu
|
ad37885445 | ||
|
victorAnumudu
|
0c3425a97a | ||
|
victorAnumudu
|
92ca50e02f | ||
|
victorAnumudu
|
4eed8abac1 | ||
|
victorAnumudu
|
a6627555d9 | ||
|
victorAnumudu
|
e127c79df2 | ||
|
victorAnumudu
|
00278e32b6 | ||
|
victorAnumudu
|
255da58588 | ||
|
victorAnumudu
|
0464025eff | ||
|
victorAnumudu
|
c300d0d7f4 | ||
|
ameye
|
47ae14bc7a | ||
|
Ebube
|
185ca14750 | ||
|
ameye
|
1ef92207fb | ||
|
ameye
|
0b8cf50088 | ||
|
Ebube
|
57be599bb5 |
@@ -95,4 +95,7 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
|
||||
|
||||
#FAMILY MEMBER MINIMUM AGE
|
||||
REACT_APP_FAMILY_MINIMUM_AGE=4
|
||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||
|
||||
#CHANGE LOGIN LAYOUT
|
||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||
+4
-1
@@ -63,4 +63,7 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
|
||||
|
||||
#FAMILY MEMBER MINIMUM AGE
|
||||
REACT_APP_FAMILY_MINIMUM_AGE=4
|
||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||
|
||||
#CHANGE LOGIN LAYOUT
|
||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||
@@ -70,3 +70,6 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
|
||||
#FAMILY MEMBER MINIMUM AGE
|
||||
REACT_APP_FAMILY_MINIMUM_AGE=4
|
||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||
|
||||
#CHANGE LOGIN LAYOUT
|
||||
REACT_APP_NEW_LOGIN_LAYOUT=0
|
||||
|
||||
+32
-18
@@ -8,9 +8,11 @@ import AcitveBidsPage from "./views/AcitveBidsPage";
|
||||
import AuthProfilePage from "./views/AuthProfilePage";
|
||||
import CollectionItemPage from "./views/CollectionItemPage";
|
||||
import ForgotPasswordPages from "./views/ForgotPasswordPages";
|
||||
import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
|
||||
import HistoryPage from "./views/HistoryPage";
|
||||
import HomePages from "./views/HomePages";
|
||||
import LoginPage from "./views/LoginPage";
|
||||
import LoginPageTwo from "./views/LoginPageTwo";
|
||||
import MarketPlacePage from "./views/MarketPlacePage";
|
||||
import MyWalletPage from "./views/MyWalletPage";
|
||||
import SavedPage from "./views/SavedPage";
|
||||
@@ -18,11 +20,15 @@ import SellPage from "./views/SellPage";
|
||||
import SettingsPage from "./views/SettingsPage";
|
||||
import ShopDetailsPage from "./views/ShopDetailsPage";
|
||||
import SignupPage from "./views/SignupPage";
|
||||
import SignupPageTwo from "./views/SignupPageTwo";
|
||||
import UpdatePasswordPages from "./views/UpdatePasswordPages";
|
||||
import UpdatePasswordPagesTwo from "./views/UpdatePasswordPagesTwo";
|
||||
import UploadProductPage from "./views/UploadProductPage";
|
||||
import UserProfilePage from "./views/UserProfilePage";
|
||||
import VerifyYouPages from "./views/VerifyYouPages";
|
||||
import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
|
||||
import VerifyPasswordPages from "./views/VerifyPasswordPages";
|
||||
import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
|
||||
import RemindersPage from './views/RemindersPage';
|
||||
import TrackingPage from "./views/TrackingPage";
|
||||
import CalendarPage from "./views/CalendarPage";
|
||||
@@ -31,6 +37,7 @@ import MyTaskPage from "./views/MyTaskPage";
|
||||
import MyJobsPage from "./views/MyJobsPage";
|
||||
import ReferralPage from "./views/ReferralPage";
|
||||
import VerifyLinkPages from "./views/VerifyLinkPages";
|
||||
import VerifyLinkPagesTwo from "./views/VerifyLinkPagesTwo";
|
||||
import MyActiveJobsPage from "./views/MyActiveJobsPage";
|
||||
import FamilyAccPage from "./views/FamilyAccPage";
|
||||
import StartJob from "./components/MyJobs/StartJob";
|
||||
@@ -60,27 +67,34 @@ export default function Routers() {
|
||||
<ScrollToTop>
|
||||
<Routes>
|
||||
{/* guest routes */}
|
||||
<Route exact path="/login" element={<LoginPage />} />
|
||||
<Route exact path="/eoffer" element={<LoginPage />} />
|
||||
<Route exact path="/invite" element={<LoginPage />} />
|
||||
|
||||
<Route exact path="/signup" element={<SignupPage />} />
|
||||
{process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ?
|
||||
<>
|
||||
<Route exact path="/login" element={<LoginPageTwo />} />
|
||||
<Route exact path="/signup" element={<SignupPageTwo />} />
|
||||
<Route exact path="/forgot-password" element={<ForgotPasswordPagesTwo />} />
|
||||
<Route exact path="/update-password" element={<UpdatePasswordPagesTwo />} />
|
||||
<Route path="/vemail" element={<VerifyLinkPagesTwo />} />
|
||||
<Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
|
||||
<Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
|
||||
<Route exact path="/eoffer" element={<LoginPageTwo />} />
|
||||
<Route exact path="/invite" element={<LoginPageTwo />} />
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<Route exact path="/login" element={<LoginPage />} />
|
||||
<Route exact path="/signup" element={<SignupPage />} />
|
||||
<Route exact path="/forgot-password" element={<ForgotPasswordPages />} />
|
||||
<Route exact path="/update-password" element={<UpdatePasswordPages />} />
|
||||
<Route path="/vemail" element={<VerifyLinkPages />} />
|
||||
<Route path="/complereset" element={<VerifyPasswordPages />} />
|
||||
<Route exact path="/outmessage" element={<VerifyYouPages />} />
|
||||
<Route exact path="/eoffer" element={<LoginPage />} />
|
||||
<Route exact path="/invite" element={<LoginPage />} />
|
||||
</>
|
||||
}
|
||||
<Route exact path="/login/auth" element={<AuthRedirect />} />
|
||||
<Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
|
||||
<Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
|
||||
<Route
|
||||
exact
|
||||
path="/forgot-password"
|
||||
element={<ForgotPasswordPages />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/update-password"
|
||||
element={<UpdatePasswordPages />}
|
||||
/>
|
||||
<Route path="/vemail" element={<VerifyLinkPages />} />
|
||||
<Route path="/complereset" element={<VerifyPasswordPages />} />
|
||||
<Route exact path="/outmessage" element={<VerifyYouPages />} />
|
||||
<Route exact path="/lnd/*" element={<LndPage />} />
|
||||
<Route exact path="/app" element={<AppDownloadPage />} />
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 28" viewBox="0 0 32 28" id="List"><circle cx="2" cy="2" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M8 0h24v4H8z" class="color4e4e50 svgShape"></path><circle cx="10" cy="10" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 8h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="10" cy="26" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 24h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="18" cy="18" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M24 16h8v4h-8z" class="color4e4e50 svgShape"></path></svg>
|
||||
|
After Width: | Height: | Size: 743 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Group" x="0" y="0" version="1.1" viewBox="0 0 52 52" xml:space="preserve"><path d="M26.003 13.05c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43zM11.293 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.43 1.99-4.43 4.44 0 2.44 1.98 4.43 4.43 4.43z" fill="#4687ba" class="color000000 svgShape"></path><path d="M49.493 41.93a10.091 10.091 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.58 6.392 6.392 0 0 1-4.371-1.737.975.975 0 0 0-.158-.258l-9.184-9.903V22.1h4.344c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.09 10.09 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.579 6.43 6.43 0 0 1-5.144-2.58 10.085 10.085 0 0 0-3.645 3.74c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h4.346v6.624c-.01.022-.016.044-.025.066l-9.22 9.941a.978.978 0 0 0-.22.42 6.378 6.378 0 0 1-4.242 1.62 6.417 6.417 0 0 1-5.14-2.584 10.086 10.086 0 0 0-3.65 3.743c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.03 10.03 0 0 0-2.134-2.612l8.01-8.636 8.055 8.685c-.815.73-1.53 1.58-2.08 2.563-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95z" fill="#4687ba" class="color000000 svgShape"></path><path d="M40.713 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43z" fill="#4687ba" class="color000000 svgShape"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" id="List"><switch><g fill="#767fad" class="color000000 svgShape"><g fill="#4687ba" class="color0ac5ab svgShape"><path d="M20 0H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM56 0H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM20 36H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8zM56 36H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8z" fill="#767fad" class="color000000 svgShape"></path></g></g></switch></svg>
|
||||
|
After Width: | Height: | Size: 527 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" id="List"><path d="M0 0v3h3V0H0zm4 0v1h4V0H4zm0 2v1h3V2H4zM0 4v3h3V4H0zm4 0v1h4V4H4zm0 2v1h3V6H4z" fill="#b22b7d" class="color000000 svgShape"></path></svg>
|
||||
|
After Width: | Height: | Size: 214 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="List"><path d="M9 3a6 6 0 1 0 6 6A6 6 0 0 0 9 3zM9 13a4 4 0 1 1 4-4A4 4 0 0 1 9 13zM17 9H28a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM17 13h6a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM9 17a6 6 0 1 0 6 6A6 6 0 0 0 9 17zM9 27a4 4 0 1 1 4-4A4 4 0 0 1 9 27zM28 21H17a1 1 0 0 0 0 2H28a1 1 0 0 0 0-2zM23 25H17a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2z" fill="#4687ba" class="color000000 svgShape"></path></svg>
|
||||
|
After Width: | Height: | Size: 437 B |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
@@ -0,0 +1,62 @@
|
||||
import React, { lazy } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { localImgLoad } from "../../lib";
|
||||
|
||||
export default function LoginLayout({ slogan, children }) {
|
||||
const bgImg = localImgLoad('images/left-wrenchboard.jpg')
|
||||
|
||||
return (
|
||||
<div className={`layout-wrapper login`}>
|
||||
<div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
|
||||
<div
|
||||
className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`}
|
||||
style={{backgroundImage: `url(${bgImg})`}}
|
||||
>
|
||||
</div>
|
||||
<div className="p-5 sm:p-7 flex place-content-center">
|
||||
<div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
|
||||
<div className="w-full flex justify-center items-center">
|
||||
{children && children}
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-center items-center px-10">
|
||||
<div className="w-full flex justify-center items-center pt-5">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href="https://www.wrenchboard.com/about-us"
|
||||
className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="https://www.wrenchboard.com/service"
|
||||
className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
<a
|
||||
href="https://www.wrenchboard.com/contact"
|
||||
className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
|
||||
<span className="">© {new Date().getFullYear()} -</span>
|
||||
<Link to="/" className="text-[#009ef7] ml-1">
|
||||
WrenchBoard
|
||||
</Link>{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import AuthLayout from "../AuthLayout2";
|
||||
import EmailValidator from "../../../lib/EmailValidator";
|
||||
import ForgetPwdResponse from "../ForgetPwdResponse";
|
||||
|
||||
import ReCAPTCHA from "react-google-recaptcha";
|
||||
|
||||
export default function ForgotPassword() {
|
||||
const [checked, setValue] = useState(false);
|
||||
const [resetLoading, setResetLoading] = useState(false);
|
||||
// email
|
||||
const [email, setMail] = useState("");
|
||||
const [msgError, setMsgError] = useState("");
|
||||
const [msgSuccess, setMsgSuccess] = useState(null);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const userApi = new usersService();
|
||||
|
||||
const handleEmail = (e) => {
|
||||
setMail(e?.target.value);
|
||||
};
|
||||
|
||||
// const humanChecker = () => {
|
||||
// setValue(!checked);
|
||||
// };
|
||||
|
||||
function humanChecker(value) {
|
||||
// console.log("Captcha value:", value);
|
||||
if(value){
|
||||
setValue(true)
|
||||
}else{
|
||||
setValue(false)
|
||||
}
|
||||
}
|
||||
|
||||
const resetHandler = async () => {
|
||||
if (email == "") {
|
||||
setMsgError("An email is required");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
if (!checked) {
|
||||
setMsgError("Check if you are human");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
|
||||
if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
|
||||
setMsgError("Invalid Email");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
|
||||
if (email !== "" && checked) {
|
||||
const reqData = { email, action:11013 };
|
||||
setResetLoading(true);
|
||||
try {
|
||||
const res = await userApi.StartResetPassword(reqData);
|
||||
if (res.status === 200) {
|
||||
setMsgSuccess(true);
|
||||
setMail("");
|
||||
setValue(false);
|
||||
setResetLoading(false);
|
||||
}else{
|
||||
setMsgSuccess(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setMsgSuccess(false);
|
||||
setResetLoading(false);
|
||||
setMail("");
|
||||
setMsgError("An error occurred");
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_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="flex place-content-center">
|
||||
<div className="w-11/12 sm:max-w-[400px]">
|
||||
{msgSuccess == null ?
|
||||
<>
|
||||
<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]">
|
||||
Forget Password
|
||||
</h1>
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
Enter your email to reset your password.
|
||||
</span>
|
||||
</div>
|
||||
<div className="input-area">
|
||||
<div className="input-item mb-10">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
placeholder="Your Username/Email"
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={email}
|
||||
inputHandler={handleEmail}
|
||||
iconName="message"
|
||||
/>
|
||||
</div>
|
||||
{/* hCaptha clone for the time being */}
|
||||
<div className="mb-10 flex justify-center w-full">
|
||||
<ReCAPTCHA
|
||||
sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
|
||||
onChange={humanChecker}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="mb-10">
|
||||
<div className="w-[303px] h-[78px] mx-auto overflow-hidden">
|
||||
<div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
|
||||
|
||||
<div className="h-full relative inline-block">
|
||||
<div className="relative table top-0 h-full">
|
||||
<div className="table-cell align-middle">
|
||||
<div className="relative w-[30px] h-[30px] mx-[15px]">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="human-checkbox"
|
||||
id="human-checkbox"
|
||||
className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
|
||||
checked={checked}
|
||||
onChange={humanChecker}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full relative inline-block w-[170px]">
|
||||
<label className="relative table top-0 h-full">
|
||||
<label className="table-cell align-middle">
|
||||
<label
|
||||
className="text-800 text-sm"
|
||||
htmlFor="human-checkbox"
|
||||
>
|
||||
I am human
|
||||
</label>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<div className="h-full relative inline-block w-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
</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 items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/login")}
|
||||
className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetHandler}
|
||||
className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
|
||||
>
|
||||
{resetLoading ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Send Code</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<ForgetPwdResponse
|
||||
title={'Forget Password'}
|
||||
message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
|
||||
type={msgSuccess}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,591 @@
|
||||
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-4.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 "../AuthLayout2";
|
||||
// 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,
|
||||
action: 11025,
|
||||
};
|
||||
} else if (name == "family") {
|
||||
// Post Data Info for family Login
|
||||
postData = {
|
||||
username: email,
|
||||
pin: password,
|
||||
sessionid: "20067A92714",
|
||||
login_mode: 1105,
|
||||
action: 11025,
|
||||
};
|
||||
} 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-10/12 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="flex place-content-center">
|
||||
<div className="w-11/12 sm:max-w-[530px]">
|
||||
{/* 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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,404 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import AuthLayout from "../AuthLayout2";
|
||||
|
||||
export default function SignUp() {
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
const queryParams = new URLSearchParams(location?.search);
|
||||
const country = queryParams.get("cnt")?.toUpperCase();
|
||||
|
||||
const {pathname} = useLocation()
|
||||
const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
|
||||
|
||||
const [signUpLoading, setSignUpLoading] = useState(false);
|
||||
const [checked, setValue] = useState(false);
|
||||
// for the catch error
|
||||
const [msgError, setMsgError] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [countries, setCountries] = useState({loading:true, data:[]});
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
country: country? country : "",
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value } = event?.target;
|
||||
setFormData({ ...formData, [name]: value });
|
||||
};
|
||||
|
||||
// To Show and Hide Password
|
||||
const togglePasswordVisibility = () => {
|
||||
setShowPassword(!showPassword);
|
||||
};
|
||||
|
||||
const rememberMe = () => {
|
||||
setValue(!checked);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
const userApi = new usersService();
|
||||
|
||||
// Get Country Api
|
||||
const getCountryList = useCallback(async () => {
|
||||
|
||||
try {
|
||||
const res = await userApi.getSignupCountryData();
|
||||
if (res.status === 200 && res.data.internal_return >= 0) {
|
||||
const { result_list } = await res.data;
|
||||
if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
|
||||
let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
|
||||
if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
|
||||
setFormData(prev => ({...prev, country: ''}))
|
||||
return setCountries({loading: false, data: result_list});
|
||||
}
|
||||
return setCountries({loading: false, data: cnt});
|
||||
}
|
||||
setCountries({loading: false, data:result_list});
|
||||
} else if (res.data.result !== 100) {
|
||||
setCountries({loading: false, data:[]});
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSignUp = async () => {
|
||||
let { country, first_name, last_name, email, password } = formData;
|
||||
try {
|
||||
if (
|
||||
email !== "" &&
|
||||
password !== "" &&
|
||||
first_name !== "" &&
|
||||
last_name !== "" &&
|
||||
country !== ""
|
||||
) {
|
||||
//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) {
|
||||
setMsgError("Invalid Email");
|
||||
return setTimeout(() => {
|
||||
setMsgError("");
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
//checks if terms and condition is checked
|
||||
if (!checked) {
|
||||
setMsgError("Terms and condition required");
|
||||
return setTimeout(() => {
|
||||
setMsgError("");
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
setSignUpLoading(true);
|
||||
const reqData = {
|
||||
country: country,
|
||||
firstname: first_name,
|
||||
lastname: last_name,
|
||||
email: email,
|
||||
username: email,
|
||||
password: password,
|
||||
terms: 1,
|
||||
news: 1,
|
||||
};
|
||||
|
||||
const res = await userApi.CreateUser(reqData);
|
||||
|
||||
if (res.status === 200) {
|
||||
const { data } = res;
|
||||
if (data && data.acc === "DULPICATE") {
|
||||
setMsgError(
|
||||
"Unable to use this username. Please try another username."
|
||||
);
|
||||
setSignUpLoading(false);
|
||||
}
|
||||
if (data && data.status === "1") {
|
||||
setTimeout(() => {
|
||||
navigate("/outmessage", { replace: true });
|
||||
setSignUpLoading(false);
|
||||
}, 2000);
|
||||
}
|
||||
} else {
|
||||
setSignUpLoading(false);
|
||||
setMsgError("An error occurred");
|
||||
}
|
||||
} else {
|
||||
setMsgError("Please fill in fields");
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getCountryList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthLayout slogan="Welcome to WrenchBoard">
|
||||
<div className="w-full">
|
||||
<div className="mb-5">
|
||||
<Link to={currentPath}>
|
||||
<img
|
||||
src={WrenchBoard}
|
||||
alt="wrenchboard"
|
||||
className="h-10 mx-auto"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex place-content-center">
|
||||
<div className="w-11/12 sm:max-w-[530px]">
|
||||
<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]">
|
||||
Create Account
|
||||
</h1>
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
to="/login"
|
||||
className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
|
||||
>
|
||||
Sign in here
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
|
||||
<span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
|
||||
OR
|
||||
</span>
|
||||
<div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
|
||||
</div>
|
||||
<div className="input-area">
|
||||
<SelectOption
|
||||
label="Country"
|
||||
data={countries}
|
||||
name="country"
|
||||
value={formData.country}
|
||||
inputHandler={handleInputChange}
|
||||
disable={country && countries?.data?.length <= 1 ? true : false}
|
||||
/>
|
||||
<div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
|
||||
<div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
placeholder="Firstname"
|
||||
label="First Name"
|
||||
name="first_name"
|
||||
type="text"
|
||||
value={formData.first_name}
|
||||
inputHandler={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item flex-1">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
placeholder="Lastname"
|
||||
label="Last Name"
|
||||
name="last_name"
|
||||
type="text"
|
||||
value={formData.last_name}
|
||||
inputHandler={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-item mb-4">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
placeholder="support@mermsemr.com"
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
inputHandler={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item mb-4">
|
||||
<InputCom
|
||||
fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
onClick={togglePasswordVisibility}
|
||||
passIcon={showPassword ? "show-password" : "hide-password"}
|
||||
value={formData.password}
|
||||
inputHandler={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
{msgError && (
|
||||
<div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
|
||||
{msgError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="forgot-password-area flex justify-between items-center mb-6">
|
||||
<div className="remember-checkbox flex items-center space-x-2.5 group cursor-pointer">
|
||||
<button
|
||||
onClick={rememberMe}
|
||||
type="button"
|
||||
className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
|
||||
checked && "text-white bg-[#4687ba]"
|
||||
}`}
|
||||
>
|
||||
{checked && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<span
|
||||
onClick={rememberMe}
|
||||
className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
|
||||
>
|
||||
I agree with all
|
||||
<Link
|
||||
href="#"
|
||||
className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
|
||||
>
|
||||
terms and condition
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Forgot Password */}
|
||||
{/* <div className="forgot-password-area flex justify-between items-center mb-6">
|
||||
<div className="remember-checkbox flex items-center space-x-2.5">
|
||||
<button
|
||||
onClick={rememberMe}
|
||||
type="button"
|
||||
className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
|
||||
>
|
||||
{checked && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<span
|
||||
onClick={rememberMe}
|
||||
className="cursor-default text-dark-gray dark:text-white text-[15px]"
|
||||
>
|
||||
I agree with all
|
||||
<Link
|
||||
href="#"
|
||||
className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
|
||||
>
|
||||
terms and condition
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="signin-area mb-1">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
disabled={countries.loading}
|
||||
type="button"
|
||||
onClick={handleSignUp}
|
||||
className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
|
||||
>
|
||||
{signUpLoading ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Sign Up</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const SelectOption = ({
|
||||
label,
|
||||
name,
|
||||
inputHandler,
|
||||
value,
|
||||
data, // passing the data from parent
|
||||
disable
|
||||
}) => {
|
||||
return (
|
||||
<div className="input-com mb-7">
|
||||
<div className="flex items-center justify-between">
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
|
||||
htmlFor={name}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
disabled={disable}
|
||||
name={name}
|
||||
id={name}
|
||||
className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
|
||||
onChange={inputHandler}
|
||||
value={value}
|
||||
>
|
||||
{data?.data?.length > 1 ?
|
||||
<>
|
||||
<option value={""}>Select your Country</option>
|
||||
{data?.data?.map((item) => (
|
||||
<option value={item.code} key={item.uid}>
|
||||
{item.country}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
data?.data?.length == 1 ?
|
||||
data?.data?.map((item) => (
|
||||
<option value={item.code} key={item.uid}>
|
||||
{item.country}
|
||||
</option>
|
||||
))
|
||||
:
|
||||
data?.data?.length < 1 && data.loading ?
|
||||
<option value=''>
|
||||
Loading...
|
||||
</option>
|
||||
:
|
||||
<option value=''>
|
||||
No Country Found!
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,81 @@
|
||||
import React, { useState } from "react";
|
||||
import titleShape from "../../../assets/images/shape/title-shape-two.svg";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import AuthLayout from "../AuthLayout2";
|
||||
import ThankYou from "../ThankYou";
|
||||
|
||||
export default function UpdatePassword() {
|
||||
const [updated, setValue] = useState(false);
|
||||
const [message, setMessage] = useState(false);
|
||||
const updatePassword = () => {
|
||||
setValue(!updated);
|
||||
setTimeout(() => {
|
||||
setMessage(!message);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthLayout slogan="Welcome to myFit">
|
||||
{updated === false ? (
|
||||
<div className="flex place-content-center">
|
||||
<div className="w-11/12 sm:max-w-[600px]">
|
||||
<div className="title-area relative flex flex-col justify-center items-center mb-7">
|
||||
<h1 className="sm:text-5xl text-4xl font-bold leading-[74px] text-dark-gray dark:text-white">
|
||||
Update Password
|
||||
</h1>
|
||||
{/* w-[341px] absolute top-14 left-12 */}
|
||||
<div className="shape sm:w-[341px] w-[270px] -mt-5 sm:-mt-1 ml-5">
|
||||
<img src={titleShape} alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-area">
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
placeholder="*********"
|
||||
label="Old Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
placeholder="*********"
|
||||
label="New Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
placeholder="*********"
|
||||
label="Re-enter Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
/>
|
||||
</div>
|
||||
<div className="signin-area mb-3.5">
|
||||
<button
|
||||
onClick={updatePassword}
|
||||
type="button"
|
||||
className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
|
||||
)}
|
||||
</AuthLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||
import debounce from "../../../hooks/debounce";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import AuthLayout from "../AuthLayout2";
|
||||
|
||||
export default function VerifyLink() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [msgError, setMsgError] = useState("");
|
||||
const [linkLoader, setLinkLoader] = useState(false);
|
||||
const [pageLoader, setPageLoader] = useState(true);
|
||||
const [linkSuccess, setLinkSuccess] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const queryParams = new URLSearchParams(location?.search);
|
||||
const token = queryParams.get("vlnk");
|
||||
const userApi = new usersService();
|
||||
|
||||
// email
|
||||
const handleEmail = (e) => {
|
||||
setEmail(e.target.value);
|
||||
};
|
||||
// password
|
||||
const handlePassword = (e) => {
|
||||
setPassword(e.target.value);
|
||||
};
|
||||
|
||||
// if verification is okay. set a complete signup form
|
||||
const completeSignup = async () => {
|
||||
try {
|
||||
if (email !== "" && password !== "") {
|
||||
setLinkLoader(true);
|
||||
var postData = {
|
||||
username: email,
|
||||
password: password,
|
||||
login_mode: 100,
|
||||
sessionid: "STARTER-NOTREAL",
|
||||
verify_link: token,
|
||||
action: 11012,
|
||||
};
|
||||
const res = await userApi?.CompleteSignUp(postData);
|
||||
|
||||
if (res.status === 200) {
|
||||
const { data } = res;
|
||||
if (
|
||||
data?.status > 0 &&
|
||||
data?.internal_return == 100 &&
|
||||
data?.session != ""
|
||||
) {
|
||||
localStorage.setItem("email", `${data?.email}`);
|
||||
localStorage.setItem("member_id", `${data?.member_id}`);
|
||||
localStorage.setItem("session_token", `${data?.session}`);
|
||||
localStorage.setItem("session", `${data?.session}`);
|
||||
localStorage.setItem("uid", data?.uid)
|
||||
|
||||
|
||||
navigate("/", { replace: true });
|
||||
setLinkLoader(false);
|
||||
} else {
|
||||
setLinkLoader(false);
|
||||
setMsgError("Invalid Link or Password Combination");
|
||||
}
|
||||
} else {
|
||||
setLinkLoader(false);
|
||||
setLinkSuccess(false);
|
||||
setMsgError("An error occurred");
|
||||
}
|
||||
} else {
|
||||
setMsgError("Please fill in fields");
|
||||
}
|
||||
} catch (error) {
|
||||
setLinkLoader(false);
|
||||
setLinkSuccess(false);
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
|
||||
}
|
||||
};
|
||||
|
||||
// for verifying the incoming verification link and render the correct component
|
||||
const verifyEmail = useCallback(async (code) => {
|
||||
try {
|
||||
const verifyRes = await userApi.verifyEmail(code);
|
||||
if (verifyRes.status === 200) {
|
||||
let { data } = verifyRes;
|
||||
console.log('TESTING VERIFY',data)
|
||||
if (
|
||||
data &&
|
||||
data.internal_return >= 0 &&
|
||||
data.status == 0 &&
|
||||
data.pending_id != '' &&
|
||||
data.pending_uid != '' &&
|
||||
data.username != '' &&
|
||||
data.status_text === "Link Verified"
|
||||
) {
|
||||
setPageLoader(false);
|
||||
} else {
|
||||
setPageLoader(false);
|
||||
setLinkSuccess(false);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
setPageLoader(false);
|
||||
setLinkSuccess(false);
|
||||
throw new Error(error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// delay verify requests by 10000ms
|
||||
const debouncedEmail = debounce(verifyEmail, 1000);
|
||||
|
||||
useEffect(() => {
|
||||
debouncedEmail(token);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthLayout slogan="Welcome to WrenchBoard">
|
||||
{pageLoader ? (
|
||||
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<div className="mb-12">
|
||||
<Link to="#">
|
||||
<img
|
||||
src={WrenchBoard}
|
||||
alt="wrenchboard"
|
||||
className="h-10 mx-auto"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex place-content-center">
|
||||
<div className="w-11/12 sm:max-w-[500px]">
|
||||
<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]">
|
||||
{linkSuccess
|
||||
? "Sign In to WrenchBoard"
|
||||
: "Invalid verification link"}
|
||||
</h1>
|
||||
</div>
|
||||
{/* If the verification was a success */}
|
||||
{linkSuccess ? (
|
||||
<SuccessfulComponent
|
||||
email={email}
|
||||
password={password}
|
||||
handleEmail={handleEmail}
|
||||
handlePassword={handlePassword}
|
||||
onSubmit={completeSignup}
|
||||
msgErr={msgError}
|
||||
loader={linkLoader}
|
||||
/>
|
||||
) : (
|
||||
<ErrorComponent onClick={() => navigate("/login")} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</AuthLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const SuccessfulComponent = ({
|
||||
onSubmit,
|
||||
password,
|
||||
handlePassword,
|
||||
email,
|
||||
handleEmail,
|
||||
msgErr,
|
||||
loader,
|
||||
}) => (
|
||||
<div className="input-area">
|
||||
{/* INPUT */}
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
value={email}
|
||||
inputHandler={handleEmail}
|
||||
placeholder="support@mermsemr.com"
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
/>
|
||||
</div>
|
||||
{msgErr && (
|
||||
<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]">
|
||||
{msgErr}
|
||||
</div>
|
||||
)}
|
||||
<div className="signin-area mb-3.5">
|
||||
<button
|
||||
onClick={onSubmit}
|
||||
type="button"
|
||||
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]`}
|
||||
>
|
||||
{loader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Continue</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ErrorComponent = ({ onClick }) => (
|
||||
<div className="input-area">
|
||||
<div className="my-5">
|
||||
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
|
||||
This error occurs because you have already verified this link or the
|
||||
link has expired. Try login or reset password. If none worked, try to
|
||||
create the account from the start.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="signin-area flex justify-center mb-3.5">
|
||||
<button
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
|
||||
>
|
||||
<span>Return Home</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,269 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import AuthLayout from "../AuthLayout2";
|
||||
import ForgetPwdResponse from "../ForgetPwdResponse";
|
||||
import PasswordValidator from "../../../lib/PasswordValidator";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
|
||||
const VerifyPassword = () => {
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
|
||||
const [msgError, setMsgError] = useState("");
|
||||
const [linkLoader, setLinkLoader] = useState(false);
|
||||
const [linkSuccess, setLinkSuccess] = useState(null);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const queryParams = new URLSearchParams(location?.search);
|
||||
const token = queryParams.get("passlink");
|
||||
const userApi = new usersService();
|
||||
|
||||
// To Show and Hide Password
|
||||
const togglePasswordVisibility = () => {
|
||||
setShowPassword(!showPassword);
|
||||
};
|
||||
|
||||
// Password
|
||||
const handlePassword = (e) => {
|
||||
let { name, value } = e?.target;
|
||||
if (name == "password") setPassword(value);
|
||||
if (name == "confirm_password") setConfirmPassword(value);
|
||||
};
|
||||
|
||||
const completeReset = async () => {
|
||||
if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
|
||||
setMsgError("Please fill in fields");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
|
||||
setMsgError("Passwords does not match");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
|
||||
setMsgError("Password must be upto six characters");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
|
||||
setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
try {
|
||||
setLinkLoader(true);
|
||||
var reqData = {
|
||||
sessionid: "DUMMY-CANNOT_BE_EMPTY",
|
||||
reset_link: token,
|
||||
newpass: password,
|
||||
m_uid: requestStatus.data?.m_uid || '',
|
||||
reset_uid: requestStatus.data?.reset_uid || '',
|
||||
step: 300,
|
||||
action: 730,
|
||||
};
|
||||
const res = await userApi?.CompleteResetPassword(reqData);
|
||||
|
||||
if (res.status == 200) {
|
||||
const { data } = res;
|
||||
if (data?.internal_return >= 0) {
|
||||
// setTimeout(() => {
|
||||
// navigate("/login", { replace: true });
|
||||
// setLinkLoader(false);
|
||||
// }, 2000);
|
||||
setLinkSuccess(true);
|
||||
} else {
|
||||
setLinkLoader(false);
|
||||
setMsgError("An error occurred");
|
||||
setLinkSuccess(false);
|
||||
}
|
||||
} else {
|
||||
setLinkLoader(false);
|
||||
setLinkSuccess(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setLinkLoader(false);
|
||||
setLinkSuccess(false);
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
|
||||
}
|
||||
};
|
||||
|
||||
const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
|
||||
setRequestStatus({loading: true, status:false, data: []})
|
||||
var reqData = {
|
||||
sessionid: "DUMMY-CANNOT_BE_EMPTY",
|
||||
reset_link: token,
|
||||
step: 200,
|
||||
action: 730,
|
||||
};
|
||||
userApi.CompleteResetPassword(reqData).then(res => {
|
||||
if(res.status != 200 || res.data.internal_return < 0){
|
||||
return setRequestStatus({loading: false, status:false, data: []})
|
||||
}
|
||||
setRequestStatus({loading: false, status:true, data: res.data})
|
||||
}).catch(error => {
|
||||
setRequestStatus({loading: false, status:false, data: []})
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
// little checker for the validity of the token
|
||||
if (token==null || token?.length != 64) {
|
||||
return setRequestStatus({loading: false, status:false, data: []});
|
||||
}
|
||||
verifyResetPwd()
|
||||
},[])
|
||||
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="flex place-content-center">
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner color='sky-blue' size='16' height='h-300px' />
|
||||
:
|
||||
!requestStatus.loading && requestStatus.status ?
|
||||
<div className="w-11/12 sm:max-w-[500px]">
|
||||
{linkSuccess == null ?
|
||||
<>
|
||||
<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]">
|
||||
Password Reset
|
||||
</h1>
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
Enter a new password to reset
|
||||
</span>
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
We'll send an email to confirm reset
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
|
||||
Must include a special, numeric, uppercase and lowercase character
|
||||
</p>
|
||||
</div>
|
||||
<SuccessfulComponent
|
||||
password={password}
|
||||
confirmPassword={confirmPassword}
|
||||
handlePassword={handlePassword}
|
||||
onSubmit={completeReset}
|
||||
msgErr={msgError}
|
||||
loader={linkLoader}
|
||||
showPassword={showPassword}
|
||||
onClick={togglePasswordVisibility}
|
||||
navigateHandler={() => navigate("/login")}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
<ForgetPwdResponse
|
||||
title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
|
||||
message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
|
||||
}
|
||||
type={linkSuccess}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
:
|
||||
<div className="w-11/12 sm:max-w-[500px] title-area flex flex-col justify-center items-center relative text-center mb-7">
|
||||
<ForgetPwdResponse
|
||||
title={'Forget Password'}
|
||||
message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
|
||||
type={requestStatus.status}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerifyPassword;
|
||||
|
||||
const SuccessfulComponent = ({
|
||||
onSubmit,
|
||||
navigateHandler,
|
||||
showPassword,
|
||||
onClick,
|
||||
password,
|
||||
confirmPassword,
|
||||
handlePassword,
|
||||
msgErr,
|
||||
loader,
|
||||
}) => (
|
||||
<div className="input-area">
|
||||
{/* INPUT */}
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
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={onClick}
|
||||
passIcon={showPassword ? "show-password" : "hide-password"}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
|
||||
value={confirmPassword}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Confirm Password"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{msgErr && (
|
||||
<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]">
|
||||
{msgErr}
|
||||
</div>
|
||||
)}
|
||||
<div className="signin-area mb-3.5">
|
||||
<button
|
||||
onClick={onSubmit}
|
||||
type="button"
|
||||
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]`}
|
||||
>
|
||||
{loader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Continue</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="signin-area mb-3.5">
|
||||
<button
|
||||
onClick={navigateHandler}
|
||||
type="button"
|
||||
className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
|
||||
>
|
||||
<span>Return Home</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import AuthLayout from "../AuthLayout2";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||
|
||||
export default function VerifyYou() {
|
||||
const navigate = useNavigate();
|
||||
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="flex place-content-center">
|
||||
<div className="w-11/12 sm:max-w-[500px]">
|
||||
<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]">
|
||||
Let's verify your email now
|
||||
</h1>
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
Check your email.
|
||||
</span>
|
||||
</div>
|
||||
<div className="input-area">
|
||||
<div className="mb-5">
|
||||
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
|
||||
<b>Verify Email.</b> Help us secure your WrenchBoard account
|
||||
by verifying your email registration address. Verification
|
||||
will let you access all of WrenchBoard's features.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
|
||||
If you do not receive the confirmation message within a few
|
||||
minutes of signing up, please check your Junk E-mail folder
|
||||
just in case the confirmation email got delivered there
|
||||
instead of your inbox. If so, select the confirmation
|
||||
message and click Not Junk, which will allow future messages
|
||||
to get through.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="signin-area flex justify-center mb-3.5">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
type="button"
|
||||
className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
|
||||
>
|
||||
<span>Return Home</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -560,6 +560,24 @@ export default function Icons({ name }) {
|
||||
src={localImgLoad("images/icons/family-pin.svg")}
|
||||
alt="family-pin"
|
||||
/>
|
||||
) : name === "pending-job" ? (
|
||||
<img
|
||||
className="w-[19px] h-[19px]"
|
||||
src={localImgLoad("images/icons/job_pending.svg")}
|
||||
alt="Pending Job"
|
||||
/>
|
||||
) : name === "active-job" ? (
|
||||
<img
|
||||
className="w-[17px] h-[17px]"
|
||||
src={localImgLoad("images/icons/job_active.svg")}
|
||||
alt="Active Job"
|
||||
/>
|
||||
) : name === "job-list" ? (
|
||||
<img
|
||||
className="w-[17px] h-[17px]"
|
||||
src={localImgLoad("images/icons/job_list.svg")}
|
||||
alt="Job List"
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
@@ -190,16 +190,16 @@ export default function MobileSidebar({
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
{[
|
||||
{ name: "List", path: "/myjobs", iconName: "people-two" },
|
||||
{ name: "List", path: "/myjobs", iconName: "job-list" },
|
||||
{
|
||||
name: "Pending",
|
||||
path: "/my-pending-jobs",
|
||||
iconName: "people-two",
|
||||
iconName: "pending-job",
|
||||
},
|
||||
{
|
||||
name: "Active",
|
||||
path: "/my-active-jobs",
|
||||
iconName: "people-two",
|
||||
iconName: "active-job",
|
||||
},
|
||||
].map(({ name, path, iconName }, idx) => (
|
||||
<ListItem
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { NavLink } from "react-router-dom";
|
||||
//import SideStatistics from "./SideStatistics";
|
||||
import { localImgLoad } from "../../lib";
|
||||
|
||||
export default function RightSideBar({myJobList}) {
|
||||
const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
|
||||
@@ -169,24 +170,8 @@ export default function RightSideBar({myJobList}) {
|
||||
<div className="platform-list">
|
||||
<div className="px-8 item flex space-x-3 items-center mb-4">
|
||||
{/* image */}
|
||||
<div className="w-8 h-8 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
id="history"
|
||||
>
|
||||
<g data-name="14">
|
||||
<circle cx="9" cy="14" r="7" fill="#ffd54f"></circle>
|
||||
<path
|
||||
fill="#ef6c00"
|
||||
d="M21 9H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zM21 5H3A1 1 0 0 1 3 3H21a1 1 0 0 1 0 2zM21 13H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 17H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 21H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"
|
||||
></path>
|
||||
<path
|
||||
fill="#ff8f00"
|
||||
d="M10,10a1,1,0,0,0-2,0v3.59L6.29,15.29a1,1,0,1,0,1.41,1.41l2-2A1,1,0,0,0,10,14Z"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div className="w-8 h-8 p-[4px] rounded-full">
|
||||
<img src={localImgLoad('images/icons/job_active.svg')} className="w-full h-full" alt='Active Task' />
|
||||
</div>
|
||||
{/* name */}
|
||||
<div>
|
||||
@@ -196,123 +181,48 @@ export default function RightSideBar({myJobList}) {
|
||||
</div>
|
||||
{/* action */}
|
||||
</div>
|
||||
{/* {userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<>
|
||||
</>
|
||||
)} */}
|
||||
<div className="px-8 item flex space-x-3 items-center mb-4">
|
||||
{/* image */}
|
||||
<div className="w-8 h-8 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
id="add-user"
|
||||
>
|
||||
<path
|
||||
fill="#9bcb5b"
|
||||
d="M12 13.4c-2 0-3.7-1.6-3.7-3.6s1.6-3.7 3.6-3.7 3.7 1.6 3.7 3.6-1.6 3.6-3.6 3.7zm0-6.2c-1.4 0-2.6 1.1-2.6 2.6 0 1.4 1.1 2.6 2.6 2.6s2.6-1.1 2.6-2.6c-.1-1.5-1.2-2.6-2.6-2.6z"
|
||||
></path>
|
||||
<path
|
||||
fill="#9bcb5b"
|
||||
d="M16.6 17.9c-.3 0-.5-.2-.6-.5 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 .3-.3.5-.6.5-.2 0-.4-.2-.5-.5 0-2.8 2.3-5.1 5.1-5.1s5.1 2.3 5.1 5.1c0 .3-.2.5-.5.5z"
|
||||
></path>
|
||||
<path
|
||||
fill="#0376bc"
|
||||
d="M12 23.7C5.5 23.7.3 18.4.3 12 .3 5.5 5.6.3 12 .3c2.6 0 5.1.9 7.2 2.5.2.2.2.6 0 .8-.2.2-.4.2-.7.1-1.9-1.4-4.1-2.2-6.5-2.2C6.2 1.4 1.4 6.2 1.4 12S6.2 22.6 12 22.6 22.6 17.8 22.6 12c0-2.4-.8-4.6-2.2-6.5-.2-.3-.1-.6.2-.8.2-.1.5-.1.7.1 1.6 2 2.5 4.6 2.4 7.2 0 6.4-5.3 11.7-11.7 11.7z"
|
||||
></path>
|
||||
<circle cx="20.2" cy="20.3" r="2.4" fill="#fff"></circle>
|
||||
<path
|
||||
fill="#9bcb5b"
|
||||
d="M18 18.1c.6-.6 1.4-.9 2.2-.9.8 0 1.6.3 2.2.9s1 1.4.9 2.2c0 .8-.3 1.6-.9 2.2s-1.4 1-2.2.9c-.8 0-1.6-.3-2.2-.9s-1-1.4-.9-2.2c-.1-.8.3-1.7.9-2.2zm3.8 2.5V20h-1.3v-1.3h-.6V20h-1.3v.6h1.3v1.3h.6v-1.3h1.3z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
{/* name */}
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-base font-medium">
|
||||
<NavLink to="/my-review-jobs">Review Pending</NavLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 item flex space-x-3 items-center mb-4">
|
||||
{/* image */}
|
||||
<div className="w-8 h-8 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 48 48"
|
||||
id="InternationalUser"
|
||||
>
|
||||
<path
|
||||
fill="#e6e7f9"
|
||||
d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
|
||||
className="colorc1e5ff svgShape"
|
||||
></path>
|
||||
<path
|
||||
fill="#ff6699"
|
||||
d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
|
||||
className="colorff99b0 svgShape"
|
||||
></path>
|
||||
<path
|
||||
fill="#998da0"
|
||||
d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
|
||||
className="colorffd499 svgShape"
|
||||
></path>
|
||||
<path
|
||||
fill="#e6e7f9"
|
||||
d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
|
||||
className="colorc1e5ff svgShape"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
{/* name */}
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-base font-medium">
|
||||
<NavLink to="/my-pastdue-jobs">Past Due</NavLink>
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-8 item flex space-x-3 items-center mb-4">
|
||||
{/* image */}
|
||||
<div className="w-8 h-8 p-[4px] rounded-full">
|
||||
<img src={localImgLoad('images/icons/job_pending.svg')} className="w-full h-full" alt='Review Task' />
|
||||
</div>
|
||||
|
||||
{/* Line */}
|
||||
<div className="my-4 mx-auto w-10/12 h-[2px] bg-slate-500 dark:bg-white rounded-full"></div>
|
||||
|
||||
<div className="px-8 item flex space-x-3 items-center mb-4">
|
||||
{/* image */}
|
||||
<div className="w-8 h-8 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 48 48"
|
||||
id="InternationalUser"
|
||||
>
|
||||
<path
|
||||
fill="#e6e7f9"
|
||||
d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
|
||||
className="colorc1e5ff svgShape"
|
||||
></path>
|
||||
<path
|
||||
fill="#ff6699"
|
||||
d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
|
||||
className="colorff99b0 svgShape"
|
||||
></path>
|
||||
<path
|
||||
fill="#998da0"
|
||||
d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
|
||||
className="colorffd499 svgShape"
|
||||
></path>
|
||||
<path
|
||||
fill="#e6e7f9"
|
||||
d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
|
||||
className="colorc1e5ff svgShape"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
{/* name */}
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-base font-medium">
|
||||
<NavLink to="/job-groups">Job Groups</NavLink>
|
||||
</p>
|
||||
</div>
|
||||
{/* name */}
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-base font-medium">
|
||||
<NavLink to="/my-review-jobs">Review Pending</NavLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 item flex space-x-3 items-center mb-4">
|
||||
{/* image */}
|
||||
<div className="w-8 h-8 p-[4px] rounded-full">
|
||||
<img src={localImgLoad('images/icons/job_past_due.svg')} className="w-full h-full" alt='Past Due Task' />
|
||||
</div>
|
||||
{/* name */}
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-base font-medium">
|
||||
<NavLink to="/my-pastdue-jobs">Past Due</NavLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Line */}
|
||||
<div className="my-4 mx-auto w-10/12 h-[2px] bg-slate-500 dark:bg-white rounded-full"></div>
|
||||
|
||||
<div className="px-8 item flex space-x-3 items-center mb-4">
|
||||
{/* image */}
|
||||
<div className="w-8 h-8 p-[4px] rounded-full">
|
||||
<img src={localImgLoad('images/icons/job_group.svg')} className="w-full h-full" alt='Job Groups' />
|
||||
</div>
|
||||
{/* name */}
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-base font-medium">
|
||||
<NavLink to="/job-groups">Job Groups</NavLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -215,17 +215,17 @@ export default function Sidebar({
|
||||
{
|
||||
name: "List",
|
||||
path: "/myjobs",
|
||||
iconName: "people-two",
|
||||
iconName: "job-list",
|
||||
},
|
||||
{
|
||||
name: "Pending",
|
||||
path: "/my-pending-jobs",
|
||||
iconName: "people-two",
|
||||
iconName: "pending-job",
|
||||
},
|
||||
{
|
||||
name: "Active",
|
||||
path: "/my-active-jobs",
|
||||
iconName: "people-two",
|
||||
iconName: "active-job",
|
||||
},
|
||||
].map(({ name, path, iconName }, idx) => (
|
||||
<ListItem
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
import GetMyPageLoad from "./getMyPageLoad";
|
||||
|
||||
|
||||
const LoadedPage = ({reloader}) => {
|
||||
const { loading, data, error } = GetMyPageLoad(reloader);
|
||||
|
||||
return (
|
||||
<div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
|
||||
{loading ? (
|
||||
<>
|
||||
<h1 className="text-xl font-bold tracking-wide">...</h1>
|
||||
<p>...</p>
|
||||
</>
|
||||
) : error ? (
|
||||
<>
|
||||
<h1 className="text-xl font-bold tracking-wide">Unable to load</h1>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="text-xl font-bold tracking-wide">
|
||||
{!data.intro ? "Introduction" : data.intro}
|
||||
</h1>
|
||||
<p>{!data.description ? "Brief Details" : data.description}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoadedPage;
|
||||
@@ -1,13 +1,19 @@
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
const UpdateButton = ({ onClick, loading }) => (
|
||||
const UpdateButton = ({ onClick, loading, msg }) => (
|
||||
<button
|
||||
type="submit"
|
||||
onClick={onClick}
|
||||
disabled={loading}
|
||||
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
|
||||
>
|
||||
{loading ? <LoadingSpinner size="6" color="sky-blue" /> : "Update"}
|
||||
{loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : msg !== "" ? (
|
||||
msg
|
||||
) : (
|
||||
"Update"
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import InputCom from "../Helpers/Inputs/InputCom/index";
|
||||
import UpdateButton from "./UpdateButton";
|
||||
|
||||
const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
|
||||
const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
|
||||
<div className="ml-16 my-2 flex flex-col gap-3">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
@@ -33,7 +33,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end mb-2">
|
||||
<UpdateButton onClick={onSubmit} loading={loading} />
|
||||
<UpdateButton onClick={onSubmit} loading={loading} msg={msg} />
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
|
||||
const GetMyPageLoad = (reloader) => {
|
||||
const api = new usersService();
|
||||
|
||||
const [response, setResponse] = useState({
|
||||
loading: true,
|
||||
data: null,
|
||||
error: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await api.MyPageLoad();
|
||||
|
||||
setResponse({ loading: false, data: res.data, error: null });
|
||||
} catch (error) {
|
||||
setResponse({ loading: false, data: null, error: error.message });
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [reloader]);
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
export default GetMyPageLoad;
|
||||
@@ -1,27 +1,67 @@
|
||||
import React, { useState } from "react";
|
||||
import Layout from "../Partials/Layout";
|
||||
import usersService from "../../services/UsersService";
|
||||
import Layout from "../Partials/Layout";
|
||||
import LoadedPage from "./LoadedPage";
|
||||
import YourPageForm from "./YourPageForm";
|
||||
// import { updateYourPage } from "./updateYourPage";
|
||||
|
||||
const YourPage = () => {
|
||||
const [pageValues, setPageValues] = useState({
|
||||
intro: "",
|
||||
description: "",
|
||||
});
|
||||
const [pageValues, setPageValues] = useState(pageInitialValues);
|
||||
const [response, setResponse] = useState(responseInitialValues);
|
||||
const [reloader, setReloader] = useState(false);
|
||||
|
||||
const [response, setResponse] = useState({
|
||||
loading: false,
|
||||
data: {},
|
||||
error: "",
|
||||
msg: "",
|
||||
});
|
||||
|
||||
const handleChange = (event) => {
|
||||
let { name, value } = event.target;
|
||||
const handleChange = ({ target: { name, value } }) =>
|
||||
setPageValues((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const updateYourPageDetails = async () => {
|
||||
const updateYourPageDetails = updateYourPage(
|
||||
pageValues,
|
||||
setResponse,
|
||||
setPageValues,
|
||||
setReloader
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="notification-page w-full mb-10">
|
||||
<div className="notification-wrapper w-full">
|
||||
<div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[650px]">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
|
||||
My page
|
||||
</h1>
|
||||
<hr />
|
||||
<YourPageForm
|
||||
values={pageValues}
|
||||
onChange={handleChange}
|
||||
onSubmit={updateYourPageDetails}
|
||||
loading={response.loading}
|
||||
msg={response.msg}
|
||||
/>
|
||||
<LoadedPage reloader={reloader} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default YourPage;
|
||||
|
||||
const pageInitialValues = {
|
||||
intro: "",
|
||||
description: "",
|
||||
};
|
||||
|
||||
const responseInitialValues = {
|
||||
loading: false,
|
||||
data: {},
|
||||
error: "",
|
||||
msg: "",
|
||||
};
|
||||
|
||||
function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
|
||||
return async () => {
|
||||
if (!pageValues.intro || !pageValues.description) return;
|
||||
|
||||
try {
|
||||
setResponse({ loading: true, error: "", msg: "" });
|
||||
|
||||
@@ -32,14 +72,19 @@ const YourPage = () => {
|
||||
setResponse({
|
||||
loading: false,
|
||||
data: res.data,
|
||||
msg: "Page updated successfully",
|
||||
msg: "Update Complete",
|
||||
});
|
||||
|
||||
setReloader((prev) => !prev);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
setResponse({ msg: "" });
|
||||
// Clear form after successful update
|
||||
setPageValues({ intro: "", description: "" });
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
} catch (error) {
|
||||
setResponse({
|
||||
return setResponse({
|
||||
loading: false,
|
||||
data: {},
|
||||
error: "Error updating page",
|
||||
@@ -47,27 +92,4 @@ const YourPage = () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="notification-page w-full mb-10">
|
||||
<div className="notification-wrapper w-full">
|
||||
<div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px]">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
|
||||
My page
|
||||
</h1>
|
||||
<hr />
|
||||
<YourPageForm
|
||||
values={pageValues}
|
||||
onChange={handleChange}
|
||||
onSubmit={updateYourPageDetails}
|
||||
loading={response.loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default YourPage;
|
||||
}
|
||||
|
||||
@@ -208,12 +208,6 @@ const EditJobPopOut = ({
|
||||
}
|
||||
};
|
||||
|
||||
// Check if the user is using iOS
|
||||
const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream;
|
||||
|
||||
// Check if the user is using Windows
|
||||
const isWindows = /Windows/.test(navigator.userAgent);
|
||||
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
|
||||
+16
-1
@@ -180,7 +180,7 @@ html {
|
||||
|
||||
.primary-home {
|
||||
/*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */
|
||||
background-image: url("./assets/images/left-myft.jpg");
|
||||
background-image: url("./assets/images/left-wrenchboard.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@@ -955,6 +955,21 @@ TODO: Responsive ===========================
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.auth-bg {
|
||||
border: none;
|
||||
/* box-shadow: inset 0 0 10px 20px #fff; */
|
||||
}
|
||||
|
||||
.auth-bg::after {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
transparent 50%,
|
||||
transparent 95%,
|
||||
rgb(255, 255, 255) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* For IE10 */
|
||||
.content-wrapper select::-ms-expand {
|
||||
display: none;
|
||||
|
||||
@@ -0,0 +1,269 @@
|
||||
export const apiConst = {
|
||||
LOGIN_MODE_GENERAL: 1100,
|
||||
LOGIN_MODE_FAMILY: 1105,
|
||||
ADD_JOB: 10010,
|
||||
UPDATE_JOB: 10020,
|
||||
PHP_API_OK: 0,
|
||||
PHP_LOGIN_OK: 100,
|
||||
PHP_CREATED_OK: 10,
|
||||
PHP_API_BAD_PARAM: -1,
|
||||
PHP_INVALID_SESSION: -9999,
|
||||
SESSION_TIMEOUT_LOGOUT:6000,
|
||||
MOBILE_LOGIN: 1101,
|
||||
SUPPORT_PHONE:'+234 (818)-3866434',
|
||||
UPLOAD_FILE_SIZE:1,
|
||||
OFFER_ACCEPT:100,
|
||||
OFFER_REJECT:333,
|
||||
OFFER_CANCEL:222,
|
||||
OFFER_EXPIRE:444,
|
||||
JOB_INTEREST_ACCEPT:100,
|
||||
JOB_INTEREST_REJECT:200,
|
||||
JOB_INTEREST_CANCEL:300,
|
||||
SMONEY_PROCC_MANUAL:100,
|
||||
SMONEY_PROCC_AUTO:200,
|
||||
SMONEY_PROCC_INTERSWITCH:300,
|
||||
ACCOUNT_AGREE_JOBS:100,
|
||||
ACCOUNT_AGREE_REFER:200,
|
||||
WRENCHBOARD_SESSION_CHECK: 299,
|
||||
WRENCHBOARD_USER_LOGIN: 300,
|
||||
WRENCHBOARD_USER_LOGOUT: 301,
|
||||
WRENCHBOARD_CREATE_ACCOUNT: 320,
|
||||
CONTRACT_CANCEL_CONTRACT: 7,
|
||||
CONTRACT_EXTEND_TIMELINE: 9,
|
||||
CONTRACT_NOTIFY_COMPLETE: 4,
|
||||
CONTRACT_REQUEST_CANCEL: 3,
|
||||
CONTRACT_REQUEST_TIMELINE: 2,
|
||||
CONTRACT_ACCEPT_COMPLETE: 5,
|
||||
CONTRACT_REJECT_COMPLETE: 1,
|
||||
WRENCHBOARD_SIGNUP_COUNTRY : 648,
|
||||
WRENCHBOARD_GET_MEDIA: 650,
|
||||
WRENCHBOARD_SAVE_MEDIA: 652,
|
||||
WRENCH_FILE_PROFILE: 100,
|
||||
WRENCH_FILE_MYFILE: 200,
|
||||
WRENCH_FILE_CONTRACTS: 300,
|
||||
WRENCH_FILE_FAMILY: 400,
|
||||
WRENCH_FILE_FAMILYBANNER: 410,
|
||||
WRENCH_FILE_JOB : 500,
|
||||
WRENCHBOARD_BKO_START: 10000,
|
||||
WRENCHBOARD_BKO_LOGIN: 10010,
|
||||
WRENCHBOARD_BKO_CREATEUSER: 10015,
|
||||
WRENCHBOARD_BKO_UPDATEUSER: 10020,
|
||||
WRENCHBOARD_BKO_END: 10999,
|
||||
WRENCHBOARD_ACCOUNT_START: 11000,
|
||||
WRENCHBOARD_PROFILE_RESETPASS: 11005,
|
||||
WRENCHBOARD_ACCOUNT_TESTEMAIL: 11001,
|
||||
WRENCHBOARD_ACCOUNT_PENDING: 11010,
|
||||
WRENCHBOARD_CREATE_MOBILEUSER: 11011,
|
||||
WRENCHBOARD_COMPLETE_MOBILEUSER: 11012,
|
||||
WRENCHBOARD_RESET_PASSWORD: 11013 ,
|
||||
WRENCHBOARD_ACCOUNT_JOBLIST:11014 ,
|
||||
WRENCHBOARD_VERIFY_PENDING_LINK: 11015,
|
||||
WRENCHBOARD_ACCOUNT_RESETPASS: 11016,
|
||||
WRENCHBOARD_ACCOUNT_SETPASSWD: 11017,
|
||||
WRENCHBOARD_DELETE_PENDING_LINK: 11018,
|
||||
WRENCHBOARD_RESEND_PENDING_LINK: 11019,
|
||||
LOGIN_GOOGLE: 990010,
|
||||
LOGIN_FACEBOOK: 990011,
|
||||
LOGIN_APPLE: 990012,
|
||||
WRENCHBOARD_ACCOUNT_DASHRECENT: 11206,
|
||||
WRENCHBOARD_ACCOUNT_QRLOGIN: 11022,
|
||||
WRENCHBOARD_ACCOUNT_CREATEACC: 11020,
|
||||
WRENCHBOARD_ACCOUNT_AUXSTART: 11023,
|
||||
WRENCHBOARD_ACCOUNT_AUXLOGIN: 11024,
|
||||
WRENCHBOARD_ACCOUNT_LOGIN: 11025,
|
||||
WRENCHBOARD_FACEBOOK_LOGIN: 11026,
|
||||
WRENCHBOARD_GOOGLE_LOGIN: 11027,
|
||||
WRENCHBOARD_APPLE_LOGIN: 11031,
|
||||
WRENCHBOARD_START_JOBLIST: 11028,
|
||||
WRENCHBOARD_ACCOUNT_DASHDATA: 11029,
|
||||
|
||||
WRENCHBOARD_SEND_CONTACTUS: 11030,
|
||||
WRENCHBOARD_ACCOUNT_SENDREFER: 11032,
|
||||
WRENCHBOARD_ACCOUNT_REFERLINK: 11033,
|
||||
WRENCHBOARD_SESSION_VERIFY: 11034,
|
||||
WRENCHBOARD_UPDATE_PROFILE: 11035,
|
||||
WRENCHBOARD_ACCOUNT_TERMS: 11036,
|
||||
WRENCHBOARD_ACCOUNT_MDESCRIPTION:11037,
|
||||
WRENCHBOARD_ACCOUNT_SAVESKILL: 11038,
|
||||
WRENCHBOARD_ACCOUNT_DELSKILL: 11039,
|
||||
WRENCHBOARD_LOG_MEMBER: 11040,
|
||||
WRENCHBOARD_DELETE_RECACC: 11041,
|
||||
WRENCHBOARD_SAVE_GALLERY: 11042,
|
||||
WRENCHBOARD_ACCOUNT_PENDJOB: 11043,
|
||||
WRENCHBOARD_ACCT_NOTIFICATIONS: 11046,
|
||||
WRENCHBOARD_ACCT_HELPITEMS: 11047,
|
||||
WRECNH_CREDIT_HOOKS_FULUTTER: 11045,
|
||||
|
||||
WRENCHBOARD_USER_GETBANKLIST: 11050,
|
||||
WRENCHBOARD_USER_SENDMONEY: 11051,
|
||||
WRENCHBOARD_USER_SENDJOBINT: 11052,
|
||||
|
||||
WRENCHBOARD_USER_STARTCREDIT: 11053,
|
||||
WRENCHBOARD_USER_ADNEWCC: 11054,
|
||||
WRENCHBOARD_USER_CARDLIST: 11055,
|
||||
WRENCHBOARD_USER_USESAVEDCC: 11056,
|
||||
WRENCHBOARD_USER_CARDREMV: 11057,
|
||||
|
||||
WRENCHBOARD_USER_SETTINGS: 11058,
|
||||
WRENCHBOARD_GETUSER_SETTINGS: 11059,
|
||||
|
||||
WRENCHBOARD_ACCOUNT_WALLETS: 11060,
|
||||
|
||||
WRENCHBOARD_ACCOUNT_TOPUP_RESULT: 11061,
|
||||
WRENCHBOARD_ACCOUNT_PREPARE_TOPUP: 11062,
|
||||
WRENCHBOARD_ACCOUNT_COMPLETE_TOPUP: 11063,
|
||||
WRENCHBOARD_ACCOUNT_REFFERHX: 11064,
|
||||
|
||||
WRENCHBOARD_ACCOUNT_PREFERENCES: 11065,
|
||||
|
||||
|
||||
WRENCHBOARD_ACCOUNT_MYPAGE: 11070,
|
||||
WRENCHBOARD_ACCOUNT_PAGEINTRO: 11071,
|
||||
|
||||
WRENCHBOARD_ACCOUNT_PRICE_COMBO: 11171,
|
||||
WRENCHBOARD_ACCOUNT_JOBPOST_DURATION: 11173,
|
||||
WRENCHBOARD_ACCOUNT_USER_RECIPEINT: 11175,
|
||||
WRENCHBOARD_ACCOUNT_ADD_RECIPEINT: 11176,
|
||||
WRENCHBOARD_ACCOUNT_ACCOUNT_TYPES: 11177,
|
||||
WRENCHBOARD_ACCOUNT_COUNTRY_COMBO: 11179,
|
||||
WRENCHBOARD_ACCOUNT_JOB_COUNTRY: 11181,
|
||||
WRENCHBOARD_ACCOUNT_COUNTRY_BANKS: 11183,
|
||||
|
||||
|
||||
WRENCHBOARD_ACCOUNT_HOMEBANNERS: 11200,
|
||||
WRENCHBOARD_ACCOUNT_PLAYGROUND: 11201,
|
||||
|
||||
WRENCHBOARD_ACCOUNT_RECENTS: 11202,
|
||||
WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,
|
||||
|
||||
WRENCHBOARD_PICTURE_PROFILE: 11300,
|
||||
WRENCHBOARD_PICTURE_JOB: 11303,
|
||||
WRENCHBOARD_PICTURE_FAMBANNER: 11304,
|
||||
WRENCHBOARD_PICTURE_FAMMEMBER: 11305,
|
||||
WRENCHBOARD_RESOURCE_MYFILES: 11307,
|
||||
WRENCHBOARD_MYFILES_LIST: 11309,
|
||||
|
||||
WRENCHBOARD_USER_DELETEACC: 11990,
|
||||
WRENCHBOARD_ACCOUNT_END: 11999,
|
||||
WRENCHBOARD_JOB_POSTAGREE: 13002,
|
||||
WRENCHBOARD_JOB_LISTJOBS: 13005,
|
||||
WRENCHBOARD_JOB_OFFERS: 13006,
|
||||
WRENCHBOARD_JOB_ACTIVE: 13008,
|
||||
WRENCHBOARD_JOB_USERACTIVE: 13009,
|
||||
|
||||
WRENCHBOARD_JOB_CREATEJOB: 13010 ,
|
||||
WRENCHBOARD_JOB_DELETEJOB: 13011 ,
|
||||
|
||||
WRENCHBOARD_JOB_GROUP_MEMBER: 13015,
|
||||
WRENCHBOARD_JOB_DELETE_GROUPMEMBER:13017,
|
||||
WRENCHBOARD_JOB_CREATE_GROUP: 13020,
|
||||
WRENCHBOARD_JOB_DELETE_GROUP:13023,
|
||||
|
||||
WRENCHBOARD_JOB_OFFER_INTLIST: 13024,
|
||||
WRENCHBOARD_JOB_OFFER_SYSTEM: 13025,
|
||||
WRENCHBOARD_JOB_OFFER_FAMILY: 13029,
|
||||
WRENCHBOARD_JOB_OFFER_INDVI:13030,
|
||||
WRENCHBOARD_JOB_OFFER_GROUP:13031,
|
||||
WRENCHBOARD_JOB_OFFER_PUBLIC:13032,
|
||||
WRENCHBOARD_JOB_SEND_INTEREST:13033,
|
||||
WRENCHBOARD_JOB_PROC_INTEREST:13034,
|
||||
WRENCHBOARD_JOB_OFFER_CONCLUDE:13035,
|
||||
WRENCHBOARD_JOB_SEND_QUESTION:13036,
|
||||
WRENCHBOARD_JOB_MRKTINT_QUEST:13037,
|
||||
WRENCHBOARD_JOB_REPLY_QUESTION:13038,
|
||||
WRENCHBOARD_JOB_INT_QUESTLST: 13039,
|
||||
WRENCHBOARD_JOB_WAITING_INT: 13040,
|
||||
|
||||
WRENCHBOARD_JOB_EXTEND_EXPIRE: 13041,
|
||||
WRENCHBOARD_JOB_RESEND_MESSAGE: 13042,
|
||||
WRENCHBOARD_JOB_CANCEL_OFFER: 13043,
|
||||
|
||||
WRENCHBOARD_JOB_JOBGROUPS: 13045,
|
||||
WRENCHBOARD_JOB_JOBGROUPADD: 13046,
|
||||
WRENCHBOARD_JOB_REPORT: 13047,
|
||||
|
||||
WRENCHBOARD_GROUP_START: 12000,
|
||||
WRENCHBOARD_GROUP_CREATEGROUP: 12010,
|
||||
WRENCHBOARD_GROUP_INVITEGROUP: 12015,
|
||||
WRENCHBOARD_GROUP_ACCEPTGROUP: 12020,
|
||||
WRENCHBOARD_CONTRACT_MESSAGE: 14010,
|
||||
WRENCHBOARD_CONTRACT_MSGLIST: 14011,
|
||||
WRENCHBOARD_CONTRACT_STATUS: 14015,
|
||||
WRENCHBOARD_MOBILE_OFFERSLIST: 15010,
|
||||
WRENCHBOARD_MOBILE_OFFERSRESP: 15012,
|
||||
WRENCHBOARD_MOBILE_ACTIVEJOB: 15020,
|
||||
WRENCHBOARD_MOBILE_LOADPROFILE: 15030,
|
||||
WRENCHBOARD_MOBILE_UPDATEPROFILE:15031,
|
||||
WRENCHBOARD_MOBILE_ACCOUNT: 15040,
|
||||
WRENCHBOARD_MOBILE_JOB_MESSAGE: 15044,
|
||||
WRENCHBOARD_MOBILE_MESSAGE: 15045,
|
||||
WRENCHBOARD_MOBILE_PAYMENTHX: 15046,
|
||||
WRENCHBOARD_MOBILE_TASKMESSAGE: 15047,
|
||||
WRENCHBOARD_MOBILE_SENDTASKMESSAGE: 15048,
|
||||
WRENCHBOARD_MOBILE_PURCHASEHX: 15049,
|
||||
WRENCHBOARD_FAMILY_LIST: 22010,
|
||||
WRENCHBOARD_FAMILY_TRANSFERHX: 22011,
|
||||
WRENCHBOARD_FAMILY_WALLET: 22012,
|
||||
WRENCHBOARD_FAMILY_TRANSFERSTART: 22013,
|
||||
WRENCHBOARD_FAMILY_TRANSFER: 22014,
|
||||
WRENCHBOARD_FAMILY_ADD: 22015,
|
||||
WRENCHBOARD_FAMILY_UPDATE: 22020,
|
||||
WRENCHBOARD_FAMILY_MANAGE: 22025,
|
||||
WRENCHBOARD_FAMILY_SGGESTSTATUS: 22026,
|
||||
WRENCHBOARD_FAMILY_SAMPLETASKS: 22027,
|
||||
WRENCHBOARD_FAMILY_SGGESTTASKS: 22028,
|
||||
WRENCHBOARD_FAMILY_SGGESTLIST: 22029,
|
||||
WRENCHBOARD_FAMILY_SGGESTWAITING: 22030,
|
||||
WRENCHBOARD_FAMILY_RELINVITE: 22031,
|
||||
WRENCHBOARD_SMONEY_ADDRECIPIENT: 33010,
|
||||
WRENCHBOARD_SMONEY_MEMBER: 33020,
|
||||
WRENCHBOARD_SMONEY_PROCFEE: 33025,
|
||||
WRENCHBOARD_SMONEY_BKOPROC: 33030 ,
|
||||
WRENCHBOARD_LOGIN_SHOP: 50501,
|
||||
WRENCHBOARD_LOGIN_ADMIN: 50502,
|
||||
WRENCHBOARD_LOGIN_MANAGER: 50503,
|
||||
WRENCHBOARD_SURVEY_DATA: 55000,
|
||||
WRENCHBOARD_ADD_SURVEY: 55050,
|
||||
WRENCHBOARD_LOAD_SURVEY: 55055,
|
||||
WRENCHBOARD_COMPLETE_SENDMONEY_INTERSW: 555,
|
||||
WRENCHBOARD_GETBILLER_INTERSW: 556,
|
||||
WRENCHBOARD_BILL_PAYMENT_ADVICE_INTERSW: 557,
|
||||
WRENCHBOARD_INTERSW_GETBILLER: 556,
|
||||
WRENCHBOARD_INTERSW_BILL_PAYMENT_ADVICE: 557,
|
||||
WRENCHBOARD_INTERSW_GETBILLERPAYMENTINTEMS: 558,
|
||||
WRENCHBOARD_INTERSW_GETBILLERCATEGORIES: 559,
|
||||
WRENCHBOARD_INTERSW_DO_TRANSFER: 560,
|
||||
WRENCHBOARD_INTERSW_QUERY_TRANSACTION: 561,
|
||||
WRENCHBOARD_ADD_MONEYRECIPIENT: 600,
|
||||
WRENCHBOARD_CREATE_USER_ACCOUNT: 700,
|
||||
WRENCHBOARD_USER_ACCOUNT_LOGIN: 710,
|
||||
WRENCHBOARD_START_PASSWORDRESET: 720,
|
||||
WRENCHBOARD_VERIFY_PASSWD_RESETLINK: 725,
|
||||
WRENCHBOARD_COMPLETE_PASSWORDRESET: 730,
|
||||
WRENCHBOARD_CARDS_GETCARDLIST: 40010,
|
||||
WRENCHBOARD_CARDS_UPDATECARD: 40015 ,
|
||||
WRENCHBOARD_COUPON_REDEEM: 85020,
|
||||
WRENCHBOARD_COUPON_MEMLIST: 85025,
|
||||
WRENCHBOARD_COUPON_PENDLIST: 85030,
|
||||
WRENCHBOARD_ADD_MOBILE_TOPUPNUM: 900,
|
||||
WRENCHBOARD_PROMO_CALL: 990,
|
||||
WRENCHBOARD_STOREFACE_GET_ACCOUNT_BALANCE: 891,
|
||||
WRENCHBOARD_LOG_ENTRY: 900000,
|
||||
WRENCHBOARD_CREDIT_TOPUP: 900010,
|
||||
WRENCHBOARD_TOPUP_ORDER: 900020,
|
||||
WRENCHBOARD_TOPUP_ORDER_PURCHASE: 900030,
|
||||
WRENCHBOARD_PAYPAL_IPNMSG: 900090,
|
||||
WRENCHBOARD_BULKTOPUP_ORDER: 700010,
|
||||
WRENCHBOARD_BULKTOPUP_ITEM: 700020,
|
||||
WRENCHBOARD_BULKTOPUP_ITEMUPDATE: 700030,
|
||||
WRENCHBOARD_BULKTOPUP_DELIVER: 700040,
|
||||
WRENCHBOARD_BALANCE_TOPUP_ORDER: 800020,
|
||||
WRENCHBOARD_BALANCE_TOPUP_PURCHASE: 800030,
|
||||
WRENCHBOARD_BALANCE_TOPUP_PAYMENT: 800040,
|
||||
VIRTUAL_AIRTOPUP: 70011,
|
||||
PAY_MODE_BALANCE: 0,
|
||||
PAY_MODE_CCARD: 1,
|
||||
PAY_MODE_BONUS: 9,
|
||||
APPROVED_BALANCE: 5,
|
||||
DISAPROVE_BALANCE: 3
|
||||
};
|
||||
@@ -15,6 +15,16 @@ class usersService {
|
||||
return this.postAuxEnd("/mypageintro", postData);
|
||||
}
|
||||
|
||||
MyPageLoad() {
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
action: 11070
|
||||
};
|
||||
return this.postAuxEnd("/mypageload", postData);
|
||||
}
|
||||
|
||||
CreateUser(reqData) {
|
||||
localStorage.setItem("session_token", ``);
|
||||
return this.postAuxEnd("/createuser", reqData);
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ForgotPassword from "../components/AuthPages/ForgotPassword/index2";
|
||||
|
||||
export default function ForgotPasswordPagesTwo() {
|
||||
return (
|
||||
<>
|
||||
<ForgotPassword />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import Login from "../components/AuthPages/Login/index2";
|
||||
|
||||
function LoginPageTwo() {
|
||||
return (
|
||||
<>
|
||||
<Login />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginPageTwo;
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import SignUp from "../components/AuthPages/SignUp/index2";
|
||||
|
||||
function SignupPageTwo() {
|
||||
return (
|
||||
<>
|
||||
<SignUp />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SignupPageTwo;
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import UpdatePassword from "../components/AuthPages/UpdatePassword/index2";
|
||||
|
||||
export default function UpdatePasswordPagesTwo() {
|
||||
return (
|
||||
<>
|
||||
<UpdatePassword />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import VerifyLink from "../components/AuthPages/VerifyLink/index2";
|
||||
|
||||
export default function VerifyLinkPagesTwo() {
|
||||
return <VerifyLink />;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import React from "react";
|
||||
import VerifyPassword from "../components/AuthPages/VerifyPassword/index2";
|
||||
|
||||
export default function VerifyPasswordPagesTwo() {
|
||||
return <VerifyPassword />;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import React from "react";
|
||||
import VerifyYou from "../components/AuthPages/VerifyYou/index2";
|
||||
|
||||
export default function VerifyYouPagesTwo() {
|
||||
return <VerifyYou />;
|
||||
}
|
||||
Reference in New Issue
Block a user