ProxyEditor: Fix visual issues, start work on behavior

2024-11-24 02:13:43 +03:00 · 2017-05-23 09:42:14 -07:00 · 2017-05-23 09:42:14 -07:00 · f7bf989165
commit f7bf989165
parent 190bb1fd08
5 changed files with 264 additions and 60 deletions
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
@ -24,17 +24,24 @@ export default function getApp(theState) {

    }

-    setStatusTo(msg) {
+    setStatusTo(msg, cb) {

      this.setState(
        {
          status: msg,
-        }
+        },
+        cb
      );

    }

-    showErrors(err, ...warns) {
+    showErrors(err, ...args/* ...warns, cb */) {
+
+      const lastArg = args[args.length - 1];
+      const cb = (lastArg && typeof lastArg === 'function')
+        ? args.pop()
+        : () => {};
+      const warns = args;

      const warningHtml = warns
        .map(
@ -74,7 +81,8 @@ export default function getApp(theState) {
            evt.preventDefault();

          }}> [Техн.детали]</a>}
-        </span>)
+        </span>),
+        cb
      );

    }
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js
@ -21,6 +21,8 @@ export default function getMain(theState) {
  const ApplyMods = getApplyMods(theState);
  const Notifications = getNotifications(theState);

+  const checksName = 'pacMods';
+
  return class Main extends Component {

    constructor(props) {
@ -64,8 +66,6 @@ export default function getMain(theState) {

    handleModCheck(that, {targetConf, targetIndex, targetChildren}) {

-      console.log('CHHHH', targetChildren);
-      window.foo = targetChildren
      const oldCats = that.state.catToOrderedMods;
      const newCats = Object.keys(that.state.catToOrderedMods).reduce((acc, cat) => {

@ -86,9 +86,11 @@ export default function getMain(theState) {

    }

-    handleModChange(that) {
+    handleModChange(that, event) {

-      that.setState({ifModsChangesStashed: true});
+      if (event.target.name === checksName) {
+        that.setState({ifModsChangesStashed: true});
+      }

    }

@ -127,6 +129,7 @@ export default function getMain(theState) {
                childrenOfMod: {
                  customProxyStringRaw: createElement(ProxyEditor, props),
                },
+                name: checksName,
              }, modsHandlers)
            ),
            key: 'ownProxies',
@ -137,6 +140,7 @@ export default function getMain(theState) {
              ModList,
              Object.assign({}, props, {
                orderedConfigs: this.state.catToOrderedMods['general'],
+                name: checksName,
              }, modsHandlers)
            ),
            key: 'mods',
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js
@ -14,6 +14,7 @@ export default function getModList(theState) {
          (<InfoLi
            conf={conf}
            type='checkbox'
+            name={props.name}
            checked={conf.value}
            key={index}
            onClick={() => props.onClick({targetConf: conf, targetIndex: index, targetChildren: props.childrenOfMod})}
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js
@ -21,12 +21,23 @@ export default function getProxyEditor(theState) {
    table.editor td, table.editor th {
      border: 1px solid #ccc;
      text-align: left;
+      height: 100%;
    }
-    table.editor th {
+
+    /* ADD PANEL */
+    table.editor tr.addPanel td {
+      padding: 0;
+    }
+    /* PROXY ROW */
+    table.editor tr.proxyRow td:first-child {
+      text-align: center;
+    }
+
+    table.editor th:not(:last-child) {
      padding: 0 0.6em;
    }

-    table.editor input,
+    table.editor input:not([type="submit"]),
    table.editor select,
    table.editor select:hover {
      border: none;
@ -41,6 +52,7 @@ export default function getProxyEditor(theState) {
      width: 100%;
    }

+    /* BUTTONS */
    table.editor input[type="submit"],
    table.editor button {
      min-width: 0;
@ -49,42 +61,68 @@ export default function getProxyEditor(theState) {
      padding: 0;
      border: none;
    }
-    table.editor .add {
-      font-weight: 800;	
+    .only {
+      /*height: 100%;*/
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
    }
-    table.editor button.export {
+    table.editor .add {
+      font-weight: 900;	
+    }
+    table.editor .export {
      padding-right: 2px;
    }
-    /* LAST COLUMN */
-    table.editor th:nth-last-child(1),
-    table.editor td:nth-last-child(1) {
-      height: 100%;
-      /*border: 0;*/
-      padding: 0;
+
+    /* LAST COLUMN: BUTTONS */
+    table.editor tr > *:nth-last-child(1) {
      text-align: center;
-    }
-    table.editor td:nth-last-child(2) {
-      /*border-right: 0;
-      /* FOR PORT */
      padding: 0;
+      position: relative;
+      min-width: 1em;
    }
-    .laftPadded {
+    /* LAST-2 COLUMN: HOSTNAME
+    table.editor td:nth-last-child(3) {
      padding-left: 2px;
-    }
+    }*/
    .noPad {
      padding: 0;
    }
+    .padLeft {
+      padding-left: 2px;
+    }

    textarea.textarea {
      width: 100% !important;
      min-height: 100%;
      height: 6em;
-      border-width: 1px 0 0 0;
+      /* border-width: 1px 0 0 0;*/
+      border: none;
+    }
+
+    table.editor input:invalid {
+      color: red !important;
+      border-radius: 0;
+      border-bottom: 1px dotted red !important;
    }

  `;

-  const uiRaw = 'ui-proxy-string-raw';
+  const UI_RAW = 'ui-proxy-string-raw';
+  const MAX_PORT = 65535;
+  const onlyPort = function onlyPort(event) {
+
+    if (!event.ctrlKey && (/^\D$/.test(event.key) || /^\d$/.test(event.key) && parseInt(`${this.value}${event.key}`) > MAX_PORT)) {
+      event.preventDefault();
+      return false;
+    }
+    // Digits, Alt, Tab, Enter, etc.
+    return true;
+
+  };
+  const PROXY_TYPE_LABEL_PAIRS = [['PROXY', 'PROXY/HTTP'],['HTTPS'],['SOCKS4'],['SOCKS5'],['SOCKS']];

  return class ProxyEditor extends Component {

@ -92,14 +130,19 @@ export default function getProxyEditor(theState) {

      super(props);
      this.state = {
-        proxyStringRaw: localStorage.getItem(uiRaw) || '',
-        ifExportMode: false,
+        proxyStringRaw: localStorage.getItem(UI_RAW) || '',
+        ifExportsMode: false,
+
+        exportsStatus: '',
+        ifChangesStashedForApply: false,
+        stashedExports: false,
+
+        newType: 'HTTPS',
      };
-     // props.funs.setStatusTo('Hello from editor!');

      this.switchBtn = (
        <button
-          class={'emoji' + ' ' + scopedCss.export}
+          class={'emoji' + ' ' + scopedCss.export + ' ' + scopedCss.only}
          title="импорт/экспорт"
          onClick={linkEvent(this, this.handleModeSwitch)}
        >⇄</button>
@ -107,73 +150,221 @@ export default function getProxyEditor(theState) {
      
    }

-    handleModeSwitch(that) {
+    handleTextareaChange(that, event) {

-      that.setState({ ifExportMode: !that.state.ifExportMode });
+      that.setState({stashedExports: event.target.value});

    }
-    handleAdd(that) {
-
+    preventLostOfChanges() {

+      window.onbeforeunload = () => true; // TODO

    }

+    findErrorsForStashedExports() {
+
+      const valid = true;
+      if(this.state.stashedExports === false) {
+        return valid;
+      }
+      const errors = this.state.stashedExports.trim()
+        .split(/\s*;\s*/)
+        .filter((s) => s)
+        .map((proxyAsString) => {
+
+          const [rawType, addr] = proxyAsString.split(/\s+/);
+          const knownTypes = PROXY_TYPE_LABEL_PAIRS.map(([type, label]) => type);
+          if( !knownTypes.includes(rawType.toUpperCase()) ) {
+            return new Error(
+              `Неверный тип ${rawType}. Известные типы: ${knownTypes.join(', ')}.`
+            );
+          }
+          if (!(addr && /^[^:]+:\d+$/.test(addr))) {
+            return new Error(
+              `Адрес "${addr}" не соответствует формату "<домен_или_IP_прокси>:<порт_прокси_из_цифр>".`
+            );
+          }
+          const [hostname, rawPort] = addr.split(':');
+          const port = parseInt(rawPort);
+          if (port < 0 || port > 65535) {
+            return new Error(
+              `Порт ${port} должен быть целым числом от 0 до 65535.`
+            );
+          }
+          return false;
+
+        }).filter((e) => e);
+      return errors && errors.length ? errors : false;
+
+    }
+
+    handleModeSwitch(that, event) {
+      
+      event.preventDefault(); // No form submit.
+      let newProxyStringRaw = that.state.proxyStringRaw;
+
+      const doSwitch = () => that.setState({
+        ifExportsMode: !that.state.ifExportsMode,
+        proxyStirngRaw: newProxyStringRaw,
+        stashedExports: false,
+        exportsStatus: '',
+      });
+
+      if (that.state.stashedExports !== false) {
+
+        const errors = that.findErrorsForStashedExports();
+        if (!errors) {
+          newProxyStringRaw = that.state.stashedExports;
+        } else {
+          that.setState({exportsStatus: 'Имеются ошибки: <a href>[забыть]</a>?'});
+          return that.props.funs.showErrors(...errors);
+        }
+      }
+      doSwitch();
+
+    }
+
+    showInvalidMessage(that, event) {
+
+      that.props.funs.showErrors({message: event.target.validationMessage});
+
+    }
+
+    handleTypeSelect(that, event) {
+
+      that.state.newType = event.target.value;
+
+    }
+
+    handleSubmit(that, event) {
+
+      !that.state.ifExportsMode ? that.handleAdd(that, event) : that.handleModeSwitch(that, event);
+
+    }
+
+    handleAdd(that, event) {
+
+      const form = event.target;
+      const elements = Array.from(form.elements).reduce((acc, el, index) => {
+
+        acc[el.name || index] = el.value;
+        el.value = '';
+        return acc;
+
+      }, {});
+      const type = that.state.newType;
+      const hostname = elements.hostname;
+      const port = elements.port;
+
+      that.setState({proxyStringRaw: `${that.state.proxyStringRaw} ${type} ${hostname}:${port};`.trim()});
+
+      event.preventDefault();
+
+    }
    render(props) {

      return (
-        <form action="https://ya.ru">
+        <form onSubmit={linkEvent(this, this.handleSubmit)}>
          {
-            !this.state.ifExportMode
+            !this.state.ifExportsMode
            ? ((
              <table class={scopedCss.editor}>
                <thead>
                  <tr>
-                    <th>протокол</th> <th>домен</th> <th>порт</th> <th>{this.switchBtn}</th>
+                    <th>протокол</th> <th>домен / IP</th> <th>порт</th> <th>{this.switchBtn}</th>
                  </tr>
                </thead>
                <tbody>
-                  <tr>
-                    <td class={scopedCss.noPad}>
-                      <select reqiured class={scopedCss.noPad}>
-                        <option value="PROXY">HTTP/PROXY</option>
-                        <option value="HTTPS" selected>HTTPS</option>
-                        <option value="SOCKS4">SOCKS4</option>
-                        <option value="SOCKS5">SOCKS5</option>
-                        <option value="SOCKS">SOCKS</option>
+                  {/* ADD NEW PROXY STARTS. */}
+                  <tr class={scopedCss.addPanel}>
+                    <td>
+                      <select reqiured
+                        class={scopedCss.noPad}
+                        name="proxyType"
+                        onChange={linkEvent(this, this.handleTypeSelect)}
+                      >
+                        {
+                          PROXY_TYPE_LABEL_PAIRS.map(
+                            ([type, label]) =>
+                              (<option value={type} selected={type === this.state.newType}>
+                                {label || type}
+                              </option>)
+                          )
+                        }
                      </select>
                    </td>
-                    <td class={scopedCss.leftPadded}>
-                      <input required type="url" placeholder="89.140.125.17" pattern="https://[a]+\.ru" class={scopedCss.noPad}/>
-                    </td>
-                    <td class={scopedCss.leftPadded}>
-                      <input required type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/>
+                    <td>
+                      {/* LAST-2: HOSTNAME */}
+                      <input required
+                        class={scopedCss.noPad}
+                        placeholder="89.140.125.17" value={this.state.newHostname}
+                        name="hostname"
+                        onInvalid={linkEvent(this, this.showInvalidMessage)}
+                      />
                    </td>
                    <td>
-                      <button title="Повысить приоритет">↑</button>
-                      <br/>
-                      <input type="submit" class={scopedCss.add} title="Добавить прокси" onClick={linkEvent(this, this.handleAdd)} value="+"/>
+                      {/* LAST-1: PORT */}
+                      <input required type="number"
+                        class={scopedCss.noPad + ' ' + scopedCss.padLeft} style="min-width: 4em"
+                        placeholder="9150" value={this.state.newPort}
+                        min="0" step="1" max={MAX_PORT} pattern="[0-9]{1,5}"
+                        name="port"
+                        onInvalid={linkEvent(this, this.showInvalidMessage)}
+                        onkeydown={onlyPort}
+                      />
+                    </td>
+                    <td>
+                      {/* LAST */}
+                      <input type="submit" class={scopedCss.add + ' ' + scopedCss.only} title="Добавить прокси" value="+"/>
                    </td>
                  </tr>
+                  {/* ADD NEW PROXY ENDS. */}
+                  {
+                    this.state.proxyStringRaw.split(/\s*;\s*/g).filter((s) => s).map((proxyAsString) => {
+
+                      const [type, addr] = proxyAsString.trim().split(/\s/);
+                      const [hostname, port] = addr.split(':');
+                      return (
+                        <tr class={scopedCss.proxyRow}>
+                          <td>{type}</td><td>{hostname}</td><td>{port}</td>
+                          <td>
+                            <button title="Повысить приоритет">↑</button>
+                            <br/>
+                            <input type="submit" title="Удалить прокси" value="X"/>
+                          </td>
+                        </tr>
+                      );
+
+                    })
+                  }
                </tbody>
              </table>
+
            )) : ((
+
              <table class={scopedCss.editor}>
                <thead>
                  <tr>
-                    <th style="width: 100%">Прокси видят данные HTTP-сайтов!</th>
+                    <th style="width: 100%">{this.state.exportsStatus || 'Прокси видят содержимое HTTP-сайтов.'}</th>
                    <th style="width: 1%">{this.switchBtn}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
-                    <td colspan="2"><textarea class={scopedCss.textarea}
+                    <td colspan="2"><textarea
+                        class={scopedCss.textarea}
                        spellcheck={false}
                        placeholder={`
 SOCKS5 localhost:9050; # Tor Expert
 SOCKS5 localhost:9150; # Tor Browser
 HTTPS 11.22.33.44:3143;
 PROXY foobar.com:8080; # Not HTTP!`.trim()}
-                        value={this.state.proxyStringRaw}
+                        onChange={linkEvent(this, this.handleTextareaChange)}
+                        value={
+                          this.state.stashedExports !== false
+                            ? this.state.stashedExports
+                            : this.state.proxyStringRaw.replace(/\s*;\s*/g, ';\n')
+                        }
                      /></td>
                  </tr>
                </tbody>
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/globalCss.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/globalCss.js
@ -119,7 +119,7 @@ export default function append(document, { flags }) {
      justify-content: space-between;
      width: 100%;
    }
-    .horFlex input:not([type="button"]) {
+    .horFlex > input:not([type="button"]) {
      align-self: flex-end;
    }