diff --git a/src/App.js b/src/App.js index dd774db20..16ccd36a4 100644 --- a/src/App.js +++ b/src/App.js @@ -14,6 +14,7 @@ import MainSidebar from './chrome/MainSidebar.js'; import BugReporterDialog from './chrome/BugReporterDialog.js'; import ErrorBar from './chrome/ErrorBar.js'; import ShareSheet from './chrome/ShareSheet.js'; +import SignInSheet from './chrome/SignInSheet.js'; import PluginContainer from './PluginContainer.js'; import Sheet from './chrome/Sheet.js'; import {ipcRenderer, remote} from 'electron'; @@ -22,6 +23,7 @@ import { ACTIVE_SHEET_BUG_REPORTER, ACTIVE_SHEET_PLUGIN_DEBUGGER, ACTIVE_SHEET_SHARE_DATA, + ACTIVE_SHEET_SIGN_IN, } from './reducers/application.js'; import type {Logger} from './fb-interfaces/Logger.js'; @@ -72,6 +74,8 @@ export class App extends React.Component { return ; } else if (this.props.activeSheet === ACTIVE_SHEET_SHARE_DATA) { return ; + } else if (this.props.activeSheet === ACTIVE_SHEET_SIGN_IN) { + return ; } else { // contents are added via React.Portal return null; diff --git a/src/chrome/MainSidebar.js b/src/chrome/MainSidebar.js index 6ec6b3f47..33014e432 100644 --- a/src/chrome/MainSidebar.js +++ b/src/chrome/MainSidebar.js @@ -6,6 +6,7 @@ */ import {FlipperBasePlugin} from '../plugin.js'; +import config from '../fb-stubs/config'; import type BaseDevice from '../devices/BaseDevice.js'; import type Client from '../Client.js'; import type {UninitializedClient} from '../UninitializedClient.js'; @@ -345,7 +346,7 @@ class MainSidebar extends PureComponent { />  Plugin not showing? - + {config.showLogin && } ); } diff --git a/src/chrome/SignInSheet.js b/src/chrome/SignInSheet.js new file mode 100644 index 000000000..0768463a7 --- /dev/null +++ b/src/chrome/SignInSheet.js @@ -0,0 +1,124 @@ +/** + * Copyright 2018-present Facebook. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * @format + */ + +import { + FlexColumn, + Button, + styled, + Text, + Component, + FlexRow, + Spacer, + Input, + Link, + colors, +} from 'flipper'; +import {writeKeychain, getUser} from '../fb-stubs/user'; +import {login} from '../reducers/user'; +import {connect} from 'react-redux'; + +const Container = styled(FlexColumn)({ + padding: 20, + width: 500, +}); + +const Title = styled(Text)({ + marginBottom: 6, + fontWeight: 600, +}); + +const InfoText = styled(Text)({ + lineHeight: 1.35, + marginBottom: 15, +}); + +const TokenInput = styled(Input)({ + marginRight: 0, +}); + +type OwnProps = {| + onHide: () => mixed, +|}; + +type Props = {| + ...OwnProps, + login: (user: Object) => mixed, +|}; + +type State = { + token: string, + loading: boolean, + error: ?string, +}; + +class SignInSheet extends Component { + state = { + token: '', + loading: false, + error: null, + }; + + saveToken = async () => { + this.setState({loading: true}); + const {token} = this.state; + if (token) { + await writeKeychain(token); + try { + const user = await getUser(); + if (user) { + this.props.login(user); + } + this.props.onHide(); + } catch (error) { + console.error(error); + this.setState({token: '', loading: false, error}); + } + } + }; + + render() { + return ( + + You are not currently logged in to Facebook. + + To log in you will need to{' '} + + open this page + + , copy the Nuclide access token you find on that page, and paste it + into the text input below. + + this.setState({token: e.target.value})} + /> + {this.state.error && ( + + Error: {this.state.error} + + )} +
+ + + + + +
+ ); + } +} + +export default connect( + () => ({}), + {login}, +)(SignInSheet); diff --git a/src/chrome/UserAccount.js b/src/chrome/UserAccount.js index c78294e47..0c4b04b5b 100644 --- a/src/chrome/UserAccount.js +++ b/src/chrome/UserAccount.js @@ -6,9 +6,11 @@ */ import type {User} from '../reducers/user'; +import type {ActiveSheet} from '../reducers/application'; import {styled, PureComponent, FlexRow, Glyph, Text, colors} from 'flipper'; import {logout} from '../reducers/user'; +import {setActiveSheet, ACTIVE_SHEET_SIGN_IN} from '../reducers/application.js'; import {connect} from 'react-redux'; import electron from 'electron'; import {findDOMNode} from 'react-dom'; @@ -19,12 +21,14 @@ const Container = styled(FlexRow)({ borderTop: `1px solid ${colors.blackAlpha10}`, fontWeight: 500, flexShrink: 0, + minHeight: 36, + color: colors.blackAlpha80, }); const ProfilePic = styled('img')({ borderRadius: '999em', flexShrink: 0, - width: 25, + width: 24, marginRight: 6, }); @@ -39,6 +43,7 @@ const UserName = styled(Text)({ type UserAccountProps = {| user: User, logout: () => void, + setActiveSheet: (activeSheet: ActiveSheet) => void, |}; class UserAccount extends PureComponent { @@ -76,7 +81,18 @@ class UserAccount extends PureComponent { {this.props.user.name} - ) : null; + ) : ( + this.props.setActiveSheet(ACTIVE_SHEET_SIGN_IN)}> + +  Sign In... + + ); } } @@ -86,5 +102,6 @@ export default connect( }), { logout, + setActiveSheet, }, )(UserAccount); diff --git a/src/fb-stubs/config.js b/src/fb-stubs/config.js index 9ea0a985c..00da5267e 100644 --- a/src/fb-stubs/config.js +++ b/src/fb-stubs/config.js @@ -8,4 +8,5 @@ export default { updateServer: 'https://www.facebook.com/fbflipper/public/latest.json', bugReportButtonVisible: false, + showLogin: false, }; diff --git a/src/reducers/application.js b/src/reducers/application.js index 892930663..128ededc9 100644 --- a/src/reducers/application.js +++ b/src/reducers/application.js @@ -13,12 +13,14 @@ export const ACTIVE_SHEET_BUG_REPORTER: 'BUG_REPORTER' = 'BUG_REPORTER'; export const ACTIVE_SHEET_PLUGIN_DEBUGGER: 'PLUGIN_DEBUGGER' = 'PLUGIN_DEBUGGER'; export const ACTIVE_SHEET_SHARE_DATA: 'SHARE_DATA' = 'SHARE_DATA'; +export const ACTIVE_SHEET_SIGN_IN: 'SIGN_IN' = 'SIGN_IN'; export type ActiveSheet = | typeof ACTIVE_SHEET_PLUGIN_SHEET | typeof ACTIVE_SHEET_BUG_REPORTER | typeof ACTIVE_SHEET_PLUGIN_DEBUGGER | typeof ACTIVE_SHEET_SHARE_DATA + | typeof ACTIVE_SHEET_SIGN_IN | null; export type State = {