diff --git a/src/components/app/nav.jsx b/src/components/app/nav.jsx index d21ebeb3..6368be71 100644 --- 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 = ( @@ -275,11 +277,16 @@ class AppNav extends Component { Gantt Chart Label Editing Reset Local Cache... + + Collaborative Settings + this.setState({showEPModal: true})}>Etherpad Server Settings... + {loginButton} + ); diff --git a/src/components/etherpad-modal.jsx b/src/components/etherpad-modal.jsx new file mode 100644 index 00000000..ada83bd5 --- /dev/null +++ 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 = ( + + Save + Clear + Cancel + + ); + + return ( + + + Etherpad server settings + + +
+

"Etherpad-lite Server URL"

+

+ If you need collaborative editing for issues, set an Etherpad-lite server's URL:
+ this._serverURL = r} + /> +

+

+ And also set the server's API key:
+ this._apikey = r} + /> +

+
+
+ + {footer} + +
+ ); + } +} + +export default EtherpadModal;