Some more work

2026-04-21 14:47:46 -04:00 · 2018-01-29 11:41:02 +08:00
parent aade247488
commit 6bbfca3648
11 changed files with 104 additions and 55 deletions
--- 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;
--- 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>
    );
--- 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}
--- 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'}>
--- 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'}>
--- 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'}>
--- 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'}>
--- 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'}>
--- 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'}>
--- 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;
--- 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",