mantine

client/src/pages/auth/SignIn.tsx

@@ -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>
   );
 };