diff --git a/src/CanExplorer.js b/src/CanExplorer.js index bf1199d..837f978 100644 --- a/src/CanExplorer.js +++ b/src/CanExplorer.js @@ -20,7 +20,9 @@ const CanStreamerWorker = require('./workers/CanStreamerWorker.worker.js'); import debounce from './utils/debounce'; import EditMessageModal from './components/EditMessageModal'; import LoadingBar from './components/LoadingBar'; -import {persistDbc, fetchPersistedDbc} from './api/localstorage'; +import {persistDbc, + fetchPersistedDbc, + unpersistGithubAuthToken} from './api/localstorage'; import OpenDbc from './api/OpenDbc'; import UnloggerClient from './api/unlogger'; import PandaReader from './api/panda-reader'; @@ -68,7 +70,9 @@ export default class CanExplorer extends Component { attemptingPandaConnection: false, pandaNoDeviceSelected: false, live: false, + isGithubAuthenticated: props.githubAuthToken !== null && props.githubAuthToken !== undefined, }; + this.openDbcClient = new OpenDbc(props.githubAuthToken); if(USE_UNLOGGER) { this.unloggerClient = new UnloggerClient(); @@ -100,6 +104,7 @@ export default class CanExplorer extends Component { this.onStreamedCanMessagesProcessed = this.onStreamedCanMessagesProcessed.bind(this); this.showingModal = this.showingModal.bind(this); this.lastMessageEntriesById = this.lastMessageEntriesById.bind(this); + this.githubSignOut = this.githubSignOut.bind(this); } componentWillMount() { @@ -576,6 +581,12 @@ export default class CanExplorer extends Component { }); } + githubSignOut(e) { + unpersistGithubAuthToken(); + this.setState({isGithubAuthenticated: false}); + + e.preventDefault(); + } render() { return ( @@ -587,8 +598,12 @@ export default class CanExplorer extends Component {
Comma Cabana
- {this.props.githubAuthToken ? -

GitHub Authenticated

+ {this.state.isGithubAuthenticated ? +
+

GitHub Authenticated

+

Sign out

+
: this.loginWithGithub() }
diff --git a/src/api/localstorage.js b/src/api/localstorage.js index dd7f921..77a4f9b 100644 --- a/src/api/localstorage.js +++ b/src/api/localstorage.js @@ -21,6 +21,10 @@ export function fetchPersistedGithubAuthToken() { return window.localStorage.getItem(GITHUB_AUTH_TOKEN_LOCALSTORAGE_KEY); } +export function unpersistGithubAuthToken() { + window.localStorage.removeItem(GITHUB_AUTH_TOKEN_LOCALSTORAGE_KEY); +} + export function persistGithubAuthToken(token) { return window.localStorage.setItem(GITHUB_AUTH_TOKEN_LOCALSTORAGE_KEY, token); } \ No newline at end of file diff --git a/src/components/Explorer/explorer.scss b/src/components/Explorer/explorer.scss index 44bce0a..4a32ab2 100644 --- a/src/components/Explorer/explorer.scss +++ b/src/components/Explorer/explorer.scss @@ -50,6 +50,14 @@ &-account { float: right; width: 177px; + &-signout { + cursor: pointer; + font-size: 12px; + color: rgba(255,255,255,0.9); + &:hover { + text-decoration: underline; + } + } a { color: #fff; font-size: 14px; diff --git a/src/index.js b/src/index.js index 88fa7ac..c32cf72 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import CanExplorer from './CanExplorer'; import AcuraDbc from './acura-dbc'; -import {getUrlParameter} from './utils/url'; +import {getUrlParameter, modifyQueryParameters} from './utils/url'; import {GITHUB_AUTH_TOKEN_KEY} from './config'; import {fetchPersistedDbc, fetchPersistedGithubAuthToken, @@ -48,6 +48,8 @@ const authTokenQueryParam = getUrlParameter(GITHUB_AUTH_TOKEN_KEY); if(authTokenQueryParam !== null) { props.githubAuthToken = authTokenQueryParam; persistGithubAuthToken(authTokenQueryParam); + const urlNoAuthToken = modifyQueryParameters({remove: [GITHUB_AUTH_TOKEN_KEY]}); + window.location.href = urlNoAuthToken; } else { props.githubAuthToken = fetchPersistedGithubAuthToken(); }