05-Sign Up with React and Firebase

Author: rwieruch

package-lock.json

@@ -7,7 +7,8 @@
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1"
+    "react-scripts": "2.1.1",
+    "recompose": "^0.30.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -2,4 +2,10 @@ import React from 'react';
 
 const FirebaseContext = React.createContext(null);
 
+export const withFirebase = Component => props => (
+  <FirebaseContext.Consumer>
+    {firebase => <Component {...props} firebase={firebase} />}
+  </FirebaseContext.Consumer>
+);
+
 export default FirebaseContext;

src/components/Firebase/context.js

@@ -1,6 +1,6 @@
-import FirebaseContext from './context';
+import FirebaseContext, { withFirebase } from './context';
 import Firebase from './firebase';
 
 export default Firebase;
 
-export { FirebaseContext };
+export { FirebaseContext, withFirebase };

src/components/Firebase/index.js

@@ -1,9 +1,114 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { Link, withRouter } from 'react-router-dom';
 
-const SignUp = () => (
+import { withFirebase } from '../Firebase';
+import * as ROUTES from '../../constants/routes';
+
+const SignUpPage = () => (
   <div>
     <h1>SignUp</h1>
+    <SignUpForm />
   </div>
 );
 
-export default SignUp;
+const INITIAL_STATE = {
+  username: '',
+  email: '',
+  passwordOne: '',
+  passwordTwo: '',
+  error: null,
+};
+
+class SignUpFormBase extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { ...INITIAL_STATE };
+  }
+
+  onSubmit = event => {
+    const { username, email, passwordOne } = this.state;
+
+    this.props.firebase
+      .doCreateUserWithEmailAndPassword(email, passwordOne)
+      .then(authUser => {
+        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 {
+      username,
+      email,
+      passwordOne,
+      passwordTwo,
+      error,
+    } = this.state;
+
+    const isInvalid =
+      passwordOne !== passwordTwo ||
+      passwordOne === '' ||
+      email === '' ||
+      username === '';
+
+    return (
+      <form onSubmit={this.onSubmit}>
+        <input
+          name="username"
+          value={username}
+          onChange={this.onChange}
+          type="text"
+          placeholder="Full Name"
+        />
+        <input
+          name="email"
+          value={email}
+          onChange={this.onChange}
+          type="text"
+          placeholder="Email Address"
+        />
+        <input
+          name="passwordOne"
+          value={passwordOne}
+          onChange={this.onChange}
+          type="password"
+          placeholder="Password"
+        />
+        <input
+          name="passwordTwo"
+          value={passwordTwo}
+          onChange={this.onChange}
+          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 SignUpForm = withRouter(withFirebase(SignUpFormBase));
+
+export default SignUpPage;
+
+export { SignUpForm, SignUpLink };