145 lines
4.2 KiB
TypeScript
Executable File
145 lines
4.2 KiB
TypeScript
Executable File
import { resetPassword } from '@/api/Auth'
|
|
import PageNotFound from '@/pages/NotFound/NotFound'
|
|
import { requirementsPassword } from '@/rtk/helpers/variables'
|
|
import { Button, Image, PasswordInput, Stack, TextInput } from '@mantine/core'
|
|
import { notifications } from '@mantine/notifications'
|
|
import axios from 'axios'
|
|
import { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import PasswordRequirementInput from '../PasswordRequirementInput/PasswordRequirementInput'
|
|
import classes from './ResetPassword.module.css'
|
|
|
|
const ResetPassword = () => {
|
|
const queryString: string = window.location.search
|
|
const urlParams = new URLSearchParams(queryString)
|
|
const email: string = urlParams.get('email')!
|
|
const code: string = urlParams.get('code')!
|
|
const [data, setData] = useState({
|
|
email: email,
|
|
forgot_code: code,
|
|
new_password: '',
|
|
confirm_password: '',
|
|
})
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
const navigate = useNavigate()
|
|
const passwordRegex =
|
|
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
if (
|
|
data.new_password !== '' &&
|
|
passwordRegex.test(data.new_password) &&
|
|
data.new_password === data.confirm_password
|
|
) {
|
|
setLoading(true)
|
|
const res = await axios.post(resetPassword, data)
|
|
if (res.data.status) {
|
|
notifications.show({
|
|
title: 'Success',
|
|
message: 'Reset password success!',
|
|
color: 'green',
|
|
})
|
|
navigate('/login')
|
|
} else {
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: res.data.mess,
|
|
color: 'red',
|
|
})
|
|
}
|
|
} else {
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: 'Can not submit',
|
|
color: 'red',
|
|
})
|
|
}
|
|
|
|
setLoading(false)
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
} catch (error: any) {
|
|
console.log(error)
|
|
if (error.response.status === 422) {
|
|
const errorMess = error.response.data.message
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: errorMess,
|
|
color: 'red',
|
|
})
|
|
}
|
|
setLoading(false)
|
|
}
|
|
}
|
|
if (email === null || code === null) {
|
|
return <PageNotFound />
|
|
} else {
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundImage: 'url(/backgroundLogin.png)',
|
|
backgroundSize: 'cover',
|
|
height: '100vh',
|
|
paddingTop: '10%',
|
|
}}
|
|
>
|
|
<Stack className={classes.resetForm} w={'400px'} m={'auto'} p={30}>
|
|
<>
|
|
<Image src="/logo.jpg" w={'50%'} m={'auto'}></Image>
|
|
<TextInput
|
|
label="Email"
|
|
placeholder="hello@mantine.dev"
|
|
value={email}
|
|
radius="md"
|
|
disabled
|
|
/>
|
|
<PasswordRequirementInput
|
|
requirements={requirementsPassword}
|
|
value={data}
|
|
setValue={setData}
|
|
label="New password"
|
|
placeholder="New password"
|
|
name="new_password"
|
|
/>
|
|
<PasswordInput
|
|
required
|
|
label="Confirm password"
|
|
placeholder="Your password"
|
|
value={data.confirm_password}
|
|
onChange={(e) => {
|
|
setData({ ...data, confirm_password: e.target.value })
|
|
}}
|
|
error={
|
|
data.new_password !== data.confirm_password &&
|
|
data.confirm_password !== '' &&
|
|
'Password do not match'
|
|
}
|
|
radius="md"
|
|
mb={'md'}
|
|
/>
|
|
|
|
<Button
|
|
loading={loading}
|
|
disabled={
|
|
data.new_password !== '' &&
|
|
passwordRegex.test(data.new_password) &&
|
|
data.new_password === data.confirm_password
|
|
? false
|
|
: true
|
|
}
|
|
onClick={() => {
|
|
handleSubmit()
|
|
}}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</>
|
|
</Stack>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ResetPassword
|