From 3f699b239ccea59ff0c4b90084a41c65e04b4539 Mon Sep 17 00:00:00 2001
From: Maciej Barelkowski <maciej.barelkowski@camunda.com>
Date: Thu, 6 Dec 2018 16:00:52 +0100
Subject: [PATCH] feat(deploy-toolbar): add basic and bearer auth

Closes #741
---
 .../app/modals/deploy-diagram/AuthTypes.js    |   7 +
 .../deploy-diagram/DeployDiagramModal.js      |  67 +++++++-
 client/src/app/modals/deploy-diagram/View.js  | 153 +++++++++++++-----
 .../src/app/modals/deploy-diagram/View.less   |   6 +-
 .../__tests__/DeployDiagramModalSpec.js       | 115 ++++++++++++-
 5 files changed, 296 insertions(+), 52 deletions(-)
 create mode 100644 client/src/app/modals/deploy-diagram/AuthTypes.js

diff --git a/client/src/app/modals/deploy-diagram/AuthTypes.js b/client/src/app/modals/deploy-diagram/AuthTypes.js
new file mode 100644
index 0000000000..56d2be4d34
--- /dev/null
+++ b/client/src/app/modals/deploy-diagram/AuthTypes.js
@@ -0,0 +1,7 @@
+const AuthTypes = {
+  none: 'none',
+  basic: 'basic',
+  bearer: 'bearer'
+};
+
+export default AuthTypes;
diff --git a/client/src/app/modals/deploy-diagram/DeployDiagramModal.js b/client/src/app/modals/deploy-diagram/DeployDiagramModal.js
index db9c281ae0..d3f8750995 100644
--- a/client/src/app/modals/deploy-diagram/DeployDiagramModal.js
+++ b/client/src/app/modals/deploy-diagram/DeployDiagramModal.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import View from './View';
+import AuthTypes from './AuthTypes';
 
 import errorMessageFunctions from './error-messages';
 
@@ -15,6 +16,17 @@ const defaultState = {
   error: ''
 };
 
