Adding basic and token bearer authentication for REST deploy

app/lib/deploy.js

@@ -38,14 +38,34 @@ module.exports = function(options, cb) {
     );
   }
 
+  var authHeaders = {};
+  var authType = config.get('workspace').authType || 'none';
+  var authUser = config.get('workspace').authUser;
+  var authPassword = config.get('workspace').authPassword;
+  var authToken = config.get('workspace').authToken;
+
+  if (authType === 'token') {
+    authHeaders = {
+      Authorization: 'Bearer ' + authToken
+    };
+  }
+
+  if (authType === 'basic') {
+    var base64encodedData = new Buffer(authUser + ':' + authPassword).toString('base64');
+    authHeaders = {
+      Authorization: 'Basic ' + base64encodedData
+    };
+  }
+
   const form = new FormData();
 
   form.append('deployment-name', deploymentName);
   form.append('tenant-id', tenantId);
   form.append(file.name, fs.createReadStream(file.path));
 
   got.post(url, {
-    body: form
+    body: form,
+    headers: authHeaders
   }).then(function(response) {
     done(null, response.body);
   }).catch(function(error) {

client/lib/app/app.js

@@ -296,6 +296,22 @@ function App(options) {
     this.persistEndpoints(endpoints);
   });
 
+  this.events.on('deploy:authType:update', authType => {
+    this.persistAuthType(authType);
+  });
+
+  this.events.on('deploy:authUser:update', authUser => {
+    this.persistAuthUser(authUser);
+  });
+
+  this.events.on('deploy:authPassword:update', authPassword => {
+    this.persistAuthPassword(authPassword);
+  });
+
+  this.events.on('deploy:authToken:update', authToken => {
+    this.persistAuthToken(authToken);
+  });
+
   this.events.on('deploy:bpmn', (payload, done) => {
     this.triggerAction('deploy-bpmn', payload, done);
   });
@@ -445,7 +461,11 @@ App.prototype.render = function() {
         isActive={ this._activeOverlay }
         content={ this._overlayContent }
         events={ this.events }
-        endpoints={ this.endpoints }/>
+        endpoints={ this.endpoints }
+        authType={ this.authType }
+        authUser={ this.authUser }
+        authPassword={ this.authPassword }
+        authToken={ this.authToken }/>
       <MenuBar entries={ this.menuEntries } />
       <Tabbed
         className="main"
@@ -1326,6 +1346,10 @@ App.prototype.persistWorkspace = function(done) {
 
   //store bpmn deploy url
   config.endpoints = this.endpoints;
+  config.authType = this.authType;
+  config.authUser = this.authUser;
+  config.authPassword = this.authPassword;
+  config.authToken = this.authToken;
 
   // actually save
   this.workspace.save(config, (err, config) => {
@@ -1357,7 +1381,11 @@ App.prototype.restoreWorkspace = function(done) {
     },
     endpoints: [
       'http://localhost:8080/engine-rest/deployment/create'
-    ]
+    ],
+    authType: 'none',
+    authUser: '',
+    authPassword: '',
+    authToken: ''
   };
 
 
@@ -1379,6 +1407,10 @@ App.prototype.restoreWorkspace = function(done) {
     }
 
     this.endpoints = workspaceConfig.endpoints || defaultWorkspace.endpoints;
+    this.authType = workspaceConfig.authType || defaultWorkspace.authType;
+    this.authUser = workspaceConfig.authUser || defaultWorkspace.authUser;
+    this.authPassword = workspaceConfig.authPassword || defaultWorkspace.authPassword;
+    this.authToken = workspaceConfig.authToken || defaultWorkspace.authToken;
 
     this.events.emit('layout:update', workspaceConfig.layout);
 
@@ -1578,6 +1610,26 @@ App.prototype.persistEndpoints = function(_endpoints) {
   this.events.emit('workspace:changed');
 };
 
+App.prototype.persistAuthType = function(_authType) {
+  this.authType = _authType;
+  this.events.emit('workspace:changed');
+};
+
+App.prototype.persistAuthUser = function(_authUser) {
+  this.authUser = _authUser;
+  this.events.emit('workspace:changed');
+};
+
+App.prototype.persistAuthPassword = function(_authPassword) {
+  this.authPassword = _authPassword;
+  this.events.emit('workspace:changed');
+};
+
+App.prototype.persistAuthToken = function(_authToken) {
+  this.authToken = _authToken;
+  this.events.emit('workspace:changed');
+};
+
 var rdebug = require('debug')('app - external change');
 
 /**

client/lib/base/components/modal-overlay.js

@@ -11,7 +11,7 @@ var isMac = require('util/is-mac'),
 
 
 function ModalOverlay(options) {
-  ensureOpts([ 'events', 'isActive', 'content', 'endpoints' ], options);
+  ensureOpts([ 'events', 'isActive', 'content', 'endpoints', 'authType', 'authUser', 'authPassword', 'authToken' ], options);
 
   BaseComponent.call(this, options);
 
@@ -35,14 +35,58 @@ function ModalOverlay(options) {
 
   // endpoint configuration modal
   var endpoint = (options.endpoints || [])[0];
+  var authType = (options.authType || 'none');
+  var authUser = options.authUser;
+  var authPassword = options.authPassword;
+  var authToken = options.authToken;
+
+  this.updateAuthUser = function(e) {
+    authUser = e.target.value;
+  };
+
+  this.updateAuthPassword = function(e) {
+    authPassword = e.target.value;
+  };
+
+  this.updateAuthToken = function(e) {
+    authToken = e.target.value;
+  };
 
   this.updateEndpoint = function(e) {
     endpoint = e.target.value;
   };
 
+  this.updateAuthType = function(e) {
+    authType = e.target.value;
+    document.getElementById('token-auth').classList.add('hidden');
+    document.getElementById('basic-user-auth').classList.add('hidden');
+    document.getElementById('basic-pass-auth').classList.add('hidden');
+    switch (authType) {
+    case 'basic':
+      document.getElementById('basic-user-auth').classList.remove('hidden');
+      document.getElementById('basic-pass-auth').classList.remove('hidden');
+      break;
+    case 'token':
+      document.getElementById('token-auth').classList.remove('hidden');
+      break;
+    }
+  };
+
+  this.getSelected = function(value) {
+    return authType === value ? 'selected' : '';
+  };
+
+  this.getRowClass = function(value) {
+    return authType === value ? 'form-row form-flex-row' : 'form-row form-flex-row hidden';
+  };
+
   this.submitEndpointConfigForm = function(e) {
     e.preventDefault();
     events.emit('deploy:endpoint:update', [ endpoint ]);
+    events.emit('deploy:authType:update', authType);
+    events.emit('deploy:authUser:update', authUser);
+    events.emit('deploy:authPassword:update', authPassword);
+    events.emit('deploy:authToken:update', authToken);
     this.closeOverlay();
   };
 
@@ -60,6 +104,54 @@ function ModalOverlay(options) {
             type='text'
             value={endpoint}
             onChange={this.compose(this.updateEndpoint)}/>
+        </div>
+        <div className="form-row form-flex-row">
+          <label
+            htmlFor="auth-type">
+            Auth Type
+          </label>
+          <select
+            id='auth-type'
+            onChange={this.compose(this.updateAuthType)}>
+            <option value="none" selected={this.getSelected('none')}>No auth</option>
+            <option value="basic" selected={this.getSelected('basic')}>Basic</option>
+            <option value="token" selected={this.getSelected('token')}>Bearer token</option>
+          </select>
+        </div>
+        <div className={this.getRowClass('basic')} id="basic-user-auth">
+          <label
+            htmlFor="auth-user-value">
+            Username
+          </label>
+          <input
+            id='auth-user-value'
+            type='text'
+            value={authUser}
+            onChange={this.compose(this.updateAuthUser)}/>
+        </div>
+        <div className={this.getRowClass('basic')} id="basic-pass-auth">
+          <label
+            htmlFor="auth-password-value">
+            Password
+          </label>
+          <input
+            id='auth-password-value'
+            type='password'
+            value={authPassword}
+            onChange={this.compose(this.updateAuthPassword)}/>
+        </div>
+        <div className={this.getRowClass('token')} id="token-auth">
+          <label
+            htmlFor="token-value">
+            JWT Token
+          </label>
+          <input
+            id='token-value'
+            type='text'
+            value={authToken}
+            onChange={this.compose(this.updateAuthToken)}/>
+        </div>
+        <div className="form-row form-btn-row">
           <button type="submit"> Save </button>
           <button
             type="button"

client/lib/base/components/modal-overlay.less

@@ -65,6 +65,20 @@
         max-width: 400px;
       }
 
+      input[type="password"] {
+        padding: 4px;
+        flex: 1 1 auto;
+        font-size: 12px;
+        max-width: 400px;
+      }
+
+      select {
+        padding: 4px;
+        flex: 1 1 auto;
+        font-size: 12px;
+        max-width: 400px;
+      }
+
       button[type="submit"] {
         margin-left: 10px;
       }
@@ -74,6 +88,11 @@
       }
 
     }
+
+    .hidden {
+      display: none;
+      visibility: hidden;
+    }
   }
 
   &.content .overlay-container .binding {

client/test/spec/app/app-spec.js

@@ -1965,7 +1965,11 @@ describe('App', function() {
               'tabs',
               'activeTab',
               'layout',
-              'endpoints'
+              'endpoints',
+              'authType',
+              'authUser',
+              'authPassword',
+              'authToken'
             ]);
 
             expect(workspaceConfig.tabs).to.have.length(0);
@@ -1994,7 +1998,11 @@ describe('App', function() {
               'tabs',
               'activeTab',
               'layout',
-              'endpoints'
+              'endpoints',
+              'authType',
+              'authUser',
+              'authPassword',
+              'authToken'
             ]);
 
             expect(workspaceConfig.tabs).to.eql([ bpmnFile, dmnFile ]);
@@ -2021,7 +2029,11 @@ describe('App', function() {
               'tabs',
               'activeTab',
               'layout',
-              'endpoints'
+              'endpoints',
+              'authType',
+              'authUser',
+              'authPassword',
+              'authToken'
             ]);
 
             expect(workspaceConfig.endpoints).to.eql(endpoints);