From 6bdddfacf0c68314ec242a22205ad1982802a583 Mon Sep 17 00:00:00 2001
From: Zachary Wasserman <zachwass2000@gmail.com>
Date: Tue, 17 Jul 2018 11:27:30 -0700
Subject: [PATCH] Expose API Token in UI (#1868)

Useful for SAML login users who cannot log in with `fleetctl login`. Instead
they can pull their session token from the UI and configure the fleetctl client
to use it.

Closes #1865
---
 docs/cli/setup-guide.md                       |  26 ++-
 .../hosts/AddHostModal/AddHostModal.jsx       |  68 +++++--
 .../UserSettingsPage/UserSettingsPage.jsx     | 171 +++++++++++++++---
 frontend/pages/UserSettingsPage/_styles.scss  |  45 +++++
 .../helpers.js => utilities/copy_text.js}     |   5 +-
 5 files changed, 266 insertions(+), 49 deletions(-)
 rename frontend/{components/hosts/AddHostModal/helpers.js => utilities/copy_text.js} (79%)

diff --git a/docs/cli/setup-guide.md b/docs/cli/setup-guide.md
index 77936e19d6..27c36a1772 100644
--- a/docs/cli/setup-guide.md
+++ b/docs/cli/setup-guide.md
@@ -1,6 +1,8 @@
 # Setting Up Fleet via the CLI
 
-In this document, I'm going to walk through how to setup and configure Kolide Fleet using just the CLI (which in-turn uses the Go API client). This document will hopefully illustrate:
+This document walks through setting up and configuring Fleet via the CLI. If you already have a running fleet instance, skip ahead to [Logging In To An Existing Fleet Instance](#logging-in-to-an-existing-fleet-instance) to configure the `fleetctl` CLI.
+
+This guide illustrates:
 
 - A minimal CLI workflow for managing an osquery fleet
 - The set of API interactions that are required if you want to perform remote, automated management of a Fleet instance
@@ -147,9 +149,9 @@ fleetctl apply -f ./options.yaml
 
 Now run a live query again. You should notice results coming back more quickly.
 
-## Logging In To An Existing Fleet Instance
+# Logging In To An Existing Fleet Instance
 
-If you have an existing Fleet instance (version 2.0.0 or above), then simply run `fleet login` (after configuring your local CLI context):
+If you have an existing Fleet instance (version 2.0.0 or above), then simply run `fleetctl login` (after configuring your local CLI context):
 
 ```
 $ fleetctl config set --address https://fleet.corp.example.com
@@ -163,3 +165,21 @@ Password:
 ```
 
 Once your local context is configured, you can use the above `fleetctl` normally. See `fleetctl --help` for more information.
+
+## Logging In with SAML (SSO) Authentication
+
+Users that authenticate to Fleet via SSO should retrieve their API token from the UI and set it manually in their `fleetctl` configuration (instead of logging in via `fleetctl login`).
+
+1. Go to the "Account Settings" page in Fleet (https://fleet.corp.example.com/settings). Click the "Get API Token" button to bring up a modal with the API token.
+
+2. Set the API token in the `~/.fleet/config` file. The file should look like the following:
+
+```
+contexts:
+  default:
+    address: https://fleet.corp.example.com
+    email: example@example.com
+    token: your_token_here
+```
+
+Note the token can also be set with `fleetctl config set --token`, but this may leak the token into a user's shell history.
diff --git a/frontend/components/hosts/AddHostModal/AddHostModal.jsx b/frontend/components/hosts/AddHostModal/AddHostModal.jsx
index 6eb3360961..c4c534fd4c 100644
--- a/frontend/components/hosts/AddHostModal/AddHostModal.jsx
+++ b/frontend/components/hosts/AddHostModal/AddHostModal.jsx
@@ -4,7 +4,11 @@ import Button from 'components/buttons/Button';
 import Icon from 'components/icons/Icon';
 import InputField from 'components/forms/fields/InputField';
 import { renderFlash } from 'redux/nodes/notifications/actions';
-import { copyText } from './helpers';
+import {
+  copyText,
+  COPY_TEXT_SUCCESS,
+  COPY_TEXT_ERROR,
+} from 'utilities/copy_text';
 import certificate from '../../../../assets/images/osquery-certificate.svg';
 
 const baseClass = 'add-host-modal';
@@ -17,7 +21,7 @@ class AddHostModal extends Component {
     osqueryEnrollSecret: PropTypes.string,
   };
 
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     this.state = { revealSecret: false };
@@ -30,13 +34,13 @@ class AddHostModal extends Component {
       const { dispatch } = this.props;
 
       if (copyText(elementClass)) {
-        dispatch(renderFlash('success', 'Text copied to clipboard'));
+        dispatch(renderFlash('success', COPY_TEXT_SUCCESS));
       } else {
         this.setState({ revealSecret: true });
-        dispatch(renderFlash('error', 'Text not copied. Use CMD + C to copy text'));
+        dispatch(renderFlash('error', COPY_TEXT_ERROR));
       }
     };
-  }
+  };
 
   toggleSecret = (evt) => {
     const { revealSecret } = this.state;
@@ -44,34 +48,59 @@ class AddHostModal extends Component {
 
     this.setState({ revealSecret: !revealSecret });
     return false;
-  }
+  };
 
