app/addons/cors/components/CORSScreen.js

import React, { Component } from "react";
import { Button } from 'react-bootstrap';
import app from "../../../app";
import ReactComponents from "../../components/react-components";
import FauxtonComponents from "../../fauxton/components";
import Origins from "./Origins";
import OriginInput from "./OriginInput";
import OriginTable from "./OriginTable";

const LoadLines = ReactComponents.LoadLines;
const ConfirmationModal = FauxtonComponents.ConfirmationModal;

export default class CORSScreen extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.fetchAndLoadCORSOptions();
  }

  enableCorsChange() {
    const { corsEnabled, origins, node } = this.props;
    if (corsEnabled && !_.isEmpty(origins)) {
      const result = window.confirm(app.i18n.en_US['cors-disable-cors-prompt']);
      if (!result) { return; }
    }
    this.props.saveCORS({
      corsEnabled: !corsEnabled,
      origins: origins,
      node: node
    });
  }

  save() {
    this.props.saveCORS({
      corsEnabled: this.props.corsEnabled,
      origins: this.props.origins,
      node: this.props.node
    });
  }

  originChange(isAllOrigins) {
    if (isAllOrigins && !_.isEmpty(this.props.origins)) {
      const result = window.confirm('Are you sure? Switching to all origin domains will overwrite your specific origin domains.');
      if (!result) { return; }
    }
    this.props.saveCORS({
      corsEnabled: this.props.corsEnabled,
      origins: isAllOrigins ? ['*'] : [],
      node: this.props.node
    });
  }

  addOrigin(origin) {
    this.props.saveCORS({
      corsEnabled: this.props.corsEnabled,
      origins: this.props.origins.concat(origin),
      node: this.props.node
    });
  }

  updateOrigin(updatedOrigin, originalOrigin) {
    const newOrigins = this.props.origins.slice();
    const index = _.indexOf(newOrigins, originalOrigin);
    if (index === -1) { return; }
    newOrigins[index] = updatedOrigin;

    this.props.saveCORS({
      corsEnabled: this.props.corsEnabled,
      origins: newOrigins,
      node: this.props.node
    });
  }

  deleteOrigin() {
    const { corsEnabled, origins, node, domainToDelete } = this.props;
    const index = this.props.origins.indexOf(domainToDelete);
    if (index === -1) { return; }
    const newOrigins = [
      ...origins.slice(0, index),
      ...origins.slice(index + 1)
    ];

    this.props.saveCORS({
      corsEnabled: corsEnabled,
      origins: newOrigins,
      node: node
    });
  }

  render() {
    const isVisible = [this.props.corsEnabled, !this.props.isAllOrigins].every((elem) => elem === true);

    let originSettings = (
      <div id={this.props.corsEnabled ? 'collapsing-container' : ''}>
        <Origins
          corsEnabled={this.props.corsEnabled}
          originChange={this.originChange.bind(this)}
          isAllOrigins={this.props.isAllOrigins} />
        <OriginTable
          updateOrigin={this.updateOrigin.bind(this)}
          deleteOrigin={this.props.showDeleteDomainConfirmation}
          isVisible={isVisible}
          origins={this.props.origins} />
        <OriginInput
          addOrigin={this.addOrigin.bind(this)}
          isVisible={isVisible} />
      </div>
    );

    if (this.props.isLoading) {
      originSettings = (<LoadLines />);
    }
    const deleteMsg = <span>Are you sure you want to delete <code>{_.escape(this.props.domainToDelete)}</code>?</span>;

    return (
      <div className="cors-page flex-body">
        <header id="cors-header">
          <p>{app.i18n.en_US['cors-notice']}</p>
        </header>

        <form id="corsForm" onSubmit={this.save.bind(this)}>
          <div className="cors-enable">
            {this.props.corsEnabled ? 'CORS is currently enabled.' : 'CORS is currently disabled.'}
            <br />
            <Button
              type="button"
              id="enable-disable-cors"
              variant="cf-primary"
              onClick={this.enableCorsChange.bind(this)}
              disabled={this.props.isLoading}
            >
              {this.props.corsEnabled ? 'Disable CORS' : 'Enable CORS'}
            </Button>
          </div>
          {originSettings}
        </form>

        <ConfirmationModal
          title="Confirm Deletion"
          visible={this.props.deleteDomainModalVisible}
          text={deleteMsg}
          onClose={this.props.hideDeleteDomainConfirmation}
          onSubmit={this.deleteOrigin.bind(this)}
          successButtonLabel="Delete Domain" />
      </div>
    );
  }
}