[PLEASE REVIEW] #17 Auto submit token

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ['react', 'es2015', 'stage-0'],
-  "plugins": ['add-module-exports']
+  "presets": ["react", "es2015", "stage-0"],
+  "plugins": ["add-module-exports"]
 }

.eslintrc

@@ -1,20 +1,38 @@
 {
   "extends": "eslint-config-airbnb",
   "rules": {
-    "indent": [2, 2, {"SwitchCase": 1}],
+    "indent": [1, 4, {"SwitchCase": 1}],
     "no-console": [0],
     "func-names": [0],
-    "semi": [2, "never"],
-    "no-extra-semi": [2],
-    "space-before-function-paren": [2, "always"],
+    "semi": [0],
+    "no-extra-semi": [1],
+    "space-before-function-paren": [0],
     "no-else-return": [0],
     "space-infix-ops": [0],
     "react/prefer-es6-class": [0],
     "react/prefer-stateless-function": [0],
     "import/no-unresolved": [0],
     "global-require": [0],
+    "import/no-extraneous-dependencies": [0],
+    "no-unused-vars": [1],
+    "max-len": [1],
+    "jsx-quotes": [1],
+    "jsx-a11y/img-has-alt": [1],
+    "jsx-a11y/img-redundant-alt": [1],
+    "comma-dangle": [1],
+    "react/jsx-closing-bracket-location": [0],
+    "eqeqeq": [0],
+    "react/jsx-indent": [1],
+    "quotes": [1],
+    "react/jsx-curly-spacing": [1],
+    "no-use-before-define": [0]
   },
-  "globals": {
-    "__PREFIX_LINKS__": true,
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
   },
+  "globals": {
+    "__PREFIX_LINKS__": true
+  }
 }

.gitignore

@@ -6,5 +6,6 @@ pages/.manifest
 .idea
 gatsby-starter-lumen.iml
 .vscode/
+public
 
 npm-debug.log

.vscode/launch.json

@@ -4,15 +4,6 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Develop",
-            "program": "${workspaceRoot}/node_modules/gatsby/bin/gatsby.js",
-            "cwd": "${workspaceRoot}",
-            "args": ["develop"],
-            "sourceMaps": true
-        },
         {
             "type": "node",
             "request": "launch",
@@ -22,15 +13,6 @@
             "args": ["build"],
             "sourceMaps": true
         },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Serve Public",
