cabana: login with github on modals

server.py

@@ -2,8 +2,8 @@ from flask import Flask, request, redirect
 import requests
 import json
 
-CLIENT_ID = '4b43250e7499a97d62a5'
-CLIENT_SECRET = '65dbd43f3e298e024a7aff85b2a9ed261ffc9fcf'
+CLIENT_ID = 'f1e42d14f45491f9ca34'
+CLIENT_SECRET = 'f50f7a6dd6b0364b0761f35367f0be7027e7caa1'
 
 OAUTH_STATES = []
 app = Flask(__name__)
@@ -16,9 +16,6 @@ def auth_state():
 
 @app.route('/callback')
 def callback():
-  CLIENT_ID = '4b43250e7499a97d62a5'
-  CLIENT_SECRET = '65dbd43f3e298e024a7aff85b2a9ed261ffc9fcf'
-
   code = request.args.get('code')
   state = request.args.get('state')
 
@@ -34,7 +31,7 @@ def callback():
 
   route = json.loads(state)['route']
 
-  return redirect('https://community.comma.ai/cabana/?route={}&gh_access_token={}'.format(route, oauth_resp['access_token']))
+  return redirect('http://127.0.0.1:3000/?route={}&gh_access_token={}'.format(route, oauth_resp['access_token']))
 
 if __name__ == '__main__':
   app.run(port=1235)

src/CanExplorer.js

@@ -322,6 +322,10 @@ export default class CanExplorer extends Component {
       this.setState({selectedMessage: null});
     }
 
+    loginWithGithub() {
+      return <a href={GithubAuth.authorizeUrl(this.state.route.fullname || '')}>Log in with Github</a>
+    }
+
     render() {
         return (<div className={css(Styles.root)}>
                     {this.state.isLoading ?
@@ -347,6 +351,7 @@ export default class CanExplorer extends Component {
                             seekTime={this.state.seekTime}
                             maxByteStateChangeCount={this.state.maxByteStateChangeCount}
                             githubAuthToken={this.props.githubAuthToken}
+                            loginWithGithub={this.loginWithGithub()}
                       />
                       <div className={css(Styles.right)}>
                           {this.state.route.url ?
@@ -372,13 +377,16 @@ export default class CanExplorer extends Component {
                                                 onDbcSelected={this.onDbcSelected}
                                                 onCancel={this.hideLoadDbc}
                                                 openDbcClient={this.openDbcClient}
+                                                loginWithGithub={this.loginWithGithub()}
                                                  /> : null}
                     {this.state.showSaveDbc ? <SaveDbcModal
                                                 dbc={this.state.dbc}
                                                 sourceDbcFilename={this.state.dbcFilename}
                                                 onDbcSaved={this.onDbcSaved}
                                                 onCancel={this.hideSaveDbc}
-                                                openDbcClient={this.openDbcClient} /> : null}
+                                                openDbcClient={this.openDbcClient}
+                                                hasGithubAuth={this.props.githubAuthToken !== null}
+                                                loginWithGithub={this.loginWithGithub()} /> : null}
                     {this.state.showEditMessageModal ?
                       <EditMessageModal
                         onCancel={this.hideEditMessageModal}

src/components/LoadDbcModal.js

@@ -14,7 +14,8 @@ export default class LoadDbcModal extends Component {
   static propTypes = {
     onCancel: PropTypes.func.isRequired,
     onDbcSelected: PropTypes.func.isRequired,
-    openDbcClient: PropTypes.instanceOf(OpenDbc).isRequired
+    openDbcClient: PropTypes.instanceOf(OpenDbc).isRequired,
+    loginWithGithub: PropTypes.element.isRequired,
   };
 
   constructor(props) {
@@ -45,7 +46,7 @@ export default class LoadDbcModal extends Component {
                 openDbcClient={this.props.openDbcClient} />);
     } else if(tab === 'GitHub') {
       if(!this.props.openDbcClient.hasAuth()) {
-        return (<div>Need to auth</div>);
+        return (<div>{this.props.loginWithGithub}</div>);
       } else if(this.state.userOpenDbcRepo === null) {
         return (<div>Fork it</div>);
       } else {

src/components/SaveDbcModal.js

@@ -14,7 +14,9 @@ export default class SaveDbcModal extends Component {
         sourceDbcFilename: PropTypes.string.isRequired,
         onCancel: PropTypes.func.isRequired,
         onDbcSaved: PropTypes.func.isRequired,
-        openDbcClient: PropTypes.instanceOf(OpenDbc).isRequired
+        openDbcClient: PropTypes.instanceOf(OpenDbc).isRequired,
+        hasGithubAuth: PropTypes.bool.isRequired,
+        loginWithGithub: PropTypes.element.isRequired
     };
 
     constructor(props) {
@@ -84,9 +86,11 @@ export default class SaveDbcModal extends Component {
         let content;
         if(openDbcFork !== null) {
             content = <p>Done! {openDbcFork}</p>;
-        } else {
+        } else if(this.props.hasGithubAuth) {
             content = <p className={css(Styles.pointer, Styles.forkOpenDbc)}
                          onClick={this.forkOpenDbcAndWait}>Fork OpenDBC</p>;
+        } else {
+            content = this.props.loginWithGithub;
         }
         return (<div className={css(Styles.step, (openDbcFork !== null ? Styles.stepDone : null))}>
                     {openDbcFork !== null ? <p>Fork OpenDBC</p> : null}

src/components/meta.js

@@ -26,7 +26,8 @@ export default class Meta extends Component {
         route: PropTypes.object,
         partsLoaded: PropTypes.number,
         currentParts: PropTypes.array,
-        seekTime: PropTypes.number
+        seekTime: PropTypes.number,
+        loginWithGithub: PropTypes.element,
     };
 
     constructor(props) {
@@ -296,7 +297,7 @@ export default class Meta extends Component {
                         {this.props.githubAuthToken  ?
                             <p className={css(Styles.githubAuth)}>GitHub Authenticated</p>
                             :
-                            <a href={GithubAuth.authorizeUrl(this.props.route.fullname || '')}>Log in with Github</a>
+                            this.props.loginWithGithub
                         }
                     </div>
                     <div>

src/config.js

@@ -2,7 +2,7 @@ import {getUrlParameter} from './utils/url';
 
 const ENV = process.env.NODE_ENV === 'production' ? 'prod' : 'debug';
 
-const ENV_GITHUB_CLIENT_ID = {debug: '4b43250e7499a97d62a5',
+const ENV_GITHUB_CLIENT_ID = {debug: 'f1e42d14f45491f9ca34',
                               prod: '4b43250e7499a97d62a5'}
 export const GITHUB_CLIENT_ID = ENV_GITHUB_CLIENT_ID[ENV];