-  render () {
+  render() {
     const { onCopySecret, toggleSecret } = this;
     const { revealSecret } = this.state;
-    const { onFetchCertificate, onReturnToApp, osqueryEnrollSecret } = this.props;
+    const {
+      onFetchCertificate,
+      onReturnToApp,
+      osqueryEnrollSecret,
+    } = this.props;
 
     return (
       <div className={baseClass}>
-        <p>Follow the instructions below to add hosts to your Kolide Instance.</p>
+        <p>
+          Follow the instructions below to add hosts to your Kolide Instance.
+        </p>
 
         <div className={`${baseClass}__manual-install-header`}>
           <Icon name="wrench-hand" />
           <h2>Manual Install</h2>
-          <h3>Fully Customize Your <strong>Osquery</strong> Installation</h3>
+          <h3>
+            Fully Customize Your <strong>Osquery</strong> Installation
+          </h3>
         </div>
 
         <div className={`${baseClass}__manual-install-content`}>
           <ol className={`${baseClass}__install-steps`}>
             <li>
-              <h4><a href="https://github.com/kolide/fleet/blob/master/docs/infrastructure/adding-hosts-to-fleet.md" target="_blank" rel="noopener noreferrer">Kolide / Osquery - Install Docs <Icon name="external-link" /></a></h4>
-              <p>In order to install <strong>osquery</strong> on a client you will need the following information:</p>
+              <h4>
+                <a
+                  href="https://github.com/kolide/fleet/blob/master/docs/infrastructure/adding-hosts-to-fleet.md"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Kolide / Osquery - Install Docs <Icon name="external-link" />
+                </a>
+              </h4>
+              <p>
+                In order to install <strong>osquery</strong> on a client you
+                will need the following information:
+              </p>
             </li>
             <li>
               <h4>Retrieve Osquery Enroll Secret</h4>
               <p>
                 The following is your enroll secret:
-                <a href="#revealSecret" onClick={toggleSecret} className={`${baseClass}__reveal-secret`}>{revealSecret ? 'Hide' : 'Reveal'} Secret</a>
+                <a
+                  href="#revealSecret"
+                  onClick={toggleSecret}
+                  className={`${baseClass}__reveal-secret`}
+                >
+                  {revealSecret ? 'Hide' : 'Reveal'} Secret
+                </a>
               </p>
               <div className={`${baseClass}__secret-wrapper`}>
                 <InputField
@@ -81,15 +110,22 @@ class AddHostModal extends Component {
                   type={revealSecret ? 'text' : 'password'}
                   value={osqueryEnrollSecret}
                 />
-                <Button variant="unstyled" className={`${baseClass}__secret-copy-icon`} onClick={onCopySecret(`.${baseClass}__secret-input`)}>
+                <Button
+                  variant="unstyled"
+                  className={`${baseClass}__secret-copy-icon`}
+                  onClick={onCopySecret(`.${baseClass}__secret-input`)}
+                >
                   <Icon name="clipboard" />
                 </Button>
               </div>
-
             </li>
             <li>
               <h4>Download Server Certificate (Optional)</h4>
-              <p>If you use the native osquery TLS plugins, Osquery requires the same TLS certificate that Kolide is using in order to authenticate. You can fetch the certificate below:</p>
+              <p>
+                If you use the native osquery TLS plugins, Osquery requires the
+                same TLS certificate that Kolide is using in order to
+                authenticate. You can fetch the certificate below:
+              </p>
               <p className={`${baseClass}__download-cert`}>
                 <Button variant="unstyled" onClick={onFetchCertificate}>
                   <img src={certificate} role="presentation" />
diff --git a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
index e4fa09d192..f5adc8eee2 100644
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
+++ b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
@@ -2,6 +2,12 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { goBack } from 'react-router-redux';
 import moment from 'moment';
+import { authToken } from 'utilities/local';
+import {
+  copyText,
+  COPY_TEXT_SUCCESS,
+  COPY_TEXT_ERROR,
+} from 'utilities/copy_text';
 
 import Avatar from 'components/Avatar';
 import Button from 'components/buttons/Button';
@@ -9,6 +15,7 @@ import ChangeEmailForm from 'components/forms/ChangeEmailForm';
 import ChangePasswordForm from 'components/forms/ChangePasswordForm';
 import deepDifference from 'utilities/deep_difference';
 import Icon from 'components/icons/Icon';
+import InputField from 'components/forms/fields/InputField';
 import { logoutUser, updateUser } from 'redux/nodes/auth/actions';
 import Modal from 'components/modals/Modal';
 import { renderFlash } from 'redux/nodes/notifications/actions';
@@ -33,7 +40,7 @@ export class UserSettingsPage extends Component {
     }),
   };
 
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     this.state = {
@@ -52,7 +59,7 @@ export class UserSettingsPage extends Component {
     dispatch(goBack());
 
     return false;
-  }
+  };
 
   onLogout = (evt) => {
     evt.preventDefault();
@@ -62,7 +69,7 @@ export class UserSettingsPage extends Component {
     dispatch(logoutUser());
 
     return false;
-  }
+  };
 
   onShowModal = (evt) => {
     evt.preventDefault();
@@ -70,7 +77,15 @@ export class UserSettingsPage extends Component {
     this.setState({ showPasswordModal: true });
 
     return false;
-  }
+  };
+
+  onShowApiTokenModal = (evt) => {
+    evt.preventDefault();
+
+    this.setState({ showApiTokenModal: true });
+
+    return false;
+  };
 
   onToggleEmailModal = (updatedUser = {}) => {
     const { showEmailModal } = this.state;
@@ -81,7 +96,7 @@ export class UserSettingsPage extends Component {
     });
 
     return false;
-  }
+  };
 
   onTogglePasswordModal = (evt) => {
     evt.preventDefault();
@@ -91,7 +106,41 @@ export class UserSettingsPage extends Component {
     this.setState({ showPasswordModal: !showPasswordModal });
 
     return false;
-  }
+  };
+
+  onToggleApiTokenModal = (evt) => {
+    evt.preventDefault();
+
+    const { showApiTokenModal } = this.state;
+
+    this.setState({ showApiTokenModal: !showApiTokenModal });
+
+    return false;
+  };
+
+  onToggleSecret = (evt) => {
+    evt.preventDefault();
+
+    const { revealSecret } = this.state;
+
+    this.setState({ revealSecret: !revealSecret });
+    return false;
+  };
+
+  onCopySecret = (elementClass) => {
+    return (evt) => {
+      evt.preventDefault();
+
+      const { dispatch } = this.props;
+
+      if (copyText(elementClass)) {
+        dispatch(renderFlash('success', COPY_TEXT_SUCCESS));
+      } else {
+        this.setState({ revealSecret: true });
+        dispatch(renderFlash('error', COPY_TEXT_ERROR));
+      }
+    };
+  };
 
   handleSubmit = (formData) => {
     const { dispatch, user } = this.props;
@@ -112,19 +161,18 @@ export class UserSettingsPage extends Component {
         return true;
       })
       .catch(() => false);