-            "program": "${workspaceRoot}/node_modules/gatsby/bin/gatsby.js",
-            "cwd": "${workspaceRoot}",
-            "args": ["serve-build"],
-            "sourceMaps": true
-        },
         {
             "type": "node",
             "request": "attach",

components/Auth/firebaseHelper.js

@@ -0,0 +1,164 @@
+import firebase from 'firebase';
+
+const localStorageAuthKey = 'dashcommunityBlogAuth';
+
+let provider;
+let authObj;
+
+let strategy = 'popup';
+
+function gitHubRedirectLogin() {
+    firebase.auth()
+        .getRedirectResult()
+        .then(handleSigninSuccess)
+        .catch(handleSignInErr);
+
+    provider = new firebase.auth.GithubAuthProvider();
+    provider.addScope('repo');
+    firebase.auth().signInWithRedirect(provider);
+}
+
+function gitHubPopupLogin() {
+    provider = new firebase.auth.GithubAuthProvider();
+    provider.addScope('repo');
+    return firebase.auth()
+        .signInWithPopup(provider)
+        .then(handleSigninSuccess)
+        .catch(handleSignInErr);
+}
+
+// function createUser(email, password) {
+//     return firebase.auth().createUserWithEmailAndPassword(
+//         email,
+//         password
+//     )
+//     .then(result => {
+//         user = result;
+//         return user;
+//     })
+//     .catch(handleSignInErr);
+// }
+
+// function emailLogin(email, password) {
+//     credential = firebase.auth.EmailAuthProvider.credential(
+//         email,
+//         password
+//     );
+// }
+
+function getUser() {
+    if (!authObj) {
+        authObj = getAuthObj();
+    }
+    if (authObj && authObj.user) {
+        return authObj.user;
+    }
+
+    return false;
+}
+
+function getToken() {
+    if (!authObj) {
+        authObj = getAuthObj();
+    }
+    if (authObj && authObj.token) {
+        return authObj.token;
+    }
+
+    return false;
+}
+
+function setUsername(username) {
+    if (!authObj) {
+        authObj = getAuthObj();
+    }
+    if (authObj && authObj.user) {
+        authObj.user.username = username;
+        return authObj.user.username;
+    }
+
+    return false;
+}
+
+function getUsername() {
+    if (!authObj) {
+        authObj = getAuthObj();
+    }
+    if (authObj && authObj.user) {
+        return authObj.user.username;
+    }
+
+    return '';
+}
+
+function handleSigninSuccess(result) {
+    if (!authObj) {
+        authObj = getAuthObj();
+    }
+    if (result.credential) {
+        authObj.token = result.credential.accessToken;
+        authObj.credential = result.credential;
+    }
+
+    // fetch('github.com', )
+
+    authObj.user = result.user;
+    authObj.provider = provider;
+
+    window.localStorage.setItem(localStorageAuthKey, JSON.stringify(authObj));
+    return authObj;
+}
+
+function handleSignInErr(err) {
+    const errorCode = err.code;
+    const errorMessage = err.message;
+    const email = err.email;
+    if (!authObj) {
+        authObj = getAuthObj();
+    }
+    authObj.credential = err.credential;
+
+    if (errorCode == 'auth/account-exists-with-different-credentials') {
+        console.warn('You already signed up with a different ' +
+            'authentication provider for that email');
+    }
+    console.error(err);
+}
+
+function changeLoginStrategy(newStrategy) {
+    strategy = newStrategy;
+}
+
+function getAuthObj() {
+    if (authObj) {
+        return authObj;
+    }
+    let obj;
+    const authString = localStorage.getItem(localStorageAuthKey);
+    if (authString) {
+        obj = JSON.parse(authString);
+    } else {
+        obj = {};
+    }
+    return obj;
+}
+
+function signOut() {
+    localStorage.removeItem(localStorageAuthKey);
+}
+
+function getLoginStrategy() {
+    return strategy;
+}
+
+export {
+    gitHubRedirectLogin,
+    gitHubPopupLogin,
+    // emailLogin,
+    getUser,
+    getToken,
+    getAuthObj,
+    getLoginStrategy,
+    setUsername,
+    getUsername,
+};

components/Auth/index.jsx

@@ -0,0 +1,7 @@
+import './initializeFirebase.js';
+
+import * as auth from './firebaseHelper';
+
+export {
+    auth,
+}

components/Auth/initializeFirebase.js

@@ -0,0 +1,12 @@
+import firebase from 'firebase';
+
+const config = {
+    apiKey: 'AIzaSyDayBqMwkiAQ76WHCfGWS7ZHqJYro_Ofw0',
+    databaseURL: 'https://dashcommunity-blog.firebaseio.com',
+    authDomain: 'dashcommunity-blog.firebaseapp.com',
+    projectId: 'dashcommunity-blog',
+    storageBucket: 'dashcommunity-blog.appspot.com',
+    messagingSenderId: '451048266119',
+};
+
+firebase.initializeApp(config);

components/ComposePage/index.jsx

@@ -1,36 +1,52 @@
-import React from 'react'
-import DocumentTitle from 'react-document-title'
-import { RouteHandler, Link } from 'react-router'
-import SiteSidebar from '../SiteSidebar'
-import { config } from 'config'
-import { rawDefaultEditorContent } from '../Editor/defaultEditorContent'
-import { ContentState, convertToRaw } from 'draft-js'
-import GitHubForm from '../Forms/GitHubForm'
-import MyEditor from '../Editor'
+import React from 'react';
+import SiteSidebar from '../SiteSidebar';
+import { rawDefaultEditorContent } from '../Editor/defaultEditorContent';
+import GitHubForm from '../Forms/GitHubForm';
+import MyEditor from '../Editor';
+import { LoginButton } from '../Forms/ComposeFormElements';
+import { auth } from '../Auth';
 
 export default class ComposePage extends React.Component {
-  constructor () {
-    super()
-    this.state = {editorContent: rawDefaultEditorContent};
-  }
+    constructor () {
+        super();
+        this.state = {
+            editorContent: rawDefaultEditorContent,
+            isLoggedIn: false,
+        };
+    }
 
-  render () {
-    const passEditorContent = (editorContent) => {// https://www.youtube.com/watch?v=5Xew--ycx0o&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=4#t=165.980087
-      console.log('editorContent in ComposePage:', editorContent)
-      this.setState({editorContent: editorContent})
+    componentDidMount() {
+        this.setState({ isLoggedIn: !!auth.getUser() });
     }
-    return (
-      <div>
-        <SiteSidebar {...this.props}/>
-        <div className='content'>
-          <div className='main'>
-            <div className='main-inner'>
-              <MyEditor editorContent={this.state.editorContent}/>
-              <GitHubForm passContent={passEditorContent.bind(this)}/>
+
+    render () {
+        const passEditorContent = (editorContent) => { // https://www.youtube.com/watch?v=5Xew--ycx0o&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=4#t=165.980087
+            console.log('editorContent in ComposePage:', editorContent);
+            this.setState({ editorContent });
+        };
+        const login = () => {
+            this.setState({
+                isLoggedIn: true,
+            });
+        };
+        let form;
+        if (this.state.isLoggedIn) {
+            form = <GitHubForm passContent={passEditorContent} />
+        } else {
+            form = <LoginButton onSubmit={login} />
+        }
+        return (
+          <div>
+            <SiteSidebar {...this.props} />
+            <div className="content">
+              <div className="main">
+                <div className="main-inner">
+                  <MyEditor editorContent={this.state.editorContent} />
+                  { form }
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    );
-  }
-}
+        );
+    }
+}