From 425df92dba31d97010c48bc0d0dca895536d5977 Mon Sep 17 00:00:00 2001 From: Ebube Date: Sat, 22 Apr 2023 18:44:49 +0100 Subject: [PATCH 1/4] Reset Page Format --- .../AuthPages/ForgotPassword/index.jsx | 80 +++++++++++-------- src/components/AuthPages/Login/index.jsx | 4 +- .../Helpers/Inputs/InputCom/index.jsx | 2 +- 3 files changed, 49 insertions(+), 37 deletions(-) diff --git a/src/components/AuthPages/ForgotPassword/index.jsx b/src/components/AuthPages/ForgotPassword/index.jsx index d8d5f1b..e526c4e 100644 --- a/src/components/AuthPages/ForgotPassword/index.jsx +++ b/src/components/AuthPages/ForgotPassword/index.jsx @@ -1,6 +1,6 @@ import React from "react"; import { Link } from 'react-router-dom'; -import titleShape from "../../../assets/images/shape/title-shape-two.svg"; +import WrenchBoard from "../../../assets/images/wrenchboard.png" import InputCom from "../../Helpers/Inputs/InputCom"; import AuthLayout from "../AuthLayout"; @@ -10,40 +10,54 @@ export default function ForgotPassword() { -
-
+
+
+ + wrenchboard + +
+
+
-

- Forget Password -

-
- shape +

+ Forget Password +

+ Enter your email to reset your password.
-
-
-
- -
-
- - Send Code - - - - - Back to Home - +
+
+ +
+
+
+ + +
+ {/* + Send Code + */} +
diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index 58a8052..c31e51c 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -4,8 +4,6 @@ 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 titleShape from "../../../assets/images/shape/title-shape.svg"; -import titleShape from "../../../assets/images/shape/login_straight_underline.svg"; import WrenchBoard from "../../../assets/images/wrenchboard.png" import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; @@ -169,7 +167,7 @@ export default function Login() { Forgot Password
*/} - {loginError &&
Invalid username or password- Please reset your password or create a new account
} + {loginError &&
Invalid username or password- Please reset your password or create a new account
} {msgError &&
{msgError}
}
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 8fe4ade..705e5ce 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -23,7 +23,7 @@ export default function InputCom({ {label} )} - {forgotPassword && Forgot Password?} + {forgotPassword && Forgot Password?}
Date: Mon, 24 Apr 2023 23:39:40 +0100 Subject: [PATCH 2/4] Complete format and api call(70%) --- .env | 2 + .../AuthPages/ForgotPassword/index.jsx | 105 +++++++++++++++++- src/components/AuthPages/Login/index.jsx | 2 - src/components/AuthPages/SignUp/index.jsx | 2 +- src/middleware/AuthRoute.jsx | 1 - src/services/UsersService.js | 14 ++- 6 files changed, 111 insertions(+), 15 deletions(-) diff --git a/.env b/.env index 426eb40..26a2207 100644 --- a/.env +++ b/.env @@ -21,6 +21,8 @@ REACT_APP_SESSION_EXPIRE_MINUTES=300000 REACT_APP_SESSION_EXPIRE_CHECKER=60000 REACT_APP_LOGIN_ERROR_TIMEOUT=7000 +REACT_APP_SIGNUP_ERROR_TIMEOUT=7000 +REACT_APP_RESET_START_ERROR_TIMEOUT=5000 #apigate.lotus.g1.wrenchboard.com:76.209.103.227 #apigate.orion.g1.wrenchboard.com:76.209.103.227 diff --git a/src/components/AuthPages/ForgotPassword/index.jsx b/src/components/AuthPages/ForgotPassword/index.jsx index e526c4e..0eabcec 100644 --- a/src/components/AuthPages/ForgotPassword/index.jsx +++ b/src/components/AuthPages/ForgotPassword/index.jsx @@ -1,10 +1,67 @@ -import React from "react"; -import { Link } from 'react-router-dom'; +import React, { useState } from "react"; +import { Link, useNavigate } from 'react-router-dom'; import WrenchBoard from "../../../assets/images/wrenchboard.png" import InputCom from "../../Helpers/Inputs/InputCom"; import AuthLayout from "../AuthLayout"; +import usersService from "../../../services/UsersService"; export default function ForgotPassword() { + const [checked, setValue] = useState(false); + const [resetLoading, setResetLoading] = useState(false) + // email + const [email, setMail] = useState(""); + const [msgError, setMsgError] = useState(''); + + const navigate = useNavigate(); + const userApi = new usersService(); + + const handleEmail = (e) => { + setMail(e?.target.value); + }; + + const humanChecker = () => { + setValue(!checked); + }; + + const resetHandler = async () => { + if (email == '') { + setMsgError('Please fill in fields') + } else if (!checked){ + setMsgError('Check if you are human') + } + + if (email != '' && checked) { + const reqData = { email } + setResetLoading(true) + try { + const res = await userApi.StartResetPassword(reqData) + if (res.status === 200) { + const { data } = res + if (data.status == -1) { + setMsgError('reset was not successful') + setResetLoading(false) + return + } + if (data.status > 0) { + setResetLoading(false) + console.log('Success', data) + } + } + } catch (error) { + setResetLoading(false) + setMsgError('An error occurred') + throw new Error(error) + } finally { + setTimeout(() => { + setMsgError(null) + }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT) + } + } + setTimeout(() => { + setMsgError(null) + }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT) + } + return ( <>
-
+

@@ -27,25 +84,61 @@ export default function ForgotPassword() { Enter your email to reset your password.

-
+
+ {msgError &&
{msgError}
} + {/* hCaptha clone for the time being */} +
+
+
+ {/* Checkbox */} +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
-
+
- {/* - Send Code - */}
diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index b01e81e..ee8732d 100644 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -29,14 +29,15 @@ export default function SignUp() { // To Show and Hide Password const togglePasswordVisibility = () => { setShowPassword(!showPassword); - // return console.log('showPassword') }; + const rememberMe = () => { setValue(!checked); }; const navigate = useNavigate(); const userApi = new usersService(); + // Get Country Api const getCountryList = async () => { const res = await userApi.getSignupCountryData() @@ -74,27 +75,32 @@ export default function SignUp() { } const res = await userApi.CreateUser(reqData) + setSignUpLoading(true) + if (res.status === 200) { const { data } = res if (data.status == -1 && data.acc == 'DULPICATE') { 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}`); - setSignUpLoading(true) setTimeout(() => { navigate("/", { replace: true }); setSignUpLoading(false) }, 2000) - console.log('Success') } else { setMsgError(data.status) + setSignUpLoading(false) } } + } else { + setMsgError('This account does not exist') + setSignUpLoading(false) } } catch (error) { throw new Error(error) From c45815d4378d1a429c25896ba3010c5a18c7da84 Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 25 Apr 2023 08:44:49 +0100 Subject: [PATCH 4/4] Made time lesser --- .env | 4 +++- src/components/AuthPages/ForgotPassword/index.jsx | 12 ++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/.env b/.env index 26a2207..f58ba9f 100644 --- a/.env +++ b/.env @@ -22,7 +22,9 @@ REACT_APP_SESSION_EXPIRE_CHECKER=60000 REACT_APP_LOGIN_ERROR_TIMEOUT=7000 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000 -REACT_APP_RESET_START_ERROR_TIMEOUT=5000 + +# Had to change the error time to 3sec cause it took too long +REACT_APP_RESET_START_ERROR_TIMEOUT=3000 #apigate.lotus.g1.wrenchboard.com:76.209.103.227 #apigate.orion.g1.wrenchboard.com:76.209.103.227 diff --git a/src/components/AuthPages/ForgotPassword/index.jsx b/src/components/AuthPages/ForgotPassword/index.jsx index 8bf29a2..589d446 100644 --- a/src/components/AuthPages/ForgotPassword/index.jsx +++ b/src/components/AuthPages/ForgotPassword/index.jsx @@ -25,7 +25,7 @@ export default function ForgotPassword() { const resetHandler = async () => { if (email == '') { - setMsgError('Please fill in fields') + setMsgError('An email is required') } else if (!checked) { setMsgError('Check if you are human') } @@ -38,14 +38,14 @@ export default function ForgotPassword() { if (res.status === 200) { const { data } = res if (data.status == -1) { - setMsgError('reset was not successful') + setMsgError('This is an incorrect or duplicate email') setResetLoading(false) - return - } - if (data.status > 0) { + } else if (data.status > 0) { setResetLoading(false) navigate("/verify-you", { replace: true }) - console.log('Success', data) + } else{ + setMsgError("reset was not successful") + setResetLoading(false) } setMail("") }