Merge branch 'master' into reusable

Author: tsully

package.json

@@ -138,6 +138,7 @@
     "electron-splashscreen": "^1.0.0",
     "enzyme": "^3.4.1",
     "enzyme-adapter-react-16": "^1.2.0",
+    "formik": "^2.1.4",
     "js-cookie": "^2.2.1",
     "konva": "^4.2.0",
     "localforage": "^1.7.2",

server/controllers/projectController.js

@@ -14,7 +14,8 @@ projectController.saveProject = (req, res, next) => {
     { name, userId },
     // update or insert the project
     { project },
-    // Options: upsert: true - if none found, inserts new project, if found, updates project
+    // Options:
+    // upsert: true - if none found, inserts new project, if found, updates project
     // new: true - returns updated document not the original one
     { upsert: true, new: true },
     (err, result) => {
@@ -39,7 +40,7 @@ projectController.saveProject = (req, res, next) => {
 projectController.getProjects = (req, res, next) => {
   console.log('Inside projectController.getProjects...');
   const userId = req.cookies.ssid;
-  Projects.find({ userId }, (err, projects) => {
+  Projects.findOne({ userId }, (err, project) => {
     if (err) {
       return next({
         log: `Error in projectController.getProjects: ${err}`,
@@ -49,7 +50,7 @@ projectController.getProjects = (req, res, next) => {
       });
     } else {
       console.log('Successful getProjects');
-      res.locals.projects = projects;
+      res.locals.project = project;
       return next();
     }
   });

server/controllers/sessionController.js

@@ -17,7 +17,7 @@ sessionController.isLoggedIn = (req, res, next) => {
       // no session found, redirect to signup page
     } else if (!session) {
       console.log('No session found, redirecting to signup page');
-      return res.redirect('/signup');
+      return res.redirect('/');
     } else {
       // session found, move onto next middleware
       console.log('Session found, moving onto next middleware');

server/controllers/userController.js

@@ -23,12 +23,17 @@ userController.createUser = (req, res, next) => {
   // create user using username and password
   Users.create({ username, password, email }, (err, newUser) => {
     if (err) {
+      if(err.keyValue.email) {
+        return res.status(400).json('Email Taken');
+      } 
+      if(err.keyValue.username) {
+        return res.status(400).json('Username Taken');
+      }
       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('Successful createUser');
@@ -45,10 +50,10 @@ userController.verifyUser = (req, res, next) => {
   console.log('Inside userController.verifyUser...');
   const { username, password } = req.body;
   if (!username) {
-    return res.status(400).json('No username input');
+    return res.status(400).json('No Username Input');
   }
   if (!password) {
-    return res.status(400).json('No password input');
+    return res.status(400).json('No Password Input');
   }
   Users.findOne({ username }, (err, user) => {
     if (err) {
@@ -68,11 +73,11 @@ userController.verifyUser = (req, res, next) => {
           return next();
         } else {
           // if password does not match, redirect to ?
-          return res.status(400).json('Incorrect password');
+          return res.status(400).json('Incorrect Password');
         }
       });
     } else {
-      return res.status(400).json('No such user found');
+      return res.status(400).json('Invalid Username');
     }
   });
 };

server/models/reactypeModels.js

@@ -52,8 +52,8 @@ const sessionSchema = new Schema({
 });
 
 const projectSchema = new Schema({
-  name: { type: String, required: true },
-  project: Object,
+  name: String,
+  project: { type: Object, required: true },
   userId: {
     type: Schema.Types.ObjectId,
     ref: 'Users'

server/server.js

@@ -38,11 +38,14 @@ app.use(cookieParser());
 
 // statically serve everything in build folder
 app.use('/', express.static(path.resolve(__dirname, '../build')));
+// statically serve images
 app.use(
   '/images',
   express.static(path.resolve(__dirname, '..src/public/images'))
 );
 
+// serves main app, we are going to serve main app to electron locally, this will be deprecated
+// this backend server will only be used for authentication and project management services
 app.get('/', (req, res) => {
   res.status(200).sendFile(path.resolve(__dirname, '../build/index.html'));
 });
@@ -81,7 +84,7 @@ app.get(
   sessionController.isLoggedIn,
   projectController.getProjects,
   (req, res) => {
-    return res.status(200).json(res.locals.projects);
+    return res.status(200).json(res.locals.project);
   }
 );
 

src/components/AppNew.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useReducer } from 'react';
+import React, { useState, useReducer, useEffect } from 'react';
 import '../public/styles/style.css';
 import '../public/styles/styleNew.css';
 import { DndProvider } from 'react-dnd';
@@ -7,12 +7,41 @@ import AppContainer from '../containers/AppContainer';
 import { stateContext } from '../context/context';
 import initialState from '../context/initialState';
 import reducer from '../reducers/componentReducerNew';
+import { getProjects } from '../helperFunctions/projectGetSave';
+import { saveProject } from '../helperFunctions/projectGetSave';
+import { loadInitData } from '../actions/actionCreators';
 // import { Context, State } from '../interfaces/InterfacesNew';
 
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
   // const [context, setContext] = useState(initialState);
+  //let initialStateLoaded = false;
+  // retrieves user's project (if it exists) from DB on component load
   const [state, dispatch] = useReducer(reducer, initialState);
+
+  // gets projects from DB for current user on mount
+  useEffect(() => {
+    // getProjects returns a promise which is thenable
+    getProjects().then(project => {
+      if (project) {
+        // if user has project we run a dispatch to update state with received project
+        dispatch({
+          type: 'SET INITIAL STATE',
+          payload: project
+        });
+      }
+    });
+  }, []);
+
+  // saves project to DB whenever there are changes to the state via this canvas component
+  useEffect(() => {
+    console.log('useEffect in CanvasNew ran');
+    // setTimeout is necessary so the saveProjects method does not fire and save an empty project before the initial getProjects in AppNew
+    setTimeout(() => {
+      saveProject(state);
+    }, 1000);
+  }, [state]);
+
   return (
     <div className="app">
       <DndProvider backend={HTML5Backend}>

src/components/left/ComponentPanelNew.tsx

@@ -20,7 +20,8 @@ const useStyles = makeStyles({
     height: '110px',
     textAlign: 'center',
     display: 'flex',
-    justifyContent: 'flex-end'
+    justifyContent: 'center',
+    paddingLeft: '35px'
   },
   panelWrapper: {
     marginTop: '35px',
@@ -30,7 +31,8 @@ const useStyles = makeStyles({
     maxHeight: '675px',
     minHeight: '120px',
     overflowY: 'auto',
-    marginLeft: '-15px'
+    marginLeft: '-15px',
+    marginRight: '-15px'
   },
   input: {
     color: '#fff',

src/components/login/SignIn.tsx

@@ -19,18 +19,19 @@ import Checkbox from '@material-ui/core/Checkbox';
 import Link from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 
 function Copyright() {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://material-ui.com/">
+      {'Copyright © ReacType '}
+      {/* <Link color="inherit" href="https://reactype.io/#fullCarousel">
         ReacType
-      </Link>{' '}
+      </Link>{' '} */}
       {new Date().getFullYear()}
       {'.'}
     </Typography>
@@ -42,20 +43,31 @@ const useStyles = makeStyles(theme => ({
     marginTop: theme.spacing(8),
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   avatar: {
     margin: theme.spacing(1),
-    backgroundColor: theme.palette.secondary.main
+    backgroundColor: '#3EC1AC'
   },
   form: {
     width: '100%', // Fix IE 11 issue.
     marginTop: theme.spacing(1)
   },
   submit: {
-    margin: theme.spacing(3, 0, 2),
-    width: '240px',
-    height: '60px'
+    margin: theme.spacing(1, 0, 2),
+    // width: '240px',
+    // height: '60px'
+  },
+  root: {
+    // "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+    //   borderColor: "green"
+    // },
+    // "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+    //   borderColor: "red"
+    // },
+    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#3EC1AC"
+    }
   }
 }));
 
@@ -67,6 +79,11 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
+  const [invalidUserMsg, setInvalidUserMsg] = useState('');
+  const [invalidPassMsg, setInvalidPassMsg] = useState('');
+  const [invalidUser, setInvalidUser] = useState(false);
+  const [invalidPass, setInvalidPass] = useState(false);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;
     switch (e.target.name) {
@@ -79,16 +96,47 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
     }
   };
 
+  /*
+    Response Options: 
+    Success
+    Error
+    No Username Input 
+    No Password Input 
+    Incorrect Password 
+    Invalid Username
+  */
   const handleLogin = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
     console.log('click fired on handleLogin');
-    sessionIsCreated(username, password).then(isLoggedIn => {
-      if (isLoggedIn) {
-        console.log('session created');
+
+    setInvalidUser(false);
+    setInvalidUserMsg('');
+    setInvalidPass(false);
+    setInvalidPassMsg('');
+    sessionIsCreated(username, password).then(loginStatus => {
+      console.log('login fetch', loginStatus)
+      if(loginStatus === 'Success') {
         dispatch(setLoginState()); // changes login state to true
         props.history.push('/');
       } else {
-        console.log('invalid login');
+        switch(loginStatus) {
+          case 'No Username Input':
+            setInvalidUser(true);
+            setInvalidUserMsg(loginStatus);
+            break;
+          case 'No Password Input':
+            setInvalidPass(true);
+            setInvalidPassMsg(loginStatus);
+            break;
+          case 'Invalid Username':
+            setInvalidUser(true);
+            setInvalidUserMsg(loginStatus);
+            break;
+          case 'Incorrect Password':
+            setInvalidPass(true);
+            setInvalidPassMsg(loginStatus);
+            break;
+        }
       }
     });
   };
@@ -98,12 +146,13 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
       <CssBaseline />
       <div className={classes.paper}>
         <Avatar className={classes.avatar}>
-          <LockOutlinedIcon />
+          <LockOutlinedIcon/>
         </Avatar>
-        <Typography component="h1" variant="h5">
+        <Typography component="h1" variant="h5" color="textPrimary">
           Sign in
         </Typography>
         <TextField
+          className={classes.root}
           variant="outlined"
           margin="normal"
           required
@@ -115,8 +164,11 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           autoFocus
           value={username}
           onChange={handleChange}
+          helperText={invalidUserMsg} 
+          error={invalidUser}
         />
         <TextField
+          className={classes.root}
           variant="outlined"
           margin="normal"
           required
@@ -128,6 +180,8 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           autoComplete="current-password"
           value={password}
           onChange={handleChange}
+          helperText={invalidPassMsg} 
+          error={invalidPass}
         />
         <FormControlLabel
           control={<Checkbox value="remember" color="primary" />}
@@ -137,22 +191,33 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
         <Button
           fullWidth
           variant="contained"
-          color="primary"
+          color="default"
           className={classes.submit}
           onClick={e => handleLogin(e)}
         >
           Sign In
         </Button>
 
-        <a href="https://localhost:8080/github">
+        <Button
+          fullWidth
+          variant="contained"
+          color="default"
+          className={classes.submit}
+          href="https://localhost:8080/github"
+        >
+          <GitHubIcon/>
+        </Button>
+
+        {/* <a href="https://localhost:8080/github">
           <img src="/images/githublogin.png" />
         </a>
-        <br></br>
+        <br></br> */}
         <Grid container>
           <Grid item xs>
-            <Link href="#" variant="body2">
+            {/* <Link href="#" variant="body2">
               Forgot password?
-            </Link>
+            </Link> */}
+            <RouteLink to={`/signup`} className="nav_link">Forgot password?</RouteLink>
           </Grid>
           <Grid item>
             <RouteLink to={`/signup`} className="nav_link">