connect new host enrollment (#1072)

frontend/components/forms/packs/EditPackForm/EditPackForm.tests.jsx

@@ -7,7 +7,7 @@ import EditPackForm from 'components/forms/packs/EditPackForm';
 import { fillInFormInput } from 'test/helpers';
 import { packStub } from 'test/stubs';
 
-describe.only('EditPackForm - component', () => {
+describe('EditPackForm - component', () => {
   afterEach(restoreSpies);
 
   describe('form fields', () => {

frontend/components/hosts/AddHostModal/AddHostModal.jsx

@@ -12,16 +12,15 @@ const baseClass = 'add-host-modal';
 class AddHostModal extends Component {
   static propTypes = {
     dispatch: PropTypes.func,
+    onFetchCertificate: PropTypes.func,
     onReturnToApp: PropTypes.func,
+    osqueryEnrollSecret: PropTypes.string,
   };
 
   constructor (props) {
     super(props);
 
-    this.state = {
-      revealSecret: false,
-      secretText: '1234567890',
-    };
+    this.state = { revealSecret: false };
   }
 
   onCopySecret = (elementClass) => {
@@ -39,14 +38,6 @@ class AddHostModal extends Component {
     };
   }
 
-  onDownloadCertificate = (evt) => {
-    evt.preventDefault();
-
-    console.log('Download the Certificate');
-
-    return false;
-  }
-
   toggleSecret = (evt) => {
     const { revealSecret } = this.state;
     evt.preventDefault();
@@ -56,9 +47,9 @@ class AddHostModal extends Component {
   }
 
   render () {
-    const { onCopySecret, onDownloadCertificate, toggleSecret } = this;
+    const { onCopySecret, toggleSecret } = this;
     const { revealSecret } = this.state;
-    const { onReturnToApp } = this.props;
+    const { onFetchCertificate, onReturnToApp, osqueryEnrollSecret } = this.props;
 
     return (
       <div className={baseClass}>
@@ -80,10 +71,10 @@ class AddHostModal extends Component {
               <h4>Download Osquery Package and Certificate</h4>
               <p>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`}>
-                <a href="#downloadCertificate" onClick={onDownloadCertificate}>
+                <Button variant="unstyled" onClick={onFetchCertificate}>
                   <img src={certificate} role="presentation" />
                   <span>Fetch Kolide Certificate</span>
-                </a>
+                </Button>
               </p>
             </li>
             <li>
@@ -98,7 +89,7 @@ class AddHostModal extends Component {
                   inputWrapperClass={`${baseClass}__secret-input`}
                   name="osqueryd-secret"
                   type={revealSecret ? 'text' : 'password'}
-                  value={this.state.secretText}
+                  value={osqueryEnrollSecret}
                 />
                 <Button variant="unstyled" className={`${baseClass}__secret-copy-icon`} onClick={onCopySecret(`.${baseClass}__secret-input`)}>
                   <Icon name="clipboard" />

frontend/kolide/index.js

@@ -20,6 +20,15 @@ class Kolide extends Base {
     return this.authenticatedPost(this.endpoint(endpoint));
   }
 
+  config = {
+    getCertificate: () => {
+      const endpoint = this.endpoint('/v1/kolide/config/certificate');
+
+      return this.authenticatedGet(endpoint)
+        .then(response => global.window.atob(response.certificate_chain));
+    },
+  }
+
   configOptions = {
     loadAll: () => {
       const { CONFIG_OPTIONS } = endpoints;

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import AceEditor from 'react-ace';
 import { connect } from 'react-redux';
+import FileSaver from 'file-saver';
 import { orderBy, sortBy } from 'lodash';
 import { push } from 'react-router-redux';
 
@@ -17,6 +18,7 @@ import HostsTable from 'components/hosts/HostsTable';
 import LonelyHost from 'components/hosts/LonelyHost';
 import AddHostModal from 'components/hosts/AddHostModal';
 import Icon from 'components/icons/Icon';
+import Kolide from 'kolide';
 import PlatformIcon from 'components/icons/PlatformIcon';
 import osqueryTableInterface from 'interfaces/osquery_table';
 import paths from 'router/paths';
@@ -44,6 +46,7 @@ export class ManageHostsPage extends Component {
       base: PropTypes.string,
     }),
     labels: PropTypes.arrayOf(labelInterface),
+    osqueryEnrollSecret: PropTypes.string,
     selectedLabel: labelInterface,
     selectedOsqueryTable: osqueryTableInterface,
     statusLabels: statusLabelsInterface,
@@ -119,6 +122,18 @@ export class ManageHostsPage extends Component {
     return false;
   }
 
+  onFetchCertificate = () => {
+    return Kolide.config.getCertificate()
+      .then((certificate) => {
+        const filename = `${global.window.location.host}.pem`;
+        const file = new global.window.File([certificate], filename, { type: 'application/x-pem-file' });
+
+        FileSaver.saveAs(file);
+
+        return false;
+      });
+  }
+
   onLabelClick = (selectedLabel) => {
     return (evt) => {
       evt.preventDefault();
@@ -231,14 +246,15 @@ export class ManageHostsPage extends Component {
   }
 
   renderAddHostModal = () => {
-    const { toggleAddHostModal } = this;
+    const { onFetchCertificate, toggleAddHostModal } = this;
     const { showAddHostModal } = this.state;
-    const { dispatch } = this.props;
+    const { osqueryEnrollSecret } = this.props;
 
     if (!showAddHostModal) {
       return false;
     }
 
+
     return (
       <Modal
         title="Add New Host"
@@ -246,8 +262,9 @@ export class ManageHostsPage extends Component {
         className={`${baseClass}__invite-modal`}
       >
         <AddHostModal
+          onFetchCertificate={onFetchCertificate}
           onReturnToApp={toggleAddHostModal}
-          dispatch={dispatch}
+          osqueryEnrollSecret={osqueryEnrollSecret}
         />
       </Modal>
     );
@@ -569,6 +586,7 @@ const mapStateToProps = (state, { location, params }) => {
   );
   const { selectedOsqueryTable } = state.components.QueryPages;
   const labelErrors = state.entities.labels.errors;
+  const { osquery_enroll_secret: osqueryEnrollSecret } = state.app.config;
 
   return {
     display,
@@ -576,6 +594,7 @@ const mapStateToProps = (state, { location, params }) => {
     isAddLabel,
     labelErrors,
     labels,
+    osqueryEnrollSecret,
     selectedLabel,
     selectedOsqueryTable,
     statusLabels,

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx

@@ -15,6 +15,7 @@ const offlineHost = { ...hostStub, id: 111, status: 'offline' };
 const offlineHostsLabel = { id: 5, display_text: 'OFFLINE', slug: 'offline', status: 'offline', type: 'status', count: 1 };
 const customLabel = { id: 6, display_text: 'Custom Label', slug: 'custom-label', type: 'custom', count: 3 };
 const mockStore = reduxMockStore({
+  app: { config: {} },
   components: {
     ManageHostsPage: {
       display: 'Grid',

package.json

@@ -35,6 +35,7 @@
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
+    "file-saver": "^1.3.3",
     "history": "2.0.0",
     "html-webpack-plugin": "^2.26.0",
     "import-glob-loader": "^1.1.0",

server/service/endpoint_appconfig.go

@@ -47,6 +47,7 @@ func makeGetAppConfigEndpoint(svc kolide.Service) endpoint.Endpoint {
 			},
 			ServerSettings: &kolide.ServerSettings{
 				KolideServerURL: &config.KolideServerURL,
+				EnrollSecret:    &config.EnrollSecret,
 			},
 			SMTPSettings: smtpSettings,
 		}
@@ -68,6 +69,7 @@ func makeModifyAppConfigEndpoint(svc kolide.Service) endpoint.Endpoint {
 			},
 			ServerSettings: &kolide.ServerSettings{
 				KolideServerURL: &config.KolideServerURL,
+				EnrollSecret:    &config.EnrollSecret,
 			},
 			SMTPSettings: smtpSettingsFromAppConfig(config),
 		}