V.0.9.0 - Login and Logout working

José Maria Villac Pinheiro
1 parent d8f42d39
Showing 10 changed files with 86 additions and 146 deletions Show diff stats
app.js
client/package.json
client/public/index.html
client/public/index1.html
client/src/App.css
client/src/App.js
client/src/App.test.js
client/src/components/map.js
client/src/index.js
routes/authRoutes.js
@@ -40,18 +40,19 @@ app.set(&quot;views&quot;, path.join(__dirname, &quot;views&quot;));
 app.set("view engine", "pug");
 // uncomment after placing your favicon in /public
-app.use(
-  cookieSession({
-    maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
-    keys: [keys.cookieKey]
-  })
-);
 app.use(favicon(path.join(__dirname, "public", "favicon.ico")));
 app.use(logger("dev"));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, "public")));
+// intersept all incoming requests
+app.use(
+  cookieSession({
+    maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
+    keys: [keys.cookieKey]
+  })
+);
 app.use(passport.initialize());
 app.use(passport.session());
@@ -6,22 +6,16 @@
     "/map": {
       "target": "http://localhost:5000"
     },
-    "/map/pedro": {
+    "/map/*": {
       "target": "http://localhost:5000"
     },
     "/stylesheets": {
       "target": "http://localhost:5000"
     },
-    "/auth/google": {
+    "/auth/*": {
       "target": "http://localhost:5000"
     },
-    "/auth/google/callback": {
-      "target": "http://localhost:5000"
-    },
-    "/api/current_user": {
-      "target": "http://localhost:5000"
-    },
-    "/api/logout": {
+    "/api/*": {
       "target": "http://localhost:5000"
     },
     "/consumidores": {
@@ -32,15 +26,23 @@
     }
   },
   "dependencies": {
+    "@material-ui/core": "^1.4.2",
+    "@material-ui/icons": "^2.0.0",
+    "@types/react-redux": "^6.0.6",
     "ajv": "^6.5.0",
-    "axios": "0.17.1",
+    "axios": "^0.17.1",
     "faker": "^4.1.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-iframe": "^1.2.0",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
     "react-select": "1.1.0",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0",
     "source-map-explorer": "^1.5.0",
+    "typeface-roboto": "0.0.54",
     "util": "^0.10.3"
   },
   "scripts": {
@@ -7,6 +7,7 @@
     <meta name="theme-color" content="#000000">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <title>NEXUS</title>
   </head>
   <body>
@@ -1,18 +0,0 @@
-<!-- Html start page -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <title>NEXUS1</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-  </body>
-</html>
@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
@@ -1,21 +0,0 @@
-import React, { Component } from "react";
-import "./App.css";
-import FindConsumer from "./components/findConsumer";
-import Map from "./components/map";
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <div>
-          <FindConsumer />
-        </div>
-        <div>
-          <Map />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default App;
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
-import React, { Component } from 'react';
-import Iframe from 'react-iframe';
-import 'react-select/dist/react-select.css';
+import React, { Component } from 'react'
+import Iframe from 'react-iframe'
+import 'react-select/dist/react-select.css'
-export default class Map extends Component<*, State> {
-	constructor(props) {
-		super(props);
-		this.state = {
-		};
-	}
-	render() {
-		return (
-			<div>
-				<Iframe url="/map/pedro" position="absolute" width="100%" height="95%" id="mapId" allowFullScreen />
-			</div>
-		);
-	}
+export default class Map extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {}
+  }
+  render () {
+    return (
+      <div>
+        <Iframe url='/map/pedro' position='absolute' width='100%' height='95%' id='mapId' allowFullScreen />
+      </div>
+    )
+  }
 }
@@ -3,11 +3,24 @@
  * @author José Maria Villac Pinheiro
  * @date 2018-07-19
  */
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
+import 'typeface-roboto';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import reduxThunk from "redux-thunk";
+
+import './index.css';
+import App from './components/App';
 // import registerServiceWorker from "./registerServiceWorker";
+import reducers from './reducers';
+
+const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(
+	<Provider store={store}>
+		<App />
+	</Provider>,
+	document.getElementById('root')
+);
 // registerServiceWorker();
 // Autentication routes
 //
-const passport = require("passport"); // from npm
+const passport = require('passport') // from npm
 module.exports = router => {
-  // Enter to authenticate the user
+    // Enter to authenticate the user
   router.get(
-    "/auth/google",
-    passport.authenticate("google", {
-      scope: ["profile", "email"]
-    })
-  );
+        '/auth/google',
+        passport.authenticate('google', {
+          scope: ['profile', 'email']
+        })
+    )
-  // Page after authenticate
+    // Page after authenticate
   router.get(
-    "/auth/google/callback",
-    passport.authenticate("google"),
-    (err, req, res, next) => {
-      // custom error handler to catch any errors, such as TokenError
-      if (err.name === "TokenError") {
-        res.redirect("http://nexusbr.com"); // redirect them back to the login page
-      } else {
-        console.log("Falhou ao logar!");
-        // Handle other errors here
-      }
-    },
-    (req, res) => {
-      console.log("Logou com sucesso!");
-      // On success, redirect back to '/'
-      res.redirect("/");
-    }
-  );
+        '/auth/google/callback',
+        passport.authenticate('google'), // middleware to authenticate the user, after authenticate it passes to callbark
+        (err, req, res, next) => {
+            // custom error handler to catch any errors, such as TokenError
+          if (err.name === 'TokenError') {
+            res.redirect('http://nexusbr.com') // redirect them back to the login page
+          } else {
+            console.log('Falhou ao logar!')
+                // Handle other errors here
+          }
+        },
+        (req, res) => {
+          console.log('Logou com sucesso!')
+            // On success, redirect back to '/'
+          res.redirect('/surveys')
+        }
+    )
-  router.get("/api/logout", (req,res)=>{
-    req.logout();
-    res.send(req.user);
-  });
+  router.get('/api/logout', (req, res) => {
+    req.logout()
+    res.redirect('/')
+  })
-  router.get("/api/current_user", (req, res)=> {
-    res.send (req.user);
-  });
-};
+  router.get('/api/current_user', (req, res) => {
+    res.send(req.user)
+  })
+}
	@@ -1,18 +0,0 @@	@@ -1,18 +0,0 @@
