text: import React, { Component } from "react";
  import { Link, withRouter } from "react-router-dom";
  
  import { withFirebase } from "../Firebase";
  import { SignInLink } from "../SignIn";
  
  const SignUpPage = () => (
    <div className="mx-5 flex flex-col items-center pt-16">
      <h1 className="mb-3 text-white">Sign Up</h1>
      <SignUpForm />
    </div>
  );
  
  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 => {
          // Create a user in your Firebase realtime database
          return this.props.firebase.user(authUser.user.uid).set({
            username,
            email
          });
        })
        .then(authUser => {
          this.setState({ ...INITIAL_STATE });
          this.props.history.push("/");
        })
        .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 (
        <div className="w-full max-w-xs">
          <form
            onSubmit={this.onSubmit}
            className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
          >
            <div className="mb-3">
              {error && <p className="text-red">{error.message}</p>}
            </div>
            <div className="mb-4">
              <label
                className="block text-grey-darker text-sm font-bold mb-2"
                htmlFor="email"
              >
                Username
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                id="username"
                name="username"
                type="text"
                onChange={this.onChange}
                value={username}
                placeholder="Username"
              />
            </div>
            <div className="mb-4">
              <label
                className="block text-grey-darker text-sm font-bold mb-2"
                htmlFor="email"
              >
                Email
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                id="email"
                name="email"
                type="text"
                onChange={this.onChange}
                value={email}
                placeholder="Email Address"
              />
            </div>
            <div className="mb-4">
              <label
                className="block text-grey-darker text-sm font-bold mb-2"
                htmlFor="passwordOne"
              >
                Password
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                id="passwordOne"
                name="passwordOne"
                type="password"
                onChange={this.onChange}
                value={passwordOne}
                placeholder="******************"
              />
            </div>
            <div className="mb-6">
              <label
                className="block text-grey-darker text-sm font-bold mb-2"
                htmlFor="passwordTwo"
              >
                Password Confirmation
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker mb-3 leading-tight focus:outline-none focus:shadow-outline"
                id="passwordTwo"
                name="passwordTwo"
                type="password"
                onChange={this.onChange}
                value={passwordTwo}
                placeholder="******************"
              />
            </div>
            <div className="flex items-center justify-center mb-4">
              <button
                className="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                type="submit"
                disabled={isInvalid}
              >
                Sign Up
              </button>
            </div>
  
            <SignInLink />
          </form>
          <p className="text-center text-grey text-xs">
            ©2019 All rights reserved.
          </p>
        </div>
      );
    }
  }
  
  const SignUpLink = () => (
    <p>
      Don't have an account?{" "}
      <Link className="underline" to="/signup">
        Sign Up
      </Link>
    </p>
  );
  
  const SignUpForm = withRouter(withFirebase(SignUpFormBase));
  
  export default SignUpPage;
  
  export { SignUpForm, SignUpLink };
  