mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-16 02:08:47 +00:00
Register.js renamed to Signup.js
This commit is contained in:
parent
9eb4f603df
commit
bb6c7a07fc
@ -22,7 +22,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.register {
|
||||
.signup {
|
||||
background-color: #1da1f2;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -16,8 +16,8 @@ export class Navbar extends Component {
|
||||
<Button component={ Link } to='/login'>
|
||||
Login
|
||||
</Button>
|
||||
<Button component={ Link } to='/register'>
|
||||
Register
|
||||
<Button component={ Link } to='/signup'>
|
||||
Sign Up
|
||||
</Button>
|
||||
<Button component={ Link } to='/logout'>
|
||||
Logout
|
||||
|
||||
@ -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">
|
||||
<button className="authButtons register">Sign up</button>
|
||||
<form action="./signup">
|
||||
<button className="authButtons signup">Sign up</button>
|
||||
</form>
|
||||
<br/>
|
||||
<form action="./login">
|
||||
|
||||
@ -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));
|
||||
166
twistter-frontend/src/pages/Signup.js
Normal file
166
twistter-frontend/src/pages/Signup.js
Normal file
@ -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));
|
||||
Loading…
Reference in New Issue
Block a user