mirror of
https://github.com/anticensority/runet-censorship-bypass.git
synced 2024-11-24 02:13:43 +03:00
ProxyEditor: Fix visual issues, start work on behavior
This commit is contained in:
Ilya Ig. Petrov
parent
190bb1fd08
commit
f7bf989165
|
|
@ -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
|
||||
);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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})}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{/* 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 class={scopedCss.leftPadded}>
|
||||
<input required type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/>
|
||||
<td>
|
||||
{/* 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" class={scopedCss.add} title="Добавить прокси" onClick={linkEvent(this, this.handleAdd)} value="+"/>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user