popovspiridon99/tests
1
0
Fork 0
forked from VinokurovVE/tests
Code Issues Pull Requests Projects Releases Wiki Activity

Refactored forms

Browse Source
This commit is contained in:
cracklesparkle
2024-07-30 17:39:57 +09:00
parent a1a5c2b3a6
commit 1e802b4550
15 changed files with 374 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend_reactjs/src/pages/Roles.tsx
View File

@ -1,10 +1,10 @@
import { useState } from 'react'
import { Box, Button, CircularProgress } from '@mui/material'
import { Box, Button, CircularProgress, Modal } from '@mui/material'
import { DataGrid, GridColDef } from '@mui/x-data-grid'
import { useRoles } from '../hooks/swrHooks'
import { CreateField } from '../interfaces/create'
import ModalCreate from '../components/modals/ModalCreate'
import RoleService from '../services/RoleService'
import FormFields from '../components/FormFields'
export default function Roles() {
const { roles, isError, isLoading } = useRoles()
@ -37,13 +37,16 @@ export default function Roles() {
Добавить роль
</Button>
<ModalCreate
<Modal
open={open}
setOpen={setOpen}
fields={createFields}
submitHandler={RoleService.createRole}
title="Создание роли"
/>
onClose={() => setOpen(false)}
>
<FormFields
fields={createFields}
submitHandler={RoleService.createRole}
title="Создание роли"
/>
</Modal>
<DataGrid
autoHeight

104
frontend_reactjs/src/pages/Settings.tsx
View File

@ -1,38 +1,41 @@
import { Box, CircularProgress } from "@mui/material"
import { DataGrid, GridColDef } from "@mui/x-data-grid"
import { useRoles, useUsers } from "../hooks/swrHooks"
import { IRole } from "../interfaces/role"
import { Box, Stack, Typography } from "@mui/material"
import UserService from "../services/UserService"
import { useAuthStore } from "../store/auth"
import { useEffect, useState } from "react"
import { CreateField } from "../interfaces/create"
import { IUser } from "../interfaces/user"
import FormFields from "../components/FormFields"
export default function Settings() {
const { users, isError, isLoading } = useUsers()
const { token } = useAuthStore()
const [currentUser, setCurrentUser] = useState<IUser>()
const { roles } = useRoles()
const fetchCurrentUser = async () => {
if (token) {
await UserService.getCurrentUser(token).then(response => {
setCurrentUser(response.data)
})
}
}
const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID', type: "number", width: 70 },
{ field: 'email', headerName: 'Email', width: 130, editable: true },
{ field: 'login', headerName: 'Логин', width: 130, editable: true },
{ field: 'phone', headerName: 'Телефон', width: 90, editable: true },
{ field: 'name', headerName: 'Имя', width: 90, editable: true },
{ field: 'surname', headerName: 'Фамилия', width: 90, editable: true },
{ field: 'is_active', headerName: 'Активен', type: "boolean", width: 90, editable: true },
{
field: 'role_id',
headerName: 'Роль',
valueGetter: (value) => {
if (roles) {
const roleName = roles.find((role: IRole) => role.id === value).name
return roleName
} else {
return value
}
},
width: 90
},
];
useEffect(() => {
if (token) {
fetchCurrentUser()
}
}, [token])
if (isError) return <div>Произошла ошибка при получении данных.</div>
if (isLoading) return <CircularProgress />
const profileFields: CreateField[] = [
{ key: 'email', headerName: 'E-mail', type: 'string', required: true },
{ key: 'login', headerName: 'Логин', type: 'string', required: true },
{ key: 'phone', headerName: 'Телефон', type: 'string', required: false },
{ key: 'name', headerName: 'Имя', type: 'string', required: true },
{ key: 'surname', headerName: 'Фамилия', type: 'string', required: true },
]
const passwordFields: CreateField[] = [
{ key: 'password', headerName: 'Новый пароль', type: 'string', required: true, inputType: 'password' },
{ key: 'password_confirm', headerName: 'Подтверждение пароля', type: 'string', required: true, inputType: 'password', watch: 'password', watchMessage: 'Пароли не совпадают' },
]
return (
<Box sx={{
@ -42,27 +45,28 @@ export default function Settings() {
gap: "16px",
}}
>
<DataGrid
autoHeight
style={{ width: "100%" }}
rows={users}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 10 },
},
}}
pageSizeOptions={[10, 20, 50, 100]}
checkboxSelection
disableRowSelectionOnClick
{currentUser &&
<Stack spacing={2} width='100%'>
<Stack width='100%'>
<FormFields
fields={profileFields}
defaultValues={currentUser}
//submitHandler={RoleService.createRole}
title="Пользователь"
/>
</Stack>
<Stack width='100%'>
<FormFields
fields={passwordFields}
defaultValues={currentUser}
watchValues={['password, password_confirm']}
//submitHandler={RoleService.createRole}
title="Смена пароля"
/>
</Stack>
</Stack>
processRowUpdate={(updatedRow) => {
return updatedRow
}}
onProcessRowUpdateError={() => {
}}
/>
}
</Box>
)
}

19
frontend_reactjs/src/pages/Users.tsx
View File

