From 4014f777e060410013d27e722eb1939ca5cda27c Mon Sep 17 00:00:00 2001 From: "Ilya Ig. Petrov" Date: Thu, 25 May 2017 04:08:04 -0700 Subject: [PATCH] ProxyEditor: switching works --- .../pages/options/src/components/App.js | 3 +- .../options/src/components/ProxyEditor.js | 478 ++++++++++-------- .../ProxyEditor.js__before-refactoring | 389 ++++++++++++++ 3 files changed, 668 insertions(+), 202 deletions(-) create mode 100644 extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js__before-refactoring diff --git 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 index f395ddc..44556c7 100644 --- 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 @@ -75,12 +75,13 @@ export default function getApp(theState) {
+ {' '} {err && { this.props.apis.errorHandlers.viewError('pup-ext-err', err); evt.preventDefault(); - }}> [Техн.детали]} + }}>[Техн.детали]} ), cb ); diff --git 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 index 96c8fc0..07ac384 100644 --- 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 @@ -1,5 +1,6 @@ import Inferno, {linkEvent} from 'inferno'; import Component from 'inferno-component'; +import createElement from 'inferno-create-element'; import css from 'csjs-inject'; export default function getProxyEditor(theState) { @@ -70,7 +71,7 @@ export default function getProxyEditor(theState) { right: 0; } table.editor .add { - font-weight: 900; + font-weight: 900; } table.editor .export { padding-right: 2px; @@ -98,8 +99,8 @@ export default function getProxyEditor(theState) { width: 100% !important; min-height: 100%; height: 6em; - /* border-width: 1px 0 0 0;*/ - border: none; + border-width: 1px 0 0 0; + /*border: none;*/ } table.editor input:invalid { @@ -124,104 +125,34 @@ export default function getProxyEditor(theState) { }; const PROXY_TYPE_LABEL_PAIRS = [['PROXY', 'PROXY/HTTP'],['HTTPS'],['SOCKS4'],['SOCKS5'],['SOCKS']]; - return class ProxyEditor extends Component { + + const SwitchButton = (props) => + ( + + ); + + class TabledEditor extends Component { constructor(props) { super(props); this.state = { - proxyStringRaw: localStorage.getItem(UI_RAW) || '', - ifExportsMode: false, - - exportsStatus: '', - ifChangesStashedForApply: false, - stashedExports: false, - - newType: 'HTTPS', + selectedNewType: 'HTTPS', }; - this.switchBtn = ( - - ); - } - handleTextareaChange(that, event) { + handleTypeSelect(that, event) { - that.setState({stashedExports: event.target.value}); - - } - 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: '', + that.setState({ + selectedNewType: event.target.value, }); - if (that.state.stashedExports !== false) { - - const errors = that.findErrorsForStashedExports(); - if (!errors) { - newProxyStringRaw = that.state.stashedExports; - } else { - that.setState({exportsStatus: 'Имеются ошибки: [забыть]?'}); - return that.props.funs.showErrors(...errors); - } - } - doSwitch(); - } showInvalidMessage(that, event) { @@ -230,20 +161,15 @@ export default function getProxyEditor(theState) { } - handleTypeSelect(that, event) { + handleModeSwitch(that) { - that.state.newType = event.target.value; - - } - - handleSubmit(that, event) { - - !that.state.ifExportsMode ? that.handleAdd(that, event) : that.handleModeSwitch(that, event); + that.props.onSwitch(); } handleAdd(that, event) { + console.log('ADD'); const form = event.target; const elements = Array.from(form.elements).reduce((acc, el, index) => { @@ -252,128 +178,278 @@ export default function getProxyEditor(theState) { return acc; }, {}); - const type = that.state.newType; + const type = that.state.selectedNewType; const hostname = elements.hostname; const port = elements.port; - that.setState({proxyStringRaw: `${that.state.proxyStringRaw} ${type} ${hostname}:${port};`.trim()}); - - event.preventDefault(); + console.log('AA', type, hostname, port); + that.props.updateProxyStringRaw( + `${that.props.proxyStringRaw} ${type} ${hostname}:${port};`.trim() + ); } + + handleSubmit(that, event) { + + console.log('SUB'); + event.preventDefault(); + that.handleAdd(that, event); + + } + render(props) { return (
- { - !this.state.ifExportsMode - ? (( - - - - - - - - {/* ADD NEW PROXY STARTS. */} - - - - - - - {/* ADD NEW PROXY ENDS. */} +
протокол домен / IP порт {this.switchBtn}
- - - {/* LAST-2: HOSTNAME */} - - - {/* LAST-1: PORT */} - - - {/* LAST */} - -
+ + + + + + + {/* ADD NEW PROXY STARTS. */} + + + + + + + {/* ADD NEW PROXY ENDS. */} + { + this.props.proxyStringRaw.split(/\s*;\s*/g).filter((s) => s).map((proxyAsString) => { + + const [type, addr] = proxyAsString.trim().split(/\s/); + const [hostname, port] = addr.split(':'); + return ( + + + + + ); + + }) + } + +
протокол домен / IP порт + +
+ + + {/* LAST-2: HOSTNAME */} + + + {/* LAST-1: PORT */} + + + {/* LAST: ADD BUTTON */} + +
{type}{hostname}{port} + +
+ {/**/} +
+
+ ); + } + } + + class ExportsEditor extends Component { + + constructor(props) { + super(props); + this.state = { + ifHasErrors: false, + stashedExports: false, + }; + } + + getErrorsInStashedExports() { + + if(this.state.stashedExports === false) { + return; + } + const errors = this.state.stashedExports.trim() + .replace(/#.*$/mg, '') + .split(/\s*;\s*/) + .filter((s) => s) + .map((proxyAsString) => { + + const [rawType, addr, ...rest] = proxyAsString.split(/\s+/); + if (rest && rest.length) { + return new Error( + `"${rest.join(', ')}" кажется мне лишним. Вы забыли ";"?` + ); + } + 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( + `Порт "${rawPort}" должен быть целым числом от 0 до 65535.` + ); + } + return false; + + }).filter((e) => e); + return errors && errors.length && errors; + + } + + handleModeSwitch(that, event) { + + if (that.state.stashedExports !== false) { + const errors = that.getErrorsInStashedExports(); + if (errors) { + that.setState({ifHasErrors: true}); + that.props.funs.showErrors(...errors); + return; + } + that.props.updateProxyStringRaw(that.state.stashedExports); + } + that.setState({ + stashedExports: false, + ifHasErrors: false, + }); + that.props.onSwitch(); + + } + + handleTextareaChange(that, event) { + + let newVal = event.target.value.trim(); + if (newVal && !newVal.endsWith(';')) { + newVal += ';'; + } + that.setState({stashedExports: newVal}); + + } + + handleSubmit(that, event) { + + event.preventDefault(); + this.handleModeSwitch(this, event); + + } + + render(props) { + + return ( +
+ + + + - - - - ); - - }) + this.state.stashedExports === false + ? 'Жду изменений...' + : (this.state.ifHasErrors + ? (Сбросьте изменения или поправьте) + : (Сбросить изменения) + ) } - -
{ - 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 ( -
{type}{hostname}{port} - -
- -
- - )) : (( - - - - - - - - - - -
{this.state.exportsStatus || 'Прокси видят содержимое HTTP-сайтов.'}{this.switchBtn}