From bb6c7a07fc876be14cb8af8d5a806a754c8f924a Mon Sep 17 00:00:00 2001 From: Clayton Wilson Date: Mon, 7 Oct 2019 21:00:52 -0400 Subject: [PATCH] Register.js renamed to Signup.js --- twistter-frontend/src/App.css | 2 +- twistter-frontend/src/App.js | 6 +- twistter-frontend/src/Logout.js | 2 +- .../src/components/layout/NavBar.js | 4 +- twistter-frontend/src/pages/Home.js | 4 +- twistter-frontend/src/pages/Register.js | 130 -------------- twistter-frontend/src/pages/Signup.js | 166 ++++++++++++++++++ 7 files changed, 175 insertions(+), 139 deletions(-) delete mode 100644 twistter-frontend/src/pages/Register.js create mode 100644 twistter-frontend/src/pages/Signup.js diff --git a/twistter-frontend/src/App.css b/twistter-frontend/src/App.css index 8189649..0bfca90 100644 --- a/twistter-frontend/src/App.css +++ b/twistter-frontend/src/App.css @@ -22,7 +22,7 @@ white-space: nowrap; } -.register { +.signup { background-color: #1da1f2; border: 1px solid #fff; color: #fff; diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js index b917566..8145864 100644 --- a/twistter-frontend/src/App.js +++ b/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 {
{/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */} - + @@ -65,7 +65,7 @@ class App extends Component { - +
diff --git a/twistter-frontend/src/Logout.js b/twistter-frontend/src/Logout.js index df36575..5944f2d 100644 --- a/twistter-frontend/src/Logout.js +++ b/twistter-frontend/src/Logout.js @@ -13,7 +13,7 @@ class Logout extends Component { Logout of your Twistter Account



- + ); }; diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js index 0b6ba22..f79fe79 100644 --- a/twistter-frontend/src/components/layout/NavBar.js +++ b/twistter-frontend/src/components/layout/NavBar.js @@ -16,8 +16,8 @@ export class Navbar extends Component { - + +
diff --git a/twistter-frontend/src/pages/Register.js b/twistter-frontend/src/pages/Register.js deleted file mode 100644 index 3ae9047..0000000 --- a/twistter-frontend/src/pages/Register.js +++ /dev/null @@ -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 ( -
- logo -

- Create your account -

- - - -

- -

- -

- -

- { - errors.general && - (
- {errors.general} -
) - } - {/* { - loading && Loading... - } */} - - -
- ); - } - -} -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)); \ No newline at end of file diff --git a/twistter-frontend/src/pages/Signup.js b/twistter-frontend/src/pages/Signup.js new file mode 100644 index 0000000..d97ff17 --- /dev/null +++ b/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 ( + + + + logo + + Log in to Twistter + +
+ + + + {errors.general && ( + Wrong Email or Password + )} + +
+ + + ); + } +} + +// 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)); \ No newline at end of file