113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
import { useState } from 'react'
|
||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||
import AuthService from '../../services/AuthService';
|
||
import { IconCheck } from '@tabler/icons-react';
|
||
import { Button, Input, Spinner, Text } from '@fluentui/react-components';
|
||
|
||
interface PasswordResetProps {
|
||
email: string;
|
||
}
|
||
|
||
function PasswordReset() {
|
||
const [success, setSuccess] = useState(false)
|
||
|
||
const { register, handleSubmit, watch, setError, formState: { isSubmitting } } = useForm<PasswordResetProps>({
|
||
defaultValues: {
|
||
email: ''
|
||
}
|
||
})
|
||
|
||
const onSubmit: SubmitHandler<PasswordResetProps> = async (data) => {
|
||
await AuthService.resetPassword(data.email).then(response => {
|
||
if (response.status === 200) {
|
||
//setError('email', { message: response.data.msg })
|
||
setSuccess(true)
|
||
} else if (response.status === 422) {
|
||
setError('email', { message: response.statusText })
|
||
}
|
||
}).catch((error: Error) => {
|
||
setError('email', { message: error.message })
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div style={{
|
||
display: 'flex',
|
||
margin: 'auto',
|
||
flexDirection: 'column',
|
||
gap: '1rem',
|
||
maxWidth: '400px',
|
||
width: '100%',
|
||
height: 'min-content',
|
||
borderRadius: '1rem',
|
||
border: '1px solid #00000030',
|
||
padding: '2rem',
|
||
background: 'var(--colorNeutralBackground1)'
|
||
}}>
|
||
<Text size={600} weight='medium'>
|
||
Восстановление пароля
|
||
</Text>
|
||
|
||
<form onSubmit={handleSubmit(onSubmit)}>
|
||
{!success &&
|
||
<div style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '1rem'
|
||
}}>
|
||
<Text>
|
||
Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
|
||
</Text>
|
||
|
||
<Input
|
||
placeholder='E-mail'
|
||
required
|
||
{...register('email', { required: 'Введите E-mail' })}
|
||
//error={errors.email?.message}
|
||
/>
|
||
|
||
<div style={{
|
||
display: 'flex',
|
||
width: '100%',
|
||
justifyContent: 'space-between'
|
||
}}>
|
||
<Button type="submit" disabled={isSubmitting || watch('email').length == 0} appearance='primary'>
|
||
{isSubmitting ? <Spinner /> : 'Восстановить пароль'}
|
||
</Button>
|
||
|
||
<Button as='a' href="/auth/signin" type="button" appearance='subtle'>
|
||
Назад
|
||
</Button>
|
||
</div>
|
||
|
||
</div>
|
||
}
|
||
{success &&
|
||
<div style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '1rem'
|
||
}}>
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '1rem'
|
||
}}>
|
||
<IconCheck />
|
||
<Text>
|
||
На указанный адрес было отправлено письмо с новыми данными для авторизации.
|
||
</Text>
|
||
</div>
|
||
<div style={{ display: 'flex' }}>
|
||
<Button as='a' href="/auth/signin" type="button">
|
||
Войти
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
}
|
||
</form>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PasswordReset |