@ -1,11 +1,11 @@
import { Box, Button, CircularProgress } from "@mui/material"
import { Box, Button, CircularProgress, Modal } from "@mui/material"
import { DataGrid, GridColDef } from "@mui/x-data-grid"
import { useRoles, useUsers } from "../hooks/swrHooks"
import { IRole } from "../interfaces/role"
import { useState } from "react"
import { CreateField } from "../interfaces/create"
import ModalCreate from "../components/modals/ModalCreate"
import UserService from "../services/UserService"
import FormFields from "../components/FormFields"
export default function Users() {
const { users, isError, isLoading } = useUsers()
@ -56,13 +56,16 @@ export default function Users() {
Добавить пользователя
</Button>
<ModalCreate
<Modal
open={open}
setOpen={setOpen}
fields={createFields}
submitHandler={UserService.createUser}
title="Создание пользователя"
/>
onClose={() => setOpen(false)}
>
<FormFields
fields={createFields}
submitHandler={UserService.createUser}
title="Создание пользователя"
/>
</Modal>
<DataGrid
autoHeight

92
frontend_reactjs/src/pages/auth/PasswordReset.tsx Normal file
View File

@ -0,0 +1,92 @@
import { Box, Button, CircularProgress, Container, Fade, Grow, Stack, TextField, Typography } 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';
interface PasswordResetProps {
email: string;
}
function PasswordReset() {
const [success, setSuccess] = useState(false)
const { register, handleSubmit, watch, setError, formState: { errors, 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 (
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Восстановление пароля
</Typography>
<form onSubmit={handleSubmit(onSubmit)}>
{!success && <Fade in={!success}>
<Stack spacing={2}>
<Typography>
Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
</Typography>
<TextField
fullWidth
margin="normal"
label="E-mail"
required
{...register('email', { required: 'Введите E-mail' })}
error={!!errors.email}
helperText={errors.email?.message}
/>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Button fullWidth type="submit" disabled={isSubmitting || watch('email').length == 0} variant="contained" color="primary">
{isSubmitting ? <CircularProgress size={16} /> : 'Восстановить пароль'}
</Button>
<Button fullWidth href="/auth/signin" type="button" variant="text" color="primary">
Назад
</Button>
</Box>
</Stack>
</Fade>}
{success &&
<Grow in={success}>
<Stack spacing={2}>
<Stack direction='row' alignItems='center' spacing={2}>
<CheckCircle color='success' />
<Typography>
На указанный адрес было отправлено письмо с новыми данными для авторизации.
</Typography>
</Stack>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Button fullWidth href="/auth/signin" type="button" variant="contained" color="primary">
Войти
</Button>
</Box>
</Stack>
</Grow>
}
</form>
</Box>
</Container>
)
}
export default PasswordReset

68
frontend_reactjs/src/pages/auth/SignIn.tsx
View File

@ -1,5 +1,5 @@
import { useForm, SubmitHandler } from 'react-hook-form';
import { TextField, Button, Container, Typography, Box } from '@mui/material';
import { TextField, Button, Container, Typography, Box, Stack, Link } from '@mui/material';
import { AxiosResponse } from 'axios';
import { ApiResponse, LoginFormData } from '../../interfaces/auth';
import { login, setUserData } from '../../store/auth';
@ -50,32 +50,48 @@ const SignIn = () => {
<Typography variant="h4" component="h1" gutterBottom>
Вход
</Typography>
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
fullWidth
margin="normal"
label="Логин"
required
{...register('username', { required: 'Введите логин' })}
error={!!errors.username}
helperText={errors.username?.message}
/>
<TextField
fullWidth
margin="normal"
type="password"
label="Пароль"
required
{...register('password', { required: 'Введите пароль' })}
error={!!errors.password}
helperText={errors.password?.message}
/>
<Button type="submit" variant="contained" color="primary">
Вход
</Button>
<Button href="/auth/signup" type="button" variant="text" color="primary">
Регистрация
</Button>
<Stack spacing={2}>
<TextField
fullWidth
margin="normal"
label="Логин"
required
{...register('username', { required: 'Введите логин' })}
error={!!errors.username}
helperText={errors.username?.message}
/>
<TextField
fullWidth
margin="normal"
type="password"
label="Пароль"
required
{...register('password', { required: 'Введите пароль' })}
error={!!errors.password}
helperText={errors.password?.message}
/>
<Box sx={{ display: 'flex', gap: '16px', justifyContent: 'flex-end' }}>
<Link href="/auth/password-reset" color="primary">
Восстановить пароль
</Link>
</Box>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Button fullWidth type="submit" variant="contained" color="primary">
Вход
</Button>
<Button fullWidth href="/auth/signup" type="button" variant="text" color="primary">
Регистрация
</Button>
</Box>
</Stack>
</form>
</Box>
</Container>

6
frontend_reactjs/src/pages/auth/SignUp.tsx
View File

@ -1,10 +1,10 @@
import { useForm, SubmitHandler } from 'react-hook-form';
import { TextField, Button, Container, Typography, Box } from '@mui/material';
import UserService from '../../services/UserService';
import { IUserCreate } from '../../interfaces/user';
import { IUser } from '../../interfaces/user';
const SignUp = () => {
const { register, handleSubmit, formState: { errors } } = useForm<IUserCreate>({
const { register, handleSubmit, formState: { errors } } = useForm<IUser>({
defaultValues: {
email: '',
login: '',
@ -17,7 +17,7 @@ const SignUp = () => {
})
const onSubmit: SubmitHandler<IUserCreate> = async (data) => {
const onSubmit: SubmitHandler<IUser> = async (data) => {
try {
await UserService.createUser(data)
} catch (error) {