From 00278e32b68fef93c2da4ef9e91002739dabc1fd Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 17 Jan 2024 19:50:00 +0100 Subject: [PATCH] added new layout for forget password page --- .../AuthPages/ForgotPassword/index2.jsx | 211 ++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 src/components/AuthPages/ForgotPassword/index2.jsx diff --git a/src/components/AuthPages/ForgotPassword/index2.jsx b/src/components/AuthPages/ForgotPassword/index2.jsx new file mode 100644 index 0000000..855917f --- /dev/null +++ b/src/components/AuthPages/ForgotPassword/index2.jsx @@ -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 "../AuthLayout"; +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 ( + <> + +
+
+ + wrenchboard + +
+
+
+ {msgSuccess == null ? + <> +
+

+ Forget Password +

+ + Enter your email to reset your password. + +
+
+
+ +
+ {/* hCaptha clone for the time being */} +
+ +
+ {/*
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
*/} + {msgError && ( +
+ {msgError} +
+ )} +
+
+ + +
+
+
+ + : + + } +
+
+
+ + + ); +}