Merge pull request #9 from oslabs-beta/staging-faast

Signup / Login changes by Aaron

Author: andrewjcho84

package.json

@@ -112,6 +112,7 @@
     "@material-ui/styles": "^4.9.6",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/js-cookie": "^2.2.6",
     "@types/prettier": "^1.19.0",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.8.14",
@@ -137,6 +138,7 @@
     "electron-splashscreen": "^1.0.0",
     "enzyme": "^3.4.1",
     "enzyme-adapter-react-16": "^1.2.0",
+    "js-cookie": "^2.2.1",
     "konva": "^4.2.0",
     "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",

server/controllers/userController.js

@@ -7,17 +7,20 @@ const bcrypt = require('bcryptjs');
 
 userController.createUser = (req, res, next) => {
   console.log('Creating user...');
-  const { username, password } = req.body;
+  const { email, username, password } = req.body;
   // error handling if username or password is missing
   if (!username) {
     return res.status(400).json('No username input');
   }
+  if (!email) {
+    return res.status(400).json('No email input');
+  }
   if (!password) {
     return res.status(400).json('No password input');
   }
-  const projects = [];
+
   // create user using username and password
-  Users.create({ username, password, projects }, (err, newUser) => {
+  Users.create({ email, username, password, projects: [] }, (err, newUser) => {
     if (err) {
       return next({
         log: `Error in userController.createUser: ${err}`,

server/models/userModel.js

@@ -5,14 +5,14 @@ const Schema = mongoose.Schema;
 
 const userSchema = new Schema({
   username: { type: String, required: true, unique: true },
+  email: { 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

src/actionTypes/index.ts

@@ -41,7 +41,4 @@ export const UPDATE_CHILDREN_SORT: string = 'UPDATE_CHILDREN_SORT';
 export const UPDATE_CODE: string = 'UPDATE_CODE';
 export const UPDATE_HTML_ATTR: string = 'UPDATE_HTML_ATTR';
 
-export const SET_USERNAME: string = 'SET_USERNAME';
-export const SET_PASSWORD: string = 'SET_PASSWORD';
-export const LOGIN: string = 'LOGIN';
-export const SIGNUP: string = 'SIGNUP';
+export const SET_LOGIN_STATE: string = 'SET_LOGIN_STATE';

src/actions/actionCreators.ts

@@ -39,10 +39,7 @@ import {
   UNDO,
   UPDATE_HTML_ATTR,
   UPDATE_CODE,
-  SET_USERNAME,
-  SET_PASSWORD,
-  LOGIN,
-  SIGNUP
+  SET_LOGIN_STATE
 } from '../actionTypes/index';
 import { loadState } from '../localStorage';
 import createFiles from '../utils/createFiles.util';
@@ -333,28 +330,6 @@ export const updateHtmlAttr = ({
   payload: { attr, value }
 });
 
-export const setUsername = (username: string): Action => ({
-  type: SET_USERNAME,
-  payload: username
-});
-
-export const setPassword = (password: string): Action => ({
-  type: SET_PASSWORD,
-  payload: password
-})
-
-// export const login = (username: string, password: string) => ({
-//   return (dispatch: any) => {
-//     fetch('/login', {
-//       method: 'POST',
-//       body: JSON.stringify({ username, password })
-//     })
-//     .then(response => response.json())
-//     .then(data => console.log(data))
-//   }
-// })
-
-// export const signup = (username: string, password: string): Action => ({
-//   type: SIGNUP,
-//   payload: { username, password }
-// })
+export const setLoginState = (): Action => ({
+  type: SET_LOGIN_STATE
+})

src/components/login/SignIn.tsx

@@ -1,9 +1,9 @@
-import React, { Component, useState } from 'react';
-//import { connect } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
-import { setUsername, setPassword } from '../../actions/actionCreators';
-//import { useSelector } from 'react-redux';
-import { Link as RouteLink, withRouter, useHistory } from 'react-router-dom';
+import { setLoginState } from '../../actions/actionCreators';
+import { useSelector, useDispatch } from 'react-redux';
+import { Link as RouteLink, withRouter, useHistory, RouteComponentProps } from 'react-router-dom';
+import { sessionIsCreated } from '../../helperFunctions/auth';
 
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
@@ -18,24 +18,6 @@ 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 { render } from 'enzyme';
-
-const mapStateToProps = (store: any) => ({
-  username: store.credentials.username,
-  password: store.credentials.password
-});
-
-const mapDispatchToProps = (dispatch: any) => ({
-  setUsername: (username: string) => dispatch(setUsername(username)),
-  setPassword: (password: string) => dispatch(setPassword(password))
-  // login: (username: string, password: string) => dispatch(login(username, password)),
-  // signup: (username: string, password: string) => dispatch(signup(username, password)),
-});
-
-interface LoginProps extends LoginInt {
-  setUsername(username: string): void;
-  setPassword(username: string): void;
-}
 
 function Copyright() {
   return (
@@ -70,16 +52,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SignIn: React.FC<LoginProps> = props => {
+const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const classes = useStyles();
-  //const count = useSelector(state => state);
+
+  const dispatch = useDispatch();
 
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
-  const history = useHistory();
-
-  const handleChange = e => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;
     switch (e.target.name) {
       case 'username':
@@ -91,34 +72,18 @@ const SignIn: React.FC<LoginProps> = props => {
     }
   };
 
-  const handleLogin = e => {
-    console.log('click fired on handleLogin');
+  const handleLogin = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
-    const body = JSON.stringify({
-      username,
-      password
+    console.log('click fired on handleLogin');
+    sessionIsCreated(username, password).then(isLoggedIn => {
+      if(isLoggedIn) {
+        console.log('session created')
+        dispatch(setLoginState()); // changes login state to true
+        props.history.push('/');
+      } else {
+        console.log('invalid login')
+      }
     });
-    fetch('http://localhost:8080/login', {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body
-    })
-      .then(res => {
-        return res.json();
-      })
-      .then(data => {
-        if (typeof data === 'string') {
-          alert(data);
-        } else {
-          props.history.push('/app');
-          alert('Login successful!');
-          //console.log('Data is', data);
-        }
-      })
-      .catch(err => console.log(err));
   };
 
   return (
@@ -167,7 +132,7 @@ const SignIn: React.FC<LoginProps> = props => {
           variant="contained"
           color="primary"
           className={classes.submit}
-          onClick={handleLogin}
+          onClick={e => handleLogin(e)}
         >
           Sign In
         </Button>
@@ -179,7 +144,7 @@ const SignIn: React.FC<LoginProps> = props => {
             </Link>
           </Grid>
           <Grid item>
-            <RouteLink to={`/signup`}>Don't have an account? Sign Up</RouteLink>
+            <RouteLink to={`/signup`} className="nav_link">Don't have an account? Sign Up</RouteLink>
           </Grid>
         </Grid>
       </div>