Skip to content

Instantly share code, notes, and snippets.

@thidasapankaja
Last active July 17, 2018 04:20
Show Gist options
  • Save thidasapankaja/41c40540d1d95cb6f9b97deccdd3466f to your computer and use it in GitHub Desktop.
Save thidasapankaja/41c40540d1d95cb6f9b97deccdd3466f to your computer and use it in GitHub Desktop.
Signup component
import React, { Component } from 'react';
import {
Link,
withRouter,
} from 'react-router-dom';
import { auth } from '../../firebase';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { signup } from './../../actions/signup';
import * as routes from '../../constants/routes';
const SignUpPage = ({ history }) =>
<div>
<h1>SignUp</h1>
<SignUpForm history={history} />
</div>
class SignUpForm extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
email: '',
passwordOne: '',
passwordTwo: '',
error: null,
};
}
onSubmit = (event) => {
const {
username,
email,
passwordOne,
} = this.state;
const {
history,
} = this.props;
auth.doCreateUserWithEmailAndPassword(email, passwordOne)
.then(authUser => {
const userid = authUser.user.uid;
const user = { userid , email };
this.props.signup(user);
this.setState(() => ({
username: '',
email: '',
passwordOne: '',
passwordTwo: '',
error: null,
}));
history.push(routes.HOME);
})
.catch(error => {
console.log(error);
this.setState({error});
});
event.preventDefault();
}
render() {
const {
username,
email,
passwordOne,
passwordTwo,
error,
} = this.state;
const isInvalid =
passwordOne !== passwordTwo ||
passwordOne === '' ||
username === '' ||
email === '';
return (
<form onSubmit={this.onSubmit}>
<input
value={username}
onChange={event => this.setState({username: event.target.value})}
type="text"
placeholder="Full Name"
/>
<input
value={email}
onChange={event => this.setState({email: event.target.value})}
type="text"
placeholder="Email Address"
/>
<input
value={passwordOne}
onChange={event => this.setState({passwordOne: event.target.value})}
type="password"
placeholder="Password"
/>
<input
value={passwordTwo}
onChange={event => this.setState({passwordTwo: event.target.value})}
type="password"
placeholder="Confirm Password"
/>
<button disabled={isInvalid} type="submit">
Sign Up
</button>
{ error && <p>{error.message}</p> }
</form>
);
}
}
const SignUpLink = () =>
<p>
Don't have an account?
{' '}
<Link to={routes.SIGN_UP}>Sign Up</Link>
</p>
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ signup }, dispatch)
}
export default connect(null, mapDispatchToProps)(withRouter(SignUpPage));
export {
SignUpForm,
SignUpLink,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment