Merge branch 'dev' into 'master'

Basic implementation of login page

See merge request !11

.gitignore

@@ -138,3 +138,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+.docz/
\ No newline at end of file

.gitlab-ci.yml

@@ -8,4 +8,5 @@ build:
   script:
     - npm install --force --global yarn
     - yarn install
+    - yarn test
     - yarn build

README.md

@@ -32,7 +32,7 @@ npm install --global yarn
 # Install dependencies
 yarn install
 # Run project
-yarn run
+yarn start
 
 # Further commands are in the package.json under "scripts"
 ```

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "docz": "^2.3.1",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -24,7 +25,10 @@
     "eject": "react-scripts eject",
     "format": "prettier --write .",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix .",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build",
+    "docz:serve": "docz build && docz serve"
   },
   "browserslist": {
     "production": [

src/App.test.tsx

 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import { App } from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+describe('<App />', () => {
+  it('renders without crashing', () => {
+    const wrapper = render(<App />);
+    expect(wrapper.queryByTestId('App')).toBeTruthy();
+  });
 });

src/App.tsx

 import React from 'react';
-import { Form } from './components/LoginForm/index';
+import { AuthUser } from './components/AuthUser/AuthUser';
 
 export const App: React.FC = () => (
-  <div className="App">
+  <div className="App" data-testid="App">
     <header className="App-header">
-      <Form />
+      <AuthUser />
     </header>
   </div>
 );

src/components/AuthUser/AuthUser.tsx

+import React, { FC, useEffect } from 'react';
+import Container from '@material-ui/core/Container';
+import { LoginForm } from './LoginForm/LoginForm';
+
+export const AuthUser: FC = () => {
+  useEffect(() => {
+    fetch('/api/web/csrf')
+      .then((response) => response.json())
+      .then((data) => sessionStorage.setItem('token', data.token));
+  }, []);
+  return (
+    <Container maxWidth="sm">
+      <LoginForm />
+    </Container>
+  );
+};

src/components/AuthUser/LoginForm/LoginForm.mdx

+---
+name: LoginForm
+---
+
+import { LoginForm } from './LoginForm.tsx';
+
+# LoginForm
+Lets registered user authenticate
+
+<LoginForm />
\ No newline at end of file

src/components/AuthUser/LoginForm/LoginForm.test.tsx

+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { LoginForm } from './LoginForm';
+
+describe('<LoginForm />', () => {
+  it('it should render form', () => {
+    const wrapper = render(<LoginForm />);
+    expect(wrapper.queryByTestId('LoginForm')).toBeTruthy();
+  });
+});

src/components/LoginForm/index.tsx → src/components/AuthUser/LoginForm/LoginForm.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export const Form: React.FC = () => {
+export const LoginForm: React.FC = () => {
   interface formData {
     email: string;
     password: string;
@@ -38,18 +38,17 @@ export const Form: React.FC = () => {
   const handleSubmit = (event: React.FormEvent): void => {
     event.preventDefault();
     const errors: Array<string> = [];
-    if (!isEmailValid(formValues.email)) {
-      errors.push('email');
-      console.log('Email address not valid');
-    } else {
-      console.log(formValues);
-    }
+    if (!isEmailValid(formValues.email)) errors.push('email');
   };
 
   const classes = useStyles();
 
   return (
-    <form className={classes.form} onSubmit={handleSubmit}>
+    <form
+      className={classes.form}
+      onSubmit={handleSubmit}
+      data-testid="LoginForm"
+    >
       <TextField
         variant="outlined"
         margin="normal"
@@ -83,6 +82,7 @@ export const Form: React.FC = () => {
         fullWidth
         variant="contained"
         color="primary"
+        data-testid="Submit"
         className={classes.submit}
       >
         Sign In