signin, signup pages done. signout button working

Author: andrewjcho84

package.json

@@ -150,6 +150,7 @@
     "react-draggable": "^3.0.5",
     "react-konva": "^16.12.0-0",
     "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-simple-code-editor": "^0.11.0",
     "react-sortable-tree": "^2.2.0",
     "react-syntax-highlighter": "^10.2.1",

server/controllers/cookieController.js

@@ -1,18 +1,9 @@
 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 });
+  res.cookie('ssid', res.locals.id, { maxAge: 3600 });
   console.log('Successful setSSIDCookie');
   return next();
 };

server/controllers/sessionController.js

@@ -24,20 +24,36 @@ sessionController.isLoggedIn = (req, res, 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 => {
+  // first check if user is logged in already
+  Session.findOne({ cookieId: res.locals.id }, (err, session) => {
     if (err) {
       return next({
-        log: `Error in sessionController.startSession: ${err}`,
+        log: `Error in sessionController.startSession find session: ${err}`,
         message: {
-          err: `Error in sessionController.startSession, check server logs for details`
+          err: `Error in sessionController.startSession find session, check server logs for details`
         }
       });
+      // if session doesn't exist, create a session
+      // if valid user logged in/signed up, res.locals.id should be user's id generated from mongodb, which we will set as this session's cookieId
+    } else if (!session) {
+      Session.create({ cookieId: res.locals.id }, err => {
+        if (err) {
+          return next({
+            log: `Error in sessionController.startSession create session: ${err}`,
+            message: {
+              err: `Error in sessionController.startSession create session, check server logs for details`
+            }
+          });
+        }
+        console.log('Successful startSession');
+        return next();
+      });
+      // if session exists, move onto next middleware
+    } else {
+      console.log('Session exists, moving on');
+      return next();
     }
-    console.log('Successful startSession');
-    return next();
   });
 };
-
 module.exports = sessionController;

server/controllers/userController.js

@@ -36,7 +36,11 @@ userController.createUser = (req, res, next) => {
 
 userController.verifyUser = (req, res, next) => {
   console.log('Inside verifyUser');
+  console.log('req.body is', req.body);
   const { username, password } = req.body;
+  if (!username || !password) {
+    return res.status(400).json('No username or password input');
+  }
   Users.findOne({ username }, (err, user) => {
     if (err) {
       return next({
@@ -45,7 +49,7 @@ userController.verifyUser = (req, res, next) => {
           err: `Error in userController.verifyUser, check server logs for details`
         }
       });
-    } else {
+    } else if (user) {
       // bcrypt compare function checks input password against hashed password
       bcrypt.compare(password, user.password).then(isMatch => {
         if (isMatch) {
@@ -55,9 +59,11 @@ userController.verifyUser = (req, res, next) => {
           return next();
         } else {
           // if password does not match, redirect to ?
-          return res.status(400).send('Incorrect password');
+          return res.status(400).json('Incorrect password');
         }
       });
+    } else {
+      return res.status(400).json('No such user found');
     }
   });
 };

server/server.js

@@ -29,7 +29,7 @@ app.use(cookieParser());
 // statically serve everything in build folder
 app.use('/build', express.static(path.resolve(__dirname, '../build')));
 
-app.get('/', cookieController.setCookie, (req, res) => {
+app.get('/', (req, res) => {
   res.status(200).sendFile(path.resolve(__dirname, '../src/public/index.html'));
 });
 
@@ -39,7 +39,7 @@ app.post(
   cookieController.setSSIDCookie,
   sessionController.startSession,
   (req, res) => {
-    return res.status(200).json(res.locals.id);
+    return res.status(200).json({ userId: res.locals.id });
   }
 );
 
@@ -49,7 +49,7 @@ app.post(
   cookieController.setSSIDCookie,
   sessionController.startSession,
   (req, res) => {
-    return res.status(200).json(res.locals.id);
+    return res.status(200).json({ userId: res.locals.id });
   }
 );
 

src/components/App.tsx

@@ -3,7 +3,7 @@ import '../public/styles/style.css';
 import AppContainer from '../containers/AppContainer';
 
 export const App: React.SFC = () => (
-  <div className='app'>
+  <div className="app">
     <div>
       <header style={{ height: '40px', width: '100%' }}>ReacType</header>
       <AppContainer />

src/components/login/SignIn.tsx

@@ -1,8 +1,14 @@
 import React, { Component, useState } from 'react';
-import { connect } from 'react';
+//import { connect } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
 import { setUsername, setPassword } from '../../actions/actionCreators';
-import { useSelector } from 'react-redux';
+//import { useSelector } from 'react-redux';
+import {
+  Link as RouteLink,
+  withRouter,
+  useHistory,
+  Redirect
+} from 'react-router-dom';
 
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
@@ -22,18 +28,18 @@ 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)),
+  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
+  setUsername(username: string): void;
+  setPassword(username: string): void;
 }
 
 function Copyright() {
@@ -49,34 +55,36 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   paper: {
     marginTop: theme.spacing(8),
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   avatar: {
     margin: theme.spacing(1),
-    backgroundColor: theme.palette.secondary.main,
+    backgroundColor: theme.palette.secondary.main
   },
   form: {
     width: '100%', // Fix IE 11 issue.
-    marginTop: theme.spacing(1),
+    marginTop: theme.spacing(1)
   },
   submit: {
-    margin: theme.spacing(3, 0, 2),
-  },
+    margin: theme.spacing(3, 0, 2)
+  }
 }));
 
-const SignIn: React.FC<LoginProps> = (props) => {
+const SignIn: React.FC<LoginProps> = props => {
   const classes = useStyles();
   //const count = useSelector(state => state);
 
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
-  const handleChange = (e) => {
+  const history = useHistory();
+
+  const handleChange = e => {
     let inputVal = e.target.value;
     switch (e.target.name) {
       case 'username':
@@ -88,17 +96,33 @@ const SignIn: React.FC<LoginProps> = (props) => {
     }
   };
 
-  const handleLogin = (e) => {
-    console.log('click fired on handleLogin')
+  const handleLogin = e => {
+    console.log('click fired on handleLogin');
     e.preventDefault();
-    fetch('/login', {
+    const body = JSON.stringify({
+      username,
+      password
+    });
+    console.log(body);
+    fetch('http://localhost:8080/login', {
       method: 'POST',
-      body: JSON.stringify({ username, password })
+      mode: 'cors',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body
     })
-    .then(res => res.json())
-    .then(data => console.log(data))
-    .catch(err => console.log(err))
-  }
+      .then(res => res.json())
+      .then(data => {
+        if (typeof data === 'string') {
+          alert(data);
+        } else {
+          alert('Login successful!');
+          props.history.push('/app');
+        }
+      })
+      .catch(err => console.log(err));
+  };
 
   return (
     <Container component="main" maxWidth="xs">
@@ -110,66 +134,63 @@ const SignIn: React.FC<LoginProps> = (props) => {
         <Typography component="h1" variant="h5">
           Sign in
         </Typography>
-        <form className={classes.form} noValidate>
-          <TextField
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            id="username"
-            label="Username"
-            name="username"
-            autoComplete="username"
-            autoFocus
-            value={password}
-            onChange={handleChange}
-          />
-          <TextField
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            name="password"
-            label="Password"
-            type="password"
-            id="password"
-            autoComplete="current-password"
-            value={password}
-            onChange={handleChange}
-          />
-          <FormControlLabel
-            control={<Checkbox value="remember" color="primary" />}
-            label="Remember me"
-          />
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-            onClick={handleLogin}
-          >
-            Sign In
-          </Button>
-          <Grid container>
-            <Grid item xs>
-              <Link href="#" variant="body2">
-                Forgot password?
-              </Link>
-            </Grid>
-            <Grid item>
-              <Link href="#" variant="body2">
-                {"Don't have an account? Sign Up"}
-              </Link>
-            </Grid>
+        <TextField
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          id="username"
+          label="Username"
+          name="username"
+          autoComplete="username"
+          autoFocus
+          value={username}
+          onChange={handleChange}
+        />
+        <TextField
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          name="password"
+          label="Password"
+          type="password"
+          id="password"
+          autoComplete="current-password"
+          value={password}
+          onChange={handleChange}
+        />
+        <FormControlLabel
+          control={<Checkbox value="remember" color="primary" />}
+          label="Remember me"
+        />
+
+        <Button
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={handleLogin}
+        >
+          Sign In
+        </Button>
+
+        <Grid container>
+          <Grid item xs>
+            <Link href="#" variant="body2">
+              Forgot password?
+            </Link>
           </Grid>
-        </form>
+          <Grid item>
+            <RouteLink to={`/signup`}>Don't have an account? Sign Up</RouteLink>
+          </Grid>
+        </Grid>
       </div>
       <Box mt={8}>
         <Copyright />
       </Box>
     </Container>
   );
-}
+};
 
-export default SignIn;
+export default withRouter(SignIn);