Merge branch 'addServer' of https://github.com/andrewjcho84/ReacType into storage

Author: akbuma

.babelrc

@@ -7,12 +7,12 @@
       }
     ],
     "react",
-    "stage-0",
+    "stage-0"
   ],
   "plugins": ["transform-es2015-modules-commonjs"],
   "env": {
     "test": {
       "plugins": ["transform-es2015-modules-commonjs"]
     }
-}
+  }
 }

main.js

@@ -4,7 +4,6 @@ const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
 //path resolver dependency for splash screen
 const { resolve } = require('app-root-path');
 
-
 const {
   app,
   BrowserWindow,
@@ -16,7 +15,7 @@ const {
 } = require('electron');
 
 // Uncomment below for hot reloading during development
-// require('electron-reload')(__dirname);
+require('electron-reload')(__dirname);
 
 // const isDev = true;
 const isDev =

package.json

@@ -75,7 +75,8 @@
     "test:update-snap": "cross-env NODE_ENV=test jest --updateSnapshot",
     "test:clear": "cross-env NODE_ENV=test jest --clearCache",
     "linter": "eslint src",
-    "develop": "concurrently \"npm run dev\" \"npm run electron\""
+    "develop": "concurrently \"npm run dev\" \"npm run electron\"",
+    "server": "cross-env NODE_ENV=development nodemon server/server.js"
   },
   "bin": {
     "reactype": "./index.js"
@@ -121,10 +122,13 @@
     "app-root-path": "^3.0.0",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
+    "bcryptjs": "^2.4.3",
+    "body-parser": "^1.19.0",
     "classnames": "^2.2.6",
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
     "concurrently": "^5.1.0",
+    "cookie-parser": "^1.4.5",
     "core-js": "^3.6.4",
     "csstype": "^2.6.9",
     "d3": "^5.9.2",
@@ -173,6 +177,7 @@
     "copy-webpack-plugin": "^4.5.2",
     "cross-env": "^5.2.1",
     "css-loader": "^2.1.1",
+    "dotenv": "^8.2.0",
     "electron": "^2.0.7",
     "electron-builder": "^20.44.4",
     "electron-devtools-installer": "^2.2.4",
@@ -184,11 +189,15 @@
     "eslint-plugin-jest": "^21.21.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
+    "express": "^4.17.1",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.2.6",
+    "mongodb": "^3.5.9",
+    "mongoose": "^5.9.20",
     "node-sass": "^4.13.1",
+    "nodemon": "^2.0.4",
     "postcss-loader": "^2.1.6",
     "redux-mock-store": "^1.5.4",
     "sass-loader": "^7.0.3",

server/controllers/cookieController.js

@@ -0,0 +1,20 @@
+const cookieController = {};
+
+// setCookie = set a cookie with a random number
+
+cookieController.setCookie = (req, res, next) => {
+  // set cookie with key of 'secret' and value of a random number between 0 and 1000
+  res.cookie('secret', Math.floor(Math.random() * 1000));
+  console.log('Successful setCookie');
+  return next();
+};
+
+// setSSIDCookie - store the user id from database in cookie
+cookieController.setSSIDCookie = (req, res, next) => {
+  // set cookie with key 'ssid' and value to user's id, also set http only
+  res.cookie('ssid', res.locals.id, { httpOnly: true });
+  console.log('Successful setSSIDCookie');
+  return next();
+};
+
+module.exports = cookieController;

server/controllers/sessionController.js

@@ -0,0 +1,43 @@
+const Session = require('../models/sessionModel');
+const sessionController = {};
+
+// isLoggedIn finds appropriate session for this request in database, then verifies whether or not the session is still valid
+sessionController.isLoggedIn = (req, res, next) => {
+  // find cookie with current user's ssid value
+  Session.findOne({ cookieId: req.cookies.ssid }, (err, session) => {
+    if (err) {
+      return next({
+        log: `Error in sessionController.isLoggedIn: ${err}`,
+        message: {
+          err: `Error in sessionController.isLoggedIn, check server logs for details`
+        }
+      });
+      // no session found, redirect to signup page
+    } else if (!session) {
+      return res.redirect('/signup');
+    } else {
+      // session found, move onto next middleware
+      return next();
+    }
+  });
+};
+
+// startSession - create and save a new session into the database
+sessionController.startSession = (req, res, next) => {
+  // if valid user logged in/signed up, res.locals.id should be user's id generated from mongodb
+  console.log('Inside startSession');
+  Session.create({ cookieId: res.locals.id }, err => {
+    if (err) {
+      return next({
+        log: `Error in sessionController.startSession: ${err}`,
+        message: {
+          err: `Error in sessionController.startSession, check server logs for details`
+        }
+      });
+    }
+    console.log('Successful startSession');
+    return next();
+  });
+};
+
+module.exports = sessionController;

server/controllers/userController.js

@@ -0,0 +1,65 @@
+// middleware functions create a new user and verify users
+
+const Users = require('../models/userModel');
+
+const userController = {};
+const bcrypt = require('bcryptjs');
+
+userController.createUser = (req, res, next) => {
+  console.log('Inside createUser');
+  const { username, password } = req.body;
+  // error handling if username or password is missing
+  if (!username || !password) {
+    return next('Missing username or password in userController.createUser');
+  }
+  const projects = [];
+  // create user using username and password
+  Users.create({ username, password, projects }, (err, newUser) => {
+    if (err) {
+      return next({
+        log: `Error in userController.createUser: ${err}`,
+        message: {
+          err: `Error in userController.createUser. Check server logs for details`
+        }
+      });
+    } else {
+      // this id property will be used in other middleware for cookie
+      console.log('Successfule createUser');
+      res.locals.id = newUser.id;
+      return next();
+    }
+  });
+};
+
+// verifyUser - Obtain username and password from the request body, locate
+// the appropriate user in the database, and then authenticate the submitted password against the password stored in the database.
+
+userController.verifyUser = (req, res, next) => {
+  console.log('Inside verifyUser');
+  const { username, password } = req.body;
+  Users.findOne({ username }, (err, user) => {
+    if (err) {
+      return next({
+        log: `Error in userController.verifyUser: ${err}`,
+        message: {
+          err: `Error in userController.verifyUser, check server logs for details`
+        }
+      });
+    } else {
+      // bcrypt compare function checks input password against hashed password
+      bcrypt.compare(password, user.password).then(isMatch => {
+        if (isMatch) {
+          // if password matches, save user id for following middleware
+          console.log('Successful verifyUser');
+          res.locals.id = user.id;
+          return next();
+        } else {
+          // if password does not match, redirect to ?
+          return res.status(400).send('Incorrect password');
+        }
+      });
+    }
+  });
+};
+
+module.exports = userController;

server/models/sessionModel.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+// Mongo has an automatic document expiration service that we can use via the 'expires' property in the schema. This sets it so each session can only last an hour
+const sessionSchema = new Schema({
+  cookieId: { type: String, required: true, unique: true },
+  createdAt: { type: Date, expires: 3600, default: Date.now }
+});
+
+module.exports = mongoose.model('Sessions', sessionSchema);

server/models/userModel.js

@@ -0,0 +1,35 @@
+const mongoose = require('mongoose');
+require('dotenv').config();
+
+const Schema = mongoose.Schema;
+
+const userSchema = new Schema({
+  username: { type: String, required: true, unique: true },
+  password: { type: String, required: true },
+  projects: Array
+});
+
+// salt will go through 10 rounds of hashing
+const SALT_WORK_FACTOR = 10;
+const bcrypt = require('bcryptjs');
+const { session } = require('electron');
+
+// mongoose middleware that will run before the save to collection happens (user gets put into database)
+// cannot use arrow function here as context of 'this' is important
+userSchema.pre('save', function(next) {
+  // within this context, 'this' refers to the document (new user) about to be saved, in our case, it should have properties username, password, and projects array
+  bcrypt.hash(this.password, SALT_WORK_FACTOR, (err, hash) => {
+    if (err) {
+      return next({
+        log: `bcrypt password hashing error: ${err}`,
+        message: {
+          err: `bcrypt hash error: check server logs for details`
+        }
+      });
+    }
+    this.password = hash;
+    return next();
+  });
+});
+
+module.exports = mongoose.model('Users', userSchema);

server/server.js

@@ -0,0 +1,78 @@
+const express = require('express');
+const mongoose = require('mongoose');
+const path = require('path');
+const cookieParser = require('cookie-parser');
+const userController = require('./controllers/userController');
+const cookieController = require('./controllers/cookieController');
+const sessionController = require('./controllers/sessionController');
+const app = express();
+const PORT = 8080;
+
+// connect to mongo db
+mongoose
+  .connect(process.env.MONGO_URI, {
+    // options for the connect method to parse the URI
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+    useCreateIndex: true,
+    // sets the name of the DB that our collections are part of
+    dbName: 'ReacType'
+  })
+  .then(() => console.log('Connected to Mongo DB.'))
+  .catch(err => console.log(err));
+
+// handle parsing request body
+app.use(express.json());
+// cookie parser
+app.use(cookieParser());
+
+// statically serve everything in build folder
+app.use('/build', express.static(path.resolve(__dirname, '../build')));
+
+app.get('/', cookieController.setCookie, (req, res) => {
+  res.status(200).sendFile(path.resolve(__dirname, '../src/public/index.html'));
+});
+
+app.post(
+  '/signup',
+  userController.createUser,
+  cookieController.setSSIDCookie,
+  sessionController.startSession,
+  (req, res) => {
+    return res.status(200).json(res.locals.id);
+  }
+);
+
+app.post(
+  '/login',
+  userController.verifyUser,
+  cookieController.setSSIDCookie,
+  sessionController.startSession,
+  (req, res) => {
+    return res.status(200).json(res.locals.id);
+  }
+);
+
+// catch-all route handler
+app.use('*', (req, res) => {
+  return res.status(404).send('Page not found');
+});
+
+// Global error handler
+app.use((err, req, res, next) => {
+  console.log('invoking global error handler');
+  const defaultErr = {
+    log: 'Express error handler caught unknown middleware',
+    status: 500,
+    message: { err: 'An error occurred' }
+  };
+
+  const errorObj = Object.assign({}, defaultErr, err);
+  console.log(errorObj.log);
+  return res.status(errorObj.status).json(errorObj.message);
+});
+
+// starts server on PORT
+app.listen(PORT, () => {
+  console.log(`Server listening on port: ${PORT}`);
+});

src/actions/actionCreators.ts

@@ -61,6 +61,7 @@ export const addComponent = ({ title }: { title: string }): Action => ({
   type: ADD_COMPONENT,
   payload: { title }
 });
+
 export const addProp = ({
   key,
   type

src/components/bottom/HtmlAttr.tsx

@@ -170,7 +170,7 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
               <p style={{ color: 'black' }}>
                 {focusChild.HTMLInfo[attr]
                   ? focusChild.HTMLInfo[attr]
-                  : ' no attribute assigned'}
+                  : 'no attribute assigned'}
               </p>
             </Paper>
           </Grid>