Make all components with server interaction AuthComponents

monkey_island/cc/ui/src/components/map/preview-pane/PreviewPane.js

@@ -2,8 +2,9 @@ import React from 'react';
 import {Icon} from 'react-fa';
 import Toggle from 'react-toggle';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
+import AuthComponent from '../../AuthComponent';
 
-class PreviewPaneComponent extends React.Component {
+class PreviewPaneComponent extends AuthComponent {
 
   generateToolTip(text) {
     return (
@@ -64,7 +65,7 @@ class PreviewPaneComponent extends React.Component {
   forceKill(event, asset) {
     let newConfig = asset.config;
     newConfig['alive'] = !event.target.checked;
-    fetch('/api/monkey/' + asset.guid,
+    this.authFetch('/api/monkey/' + asset.guid,
       {
         method: 'PATCH',
         headers: {'Content-Type': 'application/json'},

monkey_island/cc/ui/src/components/pages/ConfigurePage.js

@@ -2,8 +2,9 @@ import React from 'react';
 import Form from 'react-jsonschema-form';
 import {Col, Nav, NavItem} from 'react-bootstrap';
 import fileDownload from 'js-file-download';
+import AuthComponent from '../AuthComponent';
 
-class ConfigurePageComponent extends React.Component {
+class ConfigurePageComponent extends AuthComponent {
   constructor(props) {
     super(props);
 
@@ -23,7 +24,7 @@ class ConfigurePageComponent extends React.Component {
   }
 
   componentDidMount() {
-    fetch('/api/configuration')
+    this.authFetch('/api/configuration')
       .then(res => res.json())
       .then(res => {
         let sections = [];
@@ -43,7 +44,7 @@ class ConfigurePageComponent extends React.Component {
   onSubmit = ({formData}) => {
     this.currentFormData = formData;
     this.updateConfigSection();
-    fetch('/api/configuration',
+    this.authFetch('/api/configuration',
       {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
@@ -82,7 +83,7 @@ class ConfigurePageComponent extends React.Component {
   };
 
   resetConfig = () => {
-    fetch('/api/configuration',
+    this.authFetch('/api/configuration',
       {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
@@ -126,7 +127,7 @@ class ConfigurePageComponent extends React.Component {
   };
 
   updateMonkeysRunning = () => {
-    fetch('/api')
+    this.authFetch('/api')
       .then(res => res.json())
       .then(res => {
         // This check is used to prevent unnecessary re-rendering

monkey_island/cc/ui/src/components/pages/MapPage.js

@@ -6,8 +6,9 @@ import PreviewPane from 'components/map/preview-pane/PreviewPane';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {ModalContainer, ModalDialog} from 'react-modal-dialog';
 import {options, edgeGroupToColor} from 'components/map/MapOptions';
+import AuthComponent from '../AuthComponent';
 
-class MapPageComponent extends React.Component {
+class MapPageComponent extends AuthComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -40,7 +41,7 @@ class MapPageComponent extends React.Component {
   };
 
   updateMapFromServer = () => {
-    fetch('/api/netmap')
+    this.authFetch('/api/netmap')
       .then(res => res.json())
       .then(res => {
         res.edges.forEach(edge => {
@@ -52,7 +53,7 @@ class MapPageComponent extends React.Component {
   };
 
   updateTelemetryFromServer = () => {
-    fetch('/api/telemetry-feed?timestamp='+this.state.telemetryLastTimestamp)
+    this.authFetch('/api/telemetry-feed?timestamp='+this.state.telemetryLastTimestamp)
       .then(res => res.json())
       .then(res => {
         let newTelem = this.state.telemetry.concat(res['telemetries']);
@@ -68,7 +69,7 @@ class MapPageComponent extends React.Component {
 
   selectionChanged(event) {
     if (event.nodes.length === 1) {
-      fetch('/api/netmap/node?id=' + event.nodes[0])
+      this.authFetch('/api/netmap/node?id=' + event.nodes[0])
         .then(res => res.json())
         .then(res => this.setState({selected: res, selectedType: 'node'}));
     }
@@ -80,7 +81,7 @@ class MapPageComponent extends React.Component {
       if (displayedEdge['group'] === 'island') {
         this.setState({selected: displayedEdge, selectedType: 'island_edge'});
       } else {
-        fetch('/api/netmap/edge?id=' + event.edges[0])
+        this.authFetch('/api/netmap/edge?id=' + event.edges[0])
           .then(res => res.json())
           .then(res => this.setState({selected: res.edge, selectedType: 'edge'}));
       }
@@ -91,7 +92,7 @@ class MapPageComponent extends React.Component {
   }
 
   killAllMonkeys = () => {
-    fetch('/api?action=killall')
+    this.authFetch('/api?action=killall')
       .then(res => res.json())
       .then(res => this.setState({killPressed: (res.status === 'OK')}));
   };

monkey_island/cc/ui/src/components/pages/ReportPage.js

@@ -7,11 +7,12 @@ import {edgeGroupToColor, options} from 'components/map/MapOptions';
 import StolenPasswords from 'components/report-components/StolenPasswords';
 import CollapsibleWellComponent from 'components/report-components/CollapsibleWell';
 import {Line} from 'rc-progress';
+import AuthComponent from '../AuthComponent';
 
 let guardicoreLogoImage = require('../../images/guardicore-logo.png');
 let monkeyLogoImage = require('../../images/monkey-icon.svg');
 
-class ReportPageComponent extends React.Component {
+class ReportPageComponent extends AuthComponent {
 
   Issue =
     {
@@ -76,7 +77,7 @@ class ReportPageComponent extends React.Component {
   }
 
   updateMonkeysRunning = () => {
-    return fetch('/api')
+    return this.authFetch('/api')
       .then(res => res.json())
       .then(res => {
         // This check is used to prevent unnecessary re-rendering
@@ -89,7 +90,7 @@ class ReportPageComponent extends React.Component {
   };
 
   updateMapFromServer = () => {
-    fetch('/api/netmap')
+    this.authFetch('/api/netmap')
       .then(res => res.json())
       .then(res => {
         res.edges.forEach(edge => {
@@ -102,7 +103,7 @@ class ReportPageComponent extends React.Component {
 
   getReportFromServer(res) {
     if (res['completed_steps']['run_monkey']) {
-      fetch('/api/report')
+      this.authFetch('/api/report')
         .then(res => res.json())
         .then(res => {
           this.setState({

monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js

@@ -3,8 +3,9 @@ import {Button, Col, Well, Nav, NavItem, Collapse} from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import {Icon} from 'react-fa';
 import {Link} from 'react-router-dom';
+import AuthComponent from '../AuthComponent';
 
-class RunMonkeyPageComponent extends React.Component {
+class RunMonkeyPageComponent extends AuthComponent {
 
   constructor(props) {
     super(props);
@@ -19,14 +20,14 @@ class RunMonkeyPageComponent extends React.Component {
   }
 
   componentDidMount() {
-    fetch('/api')
+    this.authFetch('/api')
       .then(res => res.json())
       .then(res => this.setState({
         ips: res['ip_addresses'],
         selectedIp: res['ip_addresses'][0]
       }));
 
-    fetch('/api/local-monkey')
+    this.authFetch('/api/local-monkey')
       .then(res => res.json())
       .then(res =>{
         if (res['is_running']) {
@@ -36,7 +37,7 @@ class RunMonkeyPageComponent extends React.Component {
         }
       });
 
-    fetch('/api/client-monkey')
+    this.authFetch('/api/client-monkey')
       .then(res => res.json())
       .then(res => {
         if (res['is_running']) {
@@ -60,7 +61,7 @@ class RunMonkeyPageComponent extends React.Component {
   }
 
   runLocalMonkey = () => {
-    fetch('/api/local-monkey',
+    this.authFetch('/api/local-monkey',
       {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},

monkey_island/cc/ui/src/components/pages/RunServerPage.js

@@ -2,12 +2,17 @@ import React from 'react';
 import {Col} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 
+import AuthService from '../../services/AuthService'
+
 class RunServerPageComponent extends React.Component {
   constructor(props) {
     super(props);
   }
 
   render() {
+    // TODO: something real
+    let auth = new AuthService();
+    auth.login('monkey', 'infectio1n');
     return (
       <Col xs={12} lg={8}>
         <h1 className="page-title">1. Monkey Island C&C Server</h1>

monkey_island/cc/ui/src/components/pages/StartOverPage.js

@@ -2,8 +2,9 @@ import React from 'react';
 import {Col} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import {ModalContainer, ModalDialog} from 'react-modal-dialog';
+import AuthComponent from '../AuthComponent';
 
-class StartOverPageComponent extends React.Component {
+class StartOverPageComponent extends AuthComponent {
   constructor(props) {
     super(props);
 
@@ -15,7 +16,7 @@ class StartOverPageComponent extends React.Component {
   }
 
   updateMonkeysRunning = () => {
-    fetch('/api')
+    this.authFetch('/api')
       .then(res => res.json())
       .then(res => {
         // This check is used to prevent unnecessary re-rendering
@@ -104,7 +105,7 @@ class StartOverPageComponent extends React.Component {
     this.setState({
       cleaned: false
     });
-    fetch('/api?action=reset')
+    this.authFetch('/api?action=reset')
       .then(res => res.json())
       .then(res => {
         if (res['status'] === 'OK') {

monkey_island/cc/ui/src/components/pages/TelemetryPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {Col} from 'react-bootstrap';
 import JSONTree from 'react-json-tree'
 import {DataTable} from 'react-data-components';
+import AuthComponent from '../AuthComponent';
 
 const renderJson = (val) => <JSONTree data={val} level={1} theme="eighties" invertTheme={true} />;
 const renderTime = (val) => val.split('.')[0];
@@ -13,7 +14,7 @@ const columns = [
   { title: 'Details', prop: 'data', render: renderJson, width: '40%' }
 ];
 
-class TelemetryPageComponent extends React.Component {
+class TelemetryPageComponent extends AuthComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -22,7 +23,7 @@ class TelemetryPageComponent extends React.Component {
   }
 
   componentDidMount = () => {
-    fetch('/api/telemetry')
+    this.authFetch('/api/telemetry')
       .then(res => res.json())
       .then(res => this.setState({data: res.objects}));
   };