feat: Add draft Log in form

.env

@@ -0,0 +1 @@
+DISABLE_NEW_JSX_TRANSFORM = true

package.json

@@ -24,15 +24,23 @@
     ]
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "typescript": "^4.1.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.22",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-redux": "^7.1.16",
+    "@types/react-router-dom": "^5.1.7",
     "typescript-plugin-css-modules": "^3.1.0"
   }
 }

src/App.tsx

@@ -1,13 +1,73 @@
 import React, { Component } from 'react';
+import Auth from './containers/AuthForm/Auth';
+import { Redirect, Route, Switch } from 'react-router';
+import { NavLink } from 'react-router-dom';
+import Button from './components/UI/Button/Button';
+import { Dispatch } from 'redux';
+import { logOut } from './store/auth/actions';
+import { connect } from 'react-redux';
+import { RootState } from './store';
+import { Fragment } from 'react';
+
+interface StateProps {
+  isAuthenticated: boolean
+}
+
+interface DispatchProps {
+  onLogOut: () => void
+}
+
+type Props = StateProps & DispatchProps
+
+class App extends Component<Props> {
+
+  logOutHandler = () => {
+    this.props.onLogOut();
+  };
 
-class App extends Component {
   render() {
+    // ToDo: Create a navigation component
+
+    const content = () => {
+      if (this.props.isAuthenticated) {
+        return (
+          <Fragment>
+            {/*ToDo: rid off from the inline-style */}
+            <NavLink style={{ margin: '10px' }} to='/'>Home</NavLink>
+            <NavLink style={{ margin: '10px' }} to='/projects'>Projects</NavLink>
+            <Button onClick={this.logOutHandler}>Log out</Button>
+            <Redirect to='/' />
+          </Fragment>
+        );
+      }
+      return <Redirect to='/auth' />;
+    };
+
     return (
-      <div>
+      <div style={{textAlign: 'center'}}>
         <h1>Cromwell Pipeline</h1>
+        {content()}
+        <Switch>
+          {/*ToDo: rid off from the inline-renders */}
+          <Route path='/auth' component={Auth} />
+          <Route path='/projects' render={() => <h2>Projects content</h2>} />
+          <Route path='/' exact render={() => <h2>Main content</h2>} />
+        </Switch>
       </div>
     );
   }
 }
 
-export default App;
+const mapStateToProps = (state: RootState) => {
+  return {
+    isAuthenticated: state.auth.isAuthenticated
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    onLogOut: () => dispatch(logOut())
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/axiosCromwell.tsx

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const axiosCromwell = axios.create({
+  baseURL: 'http://localhost:3001/'
+});
+
+export default axiosCromwell;

src/components/UI/Button/Button.module.css

@@ -0,0 +1,11 @@
+.Button {
+    background-color: transparent;
+    border: none;
+    color: blue;
+    outline: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 10px;
+    margin: 10px;
+    font-weight: bold;
+}