Sign-in form improvements

Summary:
Sign in form improvements:
1) Added context menu with "Paste" and "Reset" items
2) Added "Reset" button
3) When form is empty, simple click to it automatically pastes token from clipboard
4) Automatically sign-in after token is pasted into empty form

Reviewed By: mweststrate

Differential Revision: D21994724

fbshipit-source-id: 8605c7f9b96777036b1b20b69370fba499185911

desktop/app/src/chrome/SignInSheet.tsx

@@ -23,6 +23,8 @@ import {writeKeychain, getUser} from '../fb-stubs/user';
 import {login} from '../reducers/user';
 import {connect} from 'react-redux';
 import {State as Store} from '../reducers';
+import ContextMenu from '../ui/components/ContextMenu';
+import {clipboard} from 'electron';
 
 const Container = styled(FlexColumn)({
   padding: 20,
@@ -67,24 +69,60 @@ class SignInSheet extends Component<Props, State> {
     error: null,
   };
 
-  saveToken = async () => {
+  saveToken = async (token: string) => {
-    this.setState({loading: true});
+    this.setState({token, loading: true});
-    const {token} = this.state;
+    try {
-    if (token) {
       await writeKeychain(token);
-      try {
+      const user = await getUser();
-        const user = await getUser();
+      if (user) {
-        if (user) {
+        this.props.login(user);
-          this.props.login(user);
+      } else {
-        }
+        throw new Error('Failed to login using the provided token');
-        this.props.onHide();
+      }
-      } catch (error) {
+      this.setState({loading: false});
-        console.error(error);
+      this.props.onHide();
-        this.setState({token: '', loading: false, error: `${error}`});
+    } catch (error) {
+      console.error(error);
+      this.setState({
+        loading: false,
+        error: `${error}`,
+      });
+    }
+  };
+
+  onPaste = () => {
+    if (!this.state.token || this.state.token === '') {
+      const token = clipboard.readText();
+      // If pasted content looks like a token, we could try to login using it straight away!
+      if (token && token.length >= 100 && token.indexOf(' ') < 0) {
+        this.saveToken(token);
       }
     }
   };
 
+  signIn = () => {
+    this.saveToken(this.state.token);
+  };
+
+  getContextMenu = () => {
+    const menu: Array<Electron.MenuItemConstructorOptions> = [
+      {
+        label: 'Paste',
+        role: 'paste',
+        click: this.onPaste,
+      },
+      {
+        label: 'Reset',
+        click: this.reset,
+      },
+    ];
+    return menu;
+  };
+
+  reset = () => {
+    this.setState({token: '', error: ''});
+  };
+
   render() {
     return (
       <Container>
@@ -94,15 +132,19 @@ class SignInSheet extends Component<Props, State> {
           <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
+          , copy the Nuclide access token you find on that page to clipboard,
-          into the text input below.
+          and click the text input below to paste it.
         </InfoText>
-        <TokenInput
+        <ContextMenu items={this.getContextMenu()}>
-          disabled={this.state.loading}
+          <TokenInput
-          placeholder="Nuclide Access Token"
+            disabled={this.state.loading}
-          value={this.state.token}
+            placeholder="Click to paste Nuclide Access Token from clipboard"
-          onChange={(e) => this.setState({token: e.target.value})}
+            onClick={this.onPaste}
-        />
+            value={this.state.token}
+            onPaste={this.onPaste}
+            onChange={(e) => this.setState({token: e.target.value})}
+          />
+        </ContextMenu>
         <br />
         {this.state.error && (
           <InfoText color={colors.red}>
@@ -115,7 +157,10 @@ class SignInSheet extends Component<Props, State> {
           <Button compact padded onClick={this.props.onHide}>
             Cancel
           </Button>
-          <Button type="primary" compact padded onClick={this.saveToken}>
+          <Button compact padded onClick={this.reset}>
+            Reset
+          </Button>
+          <Button type="primary" compact padded onClick={this.signIn}>
             Sign In
           </Button>
         </FlexRow>