From 8dd90f86acb1ea3b2c25f57373188e59417749aa Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 19 Feb 2018 20:09:19 +0100 Subject: [PATCH 01/34] differentiated the state name from the prop mapped name to understand more --- testing/src/components/comment_list.js | 2 +- testing/src/reducers/index.js | 4 +++- testing/test/components/comment_list_test.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/testing/src/components/comment_list.js b/testing/src/components/comment_list.js index 1032c89..a2e90ba 100644 --- a/testing/src/components/comment_list.js +++ b/testing/src/components/comment_list.js @@ -10,7 +10,7 @@ const CommentList = (props) => { }; function mapStateToProps(state) { - return { comments: state.comments }; + return { comments: state.commenti }; // it takes state.commenti and assigns to comments fro ue here as props } export default connect(mapStateToProps)(CommentList); diff --git a/testing/src/reducers/index.js b/testing/src/reducers/index.js index b44a7b8..1825202 100644 --- a/testing/src/reducers/index.js +++ b/testing/src/reducers/index.js @@ -2,7 +2,9 @@ import { combineReducers } from 'redux'; import commentsReducer from './comments'; const rootReducer = combineReducers({ - comments: commentsReducer + //commenti: (state = []) => state + commenti: commentsReducer + }); export default rootReducer; diff --git a/testing/test/components/comment_list_test.js b/testing/test/components/comment_list_test.js index 27fb515..92f060e 100644 --- a/testing/test/components/comment_list_test.js +++ b/testing/test/components/comment_list_test.js @@ -5,7 +5,7 @@ describe('CommentList', () => { let component; beforeEach(() => { - const props = { comments: ['New Comment', 'Other New Comment'] }; + const props = { commenti: ['New Comment', 'Other New Comment'] }; // it uses the real state 'commenti' and not the prorp from mapStateToProps component = renderComponent(CommentList, null, props); }); From 19a2fa5a797ca6c52a0ad9b86a09404c6b16f0a4 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 19 Feb 2018 20:11:25 +0100 Subject: [PATCH 02/34] fix errs in the comments --- testing/src/components/comment_list.js | 2 +- testing/test/components/comment_list_test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/testing/src/components/comment_list.js b/testing/src/components/comment_list.js index a2e90ba..0e2c78a 100644 --- a/testing/src/components/comment_list.js +++ b/testing/src/components/comment_list.js @@ -10,7 +10,7 @@ const CommentList = (props) => { }; function mapStateToProps(state) { - return { comments: state.commenti }; // it takes state.commenti and assigns to comments fro ue here as props + return { comments: state.commenti }; // it takes state.commenti and assigns to comments from use here as props } export default connect(mapStateToProps)(CommentList); diff --git a/testing/test/components/comment_list_test.js b/testing/test/components/comment_list_test.js index 92f060e..8fee425 100644 --- a/testing/test/components/comment_list_test.js +++ b/testing/test/components/comment_list_test.js @@ -5,7 +5,7 @@ describe('CommentList', () => { let component; beforeEach(() => { - const props = { commenti: ['New Comment', 'Other New Comment'] }; // it uses the real state 'commenti' and not the prorp from mapStateToProps + const props = { commenti: ['New Comment', 'Other New Comment'] }; // it uses the real state 'commenti' and not the prorp from mapStateToProps of the component rendered component = renderComponent(CommentList, null, props); }); From b295378afb09c256b9cba223a3c175a65b78df2d Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Sun, 25 Feb 2018 16:27:56 +0100 Subject: [PATCH 03/34] added some clarification comments --- testing/test/test_helper.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/testing/test/test_helper.js b/testing/test/test_helper.js index 08bbc3c..6aa8543 100644 --- a/testing/test/test_helper.js +++ b/testing/test/test_helper.js @@ -14,7 +14,7 @@ global.document = jsdom.jsdom(''); global.window = global.document.defaultView; const $ = jquery(global.window); -// build 'renderComponent' helper that should render a given react class +// build 'renderComponent' helper that should render a given react class [later in a DOM] function renderComponent(ComponentClass, props, state) { const componentInstance = TestUtils.renderIntoDocument( @@ -22,18 +22,18 @@ function renderComponent(ComponentClass, props, state) { ); - return $(ReactDOM.findDOMNode(componentInstance)); // produces HTML + return $(ReactDOM.findDOMNode(componentInstance)); // produces HTML [in the specified DOM, in this case that one created by jsdom and warpped in jquery] } // Build helper for simulating events -$.fn.simulate = function(eventName, value) { +$.fn.simulate = function(eventName, value) { //$.fn. creates a new jquery method for our jquery instance if (value) { - this.val(value); + this.val(value);// this is the jquery obj and the jq method .val(value) sets the value passed, nothing new here } - TestUtils.Simulate[eventName](this[0]); + TestUtils.Simulate[eventName](this[0]); // refer to react-addons-test-utils doc to undurstend this [react doc - addons - testutil] } // Set up chai-jquery -chaiJquery(chai, chai.util, $); +chaiJquery(chai, chai.util, $); // chaijq set up function, see doc if you want export { renderComponent, expect }; From 528aafe52c610d4f9fb77fe6c174b4698a6dd6ad Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Sun, 25 Feb 2018 16:37:11 +0100 Subject: [PATCH 04/34] change some comments for better --- testing/test/test_helper.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/testing/test/test_helper.js b/testing/test/test_helper.js index 6aa8543..778d074 100644 --- a/testing/test/test_helper.js +++ b/testing/test/test_helper.js @@ -14,9 +14,9 @@ global.document = jsdom.jsdom(''); global.window = global.document.defaultView; const $ = jquery(global.window); -// build 'renderComponent' helper that should render a given react class [later in a DOM] +// build 'renderComponent' helper that should render a given react class function renderComponent(ComponentClass, props, state) { - const componentInstance = TestUtils.renderIntoDocument( + const componentInstance = TestUtils.renderIntoDocument( // this testutil method create the component ready to be use in a DOM later [complete also with state and props passed by the main funct 'renderComponent'] From 47d0b5360140a687e2d4ee123551b6ed2da03ae4 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Tue, 27 Feb 2018 19:40:11 +0100 Subject: [PATCH 05/34] added some useful comments --- hoc/src/components/app.js | 2 +- hoc/src/components/header.js | 2 +- hoc/src/index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/hoc/src/components/app.js b/hoc/src/components/app.js index 8807875..06d6f87 100644 --- a/hoc/src/components/app.js +++ b/hoc/src/components/app.js @@ -8,7 +8,7 @@ export default class App extends Component { return (
- {this.props.children} + {this.props.children} {/* this coz the route of "resorces" component is called as child-route in the "App" component */}
); } diff --git a/hoc/src/components/header.js b/hoc/src/components/header.js index b91771f..2e41b82 100644 --- a/hoc/src/components/header.js +++ b/hoc/src/components/header.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import * as actions from '../actions'; class Header extends Component { - authButton() { + authButton() { // uses a function to return the right piece of component if (this.props.authenticated) { return ; } diff --git a/hoc/src/index.js b/hoc/src/index.js index 97718b6..339656f 100644 --- a/hoc/src/index.js +++ b/hoc/src/index.js @@ -15,7 +15,7 @@ ReactDOM.render( - + {/* this is a nested route so the component will show just for the child route */} From 705b25df0899f9e51231c9ecf54542af3c043439 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Wed, 28 Feb 2018 19:51:28 +0100 Subject: [PATCH 06/34] comments added for custom HOC and delted gmap ref da index --- hoc/index.html | 1 - hoc/src/components/require_authentication.js | 4 ++-- hoc/src/index.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/hoc/index.html b/hoc/index.html index 22a662b..ac29ebf 100644 --- a/hoc/index.html +++ b/hoc/index.html @@ -3,7 +3,6 @@ -
diff --git a/hoc/src/components/require_authentication.js b/hoc/src/components/require_authentication.js index 23c2523..024c14d 100644 --- a/hoc/src/components/require_authentication.js +++ b/hoc/src/components/require_authentication.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -export default function(ComposedComponent) { +export default function(ComposedComponent) { // as a HOC export a function with a class and not just a class class Authentication extends Component { static contextTypes = { router: React.PropTypes.object @@ -20,7 +20,7 @@ export default function(ComposedComponent) { } render() { - return + return // the HOC will render the passed component to compose } } diff --git a/hoc/src/index.js b/hoc/src/index.js index 339656f..cd1aa6d 100644 --- a/hoc/src/index.js +++ b/hoc/src/index.js @@ -15,7 +15,7 @@ ReactDOM.render( - {/* this is a nested route so the component will show just for the child route */} + {/* this is a nested route so the component will show just for the child route [and requireAuth is the HOC we created that augments the 'Resources' component ] */} From 35800e75571d8e7ef99c8ae8334139446d5896ed Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Thu, 1 Mar 2018 19:30:26 +0100 Subject: [PATCH 07/34] more comments --- hoc/src/components/require_authentication.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/hoc/src/components/require_authentication.js b/hoc/src/components/require_authentication.js index 024c14d..1f6af6d 100644 --- a/hoc/src/components/require_authentication.js +++ b/hoc/src/components/require_authentication.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; export default function(ComposedComponent) { // as a HOC export a function with a class and not just a class class Authentication extends Component { - static contextTypes = { + static contextTypes = { // you have to create a contextTypes to get access here at the context (that is like props but accessible from everywhere) router: React.PropTypes.object } @@ -13,14 +13,14 @@ export default function(ComposedComponent) { // as a HOC export a function with } } - componentWillUpdate(nextProps) { + componentWillUpdate(nextProps) { // nextProps is a reference to the wen props when tehre's an update (life cicle method componentWillUpdate works so) if (!nextProps.authenticated) { this.context.router.push('/'); } } render() { - return // the HOC will render the passed component to compose + return // the HOC will render the passed component to compose, that can use props as an usual one } } @@ -28,5 +28,5 @@ export default function(ComposedComponent) { // as a HOC export a function with return { authenticated: state.authenticated }; } - return connect(mapStateToProps)(Authentication); + return connect(mapStateToProps)(Authentication); // so 'connect' compose 'Authentication' that compose te passed component (so 2 nested HOC) } From 02f8c687e6071fde7e1cd54615b182d8ed64a9a5 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 5 Mar 2018 19:52:00 +0100 Subject: [PATCH 08/34] added key to list item and useful comments, get rid og gmap ref, change a callback funct on map to clearify --- hoc/src/components/require_authentication.js | 2 +- middlewares/index.html | 1 - middlewares/src/components/user_list.js | 4 ++-- middlewares/src/index.js | 2 +- middlewares/src/reducers/users.js | 2 +- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/hoc/src/components/require_authentication.js b/hoc/src/components/require_authentication.js index 1f6af6d..078ff7a 100644 --- a/hoc/src/components/require_authentication.js +++ b/hoc/src/components/require_authentication.js @@ -13,7 +13,7 @@ export default function(ComposedComponent) { // as a HOC export a function with } } - componentWillUpdate(nextProps) { // nextProps is a reference to the wen props when tehre's an update (life cicle method componentWillUpdate works so) + componentWillUpdate(nextProps) { // nextProps is a reference to the props when tehre's an update (life cicle method componentWillUpdate works so) if (!nextProps.authenticated) { this.context.router.push('/'); } diff --git a/middlewares/index.html b/middlewares/index.html index 22a662b..ac29ebf 100644 --- a/middlewares/index.html +++ b/middlewares/index.html @@ -3,7 +3,6 @@ -
diff --git a/middlewares/src/components/user_list.js b/middlewares/src/components/user_list.js index ffecf3b..4315314 100644 --- a/middlewares/src/components/user_list.js +++ b/middlewares/src/components/user_list.js @@ -9,7 +9,7 @@ class UserList extends Component { renderUser(user) { return ( -
+
// added an id as a key

{user.name}

{user.company.name}

Website @@ -20,7 +20,7 @@ class UserList extends Component { render() { return (
- {this.props.users.map(this.renderUser)} + {this.props.users.map(usr => this.renderUser(usr))} {/*is the same to call the caalbeck map funct as [.map(this.renderUser]*/}
); } diff --git a/middlewares/src/index.js b/middlewares/src/index.js index bdecc8c..f2f6d2d 100644 --- a/middlewares/src/index.js +++ b/middlewares/src/index.js @@ -7,7 +7,7 @@ import App from './components/app'; import reducers from './reducers'; import Async from './middlewares/async'; -const createStoreWithMiddleware = applyMiddleware(Async)(createStore); +const createStoreWithMiddleware = applyMiddleware(Async)(createStore); // compose the store with middelwares ReactDOM.render( diff --git a/middlewares/src/reducers/users.js b/middlewares/src/reducers/users.js index 37f4383..f54d79f 100644 --- a/middlewares/src/reducers/users.js +++ b/middlewares/src/reducers/users.js @@ -5,7 +5,7 @@ import { export default function(state = [], action) { switch (action.type) { case FETCH_USERS: - return [ ...state, ...action.payload.data ]; + return [ ...state, ...action.payload.data ]; // spread operator combine the prev state with the new one (payload) } return state; From 829c1275742c58ad0c578cbcb9b04f9198833aee Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Tue, 6 Mar 2018 19:46:33 +0100 Subject: [PATCH 09/34] enanched some comments --- middlewares/src/components/user_list.js | 2 +- middlewares/src/middlewares/async.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/middlewares/src/components/user_list.js b/middlewares/src/components/user_list.js index 4315314..656d355 100644 --- a/middlewares/src/components/user_list.js +++ b/middlewares/src/components/user_list.js @@ -9,7 +9,7 @@ class UserList extends Component { renderUser(user) { return ( -
// added an id as a key +
{/* added an id as a key*/}

{user.name}

{user.company.name}

Website diff --git a/middlewares/src/middlewares/async.js b/middlewares/src/middlewares/async.js index 9f39577..14e9f50 100644 --- a/middlewares/src/middlewares/async.js +++ b/middlewares/src/middlewares/async.js @@ -5,7 +5,7 @@ export default function({ dispatch }) { // we dont care about it, send it on if (!action.payload || !action.payload.then) { return next(action); - } + } // This case hadle no just another potential action that we don't want to treat here, but also the same(new) action in the new 'state' [and that's why we don't check for the action.type] // Make sure the action's promise resolves action.payload @@ -13,7 +13,7 @@ export default function({ dispatch }) { // create a new action with the old type, but // replace the promise with the reponse data const newAction = { ...action, payload: response }; - dispatch(newAction); + dispatch(newAction); /* dispatch the new action to the top of the middleware stack (so the action will be evalueted again and do some other operation if/when needed [not this one the case now but you never know]) and finelly goes to reducers*/ }); } } From 5d609609a19616ce4b5f0d83dc0465458defe783 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Sat, 10 Mar 2018 19:07:57 +0100 Subject: [PATCH 10/34] corrected some commnts --- middlewares/src/components/user_list.js | 2 +- middlewares/src/index.js | 2 +- middlewares/src/middlewares/async.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/middlewares/src/components/user_list.js b/middlewares/src/components/user_list.js index 656d355..5cf7633 100644 --- a/middlewares/src/components/user_list.js +++ b/middlewares/src/components/user_list.js @@ -20,7 +20,7 @@ class UserList extends Component { render() { return (
- {this.props.users.map(usr => this.renderUser(usr))} {/*is the same to call the caalbeck map funct as [.map(this.renderUser]*/} + {this.props.users.map(usr => this.renderUser(usr))} {/*is the same to call the callback map funct as [.map(this.renderUser]*/}
); } diff --git a/middlewares/src/index.js b/middlewares/src/index.js index f2f6d2d..cea0116 100644 --- a/middlewares/src/index.js +++ b/middlewares/src/index.js @@ -7,7 +7,7 @@ import App from './components/app'; import reducers from './reducers'; import Async from './middlewares/async'; -const createStoreWithMiddleware = applyMiddleware(Async)(createStore); // compose the store with middelwares +const createStoreWithMiddleware = applyMiddleware(Async)(createStore); // compose the store with middlewares ReactDOM.render( diff --git a/middlewares/src/middlewares/async.js b/middlewares/src/middlewares/async.js index 14e9f50..4f50f76 100644 --- a/middlewares/src/middlewares/async.js +++ b/middlewares/src/middlewares/async.js @@ -13,7 +13,7 @@ export default function({ dispatch }) { // create a new action with the old type, but // replace the promise with the reponse data const newAction = { ...action, payload: response }; - dispatch(newAction); /* dispatch the new action to the top of the middleware stack (so the action will be evalueted again and do some other operation if/when needed [not this one the case now but you never know]) and finelly goes to reducers*/ + dispatch(newAction); /* dispatch the new action to the top of the middleware stack (so the action will be evalueted again and do some other operation if/when needed [not this one the case now but you never know]) and finally goes to reducers*/ }); } } From b39af648196684f37cf913b72228d8151d042895 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Wed, 14 Mar 2018 19:18:27 +0100 Subject: [PATCH 11/34] added some useful commets --- auth/server/controllers/authentication.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/auth/server/controllers/authentication.js b/auth/server/controllers/authentication.js index 58898ac..9d7acb3 100644 --- a/auth/server/controllers/authentication.js +++ b/auth/server/controllers/authentication.js @@ -4,7 +4,7 @@ const config = require('../config'); function tokenForUser(user) { const timestamp = new Date().getTime(); - return jwt.encode({ sub: user.id, iat: timestamp }, config.secret); + return jwt.encode({ sub: user.id, iat: timestamp }, config.secret); // sub: and iat: are existing properties of jwt to be setted } exports.signin = function(req, res, next) { @@ -39,7 +39,7 @@ exports.signup = function(req, res, next) { user.save(function(err) { if (err) { return next(err); } - // Repond to request indicating the user was created + // Repond to request indicating the user was created and returning the user token res.json({ token: tokenForUser(user) }); }); }); From 5c22444bdfb0a26b070b3f02a92203a10ccaffa3 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Thu, 15 Mar 2018 19:21:14 +0100 Subject: [PATCH 12/34] added useful comments --- auth/server/router.js | 4 ++-- auth/server/services/passport.js | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/auth/server/router.js b/auth/server/router.js index 28dc265..901366e 100644 --- a/auth/server/router.js +++ b/auth/server/router.js @@ -2,11 +2,11 @@ const Authentication = require('./controllers/authentication'); const passportService = require('./services/passport'); const passport = require('passport'); -const requireAuth = passport.authenticate('jwt', { session: false }); +const requireAuth = passport.authenticate('jwt', { session: false });// session: false means we don't want cookies set (we use jwt) const requireSignin = passport.authenticate('local', { session: false }); module.exports = function(app) { - app.get('/', requireAuth, function(req, res) { + app.get('/', requireAuth, function(req, res) { // we say to use the requireAuth (we create above) to handle this route req before sendig a res res.send({ message: 'Super secret code is ABC123' }); }); app.post('/signin', requireSignin, Authentication.signin); diff --git a/auth/server/services/passport.js b/auth/server/services/passport.js index dc8d776..95fa8c9 100644 --- a/auth/server/services/passport.js +++ b/auth/server/services/passport.js @@ -6,14 +6,14 @@ const ExtractJwt = require('passport-jwt').ExtractJwt; const LocalStrategy = require('passport-local'); // Create local strategy -const localOptions = { usernameField: 'email' }; +const localOptions = { usernameField: 'email' }; // just to set that if it serach for user has to loook at email const localLogin = new LocalStrategy(localOptions, function(email, password, done) { // Verify this email and password, call done with the user // if it is the correct email and password // otherwise, call done with false User.findOne({ email: email }, function(err, user) { - if (err) { return done(err); } - if (!user) { return done(null, false); } + if (err) { return done(err); }// err in the operation + if (!user) { return done(null, false); } // no err but email (so user) not found // compare passwords - is `password` equal to user.password? user.comparePassword(password, function(err, isMatch) { @@ -27,22 +27,22 @@ const localLogin = new LocalStrategy(localOptions, function(email, password, don // Setup options for JWT Strategy const jwtOptions = { - jwtFromRequest: ExtractJwt.fromHeader('authorization'), - secretOrKey: config.secret + jwtFromRequest: ExtractJwt.fromHeader('authorization'),//where to find the jtw (in this case header-authorization from the request) + secretOrKey: config.secret //what to use to decript the token (so we can have the user id back) }; // Create JWT strategy const jwtLogin = new JwtStrategy(jwtOptions, function(payload, done) { // See if the user ID in the payload exists in our database - // If it does, call 'done' with that other + // If it does, call 'done' with that user // otherwise, call done without a user object - User.findById(payload.sub, function(err, user) { - if (err) { return done(err, false); } + User.findById(payload.sub, function(err, user) {// payload is the obj created with jwt.encode attached to the token in the db + if (err) { return done(err, false); } // if there is an err and we cannot find user (coz of the err) if (user) { - done(null, user); + done(null, user);// there is no err e we find a user } else { - done(null, false); + done(null, false);// there is no err but we don't find the user } }); }); From 4414bf3404cead0ebb5be5c0c11ed03e48fbaf15 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Fri, 16 Mar 2018 20:19:04 +0100 Subject: [PATCH 13/34] more comments --- auth/server/controllers/authentication.js | 2 +- auth/server/models/user.js | 2 +- auth/server/services/passport.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/auth/server/controllers/authentication.js b/auth/server/controllers/authentication.js index 9d7acb3..bf5cc1a 100644 --- a/auth/server/controllers/authentication.js +++ b/auth/server/controllers/authentication.js @@ -10,7 +10,7 @@ function tokenForUser(user) { exports.signin = function(req, res, next) { // User has already had their email and password auth'd // We just need to give them a token - res.send({ token: tokenForUser(req.user) }); + res.send({ token: tokenForUser(req.user) }); // req.user is returned from our Locastrategy in passport.js } exports.signup = function(req, res, next) { diff --git a/auth/server/models/user.js b/auth/server/models/user.js index 11c93d8..acba23f 100644 --- a/auth/server/models/user.js +++ b/auth/server/models/user.js @@ -29,7 +29,7 @@ userSchema.pre('save', function(next) { }); }); -userSchema.methods.comparePassword = function(candidatePassword, callback) { +userSchema.methods.comparePassword = function(candidatePassword, callback) { // attach a new funct to our schema bcrypt.compare(candidatePassword, this.password, function(err, isMatch) { if (err) { return callback(err); } diff --git a/auth/server/services/passport.js b/auth/server/services/passport.js index 95fa8c9..3de62eb 100644 --- a/auth/server/services/passport.js +++ b/auth/server/services/passport.js @@ -6,7 +6,7 @@ const ExtractJwt = require('passport-jwt').ExtractJwt; const LocalStrategy = require('passport-local'); // Create local strategy -const localOptions = { usernameField: 'email' }; // just to set that if it serach for user has to loook at email +const localOptions = { usernameField: 'email' }; // just to set that if it searchs for user has to loook at email const localLogin = new LocalStrategy(localOptions, function(email, password, done) { // Verify this email and password, call done with the user // if it is the correct email and password @@ -16,7 +16,7 @@ const localLogin = new LocalStrategy(localOptions, function(email, password, don if (!user) { return done(null, false); } // no err but email (so user) not found // compare passwords - is `password` equal to user.password? - user.comparePassword(password, function(err, isMatch) { + user.comparePassword(password, function(err, isMatch) { //comparePassword is a method we created in user if (err) { return done(err); } if (!isMatch) { return done(null, false); } @@ -40,7 +40,7 @@ const jwtLogin = new JwtStrategy(jwtOptions, function(payload, done) { if (err) { return done(err, false); } // if there is an err and we cannot find user (coz of the err) if (user) { - done(null, user);// there is no err e we find a user + done(null, user);// there is no err an we find a user } else { done(null, false);// there is no err but we don't find the user } From a135b5ce2181aa1d3ac93a61e269fb092b95b9d9 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 19 Mar 2018 19:30:50 +0100 Subject: [PATCH 14/34] some useful comments added --- auth/client/src/components/auth/signin.js | 8 ++++---- auth/client/src/reducers/index.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/auth/client/src/components/auth/signin.js b/auth/client/src/components/auth/signin.js index 0fffc0e..e056a13 100644 --- a/auth/client/src/components/auth/signin.js +++ b/auth/client/src/components/auth/signin.js @@ -1,9 +1,9 @@ import React, { Component } from 'react'; -import { reduxForm } from 'redux-form'; +import { reduxForm } from 'redux-form';// import the HOC from redux-form import * as actions from '../../actions'; class Signin extends Component { - handleFormSubmit({ email, password }) { + handleFormSubmit({ email, password }) {//callback #1 // Need to do something to log user in this.props.signinUser({ email, password }); } @@ -19,10 +19,10 @@ class Signin extends Component { } render() { - const { handleSubmit, fields: { email, password }} = this.props; + const { handleSubmit, fields: { email, password }} = this.props;//hooks up handleSubmit (method from redux-form to the fields) return ( -
+ {/*hooks up handleSubmit to the callback #1*/}
diff --git a/auth/client/src/reducers/index.js b/auth/client/src/reducers/index.js index bec4976..5d68c58 100644 --- a/auth/client/src/reducers/index.js +++ b/auth/client/src/reducers/index.js @@ -1,9 +1,9 @@ import { combineReducers } from 'redux'; -import { reducer as form } from 'redux-form'; +import { reducer as form } from 'redux-form';// imp the reducer from redux-form and create an alias [... as form] to use a clearer name import authReducer from './auth_reducer'; const rootReducer = combineReducers({ - form, + form,// include the reducer from redux-form [form: form ES6 abbreviation] auth: authReducer }); From 1064d930f07eb8624ad90b60ebae0c826e24bb6f Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 19 Mar 2018 19:44:22 +0100 Subject: [PATCH 15/34] again comments --- auth/client/src/components/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/auth/client/src/components/app.js b/auth/client/src/components/app.js index 8807875..f968714 100644 --- a/auth/client/src/components/app.js +++ b/auth/client/src/components/app.js @@ -8,7 +8,7 @@ export default class App extends Component { return (
- {this.props.children} + {this.props.children} {/* has child routes to show*/}
); } From d832025d7ee381b8be1d9aa394567bfcfb8b1d5f Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Tue, 20 Mar 2018 20:04:48 +0100 Subject: [PATCH 16/34] more comments --- auth/client/src/components/auth/signin.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/auth/client/src/components/auth/signin.js b/auth/client/src/components/auth/signin.js index e056a13..52f4bf3 100644 --- a/auth/client/src/components/auth/signin.js +++ b/auth/client/src/components/auth/signin.js @@ -1,11 +1,11 @@ import React, { Component } from 'react'; import { reduxForm } from 'redux-form';// import the HOC from redux-form -import * as actions from '../../actions'; +import * as actions from '../../actions';//import actions creators class Signin extends Component { handleFormSubmit({ email, password }) {//callback #1 // Need to do something to log user in - this.props.signinUser({ email, password }); + this.props.signinUser({ email, password });//call the action creator } renderAlert() { @@ -45,4 +45,4 @@ function mapStateToProps(state) { export default reduxForm({ form: 'signin', fields: ['email', 'password'] -}, mapStateToProps, actions)(Signin); +}, mapStateToProps, actions)(Signin);//hooks up the actions creators From afc22f75c108c44020d06c70928a4e992fb24a82 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Thu, 22 Mar 2018 19:16:30 +0100 Subject: [PATCH 17/34] get rid of gmap and added useful comment --- auth/client/index.html | 1 - auth/client/src/actions/index.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/auth/client/index.html b/auth/client/index.html index 22a662b..ac29ebf 100644 --- a/auth/client/index.html +++ b/auth/client/index.html @@ -3,7 +3,6 @@ -
diff --git a/auth/client/src/actions/index.js b/auth/client/src/actions/index.js index 616738f..39b3e4c 100644 --- a/auth/client/src/actions/index.js +++ b/auth/client/src/actions/index.js @@ -18,7 +18,7 @@ export function signinUser({ email, password }) { // - Update state to indicate user is authenticated dispatch({ type: AUTH_USER }); // - Save the JWT token - localStorage.setItem('token', response.data.token); + localStorage.setItem('token', response.data.token); // localStorage is a Web API (DOM) we just set a name and pass the token // - redirect to the route '/feature' browserHistory.push('/feature'); }) From e8a42071547f2609a57f0092792b431d32b25f54 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 26 Mar 2018 20:00:49 +0200 Subject: [PATCH 18/34] useful comments again --- auth/client/src/actions/index.js | 2 +- auth/client/src/components/auth/signin.js | 2 +- auth/client/src/components/header.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/auth/client/src/actions/index.js b/auth/client/src/actions/index.js index 39b3e4c..acafb76 100644 --- a/auth/client/src/actions/index.js +++ b/auth/client/src/actions/index.js @@ -42,7 +42,7 @@ export function signupUser({ email, password }) { } } -export function authError(error) { +export function authError(error) { //this action is external from (signinUser e signupUser) coz it's easier to share with these 2 (so no repeat) return { type: AUTH_ERROR, payload: error diff --git a/auth/client/src/components/auth/signin.js b/auth/client/src/components/auth/signin.js index 52f4bf3..c6b5503 100644 --- a/auth/client/src/components/auth/signin.js +++ b/auth/client/src/components/auth/signin.js @@ -8,7 +8,7 @@ class Signin extends Component { this.props.signinUser({ email, password });//call the action creator } - renderAlert() { + renderAlert() { // show up the err msg if it exists [funct called in render..] if (this.props.errorMessage) { return (
diff --git a/auth/client/src/components/header.js b/auth/client/src/components/header.js index e6c4166..29f76ea 100644 --- a/auth/client/src/components/header.js +++ b/auth/client/src/components/header.js @@ -11,7 +11,7 @@ class Header extends Component { } else { // show a link to sign in or sign up - return [ + return [ // returns an array of li (so don't have err without div, rendering multiple items at the same level)
  • Sign In
    • , From 71140323ac854ed33f99f9fea3edd33b274fd15e Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Wed, 28 Mar 2018 20:13:52 +0200 Subject: [PATCH 19/34] my compressed vers of validate, draft of comp optimization, comments --- auth/client/src/components/auth/signup.js | 42 +++++++++++++++++++---- 1 file changed, 35 insertions(+), 7 deletions(-) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index 345d2d9..dc2801c 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -3,6 +3,7 @@ import { reduxForm } from 'redux-form'; import * as actions from '../../actions'; class Signup extends Component { + handleFormSubmit(formProps) { // Call action creator to sign up the user! this.props.signupUser(formProps); @@ -17,6 +18,20 @@ class Signup extends Component { ); } } + + + /* first draft attempt/idea of comp optimization + renderFieldsets(formProps){ + var fieldsetArr = Object.keys(formProps).map(field => + { +
    + + + {field.touched && field.error &&
    {field.error}
    } +
    + return fieldsetArr; + }) + }*/ render() { const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props; @@ -26,17 +41,17 @@ class Signup extends Component {
    - {email.touched && email.error &&
    {email.error}
    } + {email.touched && email.error &&
    {email.error}
    } {/*if 2&&== true - return the last vale of the && seq [js trick]*/}
    - {password.touched && password.error &&
    {password.error}
    } + {password.touched && password.error &&
    {password.error}
    } {/*manage 2 type of err with 1 block*/}
    - {passwordConfirm.touched && passwordConfirm.error &&
    {passwordConfirm.error}
    } + {passwordConfirm.touched && passwordConfirm.error &&
    {passwordConfirm.error}
    }
    {this.renderAlert()} @@ -45,10 +60,12 @@ class Signup extends Component { } } -function validate(formProps) { +function validate(formProps) {// the arg is provided by HOC redux-form [and is a obj of the fields-value] const errors = {}; - - if (!formProps.email) { + + //console.log(formProps); + + /*if (!formProps.email) { errors.email = 'Please enter an email'; } @@ -58,7 +75,18 @@ function validate(formProps) { if (!formProps.passwordConfirm) { errors.passwordConfirm = 'Please enter a password confirmation'; - } + }*/ + + //my compressed approach of the above + Object.keys(formProps).map(field => + { + if (!formProps[field]) { + //errors[field] = 'Please enter ' + (field === 'email' ? 'an ' : 'a ') + field; + errors[field] = `Please enter ${(field === 'email' ? 'an ' : 'a ') + field}`; + } + } + ) + if (formProps.password !== formProps.passwordConfirm) { errors.password = 'Passwords must match'; From 70b3cc5fa51d218d05d1f5696460f0ef8014d2e5 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 2 Apr 2018 19:32:43 +0200 Subject: [PATCH 20/34] cleaned up the working signup and added an alt V draft file --- .../src/components/auth/signup-alt-V.js | 92 +++++++++++++++++++ auth/client/src/components/auth/signup.js | 14 +-- 2 files changed, 93 insertions(+), 13 deletions(-) create mode 100644 auth/client/src/components/auth/signup-alt-V.js diff --git a/auth/client/src/components/auth/signup-alt-V.js b/auth/client/src/components/auth/signup-alt-V.js new file mode 100644 index 0000000..620d4d0 --- /dev/null +++ b/auth/client/src/components/auth/signup-alt-V.js @@ -0,0 +1,92 @@ +import React, { Component } from 'react'; +import { reduxForm } from 'redux-form'; +import * as actions from '../../actions'; + +class Signup extends Component { + + handleFormSubmit(formProps) { + // Call action creator to sign up the user! + this.props.signupUser(formProps); + } + + renderAlert() { + if (this.props.errorMessage) { + return ( +
    + Oops! {this.props.errorMessage} +
    + ); + } + } + + +// first draft attempt/idea of comp optimization + renderFieldsets(fieldlist){ + let fieldsetArr = Object.keys(fieldlist).map(field => +
    + + + {field.touched && field.error &&
    {field.error}
    } +
    + ); + //console.log(fieldsetArr); + return fieldsetArr + } + + render() { + const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props; + + return ( + + {this.renderFieldsets(this.props.fields)} + {this.renderAlert()} + + + ); + } +} + +function validate(formProps) {// the arg is provided by HOC redux-form [and is a obj of the fields-value] + const errors = {}; + + //console.log(formProps); + + /*if (!formProps.email) { + errors.email = 'Please enter an email'; + } + + if (!formProps.password) { + errors.password = 'Please enter a password'; + } + + if (!formProps.passwordConfirm) { + errors.passwordConfirm = 'Please enter a password confirmation'; + }*/ + + //my compressed approach of the above + Object.keys(formProps).map(field => + { + if (!formProps[field]) { + //errors[field] = 'Please enter ' + (field === 'email' ? 'an ' : 'a ') + field; + errors[field] = `Please enter ${(field === 'email' ? 'an ' : 'a ') + field}`; + } + } + ) + + + if (formProps.password !== formProps.passwordConfirm) { + errors.password = 'Passwords must match'; + } + + return errors; +} + +function mapStateToProps(state) { + return { errorMessage: state.auth.error }; +} + +export default reduxForm({ + form: 'signup', + fields: ['email', 'password', 'passwordConfirm'], + validate +}, mapStateToProps, actions)(Signup); diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index dc2801c..5585d4e 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -20,19 +20,7 @@ class Signup extends Component { } - /* first draft attempt/idea of comp optimization - renderFieldsets(formProps){ - var fieldsetArr = Object.keys(formProps).map(field => - { -
    - - - {field.touched && field.error &&
    {field.error}
    } -
    - return fieldsetArr; - }) - }*/ - + render() { const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props; From 3b77b6e2c89d273cb674f82f96d5872b035acf28 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Wed, 4 Apr 2018 20:06:19 +0200 Subject: [PATCH 21/34] refactoring draft potential actions optimization + comments --- auth/client/src/actions/index.js | 11 +++++++++++ auth/client/src/components/auth/signup-alt-V.js | 4 ++-- auth/client/src/reducers/auth_reducer.js | 2 +- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/auth/client/src/actions/index.js b/auth/client/src/actions/index.js index acafb76..6b038da 100644 --- a/auth/client/src/actions/index.js +++ b/auth/client/src/actions/index.js @@ -34,6 +34,7 @@ export function signupUser({ email, password }) { return function(dispatch) { axios.post(`${ROOT_URL}/signup`, { email, password }) .then(response => { + //dispatch(autUser()); dispatch({ type: AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/feature'); @@ -42,6 +43,16 @@ export function signupUser({ email, password }) { } } +/* refactoring draft potential actions optimization +export function autUser() { + localStorage.setItem('token', response.data.token); + browserHistory.push('/feature'); + return{ + type: AUTH_USER + } + +}*/ + export function authError(error) { //this action is external from (signinUser e signupUser) coz it's easier to share with these 2 (so no repeat) return { type: AUTH_ERROR, diff --git a/auth/client/src/components/auth/signup-alt-V.js b/auth/client/src/components/auth/signup-alt-V.js index 620d4d0..d0135ab 100644 --- a/auth/client/src/components/auth/signup-alt-V.js +++ b/auth/client/src/components/auth/signup-alt-V.js @@ -22,12 +22,12 @@ class Signup extends Component { // first draft attempt/idea of comp optimization renderFieldsets(fieldlist){ - let fieldsetArr = Object.keys(fieldlist).map(field => + let fieldsetArr = Object.keys(fieldlist).map(field => (
    {field.touched && field.error &&
    {field.error}
    } -
    +
    ) ); //console.log(fieldsetArr); return fieldsetArr diff --git a/auth/client/src/reducers/auth_reducer.js b/auth/client/src/reducers/auth_reducer.js index 1e750f9..861d302 100644 --- a/auth/client/src/reducers/auth_reducer.js +++ b/auth/client/src/reducers/auth_reducer.js @@ -8,7 +8,7 @@ import { export default function(state = {}, action) { switch(action.type) { case AUTH_USER: - return { ...state, error: '', authenticated: true }; + return { ...state, error: '', authenticated: true }; // reset error in case user is auth case UNAUTH_USER: return { ...state, authenticated: false }; case AUTH_ERROR: From acc5d4ca9d683453ecc6fa6f8775d95e727b84fc Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Fri, 6 Apr 2018 19:40:48 +0200 Subject: [PATCH 22/34] alt V to include HOC-auth directly in the feature comp, and commented out + other useful comment --- auth/client/src/components/feature.js | 4 +++- auth/client/src/index.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/auth/client/src/components/feature.js b/auth/client/src/components/feature.js index bc71398..d900211 100644 --- a/auth/client/src/components/feature.js +++ b/auth/client/src/components/feature.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '../actions'; +//import RequireAuth from './auth/require_auth'; ALT V just in case we want to use the HOC here class Feature extends Component { componentWillMount() { @@ -18,4 +19,5 @@ function mapStateToProps(state) { return { message: state.auth.message }; } -export default connect(mapStateToProps, actions)(Feature); +export default connect(mapStateToProps, actions)(Feature); +// ALT V just in case we wanna use HOC here not in the route, wrap like this RequireAuth(Feature) diff --git a/auth/client/src/index.js b/auth/client/src/index.js index 1ec27bf..e7d9f9f 100644 --- a/auth/client/src/index.js +++ b/auth/client/src/index.js @@ -16,13 +16,13 @@ import reducers from './reducers'; import { AUTH_USER } from './actions/types'; const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); -const store = createStoreWithMiddleware(reducers); +const store = createStoreWithMiddleware(reducers); // create store outside to get it before check the token const token = localStorage.getItem('token'); // If we have a token, consider the user to be signed in if (token) { // we need to update application state - store.dispatch({ type: AUTH_USER }); + store.dispatch({ type: AUTH_USER }); // we can dispatch the action to the reducers [so if user is already auth we know it] } ReactDOM.render( From 8b9573dfa3078c4c5b9b571ecd2277ec0fb864ff Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Wed, 11 Apr 2018 19:07:08 +0200 Subject: [PATCH 23/34] resolved srevr err alert duplication V2 - simpler way --- auth/client/src/components/auth/signin.js | 17 ++++++++++++----- auth/client/src/components/auth/signup.js | 10 +++++++--- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/auth/client/src/components/auth/signin.js b/auth/client/src/components/auth/signin.js index c6b5503..21925dc 100644 --- a/auth/client/src/components/auth/signin.js +++ b/auth/client/src/components/auth/signin.js @@ -3,12 +3,12 @@ import { reduxForm } from 'redux-form';// import the HOC from redux-form import * as actions from '../../actions';//import actions creators class Signin extends Component { - handleFormSubmit({ email, password }) {//callback #1 - // Need to do something to log user in - this.props.signinUser({ email, password });//call the action creator + + componentWillMount() {// clear the server err for every back and forth to the page for renderAlert() + this.props.authError(''); } - - renderAlert() { // show up the err msg if it exists [funct called in render..] + +renderAlert() { // show up the err msg if it exists [funct called in render..] if (this.props.errorMessage) { return (
    @@ -17,6 +17,13 @@ class Signin extends Component { ); } } + + handleFormSubmit({ email, password }) {//callback #1 + // Need to do something to log user in + this.props.signinUser({ email, password });//call the action creator + } + + render() { const { handleSubmit, fields: { email, password }} = this.props;//hooks up handleSubmit (method from redux-form to the fields) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index 5585d4e..787f51d 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -4,9 +4,8 @@ import * as actions from '../../actions'; class Signup extends Component { - handleFormSubmit(formProps) { - // Call action creator to sign up the user! - this.props.signupUser(formProps); + componentWillMount() {// clear the server err for every back and forth to the page for renderAlert() + this.props.authError(''); } renderAlert() { @@ -19,6 +18,11 @@ class Signup extends Component { } } + handleFormSubmit(formProps) { + // Call action creator to sign up the user! + this.props.signupUser(formProps); + } + render() { From c4536c7cd2248d2dfe09122e2e29c94e9526ea5d Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Thu, 12 Apr 2018 17:29:59 +0200 Subject: [PATCH 24/34] clear commented action optimization vto create a new branch for it --- auth/client/src/actions/index.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/auth/client/src/actions/index.js b/auth/client/src/actions/index.js index 6b038da..ad91d6e 100644 --- a/auth/client/src/actions/index.js +++ b/auth/client/src/actions/index.js @@ -43,15 +43,6 @@ export function signupUser({ email, password }) { } } -/* refactoring draft potential actions optimization -export function autUser() { - localStorage.setItem('token', response.data.token); - browserHistory.push('/feature'); - return{ - type: AUTH_USER - } - -}*/ export function authError(error) { //this action is external from (signinUser e signupUser) coz it's easier to share with these 2 (so no repeat) return { From dc97f5852bae6b475288ca24f0068235cd693af6 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Thu, 12 Apr 2018 17:34:40 +0200 Subject: [PATCH 25/34] uncomment the refactoring action --- auth/client/src/actions/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/auth/client/src/actions/index.js b/auth/client/src/actions/index.js index 6b038da..2fecd47 100644 --- a/auth/client/src/actions/index.js +++ b/auth/client/src/actions/index.js @@ -43,7 +43,7 @@ export function signupUser({ email, password }) { } } -/* refactoring draft potential actions optimization +//refactoring draft potential actions optimization export function autUser() { localStorage.setItem('token', response.data.token); browserHistory.push('/feature'); @@ -51,7 +51,7 @@ export function autUser() { type: AUTH_USER } -}*/ +} export function authError(error) { //this action is external from (signinUser e signupUser) coz it's easier to share with these 2 (so no repeat) return { From 6b9c329f2b79147c2670a8a64944bf4642ade281 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Thu, 12 Apr 2018 17:53:55 +0200 Subject: [PATCH 26/34] action optimization, eliminated repeated code and centralized it in a external function --- auth/client/src/actions/index.js | 32 ++++++++++---------------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/auth/client/src/actions/index.js b/auth/client/src/actions/index.js index 2fecd47..088cc63 100644 --- a/auth/client/src/actions/index.js +++ b/auth/client/src/actions/index.js @@ -13,15 +13,7 @@ export function signinUser({ email, password }) { return function(dispatch) { // Submit email/password to the server axios.post(`${ROOT_URL}/signin`, { email, password }) - .then(response => { - // If request is good... - // - Update state to indicate user is authenticated - dispatch({ type: AUTH_USER }); - // - Save the JWT token - localStorage.setItem('token', response.data.token); // localStorage is a Web API (DOM) we just set a name and pass the token - // - redirect to the route '/feature' - browserHistory.push('/feature'); - }) + .then(response => authUser(dispatch, response)) .catch(() => { // If request is bad... // - Show an error to the user @@ -33,24 +25,20 @@ export function signinUser({ email, password }) { export function signupUser({ email, password }) { return function(dispatch) { axios.post(`${ROOT_URL}/signup`, { email, password }) - .then(response => { - //dispatch(autUser()); - dispatch({ type: AUTH_USER }); - localStorage.setItem('token', response.data.token); - browserHistory.push('/feature'); - }) + .then(response => authUser(dispatch, response)) .catch(response => dispatch(authError(response.data.error))); } } -//refactoring draft potential actions optimization -export function autUser() { - localStorage.setItem('token', response.data.token); +//refactoring actions optimization, external from (signinUser e signupUser) +export function authUser(dispatch, response) { + // If request is good... + // - Update state to indicate user is authenticated + dispatch({ type: AUTH_USER }); + // - Save the JWT token + localStorage.setItem('token', response.data.token); // localStorage is a Web API (DOM) we just set a name and pass the token + // - redirect to the route '/feature' browserHistory.push('/feature'); - return{ - type: AUTH_USER - } - } export function authError(error) { //this action is external from (signinUser e signupUser) coz it's easier to share with these 2 (so no repeat) From 28c5f9102780f7649b3f719a7bd89309853179fe Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Fri, 13 Apr 2018 15:35:26 +0200 Subject: [PATCH 27/34] join the 2 files in this version --- auth/client/src/components/auth/signup.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index 787f51d..d199fdd 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -23,6 +23,19 @@ class Signup extends Component { this.props.signupUser(formProps); } + + /* first draft attempt/idea of comp optimization + renderFieldsets(fieldlist){ + let fieldsetArr = Object.keys(fieldlist).map(field => ( +
    + + + {field.touched && field.error &&
    {field.error}
    } +
    ) + ); + //console.log(fieldsetArr); + return fieldsetArr + }*/ render() { @@ -45,6 +58,7 @@ class Signup extends Component { {passwordConfirm.touched && passwordConfirm.error &&
    {passwordConfirm.error}
    } + {/*this.renderFieldsets(this.props.fields)*/} {this.renderAlert()} From b0509d8d12ae88cfe8105102a00dbc51c2623d6e Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Fri, 13 Apr 2018 15:37:37 +0200 Subject: [PATCH 28/34] deleted useles file after branching --- .../src/components/auth/signup-alt-V.js | 92 ------------------- 1 file changed, 92 deletions(-) delete mode 100644 auth/client/src/components/auth/signup-alt-V.js diff --git a/auth/client/src/components/auth/signup-alt-V.js b/auth/client/src/components/auth/signup-alt-V.js deleted file mode 100644 index d0135ab..0000000 --- a/auth/client/src/components/auth/signup-alt-V.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { Component } from 'react'; -import { reduxForm } from 'redux-form'; -import * as actions from '../../actions'; - -class Signup extends Component { - - handleFormSubmit(formProps) { - // Call action creator to sign up the user! - this.props.signupUser(formProps); - } - - renderAlert() { - if (this.props.errorMessage) { - return ( -
    - Oops! {this.props.errorMessage} -
    - ); - } - } - - -// first draft attempt/idea of comp optimization - renderFieldsets(fieldlist){ - let fieldsetArr = Object.keys(fieldlist).map(field => ( -
    - - - {field.touched && field.error &&
    {field.error}
    } -
    ) - ); - //console.log(fieldsetArr); - return fieldsetArr - } - - render() { - const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props; - - return ( -
    - {this.renderFieldsets(this.props.fields)} - {this.renderAlert()} - -
    - ); - } -} - -function validate(formProps) {// the arg is provided by HOC redux-form [and is a obj of the fields-value] - const errors = {}; - - //console.log(formProps); - - /*if (!formProps.email) { - errors.email = 'Please enter an email'; - } - - if (!formProps.password) { - errors.password = 'Please enter a password'; - } - - if (!formProps.passwordConfirm) { - errors.passwordConfirm = 'Please enter a password confirmation'; - }*/ - - //my compressed approach of the above - Object.keys(formProps).map(field => - { - if (!formProps[field]) { - //errors[field] = 'Please enter ' + (field === 'email' ? 'an ' : 'a ') + field; - errors[field] = `Please enter ${(field === 'email' ? 'an ' : 'a ') + field}`; - } - } - ) - - - if (formProps.password !== formProps.passwordConfirm) { - errors.password = 'Passwords must match'; - } - - return errors; -} - -function mapStateToProps(state) { - return { errorMessage: state.auth.error }; -} - -export default reduxForm({ - form: 'signup', - fields: ['email', 'password', 'passwordConfirm'], - validate -}, mapStateToProps, actions)(Signup); From d99b5d38c68385c21f579620619b1f0eff8b23f9 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Fri, 13 Apr 2018 15:40:28 +0200 Subject: [PATCH 29/34] deleted useless file on the new branch --- .../src/components/auth/signup-alt-V.js | 92 ------------------- 1 file changed, 92 deletions(-) delete mode 100644 auth/client/src/components/auth/signup-alt-V.js diff --git a/auth/client/src/components/auth/signup-alt-V.js b/auth/client/src/components/auth/signup-alt-V.js deleted file mode 100644 index d0135ab..0000000 --- a/auth/client/src/components/auth/signup-alt-V.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { Component } from 'react'; -import { reduxForm } from 'redux-form'; -import * as actions from '../../actions'; - -class Signup extends Component { - - handleFormSubmit(formProps) { - // Call action creator to sign up the user! - this.props.signupUser(formProps); - } - - renderAlert() { - if (this.props.errorMessage) { - return ( -
    - Oops! {this.props.errorMessage} -
    - ); - } - } - - -// first draft attempt/idea of comp optimization - renderFieldsets(fieldlist){ - let fieldsetArr = Object.keys(fieldlist).map(field => ( -
    - - - {field.touched && field.error &&
    {field.error}
    } -
    ) - ); - //console.log(fieldsetArr); - return fieldsetArr - } - - render() { - const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props; - - return ( -
    - {this.renderFieldsets(this.props.fields)} - {this.renderAlert()} - -
    - ); - } -} - -function validate(formProps) {// the arg is provided by HOC redux-form [and is a obj of the fields-value] - const errors = {}; - - //console.log(formProps); - - /*if (!formProps.email) { - errors.email = 'Please enter an email'; - } - - if (!formProps.password) { - errors.password = 'Please enter a password'; - } - - if (!formProps.passwordConfirm) { - errors.passwordConfirm = 'Please enter a password confirmation'; - }*/ - - //my compressed approach of the above - Object.keys(formProps).map(field => - { - if (!formProps[field]) { - //errors[field] = 'Please enter ' + (field === 'email' ? 'an ' : 'a ') + field; - errors[field] = `Please enter ${(field === 'email' ? 'an ' : 'a ') + field}`; - } - } - ) - - - if (formProps.password !== formProps.passwordConfirm) { - errors.password = 'Passwords must match'; - } - - return errors; -} - -function mapStateToProps(state) { - return { errorMessage: state.auth.error }; -} - -export default reduxForm({ - form: 'signup', - fields: ['email', 'password', 'passwordConfirm'], - validate -}, mapStateToProps, actions)(Signup); From ec1e19be3309f703d7b9bdcc6c95c372523613da Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Fri, 13 Apr 2018 16:04:45 +0200 Subject: [PATCH 30/34] first attemtp to work of this version --- auth/client/src/components/auth/signup.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index d199fdd..5c7f073 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -24,7 +24,7 @@ class Signup extends Component { } - /* first draft attempt/idea of comp optimization + // first draft attempt/idea of comp optimization renderFieldsets(fieldlist){ let fieldsetArr = Object.keys(fieldlist).map(field => (
    @@ -34,8 +34,8 @@ class Signup extends Component {
    ) ); //console.log(fieldsetArr); - return fieldsetArr - }*/ + return fieldsetArr; + } render() { @@ -43,22 +43,22 @@ class Signup extends Component { return (
    -
    + {/*
    - {email.touched && email.error &&
    {email.error}
    } {/*if 2&&== true - return the last vale of the && seq [js trick]*/} + {email.touched && email.error &&
    {email.error}
    } //if 2&&== true - return the last vale of the && seq [js trick]
    - {password.touched && password.error &&
    {password.error}
    } {/*manage 2 type of err with 1 block*/} + {password.touched && password.error &&
    {password.error}
    } //manage 2 type of err with 1 block
    {passwordConfirm.touched && passwordConfirm.error &&
    {passwordConfirm.error}
    } -
    - {/*this.renderFieldsets(this.props.fields)*/} +
    */} + {this.renderFieldsets(this.props.fields)} {this.renderAlert()}
    From 590cd81cabc2d5e1b68409c781f204bc0c94ec83 Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Thu, 19 Apr 2018 17:10:57 +0200 Subject: [PATCH 31/34] some fixing and one step forward to make work this version --- auth/client/src/components/auth/signup.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index 5c7f073..b8a07cd 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -26,14 +26,14 @@ class Signup extends Component { // first draft attempt/idea of comp optimization renderFieldsets(fieldlist){ - let fieldsetArr = Object.keys(fieldlist).map(field => ( -
    - - - {field.touched && field.error &&
    {field.error}
    } + let fieldsetArr = Object.values(fieldlist).map(fieldobj => ( +
    + + + {fieldobj.touched && fieldobj.error &&
    {fieldobj.error}
    }
    ) ); - //console.log(fieldsetArr); + console.log(fieldsetArr); return fieldsetArr; } From f8cadea461a7e7111aeb9af76a44d4c53a5a226a Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 23 Apr 2018 18:49:42 +0200 Subject: [PATCH 32/34] trying to debug this version --- auth/client/src/components/auth/signup.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index b8a07cd..0108813 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -31,9 +31,8 @@ class Signup extends Component { {fieldobj.touched && fieldobj.error &&
    {fieldobj.error}
    } -
    ) - ); - console.log(fieldsetArr); + )); + //console.log(fieldsetArr); return fieldsetArr; } From 52713dece22e28eaac9e20bc5312be467bba8fcd Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Mon, 23 Apr 2018 19:50:21 +0200 Subject: [PATCH 33/34] made this version of optimized signup comp work --- auth/client/src/components/auth/signup.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index 0108813..98abaa0 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -24,15 +24,16 @@ class Signup extends Component { } - // first draft attempt/idea of comp optimization + // comp optimization renderFieldsets(fieldlist){ + let fieldsetArr = Object.values(fieldlist).map(fieldobj => (
    - + {fieldobj.touched && fieldobj.error &&
    {fieldobj.error}
    } -
    )); - //console.log(fieldsetArr); + + )); return fieldsetArr; } From 7d1e60a3b3e9ea11ae5c6021a7f76f6eea7bf9dc Mon Sep 17 00:00:00 2001 From: Simone Icardi Date: Wed, 25 Apr 2018 11:53:36 +0200 Subject: [PATCH 34/34] output labels and err msg in a better way --- auth/client/src/components/auth/signup.js | 20 ++++++++++++++++---- auth/client/style/style.css | 1 + 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js index 98abaa0..8f3a5ea 100644 --- a/auth/client/src/components/auth/signup.js +++ b/auth/client/src/components/auth/signup.js @@ -2,6 +2,15 @@ import React, { Component } from 'react'; import { reduxForm } from 'redux-form'; import * as actions from '../../actions'; + //helper comp function, split strings when needed (to have the right string output from the field name in the loop) + function splitString(initialtext) { + let regex1 = RegExp(/(?=[A-Z])/); //has cap letter in + let are2words = regex1.test(initialtext); // check if true + let result= are2words ? initialtext.split(/(?=[A-Z])/).join(" ") : initialtext; + //console.log(initialtext, are2words); + return result + } + class Signup extends Component { componentWillMount() {// clear the server err for every back and forth to the page for renderAlert() @@ -24,12 +33,13 @@ class Signup extends Component { } + // comp optimization renderFieldsets(fieldlist){ let fieldsetArr = Object.values(fieldlist).map(fieldobj => (
    - + {fieldobj.touched && fieldobj.error &&
    {fieldobj.error}
    }
    @@ -43,7 +53,8 @@ class Signup extends Component { return (
    - {/*
    + {/* keeping this for didactic purpose +
    {email.touched && email.error &&
    {email.error}
    } //if 2&&== true - return the last vale of the && seq [js trick] @@ -71,7 +82,8 @@ function validate(formProps) {// the arg is provided by HOC redux-form [and is a //console.log(formProps); - /*if (!formProps.email) { + /* keeping this for didactic purpose + if (!formProps.email) { errors.email = 'Please enter an email'; } @@ -88,7 +100,7 @@ function validate(formProps) {// the arg is provided by HOC redux-form [and is a { if (!formProps[field]) { //errors[field] = 'Please enter ' + (field === 'email' ? 'an ' : 'a ') + field; - errors[field] = `Please enter ${(field === 'email' ? 'an ' : 'a ') + field}`; + errors[field] = `Please enter ${(field === 'email' ? 'an ' : 'a ') + splitString(field)}`; } } ) diff --git a/auth/client/style/style.css b/auth/client/style/style.css index ee7dba2..86d18d1 100644 --- a/auth/client/style/style.css +++ b/auth/client/style/style.css @@ -1,3 +1,4 @@ .error { color: red; } +.captext { text-transform: capitalize;}