💄 - tweaked login component

client/src/App.js

@@ -13,12 +13,12 @@ import './firebaseui-styling.global.css'; // Import globally.
 
 //Components
 import Header from './components/Header';
+import Login from './components/Login';
+
 //import HeaderSignedIn from './components/HeaderSignedIn';
 import Footer from './components/Footer';
 import Dashboard from './components/Dashboard';
 
-
-
 // Get the Firebase config from the auto generated file.
 // *** REMOVED : just using auth from Firebase
 
@@ -54,7 +54,6 @@ class App extends Component {
   };
 
 
-
   /**
    * @inheritDoc
    */
@@ -82,14 +81,11 @@ class App extends Component {
     return (
 
       <div className={styles.container}>
-
-
-
-
         {this.state.isSignedIn !== undefined && !this.state.isSignedIn &&
           //Not signed-in yet
           <div>
-            <Header />  
+            <Header />
+            <Login />
             <StyledFirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
               firebaseAuth={firebaseApp.auth()} />
             <Footer />
@@ -104,22 +100,8 @@ class App extends Component {
           <button><a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a></button>
             <Footer /> 
           </div>
-        }
-
-
+        }   
       </div>
-
-
-
-      /* => TESTING: NOT FOR PROD
-      <Router>
-        <Switch>
-          <Route path="/" exact component={Login} />
-          <Route {...this.state} path="/dashboard" component={withAuthentication(Dashboard)} />
-          <Route path="*" component={NotFound} />
-        </Switch>
-      </Router>
-      */
     );
   }
 }

client/src/components/Login.js

@@ -1,57 +1,16 @@
-import React, { Component } from 'react';
-import Layout from '../containers/Layout';
-import SocialButtonList from './SocialButtonList';
-import { auth } from '../firebase';
-import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
-// import './firebaseui-styling.global.css'; // Import globally.
-
-import Header from '../components/header';
-import Footer from '../components/footer';
-
-
-
-const buttonList = {
-  google: {
-    visible: true,
-    provider: () => {
-      const provider = auth.googleOAuth();
-      provider.addScope('profile');
-      provider.addScope('email');
-      return provider;
-    }
-  },
-};
-
-class Login extends Component {
-  componentDidMount() {
-    auth.getAuth().onAuthStateChanged(user => {
-      if (user) {
-        this.props.history.push('/dashboard');
-      }
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <Header />
-        <div className="circle">
-            <h2>A simple way to measure whether you did a habit.</h2>
-            <ol>
-              <li>Sign in using Google</li>
-              <li>Create a habit to track</li>
-              <li>Check in to relfect and log your&nbsp;progress</li>
-              <li>Review your data to help you along your journey</li>
-            </ol>
-
-            <p>Happy Tracking!</p>
-
-          <SocialButtonList buttonList={buttonList} auth={auth.getAuth}/>
-        </div>
-        <Footer />
-      </div>
-    );
-  }
-}
-
+import React from 'react';
+
+const Login = (props) =>  (
+  <div className="circle">
+    <h2>A simple way to measure whether you did a habit.</h2>
+    <ol>
+      <li>Sign in using Google</li>
+      <li>Create a habit to track</li>
+      <li>Check in to reflect and log your&nbsp;progress</li>
+      <li>Review your data to help you along your journey</li>
+    </ol>
+    <p>Happy Tracking!</p>
+  </div>
+); 
+
 export default Login;