tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

NetworkLocationsForm.js (3807B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 const {
      8  createFactory,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 
     14 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     15 const Localized = createFactory(FluentReact.Localized);
     16 
     17 const Message = createFactory(
     18  require("resource://devtools/client/aboutdebugging/src/components/shared/Message.js")
     19 );
     20 
     21 const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js");
     22 const {
     23  MESSAGE_LEVEL,
     24 } = require("resource://devtools/client/aboutdebugging/src/constants.js");
     25 const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js");
     26 
     27 class NetworkLocationsForm extends PureComponent {
     28  static get propTypes() {
     29    return {
     30      dispatch: PropTypes.func.isRequired,
     31      networkLocations: PropTypes.arrayOf(Types.location).isRequired,
     32    };
     33  }
     34 
     35  constructor(props) {
     36    super(props);
     37    this.state = {
     38      errorHostValue: null,
     39      errorMessageId: null,
     40      value: "",
     41    };
     42  }
     43 
     44  onSubmit(e) {
     45    const { networkLocations } = this.props;
     46    const { value } = this.state;
     47 
     48    e.preventDefault();
     49 
     50    if (!value) {
     51      return;
     52    }
     53 
     54    if (!value.match(/[^:]+:\d+/)) {
     55      this.setState({
     56        errorHostValue: value,
     57        errorMessageId: "about-debugging-network-location-form-invalid",
     58      });
     59      return;
     60    }
     61 
     62    if (networkLocations.includes(value)) {
     63      this.setState({
     64        errorHostValue: value,
     65        errorMessageId: "about-debugging-network-location-form-duplicate",
     66      });
     67      return;
     68    }
     69 
     70    this.props.dispatch(Actions.addNetworkLocation(value));
     71    this.setState({ errorHostValue: null, errorMessageId: null, value: "" });
     72  }
     73 
     74  renderError() {
     75    const { errorHostValue, errorMessageId } = this.state;
     76 
     77    if (!errorMessageId) {
     78      return null;
     79    }
     80 
     81    return Message(
     82      {
     83        className:
     84          "connect-page__network-form__error-message " +
     85          "qa-connect-page__network-form__error-message",
     86        level: MESSAGE_LEVEL.ERROR,
     87        isCloseable: true,
     88      },
     89      Localized(
     90        {
     91          id: errorMessageId,
     92          "$host-value": errorHostValue,
     93        },
     94        dom.p(
     95          {
     96            className: "technical-text",
     97          },
     98          errorMessageId
     99        )
    100      )
    101    );
    102  }
    103 
    104  render() {
    105    return dom.form(
    106      {
    107        className: "connect-page__network-form",
    108        onSubmit: e => this.onSubmit(e),
    109      },
    110      this.renderError(),
    111      Localized(
    112        {
    113          id: "about-debugging-network-locations-host-input-label",
    114        },
    115        dom.label(
    116          {
    117            htmlFor: "about-debugging-network-locations-host-input",
    118          },
    119          "Host"
    120        )
    121      ),
    122      dom.input({
    123        id: "about-debugging-network-locations-host-input",
    124        className: "default-input qa-network-form-input",
    125        placeholder: "localhost:6080",
    126        type: "text",
    127        value: this.state.value,
    128        onChange: e => {
    129          const value = e.target.value;
    130          this.setState({ value });
    131        },
    132      }),
    133      Localized(
    134        {
    135          id: "about-debugging-network-locations-add-button",
    136        },
    137        dom.button(
    138          {
    139            className: "primary-button qa-network-form-submit-button",
    140          },
    141          "Add"
    142        )
    143      )
    144    );
    145  }
    146 }
    147 
    148 module.exports = NetworkLocationsForm;