2016-11-01 07:46:13 -07:00
|
|
|
|
const React = require('react');
|
2016-12-10 11:27:09 -08:00
|
|
|
|
const ReactDOM = require('react-dom');
|
2017-02-01 08:19:46 -08:00
|
|
|
|
const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
|
2016-11-01 07:46:13 -07:00
|
|
|
|
|
|
|
|
|
const {ipcRenderer, remote} = require('electron');
|
|
|
|
|
const AutoLaunch = require('auto-launch');
|
2017-02-15 05:07:10 -08:00
|
|
|
|
const {debounce} = require('underscore');
|
2016-11-01 07:46:13 -07:00
|
|
|
|
|
|
|
|
|
const settings = require('../../common/settings');
|
|
|
|
|
|
|
|
|
|
const TeamList = require('./TeamList.jsx');
|
2017-02-15 05:07:10 -08:00
|
|
|
|
const AutoSaveIndicator = require('./AutoSaveIndicator.jsx');
|
2016-11-01 07:46:13 -07:00
|
|
|
|
|
|
|
|
|
const appLauncher = new AutoLaunch({
|
|
|
|
|
name: 'Mattermost',
|
|
|
|
|
isHidden: true
|
|
|
|
|
});
|
|
|
|
|
|
2017-01-29 04:40:20 -08:00
|
|
|
|
function backToIndex(index) {
|
|
|
|
|
const target = typeof index === 'undefined' ? 0 : index;
|
|
|
|
|
remote.getCurrentWindow().loadURL(`file://${__dirname}/index.html?index=${target}`);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const SettingsPage = React.createClass({
|
|
|
|
|
propTypes: {
|
|
|
|
|
configFile: React.PropTypes.string
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getInitialState() {
|
|
|
|
|
var initialState;
|
|
|
|
|
try {
|
|
|
|
|
initialState = settings.readFileSync(this.props.configFile);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
initialState = settings.loadDefault();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
initialState.showAddTeamForm = false;
|
|
|
|
|
initialState.trayWasVisible = remote.getCurrentWindow().trayWasVisible;
|
2017-01-29 03:28:10 -08:00
|
|
|
|
initialState.disableClose = initialState.teams.length === 0;
|
2017-02-13 03:23:02 -08:00
|
|
|
|
if (initialState.teams.length === 0) {
|
|
|
|
|
initialState.showAddTeamForm = true;
|
|
|
|
|
}
|
2017-02-15 05:07:10 -08:00
|
|
|
|
initialState.savingState = 'done';
|
2016-11-01 07:46:13 -07:00
|
|
|
|
|
|
|
|
|
return initialState;
|
|
|
|
|
},
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
if (process.platform === 'win32' || process.platform === 'linux') {
|
|
|
|
|
var self = this;
|
|
|
|
|
appLauncher.isEnabled().then((enabled) => {
|
|
|
|
|
self.setState({
|
|
|
|
|
autostart: enabled
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
2017-01-30 13:16:16 -08:00
|
|
|
|
ipcRenderer.on('add-server', () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
showAddTeamForm: true
|
|
|
|
|
});
|
|
|
|
|
});
|
2017-02-21 03:07:46 -08:00
|
|
|
|
ipcRenderer.on('switch-tab', (event, key) => {
|
|
|
|
|
backToIndex(key);
|
|
|
|
|
});
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
2017-02-15 05:07:10 -08:00
|
|
|
|
|
|
|
|
|
setSavingState(state) {
|
2017-02-16 04:55:44 -08:00
|
|
|
|
if (!this.setSavingStateSaved) {
|
|
|
|
|
this.setSavingStateSaved = debounce(() => {
|
|
|
|
|
this.saveConfig((err) => {
|
|
|
|
|
if (err) {
|
|
|
|
|
this.setState({savingState: 'error'});
|
|
|
|
|
} else {
|
|
|
|
|
this.setState({savingState: 'saved'});
|
|
|
|
|
}
|
|
|
|
|
this.setSavingStateDoneTimer = setTimeout(this.setState.bind(this, {savingState: 'done'}), 2000);
|
|
|
|
|
});
|
|
|
|
|
}, 500);
|
|
|
|
|
}
|
|
|
|
|
if (this.setSavingStateDoneTimer) {
|
|
|
|
|
clearTimeout(this.setSavingStateDoneTimer);
|
|
|
|
|
this.setSavingStateDoneTimer = null;
|
2017-02-15 05:07:10 -08:00
|
|
|
|
}
|
|
|
|
|
this.setState({savingState: state});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
if (state === 'saving') {
|
|
|
|
|
this.setSavingStateSaved();
|
2017-02-15 05:07:10 -08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2017-02-16 04:55:44 -08:00
|
|
|
|
startSaveConfig() {
|
|
|
|
|
this.setSavingState('saving');
|
|
|
|
|
},
|
|
|
|
|
|
2016-11-01 07:46:13 -07:00
|
|
|
|
handleTeamsChange(teams) {
|
|
|
|
|
this.setState({
|
|
|
|
|
showAddTeamForm: false,
|
|
|
|
|
teams
|
|
|
|
|
});
|
2017-02-13 03:23:02 -08:00
|
|
|
|
if (teams.length === 0) {
|
|
|
|
|
this.setState({showAddTeamForm: true});
|
|
|
|
|
}
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
2017-02-16 04:55:44 -08:00
|
|
|
|
|
|
|
|
|
saveConfig(callback) {
|
2016-11-01 07:46:13 -07:00
|
|
|
|
var config = {
|
|
|
|
|
teams: this.state.teams,
|
|
|
|
|
showTrayIcon: this.state.showTrayIcon,
|
|
|
|
|
trayIconTheme: this.state.trayIconTheme,
|
|
|
|
|
disablewebsecurity: this.state.disablewebsecurity,
|
|
|
|
|
version: settings.version,
|
|
|
|
|
minimizeToTray: this.state.minimizeToTray,
|
|
|
|
|
notifications: {
|
|
|
|
|
flashWindow: this.state.notifications.flashWindow
|
|
|
|
|
},
|
|
|
|
|
showUnreadBadge: this.state.showUnreadBadge
|
|
|
|
|
};
|
|
|
|
|
|
2017-02-16 04:55:44 -08:00
|
|
|
|
settings.writeFile(this.props.configFile, config, (err) => {
|
|
|
|
|
if (err) {
|
|
|
|
|
callback(err);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2017-02-17 07:22:16 -08:00
|
|
|
|
ipcRenderer.send('update-menu', config);
|
|
|
|
|
ipcRenderer.send('update-config');
|
2017-02-16 04:55:44 -08:00
|
|
|
|
if (process.platform === 'win32' || process.platform === 'linux') {
|
|
|
|
|
const autostart = this.state.autostart;
|
|
|
|
|
this.saveAutoStart(autostart, callback);
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
});
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
2017-02-16 04:55:44 -08:00
|
|
|
|
|
|
|
|
|
saveAutoStart(autostart, callback) {
|
|
|
|
|
appLauncher.isEnabled().then((enabled) => {
|
|
|
|
|
if (enabled && !autostart) {
|
|
|
|
|
appLauncher.disable().then(() => {
|
|
|
|
|
callback();
|
|
|
|
|
}).catch(callback);
|
|
|
|
|
} else if (!enabled && autostart) {
|
|
|
|
|
appLauncher.enable().then(() => {
|
|
|
|
|
callback();
|
|
|
|
|
}).catch(callback);
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
}).catch(callback);
|
|
|
|
|
},
|
|
|
|
|
|
2016-11-01 07:46:13 -07:00
|
|
|
|
handleCancel() {
|
|
|
|
|
backToIndex();
|
|
|
|
|
},
|
|
|
|
|
handleChangeDisableWebSecurity() {
|
|
|
|
|
this.setState({
|
2017-02-01 07:04:48 -08:00
|
|
|
|
disablewebsecurity: this.refs.disablewebsecurity.props.checked
|
2016-11-01 07:46:13 -07:00
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2017-02-15 05:07:10 -08:00
|
|
|
|
},
|
2016-11-01 07:46:13 -07:00
|
|
|
|
handleChangeShowTrayIcon() {
|
2016-11-02 08:35:07 -07:00
|
|
|
|
var shouldShowTrayIcon = !this.refs.showTrayIcon.props.checked;
|
2016-11-01 07:46:13 -07:00
|
|
|
|
this.setState({
|
|
|
|
|
showTrayIcon: shouldShowTrayIcon
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (process.platform === 'darwin' && !shouldShowTrayIcon) {
|
|
|
|
|
this.setState({
|
|
|
|
|
minimizeToTray: false
|
|
|
|
|
});
|
|
|
|
|
}
|
2017-02-15 05:07:10 -08:00
|
|
|
|
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
|
|
|
|
handleChangeTrayIconTheme() {
|
|
|
|
|
this.setState({
|
2016-12-10 11:27:09 -08:00
|
|
|
|
trayIconTheme: ReactDOM.findDOMNode(this.refs.trayIconTheme).value
|
2016-11-01 07:46:13 -07:00
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
|
|
|
|
handleChangeAutoStart() {
|
|
|
|
|
this.setState({
|
2016-11-02 08:35:07 -07:00
|
|
|
|
autostart: !this.refs.autostart.props.checked
|
2016-11-01 07:46:13 -07:00
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
|
|
|
|
handleChangeMinimizeToTray() {
|
2016-12-06 08:06:59 -08:00
|
|
|
|
const shouldMinimizeToTray = this.state.showTrayIcon && !this.refs.minimizeToTray.props.checked;
|
2016-11-01 07:46:13 -07:00
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
minimizeToTray: shouldMinimizeToTray
|
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
|
|
|
|
toggleShowTeamForm() {
|
|
|
|
|
this.setState({
|
|
|
|
|
showAddTeamForm: !this.state.showAddTeamForm
|
|
|
|
|
});
|
|
|
|
|
},
|
2017-01-31 06:26:20 -08:00
|
|
|
|
setShowTeamFormVisibility(val) {
|
|
|
|
|
this.setState({
|
|
|
|
|
showAddTeamForm: val
|
|
|
|
|
});
|
|
|
|
|
},
|
2016-11-01 07:46:13 -07:00
|
|
|
|
handleFlashWindow() {
|
|
|
|
|
this.setState({
|
|
|
|
|
notifications: {
|
2016-11-02 08:35:07 -07:00
|
|
|
|
flashWindow: this.refs.flashWindow.props.checked ? 0 : 2
|
2016-11-01 07:46:13 -07:00
|
|
|
|
}
|
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
|
|
|
|
handleShowUnreadBadge() {
|
|
|
|
|
this.setState({
|
2016-11-02 08:35:07 -07:00
|
|
|
|
showUnreadBadge: !this.refs.showUnreadBadge.props.checked
|
2016-11-01 07:46:13 -07:00
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
2017-01-30 12:58:55 -08:00
|
|
|
|
|
|
|
|
|
updateTeam(index, newData) {
|
|
|
|
|
var teams = this.state.teams;
|
|
|
|
|
teams[index] = newData;
|
|
|
|
|
this.setState({
|
|
|
|
|
teams
|
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2017-01-30 12:58:55 -08:00
|
|
|
|
},
|
|
|
|
|
|
2017-01-30 13:16:16 -08:00
|
|
|
|
addServer(team) {
|
2017-01-30 12:58:55 -08:00
|
|
|
|
var teams = this.state.teams;
|
|
|
|
|
teams.push(team);
|
|
|
|
|
this.setState({
|
|
|
|
|
teams
|
|
|
|
|
});
|
2017-02-16 04:55:44 -08:00
|
|
|
|
setImmediate(this.startSaveConfig);
|
2017-01-30 12:58:55 -08:00
|
|
|
|
},
|
|
|
|
|
|
2016-11-01 07:46:13 -07:00
|
|
|
|
render() {
|
|
|
|
|
var teamsRow = (
|
|
|
|
|
<Row>
|
|
|
|
|
<Col md={12}>
|
|
|
|
|
<TeamList
|
|
|
|
|
teams={this.state.teams}
|
|
|
|
|
showAddTeamForm={this.state.showAddTeamForm}
|
2017-01-16 14:51:28 -08:00
|
|
|
|
toggleAddTeamForm={this.toggleShowTeamForm}
|
2017-01-31 06:26:20 -08:00
|
|
|
|
setAddTeamFormVisibility={this.setShowTeamFormVisibility}
|
2016-11-01 07:46:13 -07:00
|
|
|
|
onTeamsChange={this.handleTeamsChange}
|
2017-01-30 12:58:55 -08:00
|
|
|
|
updateTeam={this.updateTeam}
|
2017-01-30 13:16:16 -08:00
|
|
|
|
addServer={this.addServer}
|
2017-02-15 05:07:10 -08:00
|
|
|
|
onTeamClick={backToIndex}
|
2016-11-01 07:46:13 -07:00
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
var options = [];
|
|
|
|
|
|
2017-02-01 07:04:48 -08:00
|
|
|
|
// MacOS has an option in the Dock, to set the app to autostart, so we choose to not support this option for OSX
|
2016-11-01 07:46:13 -07:00
|
|
|
|
if (process.platform === 'win32' || process.platform === 'linux') {
|
|
|
|
|
options.push(
|
2016-11-02 08:35:07 -07:00
|
|
|
|
<Checkbox
|
2016-11-01 07:46:13 -07:00
|
|
|
|
key='inputAutoStart'
|
|
|
|
|
id='inputAutoStart'
|
|
|
|
|
ref='autostart'
|
|
|
|
|
checked={this.state.autostart}
|
|
|
|
|
onChange={this.handleChangeAutoStart}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
>{'Start app on login'}
|
|
|
|
|
<HelpBlock>
|
2017-02-12 14:26:34 -08:00
|
|
|
|
{'If enabled, the app starts automatically when you log in to your machine.'}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
{' '}
|
|
|
|
|
{'The app will initially start minimized and appear on the taskbar.'}
|
|
|
|
|
</HelpBlock>
|
|
|
|
|
</Checkbox>);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
}
|
|
|
|
|
|
2017-02-01 07:04:48 -08:00
|
|
|
|
options.push(
|
|
|
|
|
<Checkbox
|
|
|
|
|
key='inputDisableWebSecurity'
|
|
|
|
|
id='inputDisableWebSecurity'
|
|
|
|
|
ref='disablewebsecurity'
|
|
|
|
|
checked={!this.state.disablewebsecurity}
|
|
|
|
|
onChange={this.handleChangeDisableWebSecurity}
|
|
|
|
|
>{'Display secure content only'}
|
|
|
|
|
<HelpBlock>
|
2017-02-12 14:26:34 -08:00
|
|
|
|
{'If enabled, the app only displays secure (HTTPS/SSL) content.'}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
{' '}
|
2017-02-12 14:26:34 -08:00
|
|
|
|
{'If disabled, the app displays secure and non-secure (HTTP) content such as images.'}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
</HelpBlock>
|
|
|
|
|
</Checkbox>);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
|
|
|
|
|
if (process.platform === 'darwin' || process.platform === 'win32') {
|
|
|
|
|
options.push(
|
2016-11-02 08:35:07 -07:00
|
|
|
|
<Checkbox
|
2016-11-01 07:46:13 -07:00
|
|
|
|
key='inputShowUnreadBadge'
|
|
|
|
|
id='inputShowUnreadBadge'
|
|
|
|
|
ref='showUnreadBadge'
|
|
|
|
|
checked={this.state.showUnreadBadge}
|
|
|
|
|
onChange={this.handleShowUnreadBadge}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
>{'Show red badge on taskbar icon to indicate unread messages'}
|
|
|
|
|
<HelpBlock>
|
|
|
|
|
{'Regardless of this setting, mentions are always indicated with a red badge and item count on the taskbar icon.'}
|
|
|
|
|
</HelpBlock>
|
|
|
|
|
</Checkbox>);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (process.platform === 'win32' || process.platform === 'linux') {
|
|
|
|
|
options.push(
|
2016-11-02 08:35:07 -07:00
|
|
|
|
<Checkbox
|
2016-11-01 07:46:13 -07:00
|
|
|
|
key='flashWindow'
|
|
|
|
|
id='inputflashWindow'
|
|
|
|
|
ref='flashWindow'
|
|
|
|
|
checked={this.state.notifications.flashWindow === 2}
|
|
|
|
|
onChange={this.handleFlashWindow}
|
2017-02-22 07:24:19 -08:00
|
|
|
|
>{'Flash app window and taskbar icon when a new message is received'}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
<HelpBlock>
|
2017-02-22 07:24:19 -08:00
|
|
|
|
{'If enabled, app window and taskbar icon flashes for a few seconds when a new message is received.'}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
</HelpBlock>
|
|
|
|
|
</Checkbox>);
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-01 07:46:13 -07:00
|
|
|
|
if (process.platform === 'darwin' || process.platform === 'linux') {
|
|
|
|
|
options.push(
|
2016-11-02 08:35:07 -07:00
|
|
|
|
<Checkbox
|
2016-11-01 07:46:13 -07:00
|
|
|
|
key='inputShowTrayIcon'
|
|
|
|
|
id='inputShowTrayIcon'
|
|
|
|
|
ref='showTrayIcon'
|
|
|
|
|
checked={this.state.showTrayIcon}
|
|
|
|
|
onChange={this.handleChangeShowTrayIcon}
|
2016-11-02 08:35:07 -07:00
|
|
|
|
>{process.platform === 'darwin' ?
|
2017-02-01 07:04:48 -08:00
|
|
|
|
'Show Mattermost icon in the menu bar' :
|
|
|
|
|
'Show icon in the notification area'}
|
|
|
|
|
<HelpBlock>
|
|
|
|
|
{'Setting takes effect after restarting the app.'}
|
|
|
|
|
</HelpBlock>
|
|
|
|
|
</Checkbox>);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
}
|
|
|
|
|
if (process.platform === 'linux') {
|
|
|
|
|
options.push(
|
2017-02-01 07:55:56 -08:00
|
|
|
|
<FormGroup
|
|
|
|
|
key='trayIconTheme'
|
|
|
|
|
style={{marginLeft: '20px'}}
|
|
|
|
|
>
|
|
|
|
|
{'Icon theme: '}
|
|
|
|
|
<Radio
|
|
|
|
|
inline={true}
|
|
|
|
|
name='trayIconTheme'
|
|
|
|
|
value='light'
|
|
|
|
|
defaultChecked={this.state.trayIconTheme === 'light' || this.state.trayIconTheme === ''}
|
|
|
|
|
onChange={() => {
|
|
|
|
|
this.setState({trayIconTheme: 'light'});
|
|
|
|
|
}}
|
|
|
|
|
>{'Light'}</Radio>
|
|
|
|
|
{' '}
|
|
|
|
|
<Radio
|
|
|
|
|
inline={true}
|
|
|
|
|
name='trayIconTheme'
|
|
|
|
|
value='dark'
|
|
|
|
|
defaultChecked={this.state.trayIconTheme === 'dark'}
|
|
|
|
|
onChange={() => {
|
|
|
|
|
this.setState({trayIconTheme: 'dark'});
|
|
|
|
|
}}
|
|
|
|
|
>{'Dark'}</Radio>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
}
|
|
|
|
|
|
2017-02-01 06:32:07 -08:00
|
|
|
|
if (process.platform === 'linux') {
|
2016-11-01 07:46:13 -07:00
|
|
|
|
options.push(
|
2016-11-02 08:35:07 -07:00
|
|
|
|
<Checkbox
|
2016-11-01 07:46:13 -07:00
|
|
|
|
key='inputMinimizeToTray'
|
|
|
|
|
id='inputMinimizeToTray'
|
|
|
|
|
ref='minimizeToTray'
|
|
|
|
|
disabled={!this.state.showTrayIcon || !this.state.trayWasVisible}
|
|
|
|
|
checked={this.state.minimizeToTray}
|
|
|
|
|
onChange={this.handleChangeMinimizeToTray}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
>
|
|
|
|
|
{'Leave app running in notification area when application window is closed'}
|
|
|
|
|
<HelpBlock>
|
2017-02-12 14:26:34 -08:00
|
|
|
|
{'If enabled, the app stays running in the notification area after app window is closed.'}
|
2017-02-01 07:04:48 -08:00
|
|
|
|
{this.state.trayWasVisible || !this.state.showTrayIcon ? '' : ' Setting takes effect after restarting the app.'}
|
|
|
|
|
</HelpBlock>
|
|
|
|
|
</Checkbox>);
|
2016-11-01 07:46:13 -07:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const settingsPage = {
|
|
|
|
|
navbar: {
|
|
|
|
|
backgroundColor: '#fff'
|
|
|
|
|
},
|
|
|
|
|
close: {
|
2017-01-29 03:28:10 -08:00
|
|
|
|
textDecoration: 'none',
|
2016-11-01 07:46:13 -07:00
|
|
|
|
position: 'absolute',
|
|
|
|
|
right: '0',
|
2017-01-29 03:28:10 -08:00
|
|
|
|
top: '5px',
|
2016-11-01 07:46:13 -07:00
|
|
|
|
fontSize: '35px',
|
|
|
|
|
fontWeight: 'normal',
|
2017-01-29 03:28:10 -08:00
|
|
|
|
color: '#bbb'
|
2016-11-01 07:46:13 -07:00
|
|
|
|
},
|
|
|
|
|
heading: {
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
fontSize: '24px',
|
|
|
|
|
margin: '0',
|
|
|
|
|
padding: '1em 0'
|
|
|
|
|
},
|
|
|
|
|
sectionHeading: {
|
|
|
|
|
fontSize: '20px',
|
|
|
|
|
margin: '0',
|
|
|
|
|
padding: '1em 0'
|
|
|
|
|
},
|
|
|
|
|
sectionHeadingLink: {
|
|
|
|
|
marginTop: '24px',
|
|
|
|
|
display: 'inline-block',
|
|
|
|
|
fontSize: '15px'
|
|
|
|
|
},
|
|
|
|
|
footer: {
|
|
|
|
|
padding: '0.4em 0'
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var optionsRow = (options.length > 0) ? (
|
|
|
|
|
<Row>
|
|
|
|
|
<Col md={12}>
|
2017-02-03 04:15:07 -08:00
|
|
|
|
<h2 style={settingsPage.sectionHeading}>{'App Options'}</h2>
|
2016-11-02 08:35:07 -07:00
|
|
|
|
{ options.map((opt, i) => (
|
|
|
|
|
<FormGroup key={`fromGroup${i}`}>
|
|
|
|
|
{opt}
|
|
|
|
|
</FormGroup>
|
|
|
|
|
)) }
|
2016-11-01 07:46:13 -07:00
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Navbar
|
|
|
|
|
className='navbar-fixed-top'
|
|
|
|
|
style={settingsPage.navbar}
|
|
|
|
|
>
|
2017-02-16 03:56:45 -08:00
|
|
|
|
<div className='IndicatorContainer'>
|
2017-02-17 05:24:55 -08:00
|
|
|
|
<AutoSaveIndicator
|
|
|
|
|
savingState={this.state.savingState}
|
|
|
|
|
errorMessage={'Can\'t save your changes. Please try again.'}
|
|
|
|
|
/>
|
2017-02-16 03:56:45 -08:00
|
|
|
|
</div>
|
2016-11-01 07:46:13 -07:00
|
|
|
|
<div style={{position: 'relative'}}>
|
|
|
|
|
<h1 style={settingsPage.heading}>{'Settings'}</h1>
|
2017-01-29 03:28:10 -08:00
|
|
|
|
<Button
|
2017-02-15 05:44:51 -08:00
|
|
|
|
id='btnClose'
|
2017-01-29 03:28:10 -08:00
|
|
|
|
bsStyle='link'
|
2016-11-01 07:46:13 -07:00
|
|
|
|
style={settingsPage.close}
|
2017-01-29 03:28:10 -08:00
|
|
|
|
onClick={this.handleCancel}
|
|
|
|
|
disabled={this.state.disableClose}
|
2016-11-01 07:46:13 -07:00
|
|
|
|
>
|
|
|
|
|
<span>{'×'}</span>
|
2017-01-29 03:28:10 -08:00
|
|
|
|
</Button>
|
2016-11-01 07:46:13 -07:00
|
|
|
|
</div>
|
|
|
|
|
</Navbar>
|
|
|
|
|
<Grid
|
|
|
|
|
className='settingsPage'
|
2017-02-15 05:07:10 -08:00
|
|
|
|
style={{paddingTop: '100px'}}
|
2016-11-01 07:46:13 -07:00
|
|
|
|
>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col
|
|
|
|
|
md={10}
|
|
|
|
|
xs={8}
|
|
|
|
|
>
|
2017-01-27 05:50:17 -08:00
|
|
|
|
<h2 style={settingsPage.sectionHeading}>{'Server Management'}</h2>
|
2016-11-01 07:46:13 -07:00
|
|
|
|
</Col>
|
|
|
|
|
<Col
|
|
|
|
|
md={2}
|
|
|
|
|
xs={4}
|
|
|
|
|
>
|
|
|
|
|
<p className='text-right'>
|
|
|
|
|
<a
|
|
|
|
|
style={settingsPage.sectionHeadingLink}
|
2017-01-16 14:51:28 -08:00
|
|
|
|
id='addNewServer'
|
2016-11-01 07:46:13 -07:00
|
|
|
|
href='#'
|
|
|
|
|
onClick={this.toggleShowTeamForm}
|
2017-01-27 05:50:17 -08:00
|
|
|
|
>{'⊞ Add new server'}</a>
|
2016-11-01 07:46:13 -07:00
|
|
|
|
</p>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
{ teamsRow }
|
|
|
|
|
<hr/>
|
|
|
|
|
{ optionsRow }
|
|
|
|
|
</Grid>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
module.exports = SettingsPage;
|