sign in

Reviewed By: passy

Differential Revision: D14598657

fbshipit-source-id: 3ee6ee5ec7323616ac200243747e0b44b1ce65d4

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<Props> {
       return <PluginDebugger onHide={onHide} />;
     } else if (this.props.activeSheet === ACTIVE_SHEET_SHARE_DATA) {
       return <ShareSheet onHide={onHide} />;
+    } else if (this.props.activeSheet === ACTIVE_SHEET_SIGN_IN) {
+      return <SignInSheet onHide={onHide} />;
     } else {
       // contents are added via React.Portal
       return null;

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<MainSidebarProps> {
           />
           &nbsp;Plugin not showing?
         </PluginDebugger>
-        <UserAccount />
+        {config.showLogin && <UserAccount />}
       </Sidebar>
     );
   }

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<Props, State> {
+  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 (
+      <Container>
+        <Title>You are not currently logged in to Facebook.</Title>
+        <InfoText>
+          To log in you will need to{' '}
+          <Link href="https://our.internmc.facebook.com/intern/oauth/nuclide/">
+            open this page
+          </Link>
+          , copy the Nuclide access token you find on that page, and paste it
+          into the text input below.
+        </InfoText>
+        <TokenInput
+          disabled={this.state.loading}
+          placeholder="Nuclide Access Token"
+          value={this.state.token}
+          onChange={e => this.setState({token: e.target.value})}
+        />
+        {this.state.error && (
+          <InfoText color={colors.red}>
+            <strong>Error:</strong>&nbsp;{this.state.error}
+          </InfoText>
+        )}
+        <br />
+        <FlexRow>
+          <Spacer />
+          <Button compact padded onClick={this.props.onHide}>
+            Cancel
+          </Button>
+          <Button type="primary" compact padded onClick={this.saveToken}>
+            Sign In
+          </Button>
+        </FlexRow>
+      </Container>
+    );
+  }
+}
+
+export default connect<Props, OwnProps, _, _, _, _>(
+  () => ({}),
+  {login},
+)(SignInSheet);

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<UserAccountProps> {
@@ -76,7 +81,18 @@ class UserAccount extends PureComponent<UserAccountProps> {
         <UserName>{this.props.user.name}</UserName>
         <Glyph name="chevron-down" size={10} variant="outline" />
       </Container>
-    ) : null;
+    ) : (
+      <Container
+        onClick={() => this.props.setActiveSheet(ACTIVE_SHEET_SIGN_IN)}>
+        <Glyph
+          name="profile-circle"
+          size={16}
+          variant="outline"
+          color={colors.blackAlpha50}
+        />
+        &nbsp;Sign In...
+      </Container>
+    );
   }
 }
 
@@ -86,5 +102,6 @@ export default connect<UserAccountProps, {||}, _, _, _, _>(
   }),
   {
     logout,
+    setActiveSheet,
   },
 )(UserAccount);

src/fb-stubs/config.js

@@ -8,4 +8,5 @@
 export default {
   updateServer: 'https://www.facebook.com/fbflipper/public/latest.json',
   bugReportButtonVisible: false,
+  showLogin: false,
 };

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 = {