feat(deploy-toolbar): add basic and bearer auth

Closes #741

client/src/app/modals/deploy-diagram/AuthTypes.js

@@ -0,0 +1,7 @@
+const AuthTypes = {
+  none: 'none',
+  basic: 'basic',
+  bearer: 'bearer'
+};
+
+export default AuthTypes;

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);

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;

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;
     }