popovspiridon99/universal_is
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

NestJS backend rewrite; migrate client to FluentUI V9

Browse Source
This commit is contained in:
popovspiridon99
2025-09-18 15:48:08 +09:00
parent 32ff36a12c
commit 34529cea68
62 changed files with 5642 additions and 3679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
client/src/pages/auth/PasswordReset.tsx
View File

@ -1,8 +1,8 @@
import { useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form';
import AuthService from '../../services/AuthService';
import { Button, Flex, Loader, Paper, Text, TextInput, Transition } from '@mantine/core';
import { IconCheck } from '@tabler/icons-react';
import { Button, Input, Spinner, Text } from '@fluentui/react-components';
interface PasswordResetProps {
email: string;
@ -11,7 +11,7 @@ interface PasswordResetProps {
function PasswordReset() {
const [success, setSuccess] = useState(false)
const { register, handleSubmit, watch, setError, formState: { errors, isSubmitting } } = useForm<PasswordResetProps>({
const { register, handleSubmit, watch, setError, formState: { isSubmitting } } = useForm<PasswordResetProps>({
defaultValues: {
email: ''
}
@ -31,65 +31,81 @@ function PasswordReset() {
}
return (
<Paper flex={1} maw='500' withBorder radius='md' p='xl'>
<Flex direction='column' gap='sm'>
<Text size="xl" fw={500}>
Восстановление пароля
</Text>
<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'
}}>
<Text size={600} weight='medium'>
Восстановление пароля
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
{!success &&
<Transition mounted={!success} transition='fade'>
{(styles) =>
<Flex style={styles} direction='column' gap={'md'}>
<Text>
Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
{!success &&
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
<Text>
Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
</Text>
<TextInput
label='E-mail'
required
{...register('email', { required: 'Введите E-mail' })}
error={errors.email?.message}
/>
<Input
placeholder='E-mail'
required
{...register('email', { required: 'Введите E-mail' })}
//error={errors.email?.message}
/>
<Flex gap='sm'>
<Button flex={1} type="submit" disabled={isSubmitting || watch('email').length == 0} variant='filled'>
{isSubmitting ? <Loader size={16} /> : 'Восстановить пароль'}
</Button>
<div style={{
display: 'flex',
width: '100%',
justifyContent: 'space-between'
}}>
<Button type="submit" disabled={isSubmitting || watch('email').length == 0} appearance='primary'>
{isSubmitting ? <Spinner /> : 'Восстановить пароль'}
</Button>
<Button flex={1} component='a' href="/auth/signin" type="button" variant='light'>
Назад
</Button>
</Flex>
<Button as='a' href="/auth/signin" type="button" appearance='subtle'>
Назад
</Button>
</div>
</Flex>
}
</Transition>
}
{success &&
<Transition mounted={!success} transition='scale'>
{(styles) =>
<Flex style={styles} direction='column' gap='sm'>
<Flex align='center' gap='sm'>
<IconCheck />
<Text>
На указанный адрес было отправлено письмо с новыми данными для авторизации.
</Text>
</Flex>
<Flex gap='sm'>
<Button component='a' href="/auth/signin" type="button">
Войти
</Button>
</Flex>
</Flex>
}
</Transition>
}
</form>
</Flex>
</Paper>
</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>
)
}