diff --git a/src/Routers.jsx b/src/Routers.jsx
index fdb85ea..247f3c8 100755
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -3,6 +3,7 @@ import FourZeroFour from "./components/FourZeroFour";
import ScrollToTop from "./components/Helpers/ScrollToTop";
import MyCollection from "./components/MyCollection";
import Notification from "./components/Notification";
+import ThankYou from "./components/AuthPages/ThankYou";
import AuthRoute from "./middleware/AuthRoute";
import AcitveBidsPage from "./views/AcitveBidsPage";
import AuthProfilePage from "./views/AuthProfilePage";
@@ -50,6 +51,11 @@ export default function Routers() {
path="/update-password"
element={}
/>
+ }
+ />
} />
} />
} />
diff --git a/src/components/AuthPages/ForgotPassword/index.jsx b/src/components/AuthPages/ForgotPassword/index.jsx
index 5a4e973..1642185 100755
--- a/src/components/AuthPages/ForgotPassword/index.jsx
+++ b/src/components/AuthPages/ForgotPassword/index.jsx
@@ -20,11 +20,10 @@ export default function ForgotPassword() {
function validationChecker(email) {
const emailCheck = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
if (email === "") {
- setValidation("email is required");
+ setValidation("");
} else if (!email.match(emailCheck)) {
setValidation('Please input a valid email address');
} else {
- setValidation("");
setButtonDisabled(false)
}
}
@@ -36,6 +35,10 @@ export default function ForgotPassword() {
}
const reset = await user.resetPassword(resetEmail);
setLoading(true)
+
+ const {raw_data, uuid} = reset.data
+ localStorage.setItem('reset_uuid', uuid)
+ localStorage.setItem('reset_raw', JSON.stringify(raw_data))
if (reset.status == 200){
setTimeout(() => {
navigate("/verify-you", {replace : true});
diff --git a/src/components/AuthPages/ThankYou/index.jsx b/src/components/AuthPages/ThankYou/index.jsx
index 5feabbd..67db609 100755
--- a/src/components/AuthPages/ThankYou/index.jsx
+++ b/src/components/AuthPages/ThankYou/index.jsx
@@ -1,8 +1,11 @@
import React from "react";
+import AuthLayout from "../../AuthPages/AuthLayout";
export default function ThankYou({ className }) {
return (
-
+
+
);
}
diff --git a/src/components/AuthPages/UpdatePassword/index.jsx b/src/components/AuthPages/UpdatePassword/index.jsx
index 1baf5be..35c4055 100755
--- a/src/components/AuthPages/UpdatePassword/index.jsx
+++ b/src/components/AuthPages/UpdatePassword/index.jsx
@@ -1,17 +1,87 @@
import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
import titleShape from "../../../assets/images/shape/title-shape-two.svg";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
import ThankYou from "../ThankYou";
+import usersService from "../../../services/UsersService";
export default function UpdatePassword() {
- const [updated, setValue] = useState(false);
+ const [values, setValues] = useState({
+ password: '',
+ confirmPassword: '',
+ })
const [message, setMessage] = useState(false);
- const updatePassword = () => {
- setValue(!updated);
- setTimeout(() => {
- setMessage(!message);
- }, 100);
+ const [validation, setValidation] = useState("");
+ const [loading, setLoading] = useState(false);
+ const updatePass = new usersService()
+ const navigate = useNavigate()
+
+ const onChange = (e) => {
+ setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+ };
+
+ const updatePassword = async (e) => {
+ const {username} = JSON.parse(localStorage.getItem('reset_raw'))
+ const otpCode = localStorage.getItem('otp')
+
+ setLoading(true)
+
+ if(!values.password || !values.confirmPassword){
+ setLoading(false)
+ setValidation("Please Fill empty inputs")
+ return
+ }
+
+ const regex = /^[A-Za-z]\w{7,14}$/
+ if(regex.test(values.password) == false) {
+ setLoading(false)
+ setValidation("it must be a least 7 alphanumeric characters")
+ return
+ }
+
+ if (values.password != values.confirmPassword){
+ setLoading(false)
+ setValidation("Password does not match")
+ return
+ }
+
+ const newPassword = {
+ username: username,
+ reset_uuid: localStorage.getItem('reset_uuid'),
+ random_text: otpCode,
+ member_uid: localStorage.getItem('member_uid'),
+ new_password: values.password,
+ stage: 300
+ }
+
+ delete values.confirmPassword
+
+ try {
+ const confirm = await updatePass.resetPassword(newPassword)
+ console.log(confirm)
+
+ if(confirm.status != 200){
+ setLoading(false)
+ setValidation("Sorry, could not verify code")
+ return
+ }
+
+ localStorage.removeItem('reset_uuid')
+ localStorage.removeItem('reset_raw')
+ localStorage.removeItem('otp')
+
+ if(confirm.status == 200){
+ setValidation("Password updated")
+ setTimeout(() => {
+ setLoading(false)
+ navigate("/confirm-reset", {replace : true});
+ }, 2000);
+ }
+ } catch (error) {
+ setLoading(false)
+ setValidation("An error occurred")
+ }
};
return (
@@ -19,7 +89,6 @@ export default function UpdatePassword() {
- {updated === false ? (
@@ -32,7 +101,7 @@ export default function UpdatePassword() {
-
*/}
+ {validation &&
{validation}
}
-
- ) : (
-
- )}
+
+ {/* // : (
+ //
+ // )} */}
);
diff --git a/src/components/AuthPages/VerifyYou/Otp.jsx b/src/components/AuthPages/VerifyYou/Otp.jsx
index ea07d94..827ae98 100755
--- a/src/components/AuthPages/VerifyYou/Otp.jsx
+++ b/src/components/AuthPages/VerifyYou/Otp.jsx
@@ -1,18 +1,26 @@
import React, { useEffect } from "react";
-export default function Otp() {
+export default function Otp({handleChange, value}) {
useEffect(() => {
const otp = document.querySelector("#otp-inputs");
// eslint-disable-next-line no-restricted-syntax
for (const pin of otp.children) {
// eslint-disable-next-line no-loop-func
- pin.onkeyup = () => {
- if (pin.nextSibling) {
- pin.nextSibling.children.otp.focus();
+ pin.onkeyup = (value) => {
+ if(pin.children){
+ if(value.key === '' || value.key === ' ' || value.key === 'ArrowRight' || value.key === 'ArrowLeft' || value.key === 'ArrowUp' || value.key === 'ArrowDown' || value.key === 'Tab') return;
+ if(value.key === 'Backspace'){
+ if(pin.previousSibling){
+ pin.previousSibling.children.otp.focus();
+ } else {return;}
+ } else {
+ pin.nextSibling.children.otp.focus();
+ }
}
- };
- }
- });
+ };
+ }
+ }, []);
+
return (
<>
@@ -33,6 +44,9 @@ export default function Otp() {
type="text"
maxLength={1}
id="otp"
+ name='value_two'
+ value={value.value_two}
+ onChange={handleChange}
/>
@@ -41,6 +55,9 @@ export default function Otp() {
type="text"
maxLength={1}
id="otp"
+ name='value_three'
+ value={value.value_three}
+ onChange={handleChange}
/>
@@ -49,6 +66,9 @@ export default function Otp() {
type="text"
maxLength={1}
id="otp"
+ name='value_four'
+ value={value.value_four}
+ onChange={handleChange}
/>
@@ -57,6 +77,9 @@ export default function Otp() {
type="text"
maxLength={1}
id="otp"
+ name='value_five'
+ value={value.value_five}
+ onChange={handleChange}
/>
@@ -65,6 +88,9 @@ export default function Otp() {
type="text"
maxLength={1}
id="otp"
+ name='value_six'
+ value={value.value_six}
+ onChange={handleChange}
/>
diff --git a/src/components/AuthPages/VerifyYou/index.jsx b/src/components/AuthPages/VerifyYou/index.jsx
index 9bd0816..c170da0 100755
--- a/src/components/AuthPages/VerifyYou/index.jsx
+++ b/src/components/AuthPages/VerifyYou/index.jsx
@@ -1,9 +1,90 @@
-import React from "react";
+import React,{useState} from "react";
+import {useNavigate} from "react-router-dom"
import titleShape from "../../../assets/images/shape/text-shape-three.svg";
import AuthLayout from "../AuthLayout";
import Otp from "./Otp";
+import usersService from "../../../services/UsersService";
export default function VerifyYou() {
+ const [loading, setLoading] = useState(false);
+ const [validation, setValidation] = useState("");
+ const verifyOTP = new usersService()
+ const navigate = useNavigate()
+
+ const [verificationCode, setVerificationCode] = useState({
+ value_one: '',
+ value_two: ''
+ })
+
+ const handleVerificationInput = ({target:{name, value}}) => {
+ setVerificationCode(prev => {
+ return {...prev, [name]:value}
+ })
+ }
+
+ const handleSubmit = async() => {
+ setValidation("")
+ setLoading(true)
+
+ let otpCode = '';
+ for(let values in verificationCode){
+ otpCode+=verificationCode[values]
+ }
+
+ // Validating otp code
+ if(!otpCode) {
+ setLoading(false)
+ setValidation("Please enter your otp code")
+ return
+ }
+ if(otpCode.length < 6) {
+ setLoading(false)
+ setValidation("OTP code incomplete")
+ return
+ }
+
+ const {username} = JSON.parse(localStorage.getItem('reset_raw'))
+ const verifyEmail = {
+ username: username,
+ stage: 200,
+ reset_uuid: localStorage.getItem('reset_uuid'),
+ random_text: otpCode
+ }
+
+ localStorage.setItem('otp', otpCode)
+
+ try {
+ const verify = await verifyOTP.resetPassword(verifyEmail);
+ console.log(verify)
+ localStorage.setItem('member_uid', verify.data.member_uid);
+ if (verify.status != 200){
+ setValidation("Sorry, could not verify code")
+ setLoading(false)
+ return
+ }
+
+ if (verify.status == 200){
+
+ if(verify?.data.error_msg == "Unable to continue"){
+ setLoading(false)
+ setValidation("Incorrect otp code")
+ return
+ }
+
+ setValidation("verified successfully")
+
+ setTimeout(() => {
+ setLoading(false)
+ navigate("/update-password", {replace : true});
+ }, 2000);
+ return
+ }
+ } catch (error) {
+ setLoading(false)
+ setValidation('An error occurred')
+ }
+ }
+
return (
<>
-
+
+ {validation &&
{validation}
}