updates to signup page

akbuma · akbuma · commit c6534f356248 · 2020-06-28T23:12:55.000-07:00
diff --git a/server/controllers/userController.js b/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}`,
diff --git a/server/models/userModel.js b/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
diff --git a/src/components/login/SignIn.tsx b/src/components/login/SignIn.tsx
@@ -3,6 +3,7 @@ import { LoginInt } from '../../interfaces/Interfaces';
 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';
@@ -17,7 +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 { sessionIsCreated } from '../../helperFunctions/auth';
 
 function Copyright() {
   return (
@@ -54,7 +54,6 @@ const useStyles = makeStyles(theme => ({
 
 const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const classes = useStyles();
-  const s = useSelector(state => state);
 
   const dispatch = useDispatch();
 
@@ -145,7 +144,8 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
             </Link>
           </Grid>
           <Grid item>
-            <RouteLink to={`/signup`}>Don't have an account? Sign Up</RouteLink>
+            {/* <RouteLink to={`/signup`} style={{ textDecoration: 'none' }}>Don't have an account? Sign Up</RouteLink> */}
+            <Link href="/signup" variant="body2">Don't have an account? Sign Up</Link>
           </Grid>
         </Grid>
       </div>
diff --git a/src/components/login/SignUp.tsx b/src/components/login/SignUp.tsx
@@ -1,7 +1,9 @@
-import React, { Component, useState } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
-import { setUsername, setPassword } from '../../actions/actionCreators';
-import { Link as RouteLink, withRouter } 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 { newUserIsCreated } from '../../helperFunctions/auth';
 
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
@@ -14,26 +16,8 @@ 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 { makeStyles } 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 (
@@ -48,36 +32,41 @@ 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(3),
   },
   submit: {
-    margin: theme.spacing(3, 0, 2)
-  }
+    margin: theme.spacing(3, 0, 2),
+  },
 }));
 
-const SignUp: React.FC<LoginProps> = props => {
+const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
   const classes = useStyles();
-  //const count = useSelector(state => state);
 
+  const dispatch = useDispatch();
+
+  const [email, setEmail] = useState('');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
-  const handleChange = e => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;
     switch (e.target.name) {
+      case 'email':
+        setEmail(inputVal);
+        break;
       case 'username':
         setUsername(inputVal);
         break;
@@ -87,33 +76,18 @@ const SignUp: React.FC<LoginProps> = props => {
     }
   };
 
-  const handleSignup = e => {
-    console.log('click fired on handleSignup');
+  const handleSignUp = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
-    const body = JSON.stringify({
-      username,
-      password
+    console.log('click fired on handleLogin');
+    newUserIsCreated(username, email, password).then(userCreated => {
+      if(userCreated) {
+        console.log('user created')
+        dispatch(setLoginState()); // changes login state to true
+        props.history.push('/');
+      } else {
+        console.log('invalid login')
+      }
     });
-    console.log(body);
-    fetch('http://localhost:8080/signup', {
-      method: 'POST',
-      mode: 'cors',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body
-    })
-      .then(res => res.json())
-      .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));
   };
 
   return (
@@ -124,63 +98,74 @@ const SignUp: React.FC<LoginProps> = props => {
           <LockOutlinedIcon />
         </Avatar>
         <Typography component="h1" variant="h5">
-          Sign Up
+          Sign up
         </Typography>
-        <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={handleSignup}
-        >
-          Sign Up
-        </Button>
-        <Grid container>
-          <Grid item xs>
-            <Link href="#" variant="body2">
-              Forgot password?
-            </Link>
+        <form className={classes.form} noValidate>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <TextField
+                variant="outlined"
+                required
+                fullWidth
+                id="email"
+                label="Email Address"
+                name="email"
+                autoComplete="email"
+                autoFocus
+                value={email}
+                onChange={handleChange}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                variant="outlined"
+                required
+                fullWidth
+                id="username"
+                label="Username"
+                name="username"
+                autoComplete="username"
+                value={username}
+                onChange={handleChange}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                variant="outlined"
+                required
+                fullWidth
+                name="password"
+                label="Password"
+                type="password"
+                id="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={handleChange}
+              />
+            </Grid>
           </Grid>
-          <Grid item>
-            <RouteLink to={`/`}>Already have an account? Sign In</RouteLink>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={e => handleSignUp(e)}
+          >
+            Sign Up
+          </Button>
+          <Grid container justify="flex-end">
+            <Grid item>
+              <RouteLink to={`/login`}>Already have an account? Sign In</RouteLink>
+            </Grid>
           </Grid>
-        </Grid>
+        </form>
       </div>
-      <Box mt={8}>
+      <Box mt={5}>
         <Copyright />
       </Box>
     </Container>
   );
-};
+}
 
 export default withRouter(SignUp);
diff --git a/src/helperFunctions/auth.ts b/src/helperFunctions/auth.ts
@@ -26,4 +26,35 @@ export const sessionIsCreated = (username: string, password: string): Promise<bo
       return false
     });
   return result;
+}
+
+export const newUserIsCreated = (username: string, email: string, password: string): Promise<boolean> => {
+  const body = JSON.stringify({
+    username,
+    email,
+    password
+  });
+  const result = fetch('http://localhost:8080/signup', {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body
+  })
+    .then(res => {
+      return res.json();
+    })
+    .then(data => {
+      console.log('the data', data);
+      if (data.sessionId && typeof data.sessionId === 'string') { // check that a session id was passed down
+        return true;
+      }
+      return false;
+    })
+    .catch(err => {
+      console.log(err);
+      return false
+    });
+  return result;
 }
