From 6c68c2361cf14f72d8515465938040f4823ca592 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 26 Apr 2023 13:09:57 +0100 Subject: [PATCH 1/2] adding verification --- src/Routers.jsx | 4 +- src/components/AuthPages/Login/index.jsx | 2 +- src/components/AuthPages/VerifyLink/index.jsx | 101 +++++++++ src/components/AuthPages/VerifyYou/index.jsx | 62 ++++-- src/services/UsersService.js | 198 +++++++++--------- src/views/SignupPage.jsx | 1 + src/views/VerifyLinkPages.jsx | 7 + 7 files changed, 260 insertions(+), 115 deletions(-) create mode 100644 src/components/AuthPages/VerifyLink/index.jsx create mode 100644 src/views/VerifyLinkPages.jsx diff --git a/src/Routers.jsx b/src/Routers.jsx index a19959c..14bcbd8 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -22,7 +22,7 @@ import UpdatePasswordPages from "./views/UpdatePasswordPages"; import UploadProductPage from "./views/UploadProductPage"; import UserProfilePage from "./views/UserProfilePage"; import VerifyYouPages from "./views/VerifyYouPages"; - +import VerifyLinkPages from "./views/VerifyLinkPages"; import RemindersPage from './views/RemindersPage'; import TrackingPage from "./views/TrackingPage"; import CalendarPage from "./views/CalendarPage"; @@ -49,6 +49,8 @@ export default function Routers() { element={} /> } /> + } /> + } /> {/* private route */} }> diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index 71f8c34..98d90f7 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -97,7 +97,7 @@ export default function Login() { wrenchboard -
+

{ + const userApi = new usersService() + + try { + const verifyRes = await userApi.verifyEmail(code) + console.log(verifyRes) + if(verifyRes.internal_return === 0) { + let {data} = verifyRes + + } else { + + } + } catch (error) { + console.log(error) + throw new Error(error) + } + } + + useEffect(() => { + verifyEmail(token) + }, []) + + console.log(token) + + return ( + <> + +
+
+
+

+ Sign In to WrenchBoard +

+
+
+ {/* INPUT */} +
+ +
+
+ +
+
+ + {/* + Continue + */} +
+
+
+
+ + + ) +} \ No newline at end of file diff --git a/src/components/AuthPages/VerifyYou/index.jsx b/src/components/AuthPages/VerifyYou/index.jsx index 66607f0..37b7878 100644 --- a/src/components/AuthPages/VerifyYou/index.jsx +++ b/src/components/AuthPages/VerifyYou/index.jsx @@ -9,33 +9,57 @@ export default function VerifyYou() { -
-
-
-

- Verification Code +
+
+
+

+ Sign In to WrenchBoard

-
- shape -
- + {/* INPUT */} +
+ +
+
+ +
-
-

- Dont’t have an aceount ? - - Please resend - -

+ */}
diff --git a/src/services/UsersService.js b/src/services/UsersService.js index f3910cf..757181a 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -6,12 +6,12 @@ class usersService { console.log("WRB Service Entry"); } - CreateUser(reqData){ + CreateUser(reqData) { localStorage.setItem("session_token", ``); return this.postAuxEnd("/createuser", reqData); } - getHomeDate(){ + getHomeDate() { var postData = { uuid: localStorage.getItem("uuid"), member_id: localStorage.getItem("member_id"), @@ -31,8 +31,8 @@ class usersService { }; return this.postAuxEnd("/getjobsdata", postData); } -// - getUserBankList(reqData){ + // + getUserBankList(reqData) { var postData = { uuid: localStorage.getItem("uuid"), member_id: localStorage.getItem("member_id"), @@ -40,7 +40,7 @@ class usersService { }; return this.postAuxEnd("/mybanklist", postData); } - getUserWallets(reqData){ + getUserWallets(reqData) { var postData = { uuid: localStorage.getItem("uuid"), member_id: localStorage.getItem("member_id"), @@ -48,113 +48,114 @@ class usersService { }; return this.postAuxEnd("/getwallets", postData); } - getApiGate(){ + getApiGate() { // localStorage.setItem("session_token", ``); return this.postAuxEnd("/apigate", null); } - getLoadProfile(){ + getLoadProfile() { var postData = { uuid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 + page: 0, + limit: 100 }; return this.postAuxEnd("/loadprofile", null); } - getOffersList(){ + getOffersList() { var postData = { uuid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 + page: 0, + limit: 100 }; return this.postAuxEnd("/offerslist", null); } - getPendingJob(){ - var postData = { - uuid: localStorage.getItem("uid"), - member_id: localStorage.getItem("member_id"), - sessionid: localStorage.getItem("session_token"), - page:0, - limit :100}; - return this.postAuxEnd("/pendingjob", postData); - } - - getActiveJobList(){ + getPendingJob() { var postData = { uuid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 + page: 0, + limit: 100 + }; + return this.postAuxEnd("/pendingjob", postData); + } + + getActiveJobList() { + var postData = { + uuid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + page: 0, + limit: 100 }; return this.postAuxEnd("/getjobsdata", postData); } - getMyJobList(){ + getMyJobList() { var postData = { uuid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 + page: 0, + limit: 100 }; return this.postAuxEnd("/myjobs", postData); } - getGetPendingJobs(){ + getGetPendingJobs() { var postData = { uuid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 + page: 0, + limit: 100 }; return this.postAuxEnd("/getpendingjobs", postData); } - getUsersCards(){ - var postData = { - uuid: localStorage.getItem("uid"), + getUsersCards() { + var postData = { + uuid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 - }; + page: 0, + limit: 100 + }; return this.postAuxEnd("/userscards", postData); } - getCouponPending(){ - var postData = { - uuid: localStorage.getItem("uid"), - member_id: localStorage.getItem("member_id"), - sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 - }; + getCouponPending() { + var postData = { + uuid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + page: 0, + limit: 100 + }; return this.postAuxEnd("/couponpending", postData); } // API FUNCTION TO GET COUPON HISTORY - getRecipient(){ + getRecipient() { var postData = { uid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:1, - limit :20, + page: 1, + limit: 20, action: 11175 }; return this.postAuxEnd("/recipients", postData); } // API FUNCTION TO GET SEND MONEY FEE - getSendMoneyFee(amount){ + getSendMoneyFee(amount) { var postData = { uid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), @@ -166,95 +167,95 @@ class usersService { } // API FUNCTION TO GET COUPON HISTORY - getCouponHx(){ + getCouponHx() { var postData = { uid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:1, - limit :20, + page: 1, + limit: 20, action: 85025 }; return this.postAuxEnd("/couponhx", postData); } - getPurchaseHx(){ + getPurchaseHx() { var postData = { uid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:1, - limit :20, + page: 1, + limit: 20, action: 15049 }; return this.postAuxEnd("/purchasehx", postData); } // API FUNCTION TO GET PAYMENT HISTORY - getPaymentHx(){ + getPaymentHx() { var postData = { uid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), - page:1, - limit :20, + page: 1, + limit: 20, action: 15046 }; return this.postAuxEnd("/paymenthx", postData); } - + //END POINT CALL FOR REFERRAL HISTORY - getReferralHx(){ + getReferralHx() { var postData = { - uid: localStorage.getItem("uid"), - member_id: localStorage.getItem("member_id"), - sessionid: localStorage.getItem("session_token"), - offset: 1, - limit :100, - action: 11064 + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + offset: 1, + limit: 100, + action: 11064 }; return this.postAuxEnd("/refferhx", postData); } //END POINT CALL FOR UPDATE PROFILE - updateProfile(post){ + updateProfile(post) { var postData = { - uid: localStorage.getItem("uid"), - member_id: localStorage.getItem("member_id"), - sessionid: localStorage.getItem("session_token"), - action: 5031, - ...post + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: 5031, + ...post }; return this.postAuxEnd("/updateprofile", postData); } //END POINT CALL FOR GETTING USER PROFILE - loadProfile(post){ + loadProfile(post) { var postData = { - uid: localStorage.getItem("uid"), - member_id: localStorage.getItem("member_id"), - sessionid: localStorage.getItem("session_token"), + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), }; return this.postAuxEnd("/loadprofile", postData); } //END POINT CALL FOR SENDING REFERRAL MESSAGE - sendReferralMsg(postData){ + sendReferralMsg(postData) { return this.postAuxEnd("/sendreferral", postData); } - StartResetPassword(reqData){ + StartResetPassword(reqData) { return this.postAuxEnd("/startresetpasword", reqData) } - getCouponRedeem(){ - var postData = { - uuid: localStorage.getItem("uid"), - member_id: localStorage.getItem("member_id"), - sessionid: localStorage.getItem("session_token"), - page:0, - limit :100 - }; + getCouponRedeem() { + var postData = { + uuid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + page: 0, + limit: 100 + }; return this.postAuxEnd("/couponredeem", postData); } @@ -310,9 +311,17 @@ class usersService { */ - getUserReminders(){ + getUserReminders() { return this.getAuxEnd("/reminders", null); } + + verifyEmail(code) { + const reqData = { + verify_link: code, + action: 11015 + } + return this.postAuxEnd("/verifysignuplink", reqData); + } //---------------------------------------- ----- //---------------------------------------- ----- // Unified call below @@ -328,10 +337,11 @@ class usersService { } }; const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri; - return Axios.get(endPoint,{ + return Axios.get(endPoint, { params: { reqData - }}) + } + }) .then((response) => { console.log("~~~~~~~ Toks2 GET ~~~~~~~~"); return response; @@ -354,22 +364,22 @@ class usersService { postAuxEnd(uri, reqData) { const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri; const session_token = localStorage.getItem("session_token"); - // session_token = session_token !=null ?session_token : ''; + // session_token = session_token !=null ?session_token : ''; // 'Authorization': `Basic ${(session_token !=null) ?session_token : ''}`, let axiosConfig = { headers: { 'Accept': 'application/json', 'Access-Control-Allow-Origin': '*', 'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin', - 'Access-Control-Allow-Headers':'Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token', + 'Access-Control-Allow-Headers': 'Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token', 'Content-Type': 'application/json;charset=UTF-8', } }; // Axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8'; - // Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig - // Axios.defaults.withCredentials = true; -//debugger; + // Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig + // Axios.defaults.withCredentials = true; + //debugger; return Axios.post(endPoint, reqData) .then((response) => { console.log(response); diff --git a/src/views/SignupPage.jsx b/src/views/SignupPage.jsx index a58fbdd..102f0fa 100644 --- a/src/views/SignupPage.jsx +++ b/src/views/SignupPage.jsx @@ -2,6 +2,7 @@ import React from "react"; import SignUp from "../components/AuthPages/SignUp"; function SignupPage() { + return ( <> diff --git a/src/views/VerifyLinkPages.jsx b/src/views/VerifyLinkPages.jsx new file mode 100644 index 0000000..14b1a6e --- /dev/null +++ b/src/views/VerifyLinkPages.jsx @@ -0,0 +1,7 @@ +import React from "react"; +import VerifyLink from "../components/AuthPages/VerifyLink"; + +export default function VerifyYouPages() { + + return ; +} -- 2.34.1 From 1407cb976922e8573af1a97ec03e61a5b071dbc3 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 26 Apr 2023 23:55:17 +0100 Subject: [PATCH 2/2] little fixes to auth pages --- src/components/AuthPages/SignUp/index.jsx | 24 +-- src/components/AuthPages/VerifyLink/index.jsx | 178 +++++++++++------- src/components/AuthPages/VerifyYou/index.jsx | 50 +---- .../Helpers/Inputs/InputCom/index.jsx | 72 ++++++- 4 files changed, 189 insertions(+), 135 deletions(-) diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index ee8732d..5ac6a88 100644 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -37,7 +37,7 @@ export default function SignUp() { const navigate = useNavigate(); const userApi = new usersService(); - + // Get Country Api const getCountryList = async () => { const res = await userApi.getSignupCountryData() @@ -63,6 +63,7 @@ export default function SignUp() { try { if (email !== '' && password !== '' && first_name !== '' && last_name !== '') { + setSignUpLoading(true) const reqData = { country: country, firstname: first_name, @@ -75,7 +76,6 @@ export default function SignUp() { } const res = await userApi.CreateUser(reqData) - setSignUpLoading(true) if (res.status === 200) { const { data } = res @@ -83,24 +83,19 @@ export default function SignUp() { setMsgError('This account has been already created') setSignUpLoading(false) } - if (data.status > 0 && data.internal_return == 100 && data.session != '') { - localStorage.setItem("email", `${data.email}`); - localStorage.setItem("country", `${data.country}`); - localStorage.setItem("firstname", `${data.firstname}`); - localStorage.setItem("lastname", `${data.lastname}`); - + if (data && data.status == 1) { setTimeout(() => { - navigate("/", { replace: true }); + navigate("/verify-you", { replace: true }); setSignUpLoading(false) }, 2000) } else { - setMsgError(data.status) setSignUpLoading(false) + } + } else { + setMsgError('This account does not exist') + setSignUpLoading(false) } - } else { - setMsgError('This account does not exist') - setSignUpLoading(false) } } catch (error) { throw new Error(error) @@ -244,8 +239,7 @@ export default function SignUp() { - {/* - Continue - */} +
+
+
+

+ {linkError && 'Invalid verification link'} + {linkSuccess && 'Sign In to WrenchBoard'} +

+
+ {/* If the verification was a success */} + {linkSuccess && } + + {/* If the verification was unsuccessful */} + {linkError && navigate('/login')} />}
-

+ )} ) -} \ No newline at end of file +} + +const SuccessfulComponent = ({ onClick }) => ( +
+ {/* INPUT */} +
+ +
+
+ +
+
+ +
+
+) + +const ErrorComponent = ({ onClick }) => ( +
+
+

+ 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. +

+
+ +
+ +
+
+) \ No newline at end of file diff --git a/src/components/AuthPages/VerifyYou/index.jsx b/src/components/AuthPages/VerifyYou/index.jsx index 37b7878..1edb40e 100644 --- a/src/components/AuthPages/VerifyYou/index.jsx +++ b/src/components/AuthPages/VerifyYou/index.jsx @@ -1,7 +1,5 @@ -import React from "react"; -import titleShape from "../../../assets/images/shape/text-shape-three.svg"; import AuthLayout from "../AuthLayout"; -import Otp from "./Otp"; +import InputCom from "../../Helpers/Inputs/InputCom"; export default function VerifyYou() { return ( @@ -15,51 +13,19 @@ export default function VerifyYou() {

- Sign In to WrenchBoard + Verification Sent

- {/* INPUT */}
- +

+ To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided. +

- -
-
- - {/* - Continue - */} +

+ If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly. +

diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 4dfcc4f..9b191c0 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useRef } from "react"; import Icons from "../../Icons"; import { Link } from "react-router-dom"; @@ -15,18 +15,67 @@ export default function InputCom({ onClick, disable }) { + const inputRef = useRef(null) + // Entry Validation + // for Min Length: + const minLengthValidation = () => { + if (inputRef && inputRef?.current && inputRef?.current?.name == 'email') { + return 7 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'first_name') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'last_name') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'address') { + return 5 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'password') { + return 8 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'state') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'province') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'city') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'amount') { + return 1 + } + } + + // for MaxLength + const maxLengthValidation = () => { + if (inputRef && inputRef?.current && inputRef?.current?.name == 'email') { + return 35 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'first_name') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'last_name') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'address') { + return 49 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'password') { + return 15 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'state') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'province') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'city') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'amount') { + return 9 + } + } + + console.log(inputRef.current?.name, inputRef.current?.minLength) return (
- {label && ( - - )} - {forgotPassword && Forgot Password?} + {label && ( + + )} + {forgotPassword && Forgot Password?}
{iconName && (
-- 2.34.1