victorAnumudu
221 lines
14 KiB
React
221 lines
14 KiB
React
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.data)
|
|
if(res.data.resultCode != '0' || !res?.data?.pending_uid){
|
|
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: user?.pending_uid,
|
|
new_password: values.password,
|
|
}
|
|
resetPWD.mutate(reqData)
|
|
}
|
|
|
|
useEffect(()=>{
|
|
if(!token){
|
|
return navigate(siteLinks.login, {replace: true})
|
|
}
|
|
verifyLink.mutate({reset_token: token})
|
|
}, [])
|
|
|
|
return (
|
|
<div className="app">
|
|
<div className="app-wrap">
|
|
<div className="app-contant">
|
|
<div className="vh-100 bg-white custom-bg">
|
|
<div className="container-fluid p-0">
|
|
<div className="row no-gutters justify-content-center">
|
|
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
|
|
<div className="mt-5 d-flex">
|
|
<div className="bg-white register p-5">
|
|
<h1 className="mb-2">MERMS Panel</h1>
|
|
{(verifyLink.isSuccess && !resetPWD.isSuccess) && <p>Complete your password reset</p>}
|
|
<div
|
|
>
|
|
<div className='mt-2'>
|
|
<div className="row">
|
|
{resetPWD.isSuccess ?
|
|
<>
|
|
<div className='col-12'>
|
|
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
|
|
<h4 className='p-4 text-black'>Your password reset is completed</h4>
|
|
<img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
|
|
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 mt-3">
|
|
<p>Go <Link to={siteLinks.home}> Back</Link></p>
|
|
</div>
|
|
</>
|
|
:
|
|
<>
|
|
{verifyLink.isPending ?
|
|
<div className='col-12'>
|
|
<div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
|
<div className="col-12 d-flex flex-column justify-content-center align-items-center">
|
|
<p className='text-black'>loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
: verifyLink.isSuccess ?
|
|
<div className='col-12'>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={handleCompletePWDReset}
|
|
>
|
|
{(props) => {
|
|
return (
|
|
<Form className='mt-2'>
|
|
<div className="row">
|
|
<>
|
|
<div className="col-12">
|
|
<div className="form-group">
|
|
<label className={`text-black fw-bold control-label`}>Username: {user?.user}</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<div className="form-group">
|
|
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
|
<input type="password" name='password' className="form-control" placeholder="password" value={props.values.password} onChange={props.handleChange} />
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<div className="form-group">
|
|
<label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
|
|
<input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
|
|
</div>
|
|
</div>
|
|
|
|
{resetPWD.error &&
|
|
<>
|
|
<div className="col-12">
|
|
<p className='text-danger'>{resetPWD.error.message}</p>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
<div className="col-12 mt-3 text-end">
|
|
<button type='submit' className="btn btn-primary text-uppercase">{resetPWD.isPending ? 'loading...' : 'reset password'}</button>
|
|
</div>
|
|
</>
|
|
</div>
|
|
</Form>
|
|
);
|
|
}}
|
|
</Formik>
|
|
</div>
|
|
: verifyLink.error ?
|
|
<>
|
|
<div className='col-12'>
|
|
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#E9D0DD'}}>
|
|
<h4 className='p-4 text-black'>Unable to continue password reset. Please start again</h4>
|
|
<img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
|
|
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 mt-3">
|
|
<p>Go <Link to={siteLinks.home}> Back</Link></p>
|
|
</div>
|
|
</>
|
|
:
|
|
null
|
|
}
|
|
</>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
|
<div className="row align-items-center h-100">
|
|
<div className="col-7 mx-auto ">
|
|
<img className="img-fluid" src={LoginImg} alt="" />
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|