Permalink
Browse files

06-Sign In with React and Firebase

  • Loading branch information...
rwieruch committed Nov 20, 2018
1 parent d5d2ba5 commit 6cbccce21952e10472504fc6ef3d37af2c998bb6
Showing with 82 additions and 3 deletions.
  1. +82 −3 src/components/SignIn/index.js
@@ -1,9 +1,88 @@
import React from 'react';
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { compose } from 'recompose';
const SignIn = () => (
import { SignUpLink } from '../SignUp';
import { withFirebase } from '../Firebase';
import * as ROUTES from '../../constants/routes';
const SignInPage = () => (
<div>
<h1>SignIn</h1>
<SignInForm />
<SignUpLink />
</div>
);
export default SignIn;
const INITIAL_STATE = {
email: '',
password: '',
error: null,
};
class SignInFormBase extends Component {
constructor(props) {
super(props);
this.state = { ...INITIAL_STATE };
}
onSubmit = event => {
const { email, password } = this.state;
this.props.firebase
.doSignInWithEmailAndPassword(email, password)
.then(() => {
this.setState({ ...INITIAL_STATE });
this.props.history.push(ROUTES.HOME);
})
.catch(error => {
this.setState({ error });
});
event.preventDefault();
};
onChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const { email, password, error } = this.state;
const isInvalid = password === '' || email === '';
return (
<form onSubmit={this.onSubmit}>
<input
name="email"
value={email}
onChange={this.onChange}
type="text"
placeholder="Email Address"
/>
<input
name="password"
value={password}
onChange={this.onChange}
type="password"
placeholder="Password"
/>
<button disabled={isInvalid} type="submit">
Sign In
</button>
{error && <p>{error.message}</p>}
</form>
);
}
}
const SignInForm = compose(
withRouter,
withFirebase,
)(SignInFormBase);
export default SignInPage;
export { SignInForm };

0 comments on commit 6cbccce

Please sign in to comment.