From f947164164edcbf3717b8b751df060b0a646fad1 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 29 Dec 2016 04:23:28 -0500
Subject: [PATCH] Add Developer Settings page

---
 js/app.js            |  3 +++
 js/page/developer.js | 56 ++++++++++++++++++++++++++++++++++++++++++++
 scss/_gui.scss       |  7 ++++++
 3 files changed, 66 insertions(+)
 create mode 100644 js/page/developer.js

diff --git a/js/app.js b/js/app.js
index 6232b8461..dae0b8596 100644
--- a/js/app.js
+++ b/js/app.js
@@ -13,6 +13,7 @@ import DetailPage from './page/show.js';
 import PublishPage from './page/publish.js';
 import DiscoverPage from './page/discover.js';
 import SplashScreen from './component/splash.js';
+import DeveloperPage from './page/developer.js';
 import Drawer from './component/drawer.js';
 import Header from './component/header.js';
 import Modal from './component/modal.js';
@@ -191,6 +192,8 @@ var App = React.createClass({
         return <DetailPage name={this.state.pageArgs} />;
       case 'publish':
         return <PublishPage />;
+      case 'developer':
+        return <DeveloperPage />;
       case 'discover':
       default:
         return <DiscoverPage query={this.state.pageArgs} />;
diff --git a/js/page/developer.js b/js/page/developer.js
new file mode 100644
index 000000000..447418191
--- /dev/null
+++ b/js/page/developer.js
@@ -0,0 +1,56 @@
+import lbry from '../lbry.js';
+import React from 'react';
+import FormField from '../component/form.js';
+
+const DeveloperPage = React.createClass({
+  getInitialState: function() {
+    return {
+      debugMode: lbry.getClientSetting('debug'),
+      useCustomLighthouseServers: lbry.getClientSetting('useCustomLighthouseServers'),
+      customLighthouseServers: lbry.getClientSetting('customLighthouseServers').join('\n'),
+    };
+  },
+  handleDebugModeChange: function(event) {
+    lbry.setClientSetting('debug', event.target.checked);
+    this.setState({
+      debugMode: event.target.checked,
+    });
+  },
+  handleUseCustomLighthouseServersChange: function(event) {
+    lbry.setClientSetting('useCustomLighthouseServers', event.target.checked);
+    this.setState({
+      useCustomLighthouseServers: event.target.checked,
+    });
+  },
+  handleCustomLighthouseServersChange: function(event) {
+    lbry.setClientSetting('customLighthouseServers', event.target.value.trim().split('\n'));
+    this.setState({
+      customLighthouseServers: event.target.value,
+    });
+  },
+  render: function() {
+    return (
+      <main>
+        <section className="card">
+          <h3>Developer Settings</h3>
+          <div className="form-row">
+            <label><FormField type="checkbox" onChange={this.handleDebugModeChange} checked={this.state.debugMode} /> Enable debug mode (exposes LBRY modules in global scope)</label>
+          </div>
+          <div className="form-row">
+            <label><FormField type="checkbox" onChange={this.handleUseCustomLighthouseServersChange} checked={this.state.useCustomLighthouseServers} /> Use custom search servers</label>
+          </div>
+          {this.state.useCustomLighthouseServers
+            ? <div className="form-row">
+                <label>
+                  Custom search servers (one per line)
+                  <div><FormField type="textarea" className="developer-page__custom-lighthouse-servers" value={this.state.customLighthouseServers} onChange={this.handleCustomLighthouseServersChange} checked={this.state.debugMode} /></div>
+                </label>
+              </div>
+            : null}
+        </section>
+      </main>
+    );
+  }
+});
+
+export default DeveloperPage;
diff --git a/scss/_gui.scss b/scss/_gui.scss
index e533b8504..936f17ccb 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -365,4 +365,11 @@ input[type="text"], input[type="search"]
 
 .download-started-modal__file-path {
   word-break: break-all;
+}
+
+
+.developer-page__custom-lighthouse-servers {
+  font: 0.8em monospace;
+  width: 30em;
+  height: 10em;
 }
\ No newline at end of file