Merge branch 'feat/109859-landing-page' into 'master'

Feat/109859 landing page

See merge request spinning-top/connect!15

.eslintrc.js

@@ -32,5 +32,8 @@ module.exports = {
         },
       },
     },
+    "env": {
+      "browser": true
+    }  
   };
 

package.json

@@ -6,7 +6,7 @@
     "start": "node src/index.js",
     "build": "webpack --config webpack.conf.js",
     "watch": "webpack-dev-server --config webpack.conf.js",
-    "eslint.check":  "eslint src/**/*.{js,jsx}",
+    "eslint.check": "eslint src/**/*.{js,jsx}",
     "eslint.fix": "eslint src/**/*.{js,jsx} --fix",
     "prettier.check": "prettier src/**/*.{js,jsx} --list-different",
     "prettier.fix": "prettier src/**/*.{js,jsx} --write",
@@ -40,17 +40,26 @@
   "dependencies": {
     "@material-ui/core": "^4.2.1",
     "axios": "0.19.0",
+    "cors": "^2.8.5",
     "debug": "4.1.1",
     "dotenv": "8.0.0",
     "eslint-plugin-import": "^2.18.0",
     "express": "4.17.1",
     "glob": "7.1.4",
+    "js-cookie": "2.2.0",
     "jsonwebtoken": "8.5.1",
+    "jwt-decode": "2.2.0",
     "moment": "2.24.0",
     "mongoose": "5.6.4",
     "parse-dashboard": "1.3.3",
     "parse-server": "https://github.com/brunoMaurice/parse-server/releases/download/3.6.0-bis/parse-server-v3.6.0-bis.tgz",
+    "prop-types": "^15.7.2",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "react-router": "^5.0.1",
+    "react-router-dom": "^5.0.1",
     "request-promise": "4.2.4",
+    "rxjs": "^6.5.2",
     "swagger-ui-express": "4.0.7",
     "uuid": "3.3.2",
     "validate.js": "0.13.1",
@@ -73,14 +82,10 @@
     "eslint-plugin-react": "^7.14.2",
     "html-webpack-plugin": "3.2.0",
     "jest": "24.8.0",
-    "js-cookie": "2.2.0",
-    "jwt-decode": "2.2.0",
     "mini-css-extract-plugin": "0.7.0",
     "node-sass": "4.12.0",
     "nodemon": "1.19.1",
     "prettier": "1.18.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.1",
     "url-loader": "2.0.1",

src/front/component/App.jsx

@@ -1,31 +1,42 @@
 import * as React from 'react';
 import { BrowserRouter as Router } from "react-router-dom";
-import Routes from "./Router";
+
 
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
-import { hasJwt, logout } from '../services/auth';
+import { logout, connectedState } from '../services/auth';
+import Routes from "./Router";
 
 
-class App extends React.Component {
+class App extends React.PureComponent {
 
-  signout() {
-    logout();
+  constructor() {
+    super();    
+    this.state = {userConnected : false};
+  }
+
+  componentDidMount() {
+    connectedState.subscribe((userConnected) => {
+      this.setState({userConnected});
+    })
   }
 
   render() {
+    const { userConnected } = this.state;
+
     return (
       <div>
         <AppBar position="static" color="default">
           <Toolbar>
             <Typography variant="h6" color="inherit">
               Connect
             </Typography>
-            <div className="spacer"></div>
-            {hasJwt() && <Button color="inherit" onClick={this.signout()}>Logout</Button>}
+            <div className="spacer" />
+
+            {userConnected && <Button color="inherit" onClick={() => {logout(); window.location.href = '/'}}>Logout</Button>}
 
           </Toolbar>
         </AppBar>

src/front/component/Page.jsx

@@ -1,13 +1,20 @@
 import * as React from 'react';
 import { Redirect } from 'react-router';
-import { ROUTES } from './Router';
+import PropTypes from 'prop-types'; // ES6
+
 import { hasJwt } from '../services/auth';
 
-class Page extends React.Component {
-  state = { redirectToReferrer: false };
+
+class Page extends React.PureComponent {
+
+  constructor() {
+    super();
+    this.state = { redirectToReferrer: false };
+  }
 
   async componentDidMount() {
-    if (!this.props.isPublic && !hasJwt()) {
+    const { isPublic } = this.props;
+    if (!isPublic && !hasJwt()) {
       this.setState({ redirectToReferrer: true });
     }
   }
@@ -16,11 +23,19 @@ class Page extends React.Component {
     const { redirectToReferrer } = this.state;
 
     if (redirectToReferrer) {
-      return <Redirect to={ROUTES.HOME} />;
+      return <Redirect to='/' />;
     }
+    const { children } = this.props;
 
-    return <div>{this.props.children}</div>;
+    return <div>{ children }</div>;
   }
 }
 
+Page.propTypes = {
+  isPublic: PropTypes.bool.isRequired,
+  children: PropTypes.element.isRequired
+};
+
+
+
 export default Page;

src/front/component/Router.jsx

@@ -1,50 +1,49 @@
 import * as React from 'react';
 import { Route } from 'react-router-dom';
 
+import LoginPage from '../pages/login/login';
+import Github from '../pages/login/github';
+import HomePage from '../pages/home/home';
+import DetailsPage from '../pages/details/details';
+
 export const ROUTES = {
   HOME: '/',
   LOGIN_GITHUB: '/login/github',
   CONNECTED_HOME: '/home'
 };
 
-const routesConfig = [
-  {
-    component: '/',
-    path: '/',
-    exact: true,
-  },
-  {
-    component: 'login/github',
-    path: '/login/github',
-    exact: true,
-  },
-  {
-    component: 'home/home',
-    path: '/home',
-    exact: true,
-  },
-
-];
-
-class Routes extends React.Component {
+class Routes extends React.PureComponent {
   render() {
     return (
       <>
-        {routesConfig.map((route, i) => {
-          const path =
-            route.component.charAt(0) === '/'
-              ? route.component.substr(1)
-              : route.component;
-          const component = require(`./../pages/${path}`).default;
-          return (
-            <Route
-              exact={route.exact}
-              path={route.path}
-              component={component}
-              key={i}
-            />
-          );
-        })}
+        <Route
+          exact
+          path='/login/github'
+          component={Github}
+        />
+
+        <Route
+          exact
+          path='/application/:appId'
+          component={DetailsPage}
+        />
+
+
+        <Route
+          exact
+          path='/home'
+          component={HomePage}
+        />
+
+
+        <Route
+          exact
+          path='/'
+          component={LoginPage}
+        />
+
+
+
       </>
     );
   }

src/front/index.css

@@ -6,4 +6,8 @@ body {
 
 a {
   text-decoration: none;
+}
+
+.spacer {
+  flex: 1;
 }