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

mantine

Browse Source
This commit is contained in:
cracklesparkle
2024-10-09 16:51:37 +09:00
parent b88d83cd74
commit 974fc12b34
32 changed files with 3456 additions and 1671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,9 @@
import { Box, Button, CircularProgress, Container, Fade, Grow, Stack, TextField, Typography } from '@mui/material'
import { CircularProgress, Fade, Grow } from '@mui/material'
import { useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form';
import AuthService from '../../services/AuthService';
import { CheckCircle } from '@mui/icons-material';
import { Button, Flex, Paper, Text, TextInput } from '@mantine/core';
interface PasswordResetProps {
email: string;
@@ -31,61 +32,58 @@ function PasswordReset() {
}
return (
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
<Paper flex={1} maw='500' withBorder radius='md' p='xl'>
<Flex direction='column' gap='sm'>
<Text size="xl" fw={500}>
Восстановление пароля
</Typography>
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
{!success && <Fade in={!success}>
<Stack spacing={2}>
<Typography>
<Flex direction='column' gap={'md'}>
<Text>
Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
</Typography>
</Text>
<TextField
fullWidth
margin="normal"
label="E-mail"
<TextInput
label='E-mail'
required
{...register('email', { required: 'Введите E-mail' })}
error={!!errors.email}
helperText={errors.email?.message}
error={errors.email?.message}
/>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Button fullWidth type="submit" disabled={isSubmitting || watch('email').length == 0} variant="contained" color="primary">
<Flex gap='sm'>
<Button flex={1} type="submit" disabled={isSubmitting || watch('email').length == 0} variant='filled'>
{isSubmitting ? <CircularProgress size={16} /> : 'Восстановить пароль'}
</Button>
<Button fullWidth href="/auth/signin" type="button" variant="text" color="primary">
<Button flex={1} component='a' href="/auth/signin" type="button" variant='light'>
Назад
</Button>
</Box>
</Flex>
</Stack>
</Flex>
</Fade>}
{success &&
<Grow in={success}>
<Stack spacing={2}>
<Stack direction='row' alignItems='center' spacing={2}>
<Flex direction='column' gap='sm'>
<Flex align='center' gap='sm'>
<CheckCircle color='success' />
<Typography>
<Text>
На указанный адрес было отправлено письмо с новыми данными для авторизации.
</Typography>
</Stack>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Button fullWidth href="/auth/signin" type="button" variant="contained" color="primary">
</Text>
</Flex>
<Flex gap='sm'>
<Button component='a' href="/auth/signin" type="button">
Войти
</Button>
</Box>
</Stack>
</Flex>
</Flex>
</Grow>
}
</form>
</Box>
</Container>
</Flex>
</Paper>
)
}

58
client/src/pages/auth/SignIn.tsx
View File

@@ -1,14 +1,14 @@
import { useForm, SubmitHandler } from 'react-hook-form';
import { TextField, Button, Container, Typography, Box, Stack, Link, CircularProgress } from '@mui/material';
import { AxiosResponse } from 'axios';
import { ApiResponse, LoginFormData } from '../../interfaces/auth';
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';
const SignIn = () => {
const { register, handleSubmit, setError, formState: { errors, isSubmitting } } = useForm<LoginFormData>({
const { register, handleSubmit, setError, formState: { errors, isSubmitting, isValid } } = useForm<LoginFormData>({
defaultValues: {
username: '',
password: '',
@@ -47,54 +47,48 @@ const SignIn = () => {
};
return (
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
<Paper flex={1} maw='500' withBorder radius='md' p='xl'>
<Flex direction='column' gap='sm'>
<Text size="xl" fw={500}>
Вход
</Typography>
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={2}>
<TextField
fullWidth
margin="normal"
label="Логин"
<Flex direction='column' gap='sm'>
<TextInput
label='Логин'
required
{...register('username', { required: 'Введите логин' })}
error={!!errors.username}
helperText={errors.username?.message}
error={errors.username?.message}
/>
<TextField
fullWidth
margin="normal"
type="password"
label="Пароль"
<TextInput
label='Пароль'
type='password'
required
{...register('password', { required: 'Введите пароль' })}
error={!!errors.password}
helperText={errors.password?.message}
error={errors.password?.message}
/>
<Box sx={{ display: 'flex', gap: '16px', justifyContent: 'flex-end' }}>
<Link href="/auth/password-reset" color="primary">
<Flex justify='flex-end' gap='sm'>
<Button component='a' href='/auth/password-reset' variant='transparent'>
Восстановить пароль
</Link>
</Box>
</Button>
</Flex>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Button fullWidth type="submit" variant="contained" color="primary">
{isSubmitting ? <CircularProgress size={16} /> : 'Вход'}
<Flex gap='sm'>
<Button disabled={!isValid} type="submit" flex={1} variant='filled'>
{isSubmitting ? <Loader size={16} /> : 'Вход'}
</Button>
{/* <Button fullWidth href="/auth/signup" type="button" variant="text" color="primary">
{/* <Button component='a' flex={1} href='/auth/signup' type="button" variant='light'>
Регистрация
</Button> */}
</Box>
</Stack>
</Flex>
</Flex>
</form>
</Box>
</Container>
</Flex>
</Paper>
);
};