Add etherpad configuration dialog

Related to #20 Related to #5
coala · Aug 1, 2018 · 0c569bc · 0c569bc
1 parent 333717b
commit 0c569bc
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 1 deletion.
diff --git a/src/components/app/nav.jsx b/src/components/app/nav.jsx
@@ -14,6 +14,7 @@ import LoginModal from '../login-modal';
 import LabelBadge from '../label-badge';
 import MoveModal from '../move-modal';
 import FilterDropdown from './filter-dropdown';
+import EtherpadModal from '../etherpad-modal';
 
 
 function SettingsItem(props) {
@@ -90,10 +91,11 @@ class AppNav extends Component {
   render() {
     let routeInfo = getFilters().getState();
     let {repoInfos} = routeInfo;
-    const {info, showModal} = this.state;
+    const {info, showModal, showEPModal} = this.state;
 
     // Note: The dashboard page does not have a list of repos
     const close = () => this.setState({ showModal: false});
+    const closeEP = () => this.setState({showEPModal: false});
 
     const brand = (
       <Link to={buildRoute('dashboard')}><HomeIcon/></Link>
@@ -275,11 +277,16 @@ class AppNav extends Component {
               <SettingsItem key='gantt-chart' to={getFilters().setRouteName('gantt').url()}><GraphIcon/> Gantt Chart</SettingsItem>
               <SettingsItem key='label-editing' to={getFilters().setRouteName('labels').url()}><TagIcon/> Label Editing</SettingsItem>
               <BS.MenuItem key='reset-databases' onClick={this.promptAndResetDatabases}>Reset Local Cache...</BS.MenuItem>
+              <BS.MenuItem key='divider4' divider/>
+              <BS.MenuItem key='collaborative-settings' header>Collaborative Settings</BS.MenuItem>
+              <BS.MenuItem key='server-setting' onClick={() => this.setState({showEPModal: true})}>Etherpad Server Settings...</BS.MenuItem>
+
             </BS.NavDropdown>
             {loginButton}
           </BS.Nav>
         </BS.Navbar>
         <LoginModal show={showModal} container={this} onHide={close}/>
+        <EtherpadModal show={showEPModal} container={this} onHide={closeEP}/>
         <MoveModal container={this}/>
       </div>
     );

diff --git a/src/components/etherpad-modal.jsx b/src/components/etherpad-modal.jsx
@@ -0,0 +1,96 @@
+import {Component} from 'react';
+import * as BS from 'react-bootstrap';
+
+class EtherpadModal extends Component {
+  static displayName = 'Etherpad';
+  onSave = () => {
+    let serverURLVal = this._serverURL.value;
+    if (serverURLVal) {
+      serverURLVal = serverURLVal.trim();
+    }
+    this.setURLSettings(serverURLVal);
+    let apikey = this._apikey.value;
+    if (apikey) {
+      apikey = apikey.trim();
+    }
+    this.setAPIkey(apikey);
+    this.onCancel();
+  }
+  onClear = () => {
+    this.setURLSettings(null);
+    this.setAPIkey(null);
+    this.setState({});
+  }
+  onCancel = () => {
+    this.props.onHide();
+  }
+  getSettings = () => {
+    return {
+      serverURL: window.localStorage.getItem('ep-url'),
+      apikey: window.localStorage.getItem('ep-apikey')
+    };
+  }
+  setURLSettings = (url) => {
+    if (url) {
+      window.localStorage.setItem('ep-url', url);
+    } else {
+      window.localStorage.removeItem('ep-url');
+    }
+  }
+  setAPIkey = (key) => {
+    if (key) {
+      window.localStorage.setItem('ep-apikey', key);
+    } else {
+      window.localStorage.removeItem('ep-apikey');
+    }
+  }
+  render() {
+    const {serverURL, apikey} = this.getSettings();
+
+    const footer = (
+      <span>
+        <BS.Button bsStyle='primary' onClick={this.onSave}>Save</BS.Button>
+        <BS.Button bsStyle='default' onClick={this.onClear}>Clear</BS.Button>
+        <BS.Button bsStyle='default' onClick={this.onCancel}>Cancel</BS.Button>
+      </span>
+    );
+
+    return (
+      <BS.Modal {...this.props}>
+        <BS.Modal.Header closeButton>
+          <BS.Modal.Title>Etherpad server settings</BS.Modal.Title>
+        </BS.Modal.Header>
+        <BS.ModalBody>
+        <div className='github-token-instructions'>
+          <h4>"Etherpad-lite Server URL"</h4>
+          <p>
+            If you need collaborative editing for issues, set an Etherpad-lite server's URL:<br/>
+            <BS.FormControl
+              type='text'
+              defaultValue={serverURL}
+              disabled={!!serverURL}
+              placeholder='Enter Etherpad server URL (e.g. http://server.etherpad.com:8080)'
+              inputRef={r => this._serverURL = r}
+            />
+          </p>
+          <p>
+            And also set the server's API key:<br/>
+            <BS.FormControl
+              type='text'
+              defaultValue={apikey}
+              disabled={!!apikey}
+              placeholder='Enter Etherpad API key'
+              inputRef={r => this._apikey = r}
+            />
+          </p>
+        </div>
+        </BS.ModalBody>
+        <BS.Modal.Footer className='modal-footer'>
+          {footer}
+        </BS.Modal.Footer>
+      </BS.Modal>
+    );
+  }
+}
+
+export default EtherpadModal;