From 6bbfca36489c9679779fae7b4c14cc6ea69fd0cd Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 29 Jan 2018 11:41:02 +0800
Subject: [PATCH] Some more work

---
 .../app/ui/components/base/button.js          |   7 +-
 .../ui/components/editors/auth/asap-auth.js   | 128 ++++++++++++------
 .../components/editors/auth/auth-wrapper.js   |   2 +-
 .../ui/components/editors/auth/aws-auth.js    |   4 +-
 .../ui/components/editors/auth/basic-auth.js  |   3 +-
 .../ui/components/editors/auth/bearer-auth.js |   5 +-
 .../ui/components/editors/auth/digest-auth.js |   3 +-
 .../ui/components/editors/auth/hawk-auth.js   |   1 +
 .../ui/components/editors/auth/ntlm-auth.js   |   3 +-
 .../app/ui/css/components/forms.less          |   1 +
 packages/insomnia-app/package.json            |   2 +-
 11 files changed, 104 insertions(+), 55 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/base/button.js b/packages/insomnia-app/app/ui/components/base/button.js
index 85cd54c799..edd517c21d 100644
--- a/packages/insomnia-app/app/ui/components/base/button.js
+++ b/packages/insomnia-app/app/ui/components/base/button.js
@@ -21,11 +21,13 @@ class Button extends PureComponent {
       disabled,
       tabIndex,
       className,
-      type
+      type,
+      id
     } = this.props;
 
     return (
       <button disabled={disabled}
+              id={id}
               type={type}
               tabIndex={tabIndex}
               className={className}
@@ -47,7 +49,8 @@ Button.propTypes = {
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
   tabIndex: PropTypes.number,
-  type: PropTypes.string
+  type: PropTypes.string,
+  id: PropTypes.string
 };
 
 export default Button;
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js
index 494e4cf972..890856d127 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js
@@ -1,25 +1,53 @@
 // @flow
-import type {Request} from '../../../../models/request';
+import type {RequestAuthentication} from '../../../../models/request';
 
+import classnames from 'classnames';
 import * as React from 'react';
 import autobind from 'autobind-decorator';
 import OneLineEditor from '../../codemirror/one-line-editor';
-import CodeEditor from '../../codemirror/code-editor';
 import HelpTooltip from '../../help-tooltip';
+import {showModal} from '../../modals';
+import CodePromptModal from '../../modals/code-prompt-modal';
+import Button from '../../base/button';
 
 type Props = {
-  request: Request,
+  authentication: RequestAuthentication,
   handleRender: Function,
   handleGetRenderContext: Function,
   nunjucksPowerUserMode: boolean,
   onChange: Function
 };
 
+const PRIVATE_KEY_PLACEHOLDER = `
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpQIBAAKCAQEA39k9udklHnmkU0GtTLpnYtKk1l5txYmUD/cGI0bFd3HHOOLG
+mI0av55vMFEhxL7yrFrcL8pRKp0+pnOVStMDmbwsPE/pu9pf3uxD+m9/Flv89bUk
+mml+R3E8PwAYzkX0cr4yQTPN9PSSqy+d2+KrZ9QZmpc3tqltTbMVV93cxKCxfBrf
+jbiMIAVh7silDVY5+V46SJu8zY2kXOBBtlrE7/JoMiTURCkRjNIA8/sgSmRxBTdM
+313lKJM7NgxaGnREbP75U7ErfBvReJsf5p6h5+XXFirG7F2ntcqjUoR3M+opngp0
+CgffdGcsK7MmUUgAG7r05b0mljhI35t/0Y57MwIDAQABAoIBAQCH1rLohudJmROp
+Gl/qAewfQiiZlfATQavCDGuDGL1YAIme8a8GgApNYf2jWnidhiqJgRHBRor+yzFr
+cJV+wRTs/Szp6LXAgMmTkKMJ+9XXErUIUgwbl27Y3Rv/9ox1p5VRg+A=
+-----END RSA PRIVATE KEY-----
+`.trim();
+
 @autobind
 class AsapAuth extends React.PureComponent<Props> {
+  _handleDisable () {
+    const {authentication} = this.props;
+    authentication.disabled = !authentication.disabled;
+    this.props.onChange(authentication);
+  }
+
   _handleChangeProperty (property: string, value: string | boolean): void {
-    const {request} = this.props;
-    const authentication = Object.assign({}, request.authentication, {[property]: value});
+    const {authentication} = this.props;
+    authentication[property] = value;
+    this.props.onChange(authentication);
+  }
+
+  _handleChangePrivateKey (value: string): void {
+    const {authentication} = this.props;
+    authentication.privateKey = value;
     this.props.onChange(authentication);
   }
 
@@ -54,8 +82,6 @@ class AsapAuth extends React.PureComponent<Props> {
 
     const asapPrivateKey = this.renderPrivateKeyInput(
       'Private Key',
-      'privateKey',
-      (value) => this._handleChangeProperty('privateKey', value)
     );
 
     return [asapIssuer, asapSubject, asapAudience, asapKeyId, asapPrivateKey];
@@ -67,7 +93,7 @@ class AsapAuth extends React.PureComponent<Props> {
     placeholder: string,
     onChange: Function
   ): React.Element<*> {
-    const { handleRender, handleGetRenderContext, request, nunjucksPowerUserMode } = this.props;
+    const {handleRender, handleGetRenderContext, authentication, nunjucksPowerUserMode} = this.props;
     const id = label.replace(/ /g, '-');
     return (
       <tr key={id}>
@@ -77,12 +103,14 @@ class AsapAuth extends React.PureComponent<Props> {
           </label>
         </td>
         <td className="wide">
-          <div className="form-control form-control--underlined no-margin">
+          <div className={classnames('form-control form-control--underlined no-margin', {
+            'form-control--inactive': authentication.disabled
+          })}>
             <OneLineEditor
               id={id}
               placeholder={placeholder}
               onChange={onChange}
-              defaultValue={request.authentication[property] || ''}
+              defaultValue={authentication[property] || ''}
               nunjucksPowerUserMode={nunjucksPowerUserMode}
               render={handleRender}
               getRenderContext={handleGetRenderContext}
@@ -93,46 +121,44 @@ class AsapAuth extends React.PureComponent<Props> {
     );
   }
 
+  _handleEditPrivateKey () {
+    const {handleRender, handleGetRenderContext, authentication} = this.props;
+    showModal(CodePromptModal, {
+      submitName: 'Done',
+      title: `Edit Private Key`,
+      defaultValue: authentication.privateKey,
+      onChange: this._handleChangePrivateKey,
+      enableRender: handleRender || handleGetRenderContext,
+      placeholder: PRIVATE_KEY_PLACEHOLDER,
+      mode: 'text/plain',
+      hideMode: true
+    });
+  }
+
   renderPrivateKeyInput (
     label: string,
-    property: string,
-    onChange: Function
   ): React.Element<*> {
-    const { handleRender, handleGetRenderContext, request, nunjucksPowerUserMode } = this.props;
     const id = label.replace(/ /g, '-');
-    const placeholderPrivateKey = '-----BEGIN RSA PRIVATE KEY-----\n' +
-    'MIIEpQIBAAKCAQEA39k9udklHnmkU0GtTLpnYtKk1l5txYmUD/cGI0bFd3HHOOLG\n' +
-    'mI0av55vMFEhxL7yrFrcL8pRKp0+pnOVStMDmbwsPE/pu9pf3uxD+m9/Flv89bUk\n' +
-    'mml+R3E8PwAYzkX0cr4yQTPN9PSSqy+d2+KrZ9QZmpc3tqltTbMVV93cxKCxfBrf\n' +
-    'jbiMIAVh7silDVY5+V46SJu8zY2kXOBBtlrE7/JoMiTURCkRjNIA8/sgSmRxBTdM\n' +
-    '313lKJM7NgxaGnREbP75U7ErfBvReJsf5p6h5+XXFirG7F2ntcqjUoR3M+opngp0\n' +
-    'CgffdGcsK7MmUUgAG7r05b0mljhI35t/0Y57MwIDAQABAoIBAQCH1rLohudJmROp\n' +
-    'Gl/qAewfQiiZlfATQavCDGuDGL1YAIme8a8GgApNYf2jWnidhiqJgRHBRor+yzFr\n' +
-    'cJV+wRTs/Szp6LXAgMmTkKMJ+9XXErUIUgwbl27Y3Rv/9ox1p5VRg+A=\n' +
-    '-----END RSA PRIVATE KEY-----';
+    const {authentication} = this.props;
     return (
       <tr key={id}>
         <td className="pad-right pad-top-sm no-wrap valign-top">
           <label htmlFor={id} className="label--small no-pad">
             {label}
-            <HelpTooltip>Can also use single line data-uri format (e.g. obtained from asap-cli export-as-data-uri command), useful for saving as environment data</HelpTooltip>
+            <HelpTooltip>Can also use single line data-uri format (e.g. obtained from asap-cli
+              export-as-data-uri command), useful for saving as environment data</HelpTooltip>
           </label>
         </td>
         <td className="wide">
-          <div className="form-control form-control--underlined form-control--tall no-margin">
-            <CodeEditor
-              id={id}
-              onChange={onChange}
-              defaultValue={request.authentication[property] || ''}
-              dynamicHeight={true}
-              hideLineNumbers={true}
-              lineWrapping={true}
-              placeholder={placeholderPrivateKey}
-              style={{height: 200}}
-              nunjucksPowerUserMode={nunjucksPowerUserMode}
-              render={handleRender}
-              getRenderContext={handleGetRenderContext}
-            />
+          <div className={
+            classnames('form-control form-control--underlined form-control--tall no-margin', {
+              'form-control--inactive': authentication.disabled
+            })
+          }>
+            <button className="btn btn--clicky wide" onClick={this._handleEditPrivateKey}>
+              <i className="fa fa-edit space-right"/>
+              {authentication.privateKey ? 'Click to Edit' : 'Click to Add'}
+            </button>
           </div>
         </td>
       </tr>
@@ -141,11 +167,35 @@ class AsapAuth extends React.PureComponent<Props> {
 
   render () {
     const fields = this.renderAsapAuthenticationFields();
+    const {authentication} = this.props;
 
     return (
       <div className="pad">
         <table>
-          <tbody>{fields}</tbody>
+          <tbody>
+          {fields}
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="enabled" className="label--small no-pad">
+                Enabled
+              </label>
+            </td>
+            <td className="wide">
+              <div className="form-control form-control--underlined">
+                <Button className="btn btn--super-duper-compact"
+                        id="enabled"
+                        onClick={this._handleDisable}
+                        value={!authentication.disabled}
+                        title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                  {authentication.disabled
+                    ? <i className="fa fa-square-o"/>
+                    : <i className="fa fa-check-square-o"/>
+                  }
+                </Button>
+              </div>
+            </td>
+          </tr>
+          </tbody>
         </table>
       </div>
     );
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js b/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js
index 171a96bbd0..17e741c406 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js
@@ -127,7 +127,7 @@ class AuthWrapper extends PureComponent {
     } else if (authentication.type === AUTH_ASAP) {
       return (
         <AsapAuth
-          request={request}
+          authentication={authentication}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           nunjucksPowerUserMode={nunjucksPowerUserMode}
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js
index 6310df2c26..9d3db251f0 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js
@@ -56,7 +56,6 @@ class AWSAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type='text'
                   id='accessKeyId'
                   placeholder='AWS_ACCESS_KEY_ID'
@@ -80,7 +79,6 @@ class AWSAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type={showPasswords ? 'text' : 'password'}
                   id='secretAccessKey'
                   placeholder='AWS_SECRET_ACCESS_KEY'
@@ -105,7 +103,6 @@ class AWSAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   id='sessionToken'
                   placeholder='AWS_SESSION_TOKEN'
                   onChange={this._handleChangeSessionToken}
@@ -126,6 +123,7 @@ class AWSAuth extends PureComponent {
             <td className="wide">
               <div className="form-control form-control--underlined">
                 <Button className="btn btn--super-duper-compact"
+                        id="enabled"
                         onClick={this._handleDisable}
                         value={!authentication.disabled}
                         title={authentication.disabled ? 'Enable item' : 'Disable item'}>
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js
index b184d344df..fe39c759ac 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js
@@ -49,7 +49,6 @@ class BasicAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type='text'
                   id='username'
                   disabled={authentication.disabled}
@@ -74,7 +73,6 @@ class BasicAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type={showPasswords ? 'text' : 'password'}
                   id='password'
                   placeholder='•••••••••••'
@@ -96,6 +94,7 @@ class BasicAuth extends PureComponent {
             <td className="wide">
               <div className="form-control form-control--underlined">
                 <Button className="btn btn--super-duper-compact"
+                        id="enabled"
                         onClick={this._handleDisable}
                         value={!authentication.disabled}
                         title={authentication.disabled ? 'Enable item' : 'Disable item'}>
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js
index 78770c9672..1c8d396175 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js
@@ -20,8 +20,7 @@ class BearerAuth extends PureComponent {
   }
 
   render () {
-    const {request, handleRender, handleGetRenderContext, nunjucksPowerUserMode} = this.props;
-    const {authentication} = request;
+    const {authentication, handleRender, handleGetRenderContext, nunjucksPowerUserMode} = this.props;
 
     return (
       <div className="pad">
@@ -38,7 +37,6 @@ class BearerAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type='text'
                   id='token'
                   disabled={authentication.disabled}
@@ -61,6 +59,7 @@ class BearerAuth extends PureComponent {
             <td className="wide">
               <div className="form-control form-control--underlined">
                 <Button className="btn btn--super-duper-compact"
+                        id="enabled"
                         onClick={this._handleDisable}
                         value={!authentication.disabled}
                         title={authentication.disabled ? 'Enable item' : 'Disable item'}>
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js
index 7ec271fd7c..a28843f150 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js
@@ -49,7 +49,6 @@ class DigestAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type='text'
                   id='username'
                   disabled={authentication.disabled}
@@ -74,7 +73,6 @@ class DigestAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type={showPasswords ? 'text' : 'password'}
                   id='password'
                   placeholder='•••••••••••'
@@ -96,6 +94,7 @@ class DigestAuth extends PureComponent {
             <td className="wide">
               <div className="form-control form-control--underlined">
                 <Button className="btn btn--super-duper-compact"
+                        id="enabled"
                         onClick={this._handleDisable}
                         value={!authentication.disabled}
                         title={authentication.disabled ? 'Enable item' : 'Disable item'}>
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js
index 82e92bb92e..8ce63fc224 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js
@@ -156,6 +156,7 @@ class HawkAuth extends React.PureComponent<Props> {
             <td className="wide">
               <div className="form-control form-control--underlined">
                 <Button className="btn btn--super-duper-compact"
+                        id="enabled"
                         onClick={this._handleDisable}
                         value={!authentication.disabled}
                         title={authentication.disabled ? 'Enable item' : 'Disable item'}>
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js
index a3ab0f8777..9d3f711a9f 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js
@@ -49,7 +49,6 @@ class NTLMAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type='text'
                   id='username'
                   disabled={authentication.disabled}
@@ -74,7 +73,6 @@ class NTLMAuth extends PureComponent {
                 'form-control--inactive': authentication.disabled
               })}>
                 <OneLineEditor
-                  forceEditor
                   type={showPasswords ? 'text' : 'password'}
                   id='password'
                   placeholder='•••••••••••'
@@ -96,6 +94,7 @@ class NTLMAuth extends PureComponent {
             <td className="wide">
               <div className="form-control form-control--underlined">
                 <Button className="btn btn--super-duper-compact"
+                        id="enabled"
                         onClick={this._handleDisable}
                         value={!authentication.disabled}
                         title={authentication.disabled ? 'Enable item' : 'Disable item'}>
diff --git a/packages/insomnia-app/app/ui/css/components/forms.less b/packages/insomnia-app/app/ui/css/components/forms.less
index 99e2ff2a3a..2b87eb7be7 100644
--- a/packages/insomnia-app/app/ui/css/components/forms.less
+++ b/packages/insomnia-app/app/ui/css/components/forms.less
@@ -125,6 +125,7 @@
     textarea,
     .input,
     input,
+    .btn,
     select {
       border-style: dashed;
       opacity: @opacity-subtle;
diff --git a/packages/insomnia-app/package.json b/packages/insomnia-app/package.json
index bf08d7e006..24d3d6fcd6 100644
--- a/packages/insomnia-app/package.json
+++ b/packages/insomnia-app/package.json
@@ -86,7 +86,7 @@
   ],
   "dependencies": {
     "autobind-decorator": "^1.3.4",
-    "aws4": "1.6.0",
+    "aws4": "^1.6.0",
     "classnames": "^2.2.5",
     "clone": "^2.1.0",
     "codemirror": "^5.24.2",