stitch-ui/src/services/http/components/EditIncomingWebhook.js

import React from "react";
import PropTypes from "prop-types";
import {
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  MaskedInput
} from "../../../core";

const SECRET = "secret";
const VERIFY_PAYLOAD = "verifyPayload";
const SECRET_AS_QUERY_PARAM = "secretAsQueryParam";

export default class EditHTTPWebhookOptions extends React.Component {
  constructor(props) {
    super(props);
    this.handleChangeSecret = this.handleChangeSecret.bind(this);
    this.handleOptionChange = this.handleOptionChange.bind(this);
  }
  handleChangeSecret(e) {
    const { options, setWebhookOptions } = this.props;
    setWebhookOptions(options.set(SECRET, e.target.value));
  }
  handleOptionChange(e) {
    const { options, setWebhookOptions } = this.props;
    const out = { SECRET_AS_QUERY_PARAM: false, VERIFY_PAYLOAD: false };
    if (e.target.id === SECRET_AS_QUERY_PARAM) {
      out.SECRET_AS_QUERY_PARAM = true;
    } else if (e.target.id === VERIFY_PAYLOAD) {
      out.VERIFY_PAYLOAD = true;
    }
    setWebhookOptions(
      options
        .set(VERIFY_PAYLOAD, out.VERIFY_PAYLOAD)
        .set(SECRET_AS_QUERY_PARAM, out.SECRET_AS_QUERY_PARAM)
    );
  }
  render() {
    const { options } = this.props;
    return (
      <div>
        <FormRow>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor="req_validation">
              Request Validation
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <div className="form-row-radio-group">
              <div className="form-row-radio-group-item">
                <input
                  id={VERIFY_PAYLOAD}
                  name="req_validation"
                  type="radio"
                  checked={options.get(VERIFY_PAYLOAD) || false}
                  onChange={this.handleOptionChange}
                />
                <label className="form-row-label" htmlFor={VERIFY_PAYLOAD}>
                  Verify Payload Signature
                </label>
              </div>
              <div className="form-row-radio-group-item">
                <input
                  id={SECRET_AS_QUERY_PARAM}
                  name="req_validation"
                  type="radio"
                  checked={options.get(SECRET_AS_QUERY_PARAM) || false}
                  onChange={this.handleOptionChange}
                />
                <div>
                  <label
                    className="form-row-label"
                    htmlFor={SECRET_AS_QUERY_PARAM}
                  >
                    Require Secret as Query Param
                  </label>
                </div>
              </div>
            </div>
          </FormRowInputGroup>
        </FormRow>
        <FormRow last>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor={SECRET}>
              Secret
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <MaskedInput
              name={SECRET}
              className="text-input form-row-text-input"
              value={options.get(SECRET)}
              onChange={this.handleChangeSecret}
            />
          </FormRowInputGroup>
        </FormRow>
      </div>
    );
  }
}

EditHTTPWebhookOptions.propTypes = {
  setWebhookOptions: PropTypes.func.isRequired,
  options: PropTypes.object // eslint-disable-line react/forbid-prop-types
};

EditHTTPWebhookOptions.defaultProps = {
  options: null
};