[Feat] LoginForm layout

Created basic login form layout.
References #21.

client/src/components/LoginForm/LoginForm.lazy.tsx

@@ -0,0 +1,13 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyLoginForm = lazy(() => import('./LoginForm'));
+
+const LoginForm = (
+  props: JSX.IntrinsicAttributes & { children?: React.ReactNode },
+) => (
+  <Suspense fallback={null}>
+    <LazyLoginForm {...props} />
+  </Suspense>
+);
+
+export default LoginForm;

client/src/components/LoginForm/LoginForm.module.scss

@@ -0,0 +1,5 @@
+.LoginForm {
+  a {
+    cursor: pointer;
+  }
+}

client/src/components/LoginForm/LoginForm.stories.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import LoginForm from './LoginForm';
+
+export default {
+  title: "LoginForm",
+  component: LoginForm
+};
+
+export const Default = () => <LoginForm apiLoginEndpoint=''/>;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/LoginForm/LoginForm.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import LoginForm from './LoginForm';
+
+describe('<LoginForm />', () => {
+  test('it should mount', () => {
+    render(<LoginForm />);
+
+    const loginForm = screen.getByTestId('LoginForm');
+
+    expect(loginForm).toBeInTheDocument();
+  });
+});

client/src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,95 @@
+import {
+  Button,
+  Container,
+  Grid,
+  Link,
+  TextField,
+  Typography,
+} from '@mui/material';
+import axios from 'axios';
+import React, { FC, useState } from 'react';
+
+import styles from './LoginForm.module.scss';
+
+interface LoginFormProps {
+  apiLoginEndpoint: string;
+}
+
+const LoginForm: FC<LoginFormProps> = (props: LoginFormProps) => {
+  const [username, setUsername] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+
+  const login = async () => {
+    const response = await axios.post(
+      props.apiLoginEndpoint,
+      {
+        username,
+        password,
+      },
+      {
+        withCredentials: true,
+      },
+    );
+
+    if (response.data === 'success') {
+      return (window.location.href = '/');
+    }
+  };
+
+  const register = () => {
+    console.log('aaa');
+  };
+
+  return (
+    <Container className={styles.LoginForm} data-testid="LoginForm">
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Typography variant="h4">Login</Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            label="Username"
+            variant="filled"
+            type="text"
+            required
+            fullWidth
+            onChange={(e: {
+              target: { value: React.SetStateAction<string> };
+            }) => setUsername(e.target.value)}
+          />
+        </Grid>
+
+        <Grid item xs={12}>
+          <TextField
+            label="Password"
+            variant="filled"
+            type="password"
+            required
+            fullWidth
+            onChange={(e: {
+              target: { value: React.SetStateAction<string> };
+            }) => setPassword(e.target.value)}
+          />
+        </Grid>
+
+        <Grid item xs={12}>
+          <Button
+            type="button"
+            variant="contained"
+            size="large"
+            fullWidth
+            onClick={() => login()}
+          >
+            Log in
+          </Button>
+          <Typography align="center">
+            Don't have an account?{' '}
+            <Link onClick={() => register()}>Register!</Link>
+          </Typography>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default LoginForm;

client/src/index.css

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+a {
+  cursor: pointer;
+}