sign in

Reviewed By: passy

Differential Revision: D14598657

fbshipit-source-id: 3ee6ee5ec7323616ac200243747e0b44b1ce65d4

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);