From fbeff6d8c59fd5be4dffd105cedad43748ff26f2 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 3 May 2023 22:51:43 +0100 Subject: [PATCH 1/3] initial commit --- src/Routers.jsx | 3 +- .../AuthPages/VerifyPassword/index.jsx | 155 ++++++++++++++++++ src/components/AuthPages/VerifyYou/index.jsx | 51 +++--- src/services/UsersService.js | 4 + src/views/VerifyPasswordPages.jsx | 6 + 5 files changed, 198 insertions(+), 21 deletions(-) create mode 100644 src/components/AuthPages/VerifyPassword/index.jsx create mode 100644 src/views/VerifyPasswordPages.jsx diff --git a/src/Routers.jsx b/src/Routers.jsx index 79abf42..1e8ac9c 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 VerifyPasswordPages from "./views/VerifyPasswordPages"; import RemindersPage from './views/RemindersPage'; import TrackingPage from "./views/TrackingPage"; import CalendarPage from "./views/CalendarPage"; @@ -50,6 +50,7 @@ export default function Routers() { element={} /> } /> + } /> } /> {/* private route */} diff --git a/src/components/AuthPages/VerifyPassword/index.jsx b/src/components/AuthPages/VerifyPassword/index.jsx new file mode 100644 index 0000000..42562d5 --- /dev/null +++ b/src/components/AuthPages/VerifyPassword/index.jsx @@ -0,0 +1,155 @@ +import { useState, useEffect, useCallback } from "react"; +import { useLocation, Link, useNavigate } from "react-router-dom"; +import AuthLayout from "../AuthLayout"; +import InputCom from "../../Helpers/Inputs/InputCom"; +import usersService from "../../../services/UsersService"; +import WrenchBoard from "../../../assets/images/wrenchboard.png"; + +const VerifyPassword = () => { + 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("complereset"); + const userApi = new usersService(); + + // Password + const handlePassword = (e) => { + setPassword(e.target.value); + }; + + const completeReset = async () => { + if (password === "") { + setMsgError("Please fill in fields"); + } + + try { + if(password != ""){ + setLinkLoader(true) + var reqData = { + sessionid: 'dummy', + reset_link: token, + newpass: password, + step: 300, + action: 730 + } + } + } catch (error) { + + } + } + + return ( + <> + + {pageLoader ? ( + wrenchboard + ) : ( +
+
+ + wrenchboard + +
+
+
+
+

+ {linkSuccess + ? "Sign In to WrenchBoard" + : "Invalid verification link"} +

+
+ {/* If the verification was a success */} + {linkSuccess ? ( + + ) : ( + navigate("/login")} /> + )} +
+
+
+ )} + + + ); +}; + +export default VerifyPassword; + +const SuccessfulComponent = ({ + onSubmit, + password, + handlePassword, + msgErr, + loader, +}) => ( +
+ {/* INPUT */} +
+ +
+ {msgErr && ( +
+ {msgErr} +
+ )} +
+ +
+
+); + +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. +

