login/signup/signout mostly done, cookie/localstorage in progress

Author: andrewjcho84

main.js

@@ -11,7 +11,8 @@ const {
   shell,
   dialog,
   ipcMain,
-  globalShortcut
+  globalShortcut,
+  session
 } = require('electron');
 
 // Uncomment below for hot reloading during development
@@ -264,9 +265,9 @@ const createWindow = () => {
 
   // UNCOMMENT THIS DURING DEVELOPMENT TO ENABLE CONSOLE TO OPEN UPON LAUNCH
   // dev tools opened on every browser creation
-  // mainWindow.webContents.once('dom-ready', () => {
-  //   mainWindow.webContents.openDevTools();
-  // });
+  mainWindow.webContents.once('dom-ready', () => {
+    mainWindow.webContents.openDevTools();
+  });
 };
 
 // This method will be called when Electron has finished

package.json

@@ -117,6 +117,7 @@
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
     "@types/react-redux": "^7.0.8",
+    "@types/react-router-dom": "^5.1.5",
     "@types/react-syntax-highlighter": "^11.0.4",
     "ace-builds": "^1.4.8",
     "app-root-path": "^3.0.0",

server/controllers/cookieController.js

@@ -3,7 +3,7 @@ const cookieController = {};
 // 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, { maxAge: 3600 });
+  res.cookie('ssid', res.locals.id, { maxAge: 3600000 });
   console.log('Successful setSSIDCookie');
   return next();
 };

server/controllers/userController.js

@@ -6,11 +6,14 @@ const userController = {};
 const bcrypt = require('bcryptjs');
 
 userController.createUser = (req, res, next) => {
-  console.log('Inside createUser');
+  console.log('Creating user...');
   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');
+  if (!username) {
+    return res.status(400).json('No username input');
+  }
+  if (!password) {
+    return res.status(400).json('No password input');
   }
   const projects = [];
   // create user using username and password
@@ -24,7 +27,7 @@ userController.createUser = (req, res, next) => {
       });
     } else {
       // this id property will be used in other middleware for cookie
-      console.log('Successfule createUser');
+      console.log('Successful createUser');
       res.locals.id = newUser.id;
       return next();
     }
@@ -35,11 +38,13 @@ userController.createUser = (req, res, next) => {
 // 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');
-  console.log('req.body is', req.body);
+  console.log('Verifying user...');
   const { username, password } = req.body;
-  if (!username || !password) {
-    return res.status(400).json('No username or password input');
+  if (!username) {
+    return res.status(400).json('No username input');
+  }
+  if (!password) {
+    return res.status(400).json('No password input');
   }
   Users.findOne({ username }, (err, user) => {
     if (err) {

src/components/login/SignIn.tsx

@@ -3,12 +3,7 @@ import React, { Component, useState } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
 import { setUsername, setPassword } from '../../actions/actionCreators';
 //import { useSelector } from 'react-redux';
-import {
-  Link as RouteLink,
-  withRouter,
-  useHistory,
-  Redirect
-} from 'react-router-dom';
+import { Link as RouteLink, withRouter, useHistory } from 'react-router-dom';
 
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
@@ -103,22 +98,24 @@ const SignIn: React.FC<LoginProps> = props => {
       username,
       password
     });
-    console.log(body);
     fetch('http://localhost:8080/login', {
       method: 'POST',
-      mode: 'cors',
+      credentials: 'include',
       headers: {
         'Content-Type': 'application/json'
       },
       body
     })
-      .then(res => res.json())
+      .then(res => {
+        return res.json();
+      })
       .then(data => {
         if (typeof data === 'string') {
           alert(data);
         } else {
-          alert('Login successful!');
           props.history.push('/app');
+          alert('Login successful!');
+          console.log('Data is', data);
         }
       })
       .catch(err => console.log(err));

src/components/login/SignUp.tsx

@@ -98,13 +98,21 @@ const SignUp: React.FC<LoginProps> = props => {
     fetch('http://localhost:8080/signup', {
       method: 'POST',
       mode: 'cors',
+      credentials: 'include',
       headers: {
         'Content-Type': 'application/json'
       },
       body
     })
       .then(res => res.json())
-      .then(data => console.log('Data from signup is:', data))
+      .then(data => {
+        if (typeof data === 'string') {
+          alert(data);
+        } else {
+          props.history.push('/');
+          alert('Signup successful! Please sign in to continue.');
+        }
+      })
       .catch(err => console.log(err));
   };