From f5018bc6b72a0fb2e7e0e92d92750d8a3195ad52 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 2 Aug 2025 16:47:29 +0100 Subject: [PATCH] started password reset --- src/AppRouters.jsx | 2 + src/component/auth/AccPWDReset.jsx | 220 +++++++++++++++++++++++++++++ src/links/siteLinks.js | 3 +- src/services/services.js | 16 ++- src/views/AccPWDResetPage.jsx | 7 + 5 files changed, 245 insertions(+), 3 deletions(-) create mode 100644 src/component/auth/AccPWDReset.jsx create mode 100644 src/views/AccPWDResetPage.jsx diff --git a/src/AppRouters.jsx b/src/AppRouters.jsx index c8f414d..2caed7d 100644 --- a/src/AppRouters.jsx +++ b/src/AppRouters.jsx @@ -21,6 +21,7 @@ import CSignupPage from './views/CSignupPage'; import HelpPage from './views/HelpPage'; import SubscriptionPage from './views/SubscriptionPage'; import OnboardPage from "./views/OnboardPage"; +import AccPWDResetPage from './views/AccPWDResetPage'; function AppRouters() { @@ -35,6 +36,7 @@ function AppRouters() { } /> } /> } /> + } /> } /> diff --git a/src/component/auth/AccPWDReset.jsx b/src/component/auth/AccPWDReset.jsx new file mode 100644 index 0000000..a7c8427 --- /dev/null +++ b/src/component/auth/AccPWDReset.jsx @@ -0,0 +1,220 @@ +import React, { useEffect, useState } from 'react' +import { Form, Formik } from "formik"; +import * as Yup from "yup"; +import { useDispatch } from 'react-redux' + +import { Link, useNavigate, useParams } from 'react-router-dom' +import siteLinks from '../../links/siteLinks' +import { useMutation } from '@tanstack/react-query'; +import { completePWDReset, verifyResetToken } from '../../services/services'; +import { updateUserDetails } from '../../store/UserDetails' + +import { IoMdArrowDropdown } from "react-icons/io"; +import getImage from '../../utils/getImage'; + +const validationSchema = Yup.object().shape({ + password: Yup.string().required("Password is required"), + confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match') + }) + + const initialValues = { + password: '', + confirmpassword: '', + }; + +export default function AccPWDReset() { + + const {token} = useParams() + + const dispatch = useDispatch() + + const navigate = useNavigate() + + const [user, setUser] = useState(null) + +// API to verify email link + const verifyLink = useMutation({ + mutationFn: (fields) => { + return verifyResetToken(fields) + }, + onSuccess: (res) => { + // console.log('res', res) + // if(res.data.resultCode != '0'){ + // throw({message: res?.data?.resultDescription}) + // } + // setUser({user:'testaccount', ...res.data}) + setUser(res.data) + }, + // onError: (err) => { + // console.log('err', err) + // } + }) + + const resetPWD = useMutation({ + mutationFn: (fields) => { + return completePWDReset(fields) + }, + onSuccess: (res) => { + if(res?.data?.resultCode != '0'){ + throw({message: res?.data?.resultDescription}) + } + // const {token, room, uid} = res?.data + // if(!token || !room){ + // throw({message: 'something went wrong, try again!'}) + // } + // localStorage.setItem('token', token) + // localStorage.setItem('room', room) + // localStorage.setItem('uid', uid) + // dispatch(updateUserDetails({ ...res?.data })); + // navigate('/dash') // later add redux to dispatch state + }, + // onError: (err) => { + // console.log('err', err) + // } + }) + + const handleCompletePWDReset = (values) => { + let reqData = { + reset_token: token, + reset_uid: "4733e96b-7031-4684-bec3-f63da4417707", + new_password: values.password, + } + resetPWD.mutate(reqData) + } + + useEffect(()=>{ + if(!token){ + return navigate(siteLinks.login, {replace: true}) + } + verifyLink.mutate({reset_token: token}) + }, []) + + return ( +
+
+
+
+
+
+
+
+
+

MERMS Panel

+ {(verifyLink.isSuccess && !resetPWD.isSuccess) &&

Complete your password reset

} +
+
+
+ {resetPWD.isSuccess ? + <> +
+
+

Your password reset is completed

+ reset-icon + Home +
+
+ +
+

Go Back

+
+ + : + <> + {verifyLink.isPending ? +
+
+
+

loading...

+
+
+
+ : verifyLink.isSuccess ? +
+ + {(props) => { + return ( +
+
+ <> +
+
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+ + {resetPWD.error && + <> +
+

{resetPWD.error.message}

+
+ + } + +
+ +
+ +
+
+ ); + }} + +
+ : verifyLink.error ? + <> +
+
+

Unable to continue password reset. Please start again

+ reset-icon + Home +
+
+ +
+

Go Back

+
+ + : + null + } + + } +
+
+
+
+
+
+ {/*
+
+
+ +
+
+
*/} +
+
+
+
+ +
+
+ ) +} diff --git a/src/links/siteLinks.js b/src/links/siteLinks.js index 4155179..eb26675 100644 --- a/src/links/siteLinks.js +++ b/src/links/siteLinks.js @@ -15,7 +15,8 @@ const siteLinks = { login: '/auth/login', signup: '/auth/signup', forgetpwd: '/auth/forgetpwd', - csignup: '/csignup/:jwt' + csignup: '/csignup/:jwt', + accreset: '/accreset/:token' } export default siteLinks \ No newline at end of file diff --git a/src/services/services.js b/src/services/services.js index cc899cc..4e6fb03 100644 --- a/src/services/services.js +++ b/src/services/services.js @@ -134,9 +134,21 @@ export const recentActions = (reqData) => { return postAuxEnd(`/panel/account/actions`, postData, false) } +// FUNCTION TO VERIFY RESET TOKEN +export const verifyResetToken = (reqData) => { + let postData = { + ...reqData + } + return postAuxEnd('/panel/auth/resetverify', postData, false) +} - - +// FUNCTION TO COMPLETE PASSWORD RESET +export const completePWDReset = (reqData) => { + let postData = { + ...reqData + } + return postAuxEnd('/panel/auth/resetcomplete', postData, false) +} diff --git a/src/views/AccPWDResetPage.jsx b/src/views/AccPWDResetPage.jsx new file mode 100644 index 0000000..5e95007 --- /dev/null +++ b/src/views/AccPWDResetPage.jsx @@ -0,0 +1,7 @@ +import AccPWDReset from '../component/auth/AccPWDReset' + +export default function AccPWDResetPage() { + return ( + + ) +} -- 2.34.1