+
+ +
+ +
+
+); diff --git a/src/components/AuthPages/VerifyYou/index.jsx b/src/components/AuthPages/VerifyYou/index.jsx index c8d8831..3f3ddb6 100644 --- a/src/components/AuthPages/VerifyYou/index.jsx +++ b/src/components/AuthPages/VerifyYou/index.jsx @@ -1,18 +1,20 @@ import { useNavigate, Link } from "react-router-dom"; import AuthLayout from "../AuthLayout"; -import WrenchBoard from "../../../assets/images/wrenchboard.png" +import WrenchBoard from "../../../assets/images/wrenchboard.png"; export default function VerifyYou() { - const navigate = useNavigate() + const navigate = useNavigate(); return ( <> - +
-
- - wrenchboard +
+ + wrenchboard
@@ -21,29 +23,38 @@ export default function VerifyYou() {

Let's verify your email now

- Check your email. + + Check your email. +

- Verify Email. Help us secure your WrenchBoard account by verifying your email registration address. Verification will let you access all of WrenchBoard's features. + Verify Email. Help us secure your WrenchBoard account + by verifying your email registration address. Verification + will let you access all of WrenchBoard's features.

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

-
- -
+
+ +
diff --git a/src/services/UsersService.js b/src/services/UsersService.js index ebf00df..8262274 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -288,6 +288,10 @@ class usersService { return this.postAuxEnd("/startresetpasword", reqData) } + CompleteResetPassword(reqData){ + return this.postAuxEnd("/stepresetpass", reqData) + } + getCouponRedeem(){ var postData = { uuid: localStorage.getItem("uid"), diff --git a/src/views/VerifyPasswordPages.jsx b/src/views/VerifyPasswordPages.jsx new file mode 100644 index 0000000..2bcba53 --- /dev/null +++ b/src/views/VerifyPasswordPages.jsx @@ -0,0 +1,6 @@ +import React from "react"; +import VerifyPassword from "../components/AuthPages/VerifyPassword"; + +export default function VerifyPasswordPages() { + return ; +} From dd94177a95a32631d09c2e732fd479508648c347 Mon Sep 17 00:00:00 2001 From: Ebube Date: Fri, 5 May 2023 01:21:55 +0100 Subject: [PATCH 2/3] Reset Page Completed --- src/components/AuthPages/Login/index.jsx | 102 ++++++---- src/components/AuthPages/SignUp/index.jsx | 61 +++--- src/components/AuthPages/VerifyLink/index.jsx | 12 +- .../AuthPages/VerifyPassword/index.jsx | 182 ++++++++++++------ src/components/FourZeroFour/index.jsx | 4 +- 5 files changed, 230 insertions(+), 131 deletions(-) diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index bcb294c..3907df8 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -4,17 +4,16 @@ import { toast } from "react-toastify"; import googleLogo from "../../../assets/images/google-logo.svg"; import appleLogo from "../../../assets/images/apple-black.svg"; import facebookLogo from "../../../assets/images/facebook-4.svg"; -import WrenchBoard from "../../../assets/images/wrenchboard.png" +import WrenchBoard from "../../../assets/images/wrenchboard.png"; import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; import AuthLayout from "../AuthLayout"; import { useDispatch, useSelector } from "react-redux"; -import {updateUserDetails} from '../../../store/UserDetails' +import { updateUserDetails } from "../../../store/UserDetails"; export default function Login() { - - const dispatch = useDispatch() + const dispatch = useDispatch(); const [checked, setValue] = useState(false); const [loginLoading, setLoginLoading] = useState(false); @@ -22,7 +21,7 @@ export default function Login() { //login error state const [loginError, setLoginError] = useState(false); // for the catch error - const [msgError, setMsgError] = useState(''); + const [msgError, setMsgError] = useState(""); const rememberMe = () => { setValue(!checked); @@ -41,57 +40,62 @@ export default function Login() { const navigate = useNavigate(); const userApi = new usersService(); - const doLogin = async () => { - if (email == '' && password == '') { - setMsgError('Please fill in fields') - } try { if (email !== "" && password !== "") { var postData = { username: email, password: password, - sessionid: 'STARTING' + sessionid: "STARTING", }; - const loginResult = await userApi.logInUser(postData); // just for a test + const loginResult = await userApi.logInUser(postData); // just for a test //debugger; // if (email === "support@mermsemr.com") { - if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start + if ( + loginResult.data.status > 0 && + loginResult.data.internal_return == 100 && + loginResult.data.session != "" + ) { + // just for a start localStorage.setItem("member_id", `${loginResult.data.member_id}`); localStorage.setItem("uid", `${loginResult.data.uid}`); localStorage.setItem("session_token", `${loginResult.data.session}`); localStorage.setItem("session", `${loginResult.data.session}`); setLoginLoading(true); // userApi.getUserReminders(); //testing - dispatch(updateUserDetails(loginResult.data)) + dispatch(updateUserDetails(loginResult.data)); setTimeout(() => { navigate("/", { replace: true }); setLoginLoading(false); }, 2000); } else { // toast.error("Invalid Credential"); - setLoginError(true) + setLoginError(true); } + } else { + setMsgError("Please fill in fields"); } } catch (error) { - setMsgError('An error occurred') + setMsgError("An error occurred"); } finally { setTimeout(() => { - setLoginError(false) - setMsgError(null) - }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)) + setLoginError(false); + setMsgError(null); + }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)); } }; return ( <> - +
-
- - wrenchboard +
+ + wrenchboard
@@ -100,7 +104,15 @@ export default function Login() {

Sign In to WrenchBoard

- New Here? Create an Account + + New Here?{" "} + + Create an Account + +
@@ -160,8 +172,23 @@ export default function Login() { Forgot Password
*/} - {loginError &&
Invalid username or password- Please reset your password or create a new account
} - {msgError &&
{msgError}
} + {loginError && ( +
+ Invalid username or password- Please{" "} + + reset your password + {" "} + or{" "} + + create a new account + +
+ )} + {msgError && ( +
+ {msgError} +
+ )}
- - - + + +
{/*

@@ -188,7 +215,10 @@ export default function Login() {

*/} -
This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.
+
+ This site is protected by hCaptcha and the our Privacy Policy + and Terms of Service apply. +
@@ -198,11 +228,7 @@ export default function Login() { ); } -const BrandBtn = ({ - link, - imgSrc, - brand -}) => { +const BrandBtn = ({ link, imgSrc, brand }) => { return ( - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index bfcdec9..2cdc99e 100644 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -56,17 +56,13 @@ export default function SignUp() { const handleSignUp = async () => { let { country, first_name, last_name, email, password } = formData; - - if (email === "" && password === "" && first_name === "") { - setMsgError("Please fill in fields"); - } - try { if ( email !== "" && password !== "" && first_name !== "" && - last_name !== "" + last_name !== "" && + country !== "" ) { setSignUpLoading(true); const reqData = { @@ -98,6 +94,8 @@ export default function SignUp() { setSignUpLoading(false); setMsgError("An error occurred"); } + } else { + setMsgError("Please fill in fields"); } } catch (error) { throw new Error(error); @@ -106,7 +104,7 @@ export default function SignUp() { setMsgError(null); }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT); } - }; + }; useEffect(() => { getCountryList(); @@ -262,7 +260,7 @@ export default function SignUp() { +
+ +
); @@ -136,9 +204,9 @@ 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. + This error occurs because you have already used this link or the link + has broken/expired. Start with the reset process again. If it doesn't + work, try to create the account from the start.

diff --git a/src/components/FourZeroFour/index.jsx b/src/components/FourZeroFour/index.jsx index 24977e2..fccca38 100644 --- a/src/components/FourZeroFour/index.jsx +++ b/src/components/FourZeroFour/index.jsx @@ -1,5 +1,5 @@ import React from "react"; -import Lottie from "react-lottie"; +// import Lottie from "react-lottie"; import { useNavigate } from "react-router-dom"; import * as animationData from "../../assets/images/Lotties/77618-website-404-error-animation.json"; @@ -16,7 +16,7 @@ export default function FourZeroFour() { return (
- + {/* */}
@@ -167,7 +178,6 @@ const SuccessfulComponent = ({ label="Confirm Password" name="confirm_password" type="password" - iconName="password" />
{msgErr && ( @@ -190,7 +200,7 @@ const SuccessfulComponent = ({