ProxyEditor: Fix visual issues, start work on behavior

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
       );
 
     }

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',

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})}

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 {
+    .only {
-      font-weight: 800;	
+      /*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),
+    /* LAST COLUMN: BUTTONS */
-    table.editor td:nth-last-child(1) {
+    table.editor tr > *:nth-last-child(1) {
-      height: 100%;
-      /*border: 0;*/
-      padding: 0;
       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,88 +130,241 @@ export default function getProxyEditor(theState) {
 
       super(props);
       this.state = {
-        proxyStringRaw: localStorage.getItem(uiRaw) || '',
+        proxyStringRaw: localStorage.getItem(UI_RAW) || '',
-        ifExportMode: false,
+        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>
       );
-
-    }
-
-    handleModeSwitch(that) {
       
-      that.setState({ ifExportMode: !that.state.ifExportMode });
+    }
+
+    handleTextareaChange(that, event) {
+
+      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>
+                  {/* ADD NEW PROXY STARTS. */}
-                    <td class={scopedCss.noPad}>
+                  <tr class={scopedCss.addPanel}>
-                      <select reqiured class={scopedCss.noPad}>
+                    <td>
-                        <option value="PROXY">HTTP/PROXY</option>
+                      <select reqiured
-                        <option value="HTTPS" selected>HTTPS</option>
+                        class={scopedCss.noPad}
-                        <option value="SOCKS4">SOCKS4</option>
+                        name="proxyType"
-                        <option value="SOCKS5">SOCKS5</option>
+                        onChange={linkEvent(this, this.handleTypeSelect)}
-                        <option value="SOCKS">SOCKS</option>
+                      >
+                        {
+                          PROXY_TYPE_LABEL_PAIRS.map(
+                            ([type, label]) =>
+                              (<option value={type} selected={type === this.state.newType}>
+                                {label || type}
+                              </option>)
+                          )
+                        }
                       </select>
                     </td>
-                    <td class={scopedCss.leftPadded}>
+                    <td>
-                      <input required type="url" placeholder="89.140.125.17" pattern="https://[a]+\.ru" class={scopedCss.noPad}/>
+                      {/* LAST-2: HOSTNAME */}
-                    </td>
+                      <input required
-                    <td class={scopedCss.leftPadded}>
+                        class={scopedCss.noPad}
-                      <input required type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/>
+                        placeholder="89.140.125.17" value={this.state.newHostname}
+                        name="hostname"
+                        onInvalid={linkEvent(this, this.showInvalidMessage)}
+                      />
                     </td>
                     <td>
-                      <button title="Повысить приоритет">↑</button>
+                      {/* LAST-1: PORT */}
-                      <br/>
+                      <input required type="number"
-                      <input type="submit" class={scopedCss.add} title="Добавить прокси" onClick={linkEvent(this, this.handleAdd)} value="+"/>
+                        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>

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;
     }