Introduce client settings

client/source/scripts/components/settings/ConnectivityTab.js

@@ -0,0 +1,115 @@
+import _ from 'lodash';
+import React from 'react';
+
+import Checkbox from '../forms/Checkbox';
+import SettingsTab from './SettingsTab';
+
+export default class ConnectivityTab extends SettingsTab {
+  constructor() {
+    super(...arguments);
+
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div className="form">
+        <div className="form__section">
+          <div className="form__section__heading">
+            Listening Port
+          </div>
+          <div className="form__row">
+            <div className="form__column form__column--small">
+              <label className="form__label">
+                Port Range
+              </label>
+              <input className="textbox" type="text"
+                onChange={this.handleClientSettingFieldChange.bind(this, 'networkPortRange')}
+                value={this.getFieldValue('networkPortRange')} />
+            </div>
+            <div className="form__column form__column--auto form__column--unlabled">
+              <Checkbox
+                checked={this.getFieldValue('networkPortRandom') === '1'}
+                onChange={this.handleClientSettingCheckboxChange.bind(this, 'networkPortRandom')}>
+                Randomize Port
+              </Checkbox>
+            </div>
+            <div className="form__column form__column--auto form__column--unlabled">
+              <Checkbox
+                checked={this.getFieldValue('networkPortOpen') === '1'}
+                onChange={this.handleClientSettingCheckboxChange.bind(this, 'networkPortOpen')}>
+                Open Port
+              </Checkbox>
+            </div>
+          </div>
+        </div>
+        <div className="form__section">
+          <div className="form__section__heading">
+            DHT
+          </div>
+          <div className="form__row">
+            <div className="form__column form__column--small">
+              <label className="form__label">
+                Port
+              </label>
+              <input className="textbox" type="text"
+                onChange={this.handleClientSettingFieldChange.bind(this, 'dhtPort')}
+                value={this.getFieldValue('dhtPort')} />
+            </div>
+          </div>
+        </div>
+        <div className="form__section">
+          <div className="form__section__heading">
+            Peers
+          </div>
+          <div className="form__row">
+            <div className="form__column">
+              <label className="form__label">
+                Minimum Peers
+              </label>
+              <input className="textbox" type="text"
+                onChange={this.handleClientSettingFieldChange.bind(this, 'throttleMinPeersNormal')}
+                value={this.getFieldValue('throttleMinPeersNormal')} />
+            </div>
+            <div className="form__column">
+              <label className="form__label">
+                Maximum Peers
+              </label>
+              <input className="textbox" type="text"
+                onChange={this.handleClientSettingFieldChange.bind(this, 'throttleMaxPeersNormal')}
+                value={this.getFieldValue('throttleMaxPeersNormal')} />
+            </div>
+          </div>
+          <div className="form__row">
+            <div className="form__column">
+              <label className="form__label">
+                Minimum Peers Seeding
+              </label>
+              <input className="textbox" type="text"
+                onChange={this.handleClientSettingFieldChange.bind(this, 'throttleMinPeersSeed')}
+                value={this.getFieldValue('throttleMinPeersSeed')} />
+            </div>
+            <div className="form__column">
+              <label className="form__label">
+                Maximum Peers Seeding
+              </label>
+              <input className="textbox" type="text"
+                onChange={this.handleClientSettingFieldChange.bind(this, 'throttleMaxPeersSeed')}
+                value={this.getFieldValue('throttleMaxPeersSeed')} />
+            </div>
+          </div>
+          <div className="form__row">
+            <div className="form__column form__column--half">
+              <label className="form__label">
+                Amount Desired
+              </label>
+              <input className="textbox" type="text"
+                onChange={this.handleClientSettingFieldChange.bind(this, 'trackersNumWant')}
+                value={this.getFieldValue('trackersNumWant')} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}