+const initialFormValues = {
+  endpointUrl: '',
+  tenantId: '',
+  deploymentName: '',
+  authType: 'none',
+  username: '',
+  password: '',
+  bearer: ''
+};
+
+
 class DeployDiagramModal extends React.Component {
   constructor(props) {
     super(props);
@@ -69,8 +81,34 @@ class DeployDiagramModal extends React.Component {
     }
   }
 
+  validateUsername = username => {
+    if (!username.length) {
+      return 'Username must not be void.';
+    }
+  }
+
+  validatePassword = password => {
+    if (!password.length) {
+      return 'Password must not be void.';
+    }
+  }
+
+  validateBearer = bearer => {
+    if (!bearer.length) {
+      return 'Token must not be void.';
+    }
+  }
+
   render() {
     const { endpoints } = this.props;
+    const validators = {
+      endpointUrl: this.validateEndpointUrl,
+      deploymentName: this.validateDeploymentName,
+      username: this.validateUsername,
+      password: this.validatePassword,
+      bearer: this.validateBearer
+    };
+
     return <View
       onClose={ this.props.onClose }
       onDeploy={ this.handleDeploy }
@@ -79,12 +117,10 @@ class DeployDiagramModal extends React.Component {
       error={ this.state.error }
 
       initialValues={ {
-        endpointUrl: endpoints[endpoints.length - 1] || '',
-        tenantId: '',
-        deploymentName: ''
+        ...initialFormValues,
+        endpointUrl: endpoints[endpoints.length - 1] || ''
       } }
-      validateEndpointUrl={ this.validateEndpointUrl }
-      validateDeploymentName={ this.validateDeploymentName }
+      validators={ validators }
     />;
   }
 
@@ -101,6 +137,12 @@ class DeployDiagramModal extends React.Component {
       tenantId: values.tenantId
     };
 
+    const auth = this.getAuth(values);
+
+    if (auth) {
+      payload.auth = auth;
+    }
+
     return payload;
   }
 
@@ -120,6 +162,21 @@ class DeployDiagramModal extends React.Component {
     return url;
   }
 
+  getAuth({ authType, username, password, bearer }) {
+    switch (authType) {
+    case AuthTypes.basic:
+      return {
+        username,
+        password
+      };
+    case AuthTypes.bearer: {
+      return {
+        bearer
+      };
+    }
+    }
+  }
+
   getErrorMessage(error) {
     for (const getMessage of errorMessageFunctions) {
       const errorMessage = getMessage(error);
diff --git a/client/src/app/modals/deploy-diagram/View.js b/client/src/app/modals/deploy-diagram/View.js
index 49f3d0a0e4..c650e7387f 100644
--- a/client/src/app/modals/deploy-diagram/View.js
+++ b/client/src/app/modals/deploy-diagram/View.js
@@ -13,6 +13,8 @@ import {
   ModalWrapper
 } from '../../primitives';
 
+import AuthTypes from './AuthTypes';
+
 import css from './View.less';
 
 
@@ -27,8 +29,7 @@ const View = (props) => {
     initialValues,
     onClose,
     onDeploy,
-    validateEndpointUrl,
-    validateDeploymentName
+    validators
   } = props;
 
   return (
@@ -44,7 +45,7 @@ const View = (props) => {
         initialValues={ initialValues }
         onSubmit={ onDeploy }
       >
-        {({ errors, isSubmitting, submitCount, touched }) => (
+        {({ isSubmitting, values }) => (
           <React.Fragment>
 
             { isSubmitting && <Icon name={ 'loading' } className="loading" /> }
@@ -54,55 +55,45 @@ const View = (props) => {
             { error && <DeployError message={ error } /> }
 
             <Form className={ css.Form }>
-              <div>
-                <label htmlFor="endpointUrl">Endpoint URL</label>
-              </div>
 
-              <div>
-                <Field
-                  name="endpointUrl"
-                  validate={ validateEndpointUrl }
-                  className={ classnames({
-                    valid: !errors.endpointUrl && touched.endpointUrl,
-                    invalid: errors.endpointUrl && touched.endpointUrl
-                  }) }
-                />
-
-                { errors.endpointUrl && touched.endpointUrl ? (
-                  <div className="hint error">{errors.endpointUrl}</div>
-                ) : null}
-
-                <div className="hint">
-                  Should point to a running Camunda Engine REST API endpoint.
-                </div>
-              </div>
+              <Field
+                name="endpointUrl"
+                validate={ validators.endpointUrl }
+                component={ FormControl }
+                label="Endpoint URL"
+                hint="Should point to a running Camunda Engine REST API endpoint."
+                validated
+              />
+
+              <Field
+                name="deploymentName"
+                validate={ validators.deploymentName }
+                component={ FormControl }
+                label="Deployment name"
+                validated
+              />
+
+              <Field
+                name="tenantId"
+                component={ FormControl }
+                label="Tenant id (optional)"
+              />
 
               <div>
-                <label htmlFor="deploymentName">Deployment name</label>
+                <label htmlFor="authType">Auth type</label>
               </div>
 
               <div>
-                <Field
-                  name="deploymentName"
-                  validate={ validateDeploymentName }
-                  className={ classnames({
-                    valid: !errors.deploymentName && touched.deploymentName,
-                    invalid: errors.deploymentName && touched.deploymentName
-                  }) }
-                />
-
-                { errors.deploymentName && touched.deploymentName ? (
-                  <div className="hint error">{errors.deploymentName}</div>
-                ) : null}
+                <Field name="authType" component="select">
+                  <option value={ AuthTypes.none } defaultValue>None</option>
+                  <option value={ AuthTypes.basic }>HTTP Basic</option>
+                  <option value={ AuthTypes.bearer }>Bearer token</option>
+                </Field>
               </div>
 
-              <div>
-                <label htmlFor="tenantId">Tenant id (optional)</label>
-              </div>
+              { values.authType === AuthTypes.basic && <AuthBasic validators={ validators } /> }
 
-              <div>
-                <Field name="tenantId" />
-              </div>
+              { values.authType === AuthTypes.bearer && <AuthBearer validators={ validators } /> }
 
               <div className="form-submit">
                 <button
@@ -127,6 +118,44 @@ const View = (props) => {
   );
 };
 
+function FormControl({
+  field,
+  hint,
+  label,
+  validated,
+  form: { touched, errors, submitCount, isSubmitting },
+  ...props
+}) {
+  const { name } = field;
+
+  return (
+    <React.Fragment>
+      <div>
+        <label htmlFor={ name }>{ label }</label>
+      </div>
+
+      <div>
+        <input
+          { ...field } { ...props }
+          disabled={ isSubmitting }
+          className={ validated && classnames({
+            valid: !errors[name] && touched[name],
+            invalid: errors[name] && touched[name]
+          }) }
+        />
+
+        { errors[name] && touched[name] ? (
+          <div className="hint error">{errors[name]}</div>
+        ) : null}
+
+        { hint ? (
+          <div className="hint">{ hint }</div>
+        ) : null }
+      </div>
+    </React.Fragment>
+  );
+}
+
 function DeployError({ message }) {
   return (
     <div className="deploy-message error">
@@ -153,4 +182,42 @@ function DeploySuccess({ message }) {
   );
 }
 
+function AuthBasic({ validators, ...props }) {
+  return (
+    <React.Fragment>
+      <Field
+        name="username"
+        validate={ validators.username }
+        component={ FormControl }
+        label="Username"
+        validated
+        { ...props }
+      />
+
+      <Field
+        name="password"
+        validate={ validators.password }
+        component={ FormControl }
+        label="Password"
+        type="password"
+        validated
+        { ...props }
+      />
+    </React.Fragment>
+  );
+}
+
+function AuthBearer({ validators, ...props }) {
+  return (
+    <Field
+      name="bearer"
+      validate={ validators.bearer }
+      component={ FormControl }
+      label="Token"
+      validated
+      { ...props }
+    />
+  );
+}
+
 export default View;
diff --git a/client/src/app/modals/deploy-diagram/View.less b/client/src/app/modals/deploy-diagram/View.less
index a959ec5fd4..177ff19e2a 100644
--- a/client/src/app/modals/deploy-diagram/View.less
+++ b/client/src/app/modals/deploy-diagram/View.less
@@ -74,7 +74,8 @@
       display: inline-block;
     }
 
-    input {
+    input,
+    select {
       width: 100%;
       padding: 6px;
 
@@ -108,7 +109,8 @@
     }
 
     button:disabled,
-    input:disabled {
+    input:disabled,
+    select:disabled {
       color: #808080;
     }
 
diff --git a/client/src/app/modals/deploy-diagram/__tests__/DeployDiagramModalSpec.js b/client/src/app/modals/deploy-diagram/__tests__/DeployDiagramModalSpec.js
index e6db0d29ab..7b4959f488 100644
--- a/client/src/app/modals/deploy-diagram/__tests__/DeployDiagramModalSpec.js
+++ b/client/src/app/modals/deploy-diagram/__tests__/DeployDiagramModalSpec.js
@@ -9,6 +9,7 @@ import {
 
 import { DeployDiagramModal } from '..';
 import View from '../View';
+import AuthTypes from '../AuthTypes';
 
 const MOCK_ENDPOINT_URL = 'http://example.com/deployment/create';
 
@@ -337,6 +338,116 @@ describe('<DeployDiagramModal>', function() {
   });
 
 
+  describe('authentication', function() {
+
+    it('should not pass auth option when no auth method was chosen', async function() {
+      // given
+      const endpointUrl = 'http://example.com/',
+            deploymentName = 'deploymentName';
+
+      const onDeployStub = sinon.stub().resolves();
+
+      const wrapper = shallow(
+        <DeployDiagramModal
+          onDeploy={ onDeployStub }
+        />
+      );
+      const instance = wrapper.instance();
+
+      // when
+      await instance.handleDeploy({
+        endpointUrl,
+        deploymentName
+      }, {
+        setSubmitting: sinon.spy()
+      });
+
+      // expect
+      expect(onDeployStub).to.be.calledOnce;
+
+      const payload = onDeployStub.getCall(0).args[0];
+
+      expect(payload).to.not.have.property('auth');
+    });
+
+
+    it('should pass username and password when authenticating with Basic', async function() {
+      // given
+      const endpointUrl = 'http://example.com/',
+            deploymentName = 'deploymentName',
+            username = 'username',
+            password = 'password',
+            authType = AuthTypes.basic;
+
+      const onDeployStub = sinon.stub().resolves();
+
+      const wrapper = shallow(
+        <DeployDiagramModal
+          onDeploy={ onDeployStub }
+        />
+      );
+      const instance = wrapper.instance();
+
+      // when
+      await instance.handleDeploy({
+        endpointUrl,
+        deploymentName,
+        username,
+        password,
+        authType
+      }, {
+        setSubmitting: sinon.spy()
+      });
+
+      // expect
+      expect(onDeployStub).to.be.calledOnce;
+
+      const payload = onDeployStub.getCall(0).args[0];
+
+      expect(payload).to.have.property('auth');
+      expect(payload.auth).to.have.property('username').eql(username);
+      expect(payload.auth).to.have.property('password').eql(password);
+    });
+
+
+    it('should pass token when authenticating with Bearer', async function() {
+      // given
+      const endpointUrl = 'http://example.com/',
+            deploymentName = 'deploymentName',
+            bearer = 'bearer',
+            authType = AuthTypes.bearer;
+
+      const onDeployStub = sinon.stub().resolves();
+
+      const wrapper = shallow(
+        <DeployDiagramModal
+          onDeploy={ onDeployStub }
+        />
+      );
+      const instance = wrapper.instance();
+
+      // when
+      await instance.handleDeploy({
+        endpointUrl,
+        deploymentName,
+        bearer,
+        authType
+      }, {
+        setSubmitting: sinon.spy()
+      });
+
+      // expect
+      expect(onDeployStub).to.be.calledOnce;
+
+      const payload = onDeployStub.getCall(0).args[0];
+
+      expect(payload).to.have.property('auth');
+      expect(payload.auth).to.have.property('bearer').eql(bearer);
+    });
+
+  });
+
+
   describe('<View>', function() {
 
     it('should render', function() {
@@ -346,7 +457,7 @@ describe('<DeployDiagramModal>', function() {
 
     it('should render error message', function() {
       // given
-      const wrapper = mount(<View error={ 'Error message' } />);
+      const wrapper = mount(<View validators={ { auth: {} } } error={ 'Error message' } />);
 
       // then
       expect(wrapper.find('.deploy-message.error')).to.have.lengthOf(1);
@@ -357,7 +468,7 @@ describe('<DeployDiagramModal>', function() {
 
     it('should render success message', function() {
       // given
-      const wrapper = mount(<View success={ 'Success message' } />);
+      const wrapper = mount(<View validators={ { auth: {} } } success={ 'Success message' } />);
 
       // then
       expect(wrapper.find('.deploy-message.success')).to.have.lengthOf(1);