Move api call to separate file, adapt type to cookie.

src/components/Auth/SignInForm/CredentialsType.ts

 export type CredentialsType = {
   username: string;
   password: string;
+  cookie: string;
 };

src/components/Auth/SignInForm/SignInForm.tsx

@@ -16,6 +16,7 @@ import { useHistory } from 'react-router-dom';
 import { InputField } from 'components/Auth/InputField/InputField';
 import { signInFormStyles } from './SignInForm.styles';
 import { CredentialsType } from './CredentialsType';
+import { postCredentials } from '../../../api/postCredentials';
 
 const defaultValues = {
   username: '',
@@ -34,36 +35,22 @@ export const SignInForm: FC = () => {
   const onSubmit: SubmitHandler<CredentialsType> = (
     values: CredentialsType,
   ) => {
-    axios
-      .post(
-        '/api/web/login',
-        {
-          username: values.username,
-          password: values.password,
-          csrfmiddlewaretoken: cookie,
-        },
-        {
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        },
-      )
-      .then((response) => {
-        if (response.data.status === 'fail') {
-          setError('username', {
-            type: 'server',
-            message: 'Something went wrong with username',
-          });
-          setError('password', {
-            type: 'server',
-            message: 'Something went wrong with password',
-          });
-        } else if (response.data.status === 'role-choice-needed') {
-          history.replace(`${NonAuthRoutes.auth}${AuthRoutes.choseRole}`);
-        } else if (response.data.status === 'success') {
-          history.replace(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
-        }
-      });
+    postCredentials({ ...values, cookie }).then((status) => {
+      if (status === 'fail') {
+        setError('username', {
+          type: 'server',
+          message: 'Something went wrong with username',
+        });
+        setError('password', {
+          type: 'server',
+          message: 'Something went wrong with password',
+        });
+      } else if (status === 'role-choice-needed') {
+        history.replace(`${NonAuthRoutes.auth}${AuthRoutes.choseRole}`);
+      } else if (status === 'success') {
+        history.replace(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
+      }
+    });
   };
 
   const classes = signInFormStyles();

src/components/Auth/SignInForm/postCredentials.ts

-import axios from 'axios';
-import { CredentialsType } from './CredentialsType';
-
-export const postCredentials = async (
-  values: CredentialsType,
-  cookie: React.Dispatch<React.SetStateAction<string>>,
-): Promise<unknown> => {
-  const response = await axios.post(
-    '/api/web/login',
-    {
-      username: values.username,
-      password: values.password,
-      csrfmiddlewaretoken: cookie,
-    },
-    {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    },
-  );
-
-  return null;
-};