refactor: auth page

package.json

@@ -21,7 +21,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.12.2",
-    "react-icons": "^3.0.0",
+    "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^3.9.5",

src/components/Auth/Auth.tsx

@@ -1,110 +0,0 @@
-import React, { useState } from 'react';
-import { MdAccountCircle, MdVpnKey } from 'react-icons/md';
-import {
-  Flex,
-  Box,
-  FormControl,
-  FormLabel,
-  InputGroup,
-  Input,
-  InputLeftElement,
-  Button,
-  Icon,
-} from '@chakra-ui/react';
-import { useRootStore } from '../../hooks/useRootStore';
-import { useHistory } from 'react-router-dom';
-import { observer } from 'mobx-react';
-
-type LoginDataInput = {
-  login: string;
-  password: string;
-};
-
-/**
- * Authorize user through a form.
- */
-const Auth: React.FC = () => {
-  const [loginFormData, setLoginFormData] = useState<LoginDataInput>({
-    login: '',
-    password: '',
-  });
-  const { authStore } = useRootStore();
-  const history = useHistory();
-
-  const handleLoginForm = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const { login, password } = loginFormData;
-    await authStore.login(login, password);
-    history.push('/');
-  };
-
-  return (
-    <Flex minHeight='100vh' align='center' justifyContent='center'>
-      <Box
-        p={8}
-        my={40}
-        width='full'
-        maxWidth='450px'
-        borderWidth={1}
-        borderRadius={8}>
-        <Box textAlign='center'>
-          <Flex justifyContent='center'>
-            {/* <LogoIcon viewBox='0 0 24 24' boxSize={'64px'} fill='blue.600' /> */}
-          </Flex>
-        </Box>
-        <Box my='30px'>
-          <form onSubmit={handleLoginForm}>
-            <FormControl isRequired={true}>
-              <FormLabel>Login</FormLabel>
-              <InputGroup>
-                <InputLeftElement children={<Icon as={MdAccountCircle} />} />
-                <Input
-                  type='text'
-                  name='login'
-                  placeholder='email@mail.com'
-                  value={loginFormData.login}
-                  onChange={(e) =>
-                    setLoginFormData({
-                      ...loginFormData,
-                      login: e.target.value,
-                    })
-                  }
-                />
-              </InputGroup>
-            </FormControl>
-            <FormControl mt={5} isRequired={true}>
-              <FormLabel>Password</FormLabel>
-              <InputGroup>
-                <InputLeftElement children={<Icon as={MdVpnKey} />} />
-                <Input
-                  type='password'
-                  name='password'
-                  placeholder='********'
-                  value={loginFormData.password}
-                  onChange={(e) =>
-                    setLoginFormData({
-                      ...loginFormData,
-                      password: e.target.value,
-                    })
-                  }
-                />
-              </InputGroup>
-            </FormControl>
-            <Button
-              loadingText='Logging in...'
-              type='submit'
-              colorScheme='blue'
-              variant='outline'
-              width='full'
-              mt={4}>
-              Log in
-            </Button>
-          </form>
-        </Box>
-      </Box>
-    </Flex>
-  );
-};
-
-export default observer(Auth);

src/components/Auth/AuthForm.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { MdAccountCircle, MdVpnKey } from 'react-icons/md';
+import {
+  FormControl,
+  FormLabel,
+  InputGroup,
+  Input,
+  InputLeftElement,
+  Button,
+  Icon,
+} from '@chakra-ui/react';
+import { useRootStore } from '../../hooks/useRootStore';
+import { useHistory } from 'react-router-dom';
+import { observer } from 'mobx-react';
+
+type AuthFormState = {
+  login: string;
+  password: string;
+};
+
+const AuthForm: React.FC = () => {
+  const [authFormState, setAuthFormState] = useState<AuthFormState>({
+    login: '',
+    password: '',
+  });
+  const { authStore } = useRootStore();
+  const history = useHistory();
+  const handleLoginForm = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const { login, password } = authFormState;
+    await authStore.login(login, password);
+    history.push('/');
+  };
+
+  return (
+    <form onSubmit={handleLoginForm}>
+      <FormControl isRequired={true}>
+        <FormLabel>Login</FormLabel>
+        <InputGroup>
+          <InputLeftElement children={<Icon as={MdAccountCircle} />} />
+          <Input
+            type='text'
+            name='login'
+            placeholder='email@mail.com'
+            value={authFormState.login}
+            onChange={(e) =>
+              setAuthFormState({
+                ...authFormState,
+                login: e.target.value,
+              })
+            }
+          />
+        </InputGroup>
+      </FormControl>
+      <FormControl mt={5} isRequired={true}>
+        <FormLabel>Password</FormLabel>
+        <InputGroup>
+          <InputLeftElement children={<Icon as={MdVpnKey} />} />
+          <Input
+            type='password'
+            name='password'
+            placeholder='********'
+            value={authFormState.password}
+            onChange={(e) =>
+              setAuthFormState({
+                ...authFormState,
+                password: e.target.value,
+              })
+            }
+          />
+        </InputGroup>
+      </FormControl>
+      <Button
+        loadingText='Logging in...'
+        type='submit'
+        colorScheme='blue'
+        variant='outline'
+        width='full'
+        mt={4}>
+        Log in
+      </Button>
+    </form>
+  )
+}
+
+export default observer(AuthForm)

src/pages/auth.tsx

@@ -1,11 +1,17 @@
 import { observer } from 'mobx-react';
 import React from 'react';
+import {
+  Flex,
+  Box,
+} from '@chakra-ui/react';
+import { MdSchool } from "react-icons/md";
 import Helmet from 'react-helmet';
 import { useHistory } from 'react-router-dom';
-import Auth from '../components/Auth/Auth';
 import { useRootStore } from '../hooks/useRootStore';
 import { IPageProps } from '../interfaces';
 
+import AuthForm from '../components/Auth/AuthForm';
+
 /**
  * Auth page
  */
@@ -22,7 +28,24 @@ const AuthPage: React.FC<IPageProps> = () => {
       <Helmet>
         <title>Auth</title>
       </Helmet>
-      <Auth />
+      <Flex minHeight='100vh' align='center' justifyContent='center'>
+        <Box
+          p={8}
+          my={40}
+          width='full'
+          maxWidth='450px'
+          borderWidth={1}
+          borderRadius={8}>
+          <Box textAlign='center'>
+            <Flex justifyContent='center'>
+              <MdSchool fill='blue' size='64px' />
+            </Flex>
+          </Box>
+          <Box my='30px'>
+            <AuthForm />
+          </Box>
+        </Box>
+      </Flex>
     </>
   );
 };

src/pages/main.tsx

@@ -7,12 +7,13 @@ import {
   BreadcrumbLink,
   Grid,
 } from '@chakra-ui/react';
+
 import { IPageProps } from '../interfaces';
 
 /**
  * Main page
  */
-const MainPage: React.FC<IPageProps> = ({ title, history }) => {
+const MainPage: React.FC<IPageProps> = ({ title }) => {
   return (
     <>
       <Breadcrumb fontWeight='medium' fontSize='sm'>