NestJS backend rewrite; migrate client to FluentUI V9
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,8 @@ import { login, setUserData } from '../../store/auth';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import AuthService from '../../services/AuthService';
|
||||
import UserService from '../../services/UserService';
|
||||
import { Button, Flex, Loader, Paper, Text, TextInput } from '@mantine/core';
|
||||
import { Button, Field, Input, Link, Spinner, Text } from '@fluentui/react-components';
|
||||
import { pages } from '../../constants/app';
|
||||
|
||||
const SignIn = () => {
|
||||
const { register, handleSubmit, setError, formState: { errors, isSubmitting, isValid } } = useForm<LoginFormData>({
|
||||
@@ -46,53 +47,63 @@ const SignIn = () => {
|
||||
message: (err as { detail: string })?.detail
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
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 align='center' size={500} weight='bold'>
|
||||
Вход
|
||||
</Text>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Flex direction='column' gap='sm'>
|
||||
<TextInput
|
||||
label='Логин'
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem'
|
||||
}}>
|
||||
|
||||
<Field label={'Логин'} validationState={errors.username?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
{...register('username', { required: 'Введите логин' })}
|
||||
error={errors.username?.message}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<TextInput
|
||||
label='Пароль'
|
||||
type='password'
|
||||
<Field label={'Пароль'} validationState={errors.password?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
type='password'
|
||||
{...register('password', { required: 'Введите пароль' })}
|
||||
error={errors.password?.message}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Flex justify='flex-end' gap='sm'>
|
||||
<Button component='a' href='/auth/password-reset' variant='transparent'>
|
||||
Восстановить пароль
|
||||
</Button>
|
||||
</Flex>
|
||||
<Link href='/auth/password-reset'>
|
||||
Восстановить пароль
|
||||
</Link>
|
||||
|
||||
<Flex gap='sm'>
|
||||
<Button disabled={!isValid} type="submit" flex={1} variant='filled'>
|
||||
{isSubmitting ? <Loader size={16} /> : 'Вход'}
|
||||
</Button>
|
||||
<Button disabled={!isValid} type="submit" appearance='primary' icon={isSubmitting ? <Spinner size='extra-tiny' /> : undefined}>
|
||||
Вход
|
||||
</Button>
|
||||
|
||||
{/* <Button component='a' flex={1} href='/auth/signup' type="button" variant='light'>
|
||||
Регистрация
|
||||
</Button> */}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</form>
|
||||
</Flex>
|
||||
</Paper>
|
||||
{pages.find(page => page.path === '/auth/signup')?.enabled &&
|
||||
<Button as='a' href='/auth/signup' type="button" appearance='subtle'>
|
||||
Регистрация
|
||||
</Button>}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useForm, SubmitHandler } from 'react-hook-form';
|
||||
import UserService from '../../services/UserService';
|
||||
import { IUser } from '../../interfaces/user';
|
||||
import { Button, Flex, Loader, Paper, Text, TextInput } from '@mantine/core';
|
||||
import { Button, Field, Input, Spinner, Text } from '@fluentui/react-components';
|
||||
|
||||
const SignUp = () => {
|
||||
const { register, handleSubmit, formState: { errors, isValid, isSubmitting } } = useForm<IUser>({
|
||||
@@ -26,66 +26,76 @@ const SignUp = () => {
|
||||
};
|
||||
|
||||
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 align='center' size={500} weight='bold'>
|
||||
Регистрация
|
||||
</Text>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Flex direction='column' gap='sm'>
|
||||
<TextInput
|
||||
label='Email'
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem'
|
||||
}}>
|
||||
<Field label={'Email'} validationState={errors.email?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
{...register('email', { required: 'Email обязателен' })}
|
||||
error={errors.email?.message}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<TextInput
|
||||
label='Логин'
|
||||
<Field label={'Логин'} validationState={errors.login?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
{...register('login', { required: 'Логин обязателен' })}
|
||||
error={errors.login?.message}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<TextInput
|
||||
label='Телефон'
|
||||
<Field label={'Телефон'} validationState={errors.phone?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
{...register('phone')}
|
||||
error={errors.phone?.message}
|
||||
{...register('phone', { required: 'Телефон обязателен' })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<TextInput
|
||||
label='Имя'
|
||||
<Field label={'Имя'} validationState={errors.name?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
{...register('name')}
|
||||
error={errors.name?.message}
|
||||
{...register('name', { required: 'Имя обязательно' })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<TextInput
|
||||
label='Фамилия'
|
||||
<Field label={'Фамилия'} validationState={errors.surname?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
{...register('surname')}
|
||||
error={errors.surname?.message}
|
||||
{...register('surname', { required: 'Фамилия обязательна' })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<TextInput
|
||||
label='Пароль'
|
||||
type="password"
|
||||
<Field label={'Пароль'} validationState={errors.password?.message ? 'error' : 'none'}>
|
||||
<Input
|
||||
required
|
||||
{...register('password', { required: 'Пароль обязателен' })}
|
||||
error={errors.password?.message}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Flex gap='sm'>
|
||||
<Button disabled={!isValid} type="submit" flex={1} variant='filled'>
|
||||
{isSubmitting ? <Loader size={16} /> : 'Зарегистрироваться'}
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</form>
|
||||
</Flex>
|
||||
</Paper>
|
||||
<Button disabled={!isValid} type="submit" appearance='primary'>
|
||||
{isSubmitting ? <Spinner /> : 'Зарегистрироваться'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user