NestJS backend rewrite; migrate client to FluentUI V9

client/src/pages/auth/SignIn.tsx

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