Implement Login page and add username to registration

Author: lonerz

src/App.js

@@ -3,6 +3,7 @@ import CardEditor from './CardEditor';
 import CardViewer from './CardViewer';
 import Homepage from './Homepage';
 import PageRegister from './PageRegister';
+import PageLogin from './PageLogin';
 
 import { Switch, Route } from 'react-router-dom';
 import { connect } from 'react-redux';
@@ -27,6 +28,9 @@ const App = props => {
       <Route exact path="/register">
         <PageRegister />
       </Route>
+      <Route exact path="/login">
+        <PageLogin />
+      </Route>
       <Route>
         <div>Page not found!</div>
       </Route>

src/CardEditor.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import './CardEditor.css';
 
-import { Link, withRouter } from 'react-router-dom';
+import { Link, withRouter, Redirect } from 'react-router-dom';
 import { firebaseConnect } from 'react-redux-firebase';
 import { compose } from 'redux';
+import { connect } from 'react-redux';
 
 class CardEditor extends React.Component {
   constructor(props) {
@@ -50,6 +51,10 @@ class CardEditor extends React.Component {
   };
 
   render() {
+    if (!this.props.isLoggedIn) {
+      return <Redirect to="/register" />;
+    }
+
     const cards = this.state.cards.map((card, index) => {
       return (
         <tr key={index}>
@@ -115,4 +120,12 @@ class CardEditor extends React.Component {
   }
 }
 
-export default compose(firebaseConnect(), withRouter)(CardEditor);
+const mapStateToProps = state => {
+  return { isLoggedIn: state.firebase.auth.uid };
+};
+
+export default compose(
+  firebaseConnect(),
+  connect(mapStateToProps),
+  withRouter,
+)(CardEditor);

src/Homepage.js

@@ -23,12 +23,29 @@ const Homepage = props => {
       <Link to="/editor">Create a new flashcards deck!</Link>
       <h3>Flashcards</h3>
       {decks}
+      <h3>Account</h3>
+      {props.isLoggedIn ? (
+        <div>
+          <div>{props.email}</div>
+          <button onClick={() => props.firebase.logout()}>Logout</button>
+        </div>
+      ) : (
+        <div>
+          <Link to="/register">Register</Link>
+          <br />
+          <Link to="/login">Login</Link>
+        </div>
+      )}
     </div>
   );
 };
 
 const mapStateToProps = state => {
-  return { homepage: state.firebase.data.homepage };
+  return {
+    homepage: state.firebase.data.homepage,
+    email: state.firebase.auth.email,
+    isLoggedIn: state.firebase.auth.uid,
+  };
 };
 
 export default compose(

src/PageLogin.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { firebaseConnect } from 'react-redux-firebase';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Redirect, Link } from 'react-router-dom';
+
+class PageLogin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      email: '',
+      password: '',
+    };
+  }
+
+  handleChange = event =>
+    this.setState({ [event.target.name]: event.target.value, error: '' });
+
+  login = async () => {
+    const credentials = {
+      email: this.state.email,
+      password: this.state.password,
+    };
+
+    try {
+      await this.props.firebase.login(credentials);
+    } catch (error) {
+      this.setState({ error: error.message });
+    }
+  };
+
+  render() {
+    if (this.props.isLoggedIn) {
+      return <Redirect to="/" />;
+    }
+
+    return (
+      <div>
+        <h2>Login</h2>
+        <div>
+          <div>{this.state.error}</div>
+          <input
+            name="email"
+            onChange={this.handleChange}
+            placeholder="Email"
+            value={this.state.email}
+          />
+          <br />
+          <input
+            name="password"
+            onChange={this.handleChange}
+            placeholder="Password"
+            type="password"
+            value={this.state.password}
+          />
+        </div>
+        <br />
+        <button onClick={this.login}>Login!</button>
+        <hr />
+        <Link to="/">Home</Link>
+        <br />
+        <Link to="/register">Register</Link>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return { isLoggedIn: state.firebase.auth.uid };
+};
+
+export default compose(firebaseConnect(), connect(mapStateToProps))(PageLogin);

src/PageRegister.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { firebaseConnect } from 'react-redux-firebase';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { Redirect } from 'react-router-dom';
+import { Redirect, Link } from 'react-router-dom';
 
 class PageRegister extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       email: '',
       password: '',
+      username: '',
     };
   }
 
@@ -22,8 +23,13 @@ class PageRegister extends React.Component {
       password: this.state.password,
     };
 
+    const profile = {
+      email: this.state.email,
+      username: this.state.username,
+    };
+
     try {
-      await this.props.firebase.createUser(credentials);
+      await this.props.firebase.createUser(credentials, profile);
     } catch (error) {
       this.setState({ error: error.message });
     }
@@ -53,9 +59,22 @@ class PageRegister extends React.Component {
             type="password"
             value={this.state.password}
           />
+          <br />
+          <input
+            name="username"
+            onChange={this.handleChange}
+            placeholder="Username"
+            value={this.state.username}
+          />
         </div>
         <br />
-        <button onClick={this.register}>Register!</button>
+        <button disabled={!this.state.username.trim()} onClick={this.register}>
+          Register!
+        </button>
+        <hr />
+        <Link to="/">Home</Link>
+        <br />
+        <Link to="/login">Login</Link>
       </div>
     );
   }

src/index.js

@@ -37,6 +37,7 @@ const store = createStore(rootReducer, composeWithDevTools());
 
 // react-redux-firebase config
 const rrfConfig = {
+  preserveOnLogout: ['homepage'],
   userProfile: 'users',
 };