Register.js renamed to Signup.js

twistter-frontend/src/App.css

@@ -22,7 +22,7 @@
   white-space: nowrap;
 }
 
-.register {
+.signup {
   background-color: #1da1f2;
   border: 1px solid #fff;
   color: #fff;

twistter-frontend/src/App.js

@@ -20,7 +20,7 @@ import AuthRoute from "./util/AuthRoute";
 
 // Pages
 import home from './pages/Home';
-import register from './pages/Register';
+import signup from './pages/Signup';
 import login from './pages/Login';
 import user from './pages/user';
 import writeMicroblog from "./Writing_Microblogs.js";
@@ -57,7 +57,7 @@ class App extends Component {
             <div className="app">
               <Switch>
               {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
-              <AuthRoute exact path="/register" component={register} />
+              <AuthRoute exact path="/signup" component={signup} />
               <AuthRoute exact path="/login" component={login} />
 
               <Route exact path="/user" component={user} />
@@ -65,7 +65,7 @@ class App extends Component {
               <Route exact path="/edit" component={edit} />
               <Route exact path="/user" component={userLine} />
 
-              <Route exact path="/" component={home}/>
+              <AuthRoute exact path="/" component={home}/>
               </Switch>
             </div>
 

twistter-frontend/src/Logout.js

@@ -13,7 +13,7 @@ class Logout extends Component {
 	    <b>Logout of your Twistter Account</b>
       <br/><br/>
       <br/><br/>
-	    <button className="authButtons register" type="submit">Sign Out</button>
+	    <button className="authButtons signup" type="submit">Sign Out</button>
       </div>
     );
   };

twistter-frontend/src/components/layout/NavBar.js

@@ -16,8 +16,8 @@ export class Navbar extends Component {
                     <Button component={ Link } to='/login'>
                         Login
                     </Button>
-                    <Button component={ Link } to='/register'>
+                    <Button component={ Link } to='/signup'>
-                        Register
+                        Sign Up
                     </Button>
 		    <Button component={ Link } to='/logout'>
 			Logout

twistter-frontend/src/pages/Home.js

@@ -21,8 +21,8 @@ class Home extends Component {
         <div>                    
           <b>Join today or sign in if you already have an account.</b> 
           <br/><br/>
-          <form action="./register">
+          <form action="./signup">
-            <button className="authButtons register">Sign up</button> 
+            <button className="authButtons signup">Sign up</button> 
           </form>
           <br/>
           <form action="./login">

twistter-frontend/src/pages/Register.js

@@ -1,130 +0,0 @@
-import React, { Component } from 'react';
-import '../App.css';
-
-import logo from '../images/twistter-logo.png';
-import axios from 'axios';
-import TextField from '@material-ui/core/TextField';
-import PropTypes from 'prop-types';
-
-// Redux Stuff
-import {connect} from 'react-redux';
-import {signupUser, logoutUser} from '../redux/actions/userActions';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-const styles = {
-  form: {
-    textAlign: "center"
-  },
-  textField: {
-    marginBottom: 30
-  },
-  pageTitle: {
-    // marginTop: 20,
-    marginBottom: 40
-  },
-  button: {
-    positon: "relative",
-    marginBottom: 30
-  },
-  progress: {
-    position: "absolute"
-  }
-};
-
-class Register extends Component {
-
-  constructor() {
-    super();
-    this.state = {
-        email: '',
-        handle: '',
-        password: '',
-        confirmPassword: '',
-        errors: {}
-    };
-
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  };
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.UI.errors) {
-      this.setState({ errors: nextProps.UI.errors });
-    }
-  }
-
-  handleSubmit = (event) => {
-    event.preventDefault();
-    this.setState({
-    loading: true
-  });
-
-   const newUserData = {
-      email: this.state.email,
-      handle: this.state.handle,
-      password: this.state.password,
-      confirmPassword: this.state.confirmPassword
-  };
-
-  this.props.signupUser(newUserData, this.props.history);
-};
- 
- 
-handleChange = (event) => {
-  this.setState({
-      [event.target.name]: event.target.value
-  });
-};
-
-  render() {
-    const { classes, UI: { loading } } = this.props;
-    const { errors } = this.state;
-    return (
-      <div>
-        <img src={logo} className="app-logo" alt="logo" />
-        <br/><br/>
-        <b>Create your account</b>
-        <br/><br/>
-        <form noValidate onSubmit={this.handleSubmit}>
-
-        <TextField className="authInput" id="email" name="email" label="Email" helperText={errors.email} error={errors.email ? true : false} 
-                        value={this.state.email} onChange={this.handleChange}/>
-        <br/><br/>
-        <TextField className="authInput" id="username" name="handle" label="Username" helperText={errors.handle} error={errors.handle ? true : false} 
-                        value={this.state.handle} onChange={this.handleChange} />
-        <br/><br/>
-        <TextField className="authInput" id="password" name="password" label="Password" helperText={errors.password} error={errors.password ? true : false} 
-                        value={this.state.password} onChange={this.handleChange} />
-        <br/><br/>
-        <TextField className="authInput" id="confirmPassword" name="confirmPassword" label="Confirm Password" helperText={errors.confirmPassword} error={errors.confirmPassword ? true : false} 
-                        value={this.state.confirmPassword} onChange={this.handleChange} />
-        <br/><br/>
-        {
-                            errors.general && 
-                            (<div className={classes.customError}>
-                                {errors.general}
-                            </div>)
-        }
-        {/* {
-          loading && <TextField>Loading...</TextField>
-        } */}
-        <button class="authButtons register" id="submit">Sign up</button>
-        </form>
-      </div>
-    );
-  }
-  
-}
-Register.propTypes = {
-  classes: PropTypes.object.isRequired,
-  user: PropTypes.object.isRequired,
-  UI: PropTypes.object.isRequired,
-  signupUser: PropTypes.func.isRequired
-};
-
-const mapStateToProps = (state) => ({
-  user: state.user,
-  UI: state.UI
-});
-
-export default connect(mapStateToProps, {signupUser})(withStyles(styles)(Register));

twistter-frontend/src/pages/Signup.js

@@ -0,0 +1,166 @@
+/* eslint-disable */
+import React, { Component } from 'react';
+import '../App.css';
+import PropTypes from 'prop-types';
+
+import logo from '../images/twistter-logo.png';
+
+// Material-UI stuff
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Grid from "@material-ui/core/Grid";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import withStyles from "@material-ui/core/styles/withStyles";
+
+// Redux stuff
+import { connect } from 'react-redux';
+import { signupUser } from '../redux/actions/userActions';
+
+const styles = {
+  form: {
+    textAlign: "center"
+  },
+  textField: {
+    marginBottom: 30
+  },
+  pageTitle: {
+    marginBottom: 40
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
+  },
+  progress: {
+    position: "absolute"
+  }
+};
+
+export class Signup extends Component {
+
+  // Constructor for the state
+  constructor() {
+    super();
+    this.state = {
+      email: "",
+      password:"",
+      errors: {}
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.UI.errors) {
+      this.setState({ errors: nextProps.UI.errors });
+    }
+  }
+
+  // Runs whenever the submit button is clicked.
+  // Updates the database entry of the signed in user with the
+  // data stored in the state.
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const signupData = {
+      email: this.state.email,
+      password: this.state.password,
+    };
+    this.props.signupUser(signupData, this.props.history);
+  };
+
+  // Updates the state whenever one of the textboxes changes.
+  // The key is the name of the textbox and the value is the
+  // value in the text box.
+  handleChange = (event) => {
+    this.setState({
+      [event.target.name]: event.target.value,
+      errors: {
+        [event.target.name]: null
+      }
+    });
+  };
+
+  render() {
+    const { classes, UI: { loading } } = this.props;
+    const { errors } = this.state;
+
+    return (
+      <Grid container className={classes.form}>
+        <Grid item sm />
+        <Grid item sm>
+        <img src={logo} className="app-logo" alt="logo" />
+          <Typography variant="h2" className={classes.pageTitle}>
+            Log in to Twistter
+          </Typography>
+          <form noValidate onSubmit={this.handleSubmit}>
+            <TextField
+              id="email"
+              name="email"
+              label="Email*"
+              className={classes.textField}
+              value={this.state.email}
+              helperText={errors.email}
+              error={errors.email ? true : false}
+              variant="outlined"
+              onChange={this.handleChange}
+              fullWidth
+            />
+            <TextField
+              id="password"
+              name="password"
+              label="password*"
+              className={classes.textField}
+              value={this.state.password}
+              helperText={errors.password}
+              error={errors.password ? true : false}
+              type="password"
+              variant="outlined"
+              onChange={this.handleChange}
+              fullWidth
+            />
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              className={classes.button}
+              disabled={loading}
+            >
+              Sign Up
+              {loading && (
+                <CircularProgress size={30} className={classes.progress} />
+              )}
+            </Button>
+            {errors.general && (
+              <Typography color="error">Wrong Email or Password</Typography>
+            )}
+          </form>
+        </Grid>
+        <Grid item sm />
+      </Grid>
+    );
+  }
+}
+
+// Proptypes just confirms that all data in it exists and is of the type that it
+// is declared to be
+Signup.propTypes = {
+  classes: PropTypes.object.isRequired,
+  signupUser: PropTypes.func.isRequired,
+  user: PropTypes.object.isRequired,
+  UI: PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) => ({
+  user: state.user,
+  UI: state.UI,
+});
+
+const mapActionsToProps = {
+  signupUser
+}
+Signup.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+// This mapStateToProps is just synchronizing the 'state' to 'this.props' so we can access it
+// The state contains info about the current logged in user
+
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Signup));