StephenGrider · pimoGit · Feb 19, 2018 · Feb 19, 2018 · Feb 25, 2018 · Feb 25, 2018
diff --git a/auth/client/index.html b/auth/client/index.html
@@ -3,7 +3,6 @@
   <head>
     <link rel="stylesheet" href="/style/style.css">
     <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
-    <script src="https://maps.googleapis.com/maps/api/js"></script>
   </head>
   <body>
     <div class="container"></div>

diff --git 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);
-        // - 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,16 +25,24 @@ export function signinUser({ email, password }) {
 export function signupUser({ email, password }) {
   return function(dispatch) {
     axios.post(`${ROOT_URL}/signup`, { email, password })
-      .then(response => {
-        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)));
   }
 }
 
-export function authError(error) {
+
+//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');
+}
+
+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/app.js b/auth/client/src/components/app.js
@@ -8,7 +8,7 @@ export default class App extends Component {
     return (
       <div>
         <Header />
-        {this.props.children}
+        {this.props.children} {/* has child routes to show*/}
       </div>
     );
   }

diff --git a/auth/client/src/components/auth/signin.js b/auth/client/src/components/auth/signin.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import { reduxForm } from 'redux-form';
-import * as actions from '../../actions';
+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 }) {
-    // Need to do something to log user in
-    this.props.signinUser({ email, password });
+    
+  componentWillMount() {// clear the server err for every back and forth to the page for renderAlert()
+    this.props.authError('');
   }
-
-  renderAlert() {
+    
+renderAlert() { // show up the err msg if it exists [funct called in render..]
     if (this.props.errorMessage) {
       return (
         <div className="alert alert-danger">
@@ -17,12 +17,19 @@ 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;
+    const { handleSubmit, fields: { email, password }} = this.props;//hooks up handleSubmit (method from redux-form to the fields)
 
     return (
-      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
+      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> {/*hooks up handleSubmit to the callback #1*/}
         <fieldset className="form-group">
           <label>Email:</label>
           <input {...email} className="form-control" />
@@ -45,4 +52,4 @@ function mapStateToProps(state) {
 export default reduxForm({
   form: 'signin',
   fields: ['email', 'password']
-}, mapStateToProps, actions)(Signin);
+}, mapStateToProps, actions)(Signin);//hooks up the actions creators
diff --git a/auth/client/src/components/auth/signup.js b/auth/client/src/components/auth/signup.js
@@ -2,10 +2,19 @@ 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 {
-  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() {
@@ -17,38 +26,64 @@ class Signup extends Component {
       );
     }
   }
+
+  handleFormSubmit(formProps) {
+    // Call action creator to sign up the user!
+    this.props.signupUser(formProps);
+  }
+
+
+
+  // comp optimization
+    renderFieldsets(fieldlist){
+
+        let fieldsetArr = Object.values(fieldlist).map(fieldobj => (
+        <fieldset className="form-group" key={fieldobj.name}>
+          <label className='captext'>{splitString(fieldobj.name)}</label>
+          <input className="form-control" {...fieldobj} type={fieldobj.name === 'password' || fieldobj.name === 'passwordConfirm' ? 'password' : ''} />
+          {fieldobj.touched && fieldobj.error && <div className="error">{fieldobj.error}</div>}
+        </fieldset>
+        ));
+        return fieldsetArr;
+    }
 
+
   render() {
     const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props;
 
     return (
       <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
+        {/* keeping this for didactic purpose
         <fieldset className="form-group">
           <label>Email:</label>
           <input className="form-control" {...email} />
-          {email.touched && email.error && <div className="error">{email.error}</div>}
+          {email.touched && email.error && <div className="error">{email.error}</div>} //if 2&&== true - return the last vale of the && seq [js trick]
         </fieldset>
         <fieldset className="form-group">
           <label>Password:</label>
           <input className="form-control" {...password} type="password" />
-          {password.touched && password.error && <div className="error">{password.error}</div>}
+          {password.touched && password.error && <div className="error">{password.error}</div>} //manage 2 type of err with 1 block
         </fieldset>
         <fieldset className="form-group">
           <label>Confirm Password:</label>
           <input className="form-control" {...passwordConfirm} type="password" />
-          {passwordConfirm.touched && passwordConfirm.error && <div className="error">{passwordConfirm.error}</div>}
-        </fieldset>
+          {passwordConfirm.touched && passwordConfirm.error && <div className="error">{passwordConfirm.error}</div>} 
+        </fieldset>*/}
+        {this.renderFieldsets(this.props.fields)}
         {this.renderAlert()}
         <button action="submit" className="btn btn-primary">Sign up!</button>
       </form>
     );
   }
 }
 
-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);
+
+    /* keeping this for didactic purpose
+    if (!formProps.email) {
     errors.email = 'Please enter an email';
   }
 
@@ -58,7 +93,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 ') + splitString(field)}`;
+              }
+        }
+    )
+
 
   if (formProps.password !== formProps.passwordConfirm) {
     errors.password = 'Passwords must match';

diff --git 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/components/header.js b/auth/client/src/components/header.js
@@ -11,7 +11,7 @@ class Header extends Component {
       </li>
     } 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)
         <li className="nav-item" key={1}>
           <Link className="nav-link" to="/signin">Sign In</Link>
         </li>,

diff --git 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(

diff --git 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:

diff --git 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
 });
 

diff --git a/auth/client/style/style.css b/auth/client/style/style.css
@@ -1,3 +1,4 @@
 .error {
   color: red;
 }
+.captext { text-transform: capitalize;}
diff --git a/auth/server/controllers/authentication.js b/auth/server/controllers/authentication.js
@@ -4,13 +4,13 @@ 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) {
   // 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) {
@@ -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) });
     });
   });

diff --git 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/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
@@ -6,17 +6,17 @@ 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 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
   // 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) {
+    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); }
 
@@ -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 an we find a user
     } else {
-      done(null, false);
+      done(null, false);// there is no err but we don't find the user
     }
   });
 });