mattermost-desktop/src/browser/settings.jsx

'use strict';

window.eval = global.eval = function() {
  throw new Error("Sorry, Mattermost does not support window.eval() for security reasons.");
}

const {remote, ipcRenderer} = require('electron');
const settings = require('../common/settings');

const React = require('react');
const ReactDOM = require('react-dom');
const {Grid, Row, Col, Input, Button, ListGroup, ListGroupItem, Glyphicon, HelpBlock, Navbar, Nav} = require('react-bootstrap');
var AutoLaunch = require('auto-launch');


var appLauncher = new AutoLaunch({
  name: 'Mattermost',
  isHidden: true
});

function backToIndex() {
  remote.getCurrentWindow().loadURL('file://' + __dirname + '/index.html');
}

var SettingsPage = React.createClass({
  getInitialState: function() {
    var initialState;
    try {
      initialState = settings.readFileSync(this.props.configFile);
    } catch (e) {
      initialState = settings.loadDefault();
    }

    initialState.showAddTeamForm = false;
    initialState.trayWasVisible = remote.getCurrentWindow().trayWasVisible;

    return initialState;
  },
  componentDidMount: function() {
    if (process.platform === 'win32' || process.platform === 'linux') {
      var self = this;
      appLauncher.isEnabled().then(function(enabled) {
        self.setState({
          autostart: enabled
        });
      });
    }
  },
  handleTeamsChange: function(teams) {
    this.setState({
      showAddTeamForm: false,
      teams: teams
    });
  },
  handleSave: function() {
    var config = {
      teams: this.state.teams,
      hideMenuBar: this.state.hideMenuBar,
      showTrayIcon: this.state.showTrayIcon,
      trayIconTheme: this.state.trayIconTheme,
      disablewebsecurity: this.state.disablewebsecurity,
      version: settings.version,
      minimizeToTray: this.state.minimizeToTray,
      toggleWindowOnTrayIconClick: this.state.toggleWindowOnTrayIconClick,
      notifications: {
        flashWindow: this.state.notifications.flashWindow
      },
      showUnreadBadge: this.state.showUnreadBadge
    };
    settings.writeFileSync(this.props.configFile, config);
    if (process.platform === 'win32' || process.platform === 'linux') {
      var currentWindow = remote.getCurrentWindow();
      currentWindow.setAutoHideMenuBar(config.hideMenuBar);
      currentWindow.setMenuBarVisibility(!config.hideMenuBar);

      var autostart = this.state.autostart;
      appLauncher.isEnabled().then(function(enabled) {
        if (enabled && !autostart) {
          appLauncher.disable();
        } else if (!enabled && autostart) {
          appLauncher.enable();
        }
      });
    }

    ipcRenderer.send('update-menu', config);
    ipcRenderer.send('update-config');

    backToIndex();
  },
  handleCancel: function() {
    backToIndex();
  },
  handleChangeDisableWebSecurity: function() {
    this.setState({
      disablewebsecurity: this.refs.disablewebsecurity.getChecked()
    });
  },
  handleChangeHideMenuBar: function() {
    this.setState({
      hideMenuBar: this.refs.hideMenuBar.getChecked()
    });
  },
  handleChangeShowTrayIcon: function() {
    var shouldShowTrayIcon = this.refs.showTrayIcon.getChecked();
    this.setState({
      showTrayIcon: shouldShowTrayIcon
    });

    if (process.platform === 'darwin' && !shouldShowTrayIcon) {
      this.setState({
        minimizeToTray: false
      });
    }
  },
  handleChangeTrayIconTheme: function() {
    this.setState({
      trayIconTheme: this.refs.trayIconTheme.getValue()
    });
  },
  handleChangeAutoStart: function() {
    this.setState({
      autostart: this.refs.autostart.getChecked()
    });
  },
  handleChangeMinimizeToTray: function() {
    var shouldMinimizeToTray = (process.platform !== 'darwin' || this.refs.showTrayIcon.getChecked())
    && this.refs.minimizeToTray.getChecked();

    this.setState({
      minimizeToTray: shouldMinimizeToTray
    });
  },
  handleChangeToggleWindowOnTrayIconClick: function() {
    this.setState({
      toggleWindowOnTrayIconClick: this.refs.toggleWindowOnTrayIconClick.getChecked()
    });
  },
  toggleShowTeamForm: function() {
    this.setState({
      showAddTeamForm: !this.state.showAddTeamForm
    });
  },
  handleFlashWindow: function() {
    this.setState({
      notifications: {
        flashWindow: this.refs.flashWindow.getChecked() ? 2 : 0
      }
    });
  },
  handleShowUnreadBadge: function() {
    this.setState({
      showUnreadBadge: this.refs.showUnreadBadge.getChecked()
    });
  },
  render: function() {
    var teams_row = (
    <Row>
      <Col md={ 12 }>
      <TeamList teams={ this.state.teams } showAddTeamForm={ this.state.showAddTeamForm } onTeamsChange={ this.handleTeamsChange } />
      </Col>
    </Row>
    );

    var options = [];
    if (process.platform === 'win32' || process.platform === 'linux') {
      options.push(<Input key="inputHideMenuBar" id="inputHideMenuBar" ref="hideMenuBar" type="checkbox" label="Hide menu bar (Press Alt to show menu bar)" checked={ this.state.hideMenuBar }
                     onChange={ this.handleChangeHideMenuBar } />);
    }
    if (process.platform === 'darwin' || process.platform === 'linux') {
      options.push(<Input key="inputShowTrayIcon" id="inputShowTrayIcon" ref="showTrayIcon" type="checkbox" label={ process.platform === 'darwin' ? "Show icon on menu bar (need to restart the application)" : "Show icon in notification area (need to restart the application)" } checked={ this.state.showTrayIcon } onChange={ this.handleChangeShowTrayIcon }
                   />);
    }
    if (process.platform === 'linux') {
      options.push(<Input key="inputTrayIconTheme" ref="trayIconTheme" type="select" label="Icon theme (Need to restart the application)" value={ this.state.trayIconTheme } onChange={ this.handleChangeTrayIconTheme }>
                   <option value="light">Light</option>
                   <option value="dark">Dark</option>
                   </Input>);
    }
    options.push(<Input key="inputDisableWebSecurity" id="inputDisableWebSecurity" ref="disablewebsecurity" type="checkbox" label="Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.)"
                   checked={ this.state.disablewebsecurity } onChange={ this.handleChangeDisableWebSecurity } />);
    //OSX has an option in the Dock, to set the app to autostart, so we choose to not support this option for OSX
    if (process.platform === 'win32' || process.platform === 'linux') {
      options.push(<Input key="inputAutoStart" id="inputAutoStart" ref="autostart" type="checkbox" label="Start app on login." checked={ this.state.autostart } onChange={ this.handleChangeAutoStart }
                   />);
    }

    if (process.platform === 'darwin' || process.platform === 'linux') {
      options.push(<Input key="inputMinimizeToTray" id="inputMinimizeToTray" ref="minimizeToTray" type="checkbox" label={ this.state.trayWasVisible || !this.state.showTrayIcon ? "Leave app running in notification area when the window is closed" : "Leave app running in notification area when the window is closed (available on next restart)" } disabled={ !this.state.showTrayIcon || !this.state.trayWasVisible } checked={ this.state.minimizeToTray }
                     onChange={ this.handleChangeMinimizeToTray } />);
    }

    if (process.platform === 'win32') {
      options.push(<Input key="inputToggleWindowOnTrayIconClick" id="inputToggleWindowOnTrayIconClick" ref="toggleWindowOnTrayIconClick" type="checkbox" label="Toggle window visibility when clicking on the tray icon."
                     checked={ this.state.toggleWindowOnTrayIconClick } onChange={ this.handleChangeToggleWindowOnTrayIconClick } />);
    }

    if (process.platform === 'darwin' || process.platform === 'win32') {
      options.push(<Input key="inputShowUnreadBadge" id="inputShowUnreadBadge" ref="showUnreadBadge" type="checkbox" label="Show red badge on taskbar icon to indicate unread messages. Regardless of this setting, mentions are always indicated with a red badge and item count on the taskbar icon."
                     checked={ this.state.showUnreadBadge } onChange={ this.handleShowUnreadBadge } />);
    }

    if (process.platform === 'win32' || process.platform === 'linux') {
      options.push(<Input key="flashWindow" id="inputflashWindow" ref="flashWindow" type="checkbox" label="Flash the taskbar icon when a new message is received." checked={ this.state.notifications.flashWindow === 2 }
                     onChange={ this.handleFlashWindow } />);
    }

    const settingsPage = {
      navbar: {
        backgroundColor: '#fff'
      },
      close: {
        position: 'absolute',
        right: '0',
        top: '10px',
        fontSize: '35px',
        fontWeight: 'normal',
        color: '#bbb',
        cursor: 'pointer'
      },
      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 options_row = (options.length > 0) ? (
      <Row>
        <Col md={ 12 }>
        <h2 style={ settingsPage.sectionHeading }>App options</h2>
        { options }
        </Col>
      </Row>
      ) : null;

    return (
      <div>
        <Navbar className="navbar-fixed-top" style={ settingsPage.navbar }>
          <div style={ { 'position': 'relative' } }>
            <h1 style={ settingsPage.heading }>Settings</h1>
            <div style={ settingsPage.close } onClick={ this.handleCancel }>
              <span>×</span>
            </div>
          </div>
        </Navbar>
        <Grid className="settingsPage" style={ { 'padding': '100px 15px' } }>
          <Row>
            <Col md={ 10 } xs={ 8 }>
            <h2 style={ settingsPage.sectionHeading }>Team Management</h2>
            </Col>
            <Col md={ 2 } xs={ 4 }>
            <p className="text-right"><a style={ settingsPage.sectionHeadingLink } href="#" onClick={ this.toggleShowTeamForm }>⊞ Add new team</a></p>
            </Col>
          </Row>
          { teams_row }
          <hr/>
          { options_row }
        </Grid>
        <Navbar className="navbar-fixed-bottom">
          <div className='text-right' style={ settingsPage.footer }>
            <button id="btnCancel" className="btn btn-link" onClick={ this.handleCancel }>Cancel</button>
            { ' ' }
            <button id="btnSave" className="btn btn-primary navbar-btn" bsStyle="primary" onClick={ this.handleSave } disabled={ this.state.teams.length === 0 }>Save</button>
          </div>
        </Navbar>
      </div>
      );
  }
});

var TeamList = React.createClass({
  getInitialState: function() {
    return {
      showTeamListItemNew: false,
      team: {
        url: '',
        name: '',
        index: false
      }
    };
  },
  handleTeamRemove: function(index) {
    console.log(index);
    var teams = this.props.teams;
    teams.splice(index, 1);
    this.props.onTeamsChange(teams);
  },
  handleTeamAdd: function(team) {
    var teams = this.props.teams;

    // check if team already exists and then change existing team or add new one
    if ((team.index !== undefined) && teams[team.index]) {
      teams[team.index].name = team.name;
      teams[team.index].url = team.url;
    } else {
      teams.push(team);
    }

    this.setState({
      showTeamListItemNew: false,
      team: {
        url: '',
        name: '',
        index: false
      }
    });

    this.props.onTeamsChange(teams);
  },
  handleTeamEditing: function(teamName, teamUrl, teamIndex) {
    this.setState({
      showTeamListItemNew: true,
      team: {
        url: teamUrl,
        name: teamName,
        index: teamIndex
      }
    })
  },
  render: function() {
    var thisObj = this;
    var teamNodes = this.props.teams.map(function(team, i) {
      var handleTeamRemove = function() {
        thisObj.handleTeamRemove(i);
      };

      var handleTeamEditing = function() {
        thisObj.handleTeamEditing(team.name, team.url, i);
      };

      return (
        <TeamListItem index={ i } key={ "teamListItem" + i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } onTeamEditing={ handleTeamEditing }
        />
        );
    });

    var addTeamForm;
    if (this.props.showAddTeamForm || this.state.showTeamListItemNew) {
      addTeamForm = <TeamListItemNew key={ this.state.team.index } onTeamAdd={ this.handleTeamAdd } teamIndex={ this.state.team.index } teamName={ this.state.team.name } teamUrl={ this.state.team.url }
                    />;
    } else {
      addTeamForm = '';
    }

    return (
      <ListGroup class="teamList">
        { teamNodes }
        { addTeamForm }
      </ListGroup>
      );
  }
});

var TeamListItem = React.createClass({
  handleTeamRemove: function() {
    this.props.onTeamRemove();
  },
  handleTeamEditing: function() {
    this.props.onTeamEditing();
  },
  render: function() {
    var style = {
      left: {
        "display": 'inline-block'
      }
    };
    return (
      <div className="teamListItem list-group-item">
        <div style={ style.left }>
          <h4 className="list-group-item-heading">{ this.props.name }</h4>
          <p className="list-group-item-text">
            { this.props.url }
          </p>
        </div>
        <div className="pull-right">
          <a href="#" onClick={ this.handleTeamEditing }>Edit</a>
          { ' - ' }
          <a href="#" onClick={ this.handleTeamRemove }>Remove</a>
        </div>
      </div>
      );
  }
});

var TeamListItemNew = React.createClass({
  getInitialState: function() {
    return {
      name: this.props.teamName,
      url: this.props.teamUrl,
      index: this.props.teamIndex,
      errorMessage: null
    };
  },
  handleSubmit: function(e) {
    console.log('submit');
    e.preventDefault();
    const errorMessage = this.getValidationErrorMessage();
    if (errorMessage) {
      this.setState({
        errorMessage
      });
      return;
    }

    this.props.onTeamAdd({
      name: this.state.name.trim(),
      url: this.state.url.trim(),
      index: this.state.index,
    });

    this.setState({
      name: '',
      url: '',
      index: '',
      errorMessage: null
    });
  },
  handleNameChange: function(e) {
    console.log('name');
    this.setState({
      name: e.target.value
    });
  },
  handleURLChange: function(e) {
    console.log('url');
    this.setState({
      url: e.target.value
    });
  },

  getValidationErrorMessage: function() {
    if (this.state.name.trim() === '') {
      return 'Name is required.';
    } else if (this.state.url.trim() === '') {
      return 'URL is required.';
    } else if (!(/^https?:\/\/.*/).test(this.state.url.trim())) {
      return 'URL should start with http:// or https://.';
    }
    return null;
  },

  componentDidMount: function() {
    const inputTeamName = ReactDOM.findDOMNode(this.refs.inputTeamName);
    const setErrorMessage = () => {
      this.setState({
        errorMessage: this.getValidationErrorMessage()
      });
    };
    inputTeamName.addEventListener('invalid', setErrorMessage);
    const inputTeamURL = ReactDOM.findDOMNode(this.refs.inputTeamURL);
    inputTeamURL.addEventListener('invalid', setErrorMessage);
  },

  render: function() {

    var existingTeam = false;
    if (this.state.name !== '' && this.state.url !== '') {
      existingTeam = true;
    }

    var btnAddText;
    if (existingTeam) {
      btnAddText = 'Save';
    } else {
      btnAddText = 'Add';
    }

    return (
      <ListGroupItem>
        <form className="form-inline" onSubmit={ this.handleSubmit }>
          <div className="form-group">
            <label for="inputTeamName">Name</label>
            { ' ' }
            <input type="text" required className="form-control" id="inputTeamName" ref="inputTeamName" placeholder="Example team" value={ this.state.name } onChange={ this.handleNameChange }
            />
          </div>
          { ' ' }
          <div className="form-group">
            <label for="inputTeamURL">URL</label>
            { ' ' }
            <input type="url" required className="form-control" id="inputTeamURL" ref="inputTeamURL" placeholder="https://example.com/team" value={ this.state.url } onChange={ this.handleURLChange }
            />
          </div>
          { ' ' }
          <Button type="submit">
            { btnAddText }
          </Button>
        </form>
        { (() => {
            if (this.state.errorMessage !== null) {
              return (<HelpBlock style={ { color: '#777777' } }>
                        { this.state.errorMessage }
                      </HelpBlock>);
            }
            return null;
          })() }
      </ListGroupItem>
      );
  }
});

var configFile = remote.getGlobal('config-file');

require('electron-context-menu')({
  window: remote.getCurrentWindow()
});

ReactDOM.render(
  <SettingsPage configFile={ configFile } />,
  document.getElementById('content')
);