1	-<!-- Html start page -->
2	-<!DOCTYPE html>
3	-<html lang="en">
4	- <head>
5	- <meta charset="utf-8">
6	- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7	- <meta name="theme-color" content="#000000">
8	- <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9	- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
10	- <title>NEXUS1</title>
11	- </head>
12	- <body>
13	- <noscript>
14	- You need to enable JavaScript to run this app.
15	- </noscript>
16	- <div id="root"></div>
17	- </body>
18	-</html>
	@@ -1,28 +0,0 @@	@@ -1,28 +0,0 @@
1	-.App {
2	- text-align: center;
3	-}
4	-
5	-.App-logo {
6	- animation: App-logo-spin infinite 20s linear;
7	- height: 80px;
8	-}
9	-
10	-.App-header {
11	- background-color: #222;
12	- height: 150px;
13	- padding: 20px;
14	- color: white;
15	-}
16	-
17	-.App-title {
18	- font-size: 1.5em;
19	-}
20	-
21	-.App-intro {
22	- font-size: large;
23	-}
24	-
25	-@keyframes App-logo-spin {
26	- from { transform: rotate(0deg); }
27	- to { transform: rotate(360deg); }
28	-}
	@@ -1,21 +0,0 @@	@@ -1,21 +0,0 @@
1	-import React, { Component } from "react";
2	-import "./App.css";
3	-import FindConsumer from "./components/findConsumer";
4	-import Map from "./components/map";
5	-
6	-class App extends Component {
7	- render() {
8	- return (
9	- <div className="App">
10	- <div>
11	- <FindConsumer />
12	- </div>
13	- <div>
14	- <Map />
15	- </div>
16	- </div>
17	- );
18	- }
19	-}
20	-
21	-export default App;
	@@ -1,9 +0,0 @@	@@ -1,9 +0,0 @@
1	-import React from 'react';
2	-import ReactDOM from 'react-dom';
3	-import App from './App';
4	-
5	-it('renders without crashing', () => {
6	- const div = document.createElement('div');
7	- ReactDOM.render(<App />, div);
8	- ReactDOM.unmountComponentAtNode(div);
9	-});
1	-import React, { Component } from 'react';
2	-import Iframe from 'react-iframe';
3	-import 'react-select/dist/react-select.css';	1	+import React, { Component } from 'react'
		2	+import Iframe from 'react-iframe'
		3	+import 'react-select/dist/react-select.css'
4		4
5	-export default class Map extends Component<*, State> {
6	- constructor(props) {
7	- super(props);
8	- this.state = {
9	- };
10	- }
11	- render() {
12	- return (
13	- <div>
14	- <Iframe url="/map/pedro" position="absolute" width="100%" height="95%" id="mapId" allowFullScreen />
15	- </div>
16	- );
17	- }	5	+export default class Map extends Component {
		6	+ constructor (props) {
		7	+ super(props)
		8	+ this.state = {}
		9	+ }
		10	+ render () {
		11	+ return (
		12	+ <div>
		13	+ <Iframe url='/map/pedro' position='absolute' width='100%' height='95%' id='mapId' allowFullScreen />
		14	+ </div>
		15	+ )
		16	+ }
18	}	17	}
	@@ -3,11 +3,24 @@		@@ -3,11 +3,24 @@
3	* @author José Maria Villac Pinheiro	3	* @author José Maria Villac Pinheiro
4	* @date 2018-07-19	4	* @date 2018-07-19
5	*/	5	*/
6	-import React from "react";
7	-import ReactDOM from "react-dom";
8	-import "./index.css";
9	-import App from "./App";	6	+import 'typeface-roboto';
		7	+import React from 'react';
		8	+import ReactDOM from 'react-dom';
		9	+import { Provider } from 'react-redux';
		10	+import { createStore, applyMiddleware } from 'redux';
		11	+import reduxThunk from "redux-thunk";
		12	+
		13	+import './index.css';
		14	+import App from './components/App';
10	// import registerServiceWorker from "./registerServiceWorker";	15	// import registerServiceWorker from "./registerServiceWorker";
		16	+import reducers from './reducers';
		17	+
		18	+const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
11		19
12	-ReactDOM.render(<App />, document.getElementById("root"));	20	+ReactDOM.render(
		21	+ <Provider store={store}>
		22	+ <App />
		23	+ </Provider>,
		24	+ document.getElementById('root')
		25	+);
13	// registerServiceWorker();	26	// registerServiceWorker();