-  }
+  };
 
   handleSubmitPasswordForm = (formData) => {
     const { dispatch, user } = this.props;
 
-    return dispatch(userActions.changePassword(user, formData))
-      .then(() => {
-        dispatch(renderFlash('success', 'Password changed successfully'));
-        this.setState({ showPasswordModal: false });
+    return dispatch(userActions.changePassword(user, formData)).then(() => {
+      dispatch(renderFlash('success', 'Password changed successfully'));
+      this.setState({ showPasswordModal: false });
 
-        return false;
-      });
-  }
+      return false;
+    });
+  };
 
   renderEmailModal = () => {
     const { errors } = this.props;
@@ -132,10 +180,9 @@ export class UserSettingsPage extends Component {
     const { handleSubmit, onToggleEmailModal } = this;
 
     const emailSubmit = (formData) => {
-      handleSubmit(formData)
-        .then((r) => {
-          return r ? onToggleEmailModal() : false;
-        });
+      handleSubmit(formData).then((r) => {
+        return r ? onToggleEmailModal() : false;
+      });
     };
 
     if (!showEmailModal) {
@@ -155,7 +202,7 @@ export class UserSettingsPage extends Component {
         />
       </Modal>
     );
-  }
+  };
 
   renderPasswordModal = () => {
     const { userErrors } = this.props;
@@ -167,10 +214,7 @@ export class UserSettingsPage extends Component {
     }
 
     return (
-      <Modal
-        title="Change Password"
-        onExit={onTogglePasswordModal}
-      >
+      <Modal title="Change Password" onExit={onTogglePasswordModal}>
         <ChangePasswordForm
           handleSubmit={handleSubmitPasswordForm}
           onCancel={onTogglePasswordModal}
@@ -178,16 +222,63 @@ export class UserSettingsPage extends Component {
         />
       </Modal>
     );
-  }
+  };
 
-  render () {
+  renderApiTokenModal = () => {
+    const { showApiTokenModal, revealSecret } = this.state;
+    const { onToggleApiTokenModal, onCopySecret, onToggleSecret } = this;
+
+    if (!showApiTokenModal) {
+      return false;
+    }
+
+    return (
+      <Modal title="Get API Token" onExit={onToggleApiTokenModal}>
+        <p className={`${baseClass}__secret-label`}>
+          The following is your API Token:
+          <a
+            href="#revealSecret"
+            onClick={onToggleSecret}
+            className={`${baseClass}__reveal-secret`}
+          >
+            {revealSecret ? 'Hide' : 'Reveal'} Token
+          </a>
+        </p>
+        <div className={`${baseClass}__secret-wrapper`}>
+          <InputField
+            disabled
+            inputWrapperClass={`${baseClass}__secret-input`}
+            name="osqueryd-secret"
+            type={revealSecret ? 'text' : 'password'}
+            value={authToken()}
+          />
+          <Button
+            variant="unstyled"
+            className={`${baseClass}__secret-copy-icon`}
+            onClick={onCopySecret(`.${baseClass}__secret-input`)}
+          >
+            <Icon name="clipboard" />
+          </Button>
+        </div>
+        <div className={`${baseClass}__button-wrap`}>
+          <Button onClick={onToggleApiTokenModal} variant="success">
+            Return To App
+          </Button>
+        </div>
+      </Modal>
+    );
+  };
+
+  render() {
     const {
       handleSubmit,
       onCancel,
       onLogout,
       onShowModal,
+      onShowApiTokenModal,
       renderEmailModal,
       renderPasswordModal,
+      renderApiTokenModal,
     } = this;
     const { errors, user } = this.props;
     const { pendingEmail } = this.state;
@@ -217,9 +308,19 @@ export class UserSettingsPage extends Component {
 
           <div className={`${baseClass}__change-avatar`}>
             <Avatar user={user} className={`${baseClass}__avatar`} />
-            <a href="http://en.gravatar.com/emails/">Change Photo at Gravatar</a>
+            <a href="http://en.gravatar.com/emails/">
+              Change Photo at Gravatar
+            </a>
           </div>
 
+          <Button
+            onClick={onShowApiTokenModal}
+            variant="brand"
+            className={`${baseClass}__button`}
+          >
+            GET API TOKEN
+          </Button>
+
           <div className={`${baseClass}__more-info-detail`}>
             <Icon name="username" />
             <strong>Role</strong> - {roleText}
@@ -228,16 +329,28 @@ export class UserSettingsPage extends Component {
             <Icon name="lock-big" />
             <strong>Password</strong>
           </div>
-          <Button onClick={onShowModal} variant="brand" disabled={ssoEnabled} className={`${baseClass}__button`}>
+          <Button
+            onClick={onShowModal}
+            variant="brand"
+            disabled={ssoEnabled}
+            className={`${baseClass}__button`}
+          >
             CHANGE PASSWORD
           </Button>
-          <p className={`${baseClass}__last-updated`}>Last changed: {lastUpdatedAt}</p>
-          <Button onClick={onLogout} variant="alert" className={`${baseClass}__button`}>
+          <p className={`${baseClass}__last-updated`}>
+            Last changed: {lastUpdatedAt}
+          </p>
+          <Button
+            onClick={onLogout}
+            variant="alert"
+            className={`${baseClass}__button`}
+          >
             LOGOUT
           </Button>
         </div>
         {renderEmailModal()}
         {renderPasswordModal()}
+        {renderApiTokenModal()}
       </div>
     );
   }
diff --git a/frontend/pages/UserSettingsPage/_styles.scss b/frontend/pages/UserSettingsPage/_styles.scss
index 136655c1bf..8d753132b4 100644
--- a/frontend/pages/UserSettingsPage/_styles.scss
+++ b/frontend/pages/UserSettingsPage/_styles.scss
@@ -69,4 +69,49 @@
     border-bottom: 1px solid $accent-medium;
     margin: 0 0 35px;
   }
+
+  &__reveal-secret {
+    float: right;
+    text-decoration: none;
+  }
+
+  &__secret-label {
+    font-size: 15px;
+    font-weight: $normal;
+    line-height: 1.6;
+    letter-spacing: normal;
+    color: rgba(32, 37, 50, 0.66);
+    margin: 0;
+  }
+
+  &__secret-wrapper {
+    position: relative;
+  }
+
+  &__secret-copy-icon {
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    font-size: 18px;
+    color: $link;
+
+    &:active {
+      top: 8px;
+    }
+  }
+
+  &__secret-input {
+    input {
+      border-radius: 2px;
+      background-color: $bg-medium;
+      border-color: $bg-medium;
+      color: $link;
+      padding-right: 36px;
+      font-family: 'SourceCodePro', $monospace;
+
+      &[type="password"] {
+        letter-spacing: 3px;
+      }
+    }
+  }
 }
diff --git a/frontend/components/hosts/AddHostModal/helpers.js b/frontend/utilities/copy_text.js
similarity index 79%
rename from frontend/components/hosts/AddHostModal/helpers.js
rename to frontend/utilities/copy_text.js
index 67fc1cbea9..10b1fa03eb 100644
--- a/frontend/components/hosts/AddHostModal/helpers.js
+++ b/frontend/utilities/copy_text.js
@@ -27,4 +27,7 @@ export const copyText = (elementSelector) => {
   return true;
 };
 
-export default { copyText };
+export const COPY_TEXT_SUCCESS = 'Text copied to clipboard';
+export const COPY_TEXT_ERROR = 'Text not copied. Please copy manually.';
+
+export default copyText;