2015-12-19 06:51:19 -08:00
'use strict' ;
2016-05-21 00:13:22 -07:00
const { remote , ipcRenderer } = require ( 'electron' ) ;
2015-12-22 06:35:22 -08:00
const settings = require ( '../common/settings' ) ;
2015-12-19 06:51:19 -08:00
2016-01-30 07:50:43 -08:00
const React = require ( 'react' ) ;
const ReactDOM = require ( 'react-dom' ) ;
const ReactBootstrap = require ( 'react-bootstrap' ) ;
2016-06-10 17:17:18 -07:00
var AutoLaunch = require ( 'auto-launch' ) ;
2016-01-30 07:50:43 -08:00
2015-12-21 07:58:41 -08:00
const Grid = ReactBootstrap . Grid ;
const Row = ReactBootstrap . Row ;
const Col = ReactBootstrap . Col ;
2016-01-14 05:50:12 -08:00
const Input = ReactBootstrap . Input ;
2015-12-21 07:58:41 -08:00
const Button = ReactBootstrap . Button ;
const ListGroup = ReactBootstrap . ListGroup ;
const ListGroupItem = ReactBootstrap . ListGroupItem ;
const Glyphicon = ReactBootstrap . Glyphicon ;
2016-06-10 17:17:18 -07:00
var appLauncher = new AutoLaunch ( {
name : 'Mattermost'
} ) ;
2016-02-11 08:12:28 -08:00
function backToIndex ( ) {
2016-04-13 05:45:51 -07:00
remote . getCurrentWindow ( ) . loadURL ( 'file://' + _ _dirname + '/index.html' ) ;
2016-01-30 07:50:43 -08:00
}
2015-12-19 06:51:19 -08:00
var SettingsPage = React . createClass ( {
getInitialState : function ( ) {
2016-01-14 06:27:37 -08:00
var config ;
try {
config = settings . readFileSync ( this . props . configFile ) ;
} catch ( e ) {
config = settings . loadDefault ( ) ;
}
2016-05-25 11:31:57 -07:00
2016-06-17 08:53:03 -07:00
config . showAddTeamForm = false ;
2016-05-25 11:31:57 -07:00
2016-04-17 07:07:17 -07:00
return config ;
2015-12-19 06:51:19 -08:00
} ,
2016-06-10 17:17:18 -07:00
componentDidMount : function ( ) {
if ( process . platform === 'win32' || process . platform === 'linux' ) {
var self = this ;
appLauncher . isEnabled ( ) . then ( function ( enabled ) {
self . setState ( {
autostart : enabled
} ) ;
} ) ;
}
} ,
2015-12-19 06:51:19 -08:00
handleTeamsChange : function ( teams ) {
2015-12-19 07:39:51 -08:00
this . setState ( {
teams : teams
} ) ;
2015-12-19 06:51:19 -08:00
} ,
2016-06-17 08:53:03 -07:00
handleSave : function ( ) {
2015-12-19 06:51:19 -08:00
var config = {
teams : this . state . teams ,
2016-01-14 07:20:17 -08:00
hideMenuBar : this . state . hideMenuBar ,
2016-04-11 05:51:24 -07:00
showTrayIcon : this . state . showTrayIcon ,
2016-05-07 16:01:56 -07:00
trayIconTheme : this . state . trayIconTheme ,
2016-04-17 07:07:17 -07:00
disablewebsecurity : this . state . disablewebsecurity ,
2016-06-05 03:50:15 -07:00
version : settings . version ,
notifications : {
flashWindow : this . state . notifications . flashWindow
}
2015-12-19 06:51:19 -08:00
} ;
settings . writeFileSync ( this . props . configFile , config ) ;
2016-01-23 04:33:50 -08:00
if ( process . platform === 'win32' || process . platform === 'linux' ) {
2016-01-14 07:20:17 -08:00
var currentWindow = remote . getCurrentWindow ( ) ;
currentWindow . setAutoHideMenuBar ( config . hideMenuBar ) ;
currentWindow . setMenuBarVisibility ( ! config . hideMenuBar ) ;
2016-06-10 17:17:18 -07:00
var autostart = this . state . autostart ;
appLauncher . isEnabled ( ) . then ( function ( enabled ) {
if ( enabled && ! autostart ) {
appLauncher . disable ( ) ;
} else if ( ! enabled && autostart ) {
appLauncher . enable ( ) ;
}
} ) ;
2016-01-14 07:20:17 -08:00
}
2016-05-25 13:18:48 -07:00
2016-05-21 00:13:22 -07:00
ipcRenderer . send ( 'update-menu' , config ) ;
2016-06-17 07:50:41 -07:00
ipcRenderer . send ( 'update-config' ) ;
2016-06-06 05:30:23 -07:00
2016-06-17 08:53:03 -07:00
backToIndex ( ) ;
2015-12-19 06:51:19 -08:00
} ,
handleCancel : function ( ) {
2016-01-30 07:50:43 -08:00
backToIndex ( ) ;
2015-12-19 06:51:19 -08:00
} ,
2016-04-17 07:07:17 -07:00
handleChangeDisableWebSecurity : function ( ) {
this . setState ( {
disablewebsecurity : this . refs . disablewebsecurity . getChecked ( )
} ) ;
} ,
2016-01-14 05:50:12 -08:00
handleChangeHideMenuBar : function ( ) {
this . setState ( {
hideMenuBar : this . refs . hideMenuBar . getChecked ( )
} ) ;
} ,
2016-04-11 05:51:24 -07:00
handleChangeShowTrayIcon : function ( ) {
this . setState ( {
showTrayIcon : this . refs . showTrayIcon . getChecked ( )
} ) ;
} ,
2016-05-07 16:01:56 -07:00
handleChangeTrayIconTheme : function ( ) {
this . setState ( {
trayIconTheme : this . refs . trayIconTheme . getValue ( )
} ) ;
} ,
2016-06-10 17:17:18 -07:00
handleChangeAutoStart : function ( ) {
this . setState ( {
autostart : this . refs . autostart . getChecked ( )
} ) ;
} ,
2016-06-17 08:53:03 -07:00
toggleShowTeamForm : function ( ) {
this . setState ( {
showAddTeamForm : ! this . state . showAddTeamForm
} ) ;
2016-05-25 11:31:57 -07:00
} ,
2016-06-05 03:50:15 -07:00
handleFlashWindowSetting : function ( item ) {
this . setState ( {
notifications : {
flashWindow : item . state
}
} ) ;
} ,
2015-12-19 06:51:19 -08:00
render : function ( ) {
2016-05-25 14:19:36 -07:00
var buttonStyle = {
2016-06-03 09:21:15 -07:00
marginTop : 20
2016-05-25 14:19:36 -07:00
} ;
2016-01-14 05:50:12 -08:00
var teams _row = (
< Row >
< Col md = { 12 } >
2016-05-25 11:31:57 -07:00
< TeamList teams = { this . state . teams } showAddTeamForm = { this . state . showAddTeamForm } onTeamsChange = { this . handleTeamsChange } / >
2016-01-14 05:50:12 -08:00
< / Col >
< / Row >
) ;
var options = [ ] ;
2016-01-23 04:33:50 -08:00
if ( process . platform === 'win32' || process . platform === 'linux' ) {
2016-05-02 08:42:13 -07:00
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 } / > ) ;
2016-01-14 05:50:12 -08:00
}
2016-05-07 16:01:56 -07:00
if ( process . platform === 'darwin' || process . platform === 'linux' ) {
2016-05-02 04:21:51 -07:00
options . push ( < Input key = "inputShowTrayIcon" ref = "showTrayIcon" type = "checkbox" label = "Show Icon on Menu Bar (Need to restart the application)" checked = { this . state . showTrayIcon } onChange = { this . handleChangeShowTrayIcon }
2016-04-11 05:51:24 -07:00
/ > ) ;
}
2016-05-07 16:01:56 -07:00
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 > ) ;
}
2016-05-13 06:09:36 -07:00
options . push ( < Input key = "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.)"
2016-05-02 04:21:51 -07:00
checked = { this . state . disablewebsecurity } onChange = { this . handleChangeDisableWebSecurity } / > ) ;
2016-06-17 08:53:03 -07:00
//OSX has an option in the Dock, to set the app to autostart, so we choose to not support this option for OSX
2016-06-10 17:17:18 -07:00
if ( process . platform === 'win32' || process . platform === 'linux' ) {
options . push ( < Input key = "inputAutoStart" ref = "autostart" type = "checkbox" label = "Start app on login." checked = { this . state . autostart } onChange = { this . handleChangeAutoStart } / > ) ;
}
2016-01-14 05:50:12 -08:00
var options _row = ( options . length > 0 ) ? (
< Row >
< Col md = { 12 } >
2016-02-11 08:12:28 -08:00
< h2 > Options < / h2 >
{ options }
2016-01-14 05:50:12 -08:00
< / Col >
< / Row >
) : null ;
2016-06-05 03:50:15 -07:00
var notificationSettings = [
{
label : 'Never' ,
state : 0
} ,
2016-06-07 13:17:44 -07:00
/ * T o D o : I d l e i s n ' t i m p l e m e n t e d y e t
2016-06-05 03:50:15 -07:00
{
label : 'Only when idle (after 10 seconds)' ,
state : 1
2016-06-07 13:17:44 -07:00
} , * /
2016-06-05 03:50:15 -07:00
{
label : 'Always' ,
state : 2
}
] ;
var that = this ;
var notificationElements = notificationSettings . map ( function ( item ) {
var boundClick = that . handleFlashWindowSetting . bind ( that , item ) ;
return (
2016-06-07 13:17:44 -07:00
< Input key = { "flashWindow" + item . state } name = "handleFlashWindow" ref = { "flashWindow" + item . state } type = "radio" label = { item . label } value = { item . state } onChange = { boundClick }
checked = { that . state . notifications . flashWindow == item . state ? "checked" : "" } / >
) ;
2016-06-05 03:50:15 -07:00
} ) ;
var notifications = (
2016-06-07 13:17:44 -07:00
< Row >
< Col md = { 12 } >
< h2 > Notifications < / h2 > Configure , that the taskicon in the taskbar blinks when you were mentioned .
{ notificationElements }
< / Col >
< / Row >
2016-06-05 03:50:15 -07:00
)
2015-12-19 06:51:19 -08:00
return (
2015-12-21 07:58:41 -08:00
< Grid className = "settingsPage" >
2016-06-03 09:21:15 -07:00
< Row >
< Col xs = { 4 } sm = { 1 } md = { 2 } lg = { 2 } >
< h2 > Teams < / h2 >
< / Col >
< Col xs = { 4 } sm = { 2 } md = { 1 } lg = { 1 } mdPull = { 1 } >
2016-06-17 08:53:03 -07:00
< Button className = "pull-right" style = { buttonStyle } bsSize = "small" onClick = { this . toggleShowTeamForm } >
2016-06-03 09:21:15 -07:00
< Glyphicon glyph = "plus" / >
< / Button >
< / Col >
< / Row >
2016-01-14 05:50:12 -08:00
{ teams _row }
{ options _row }
2016-06-05 03:50:15 -07:00
{ notifications }
< div >
< hr / >
< / div >
2015-12-21 07:58:41 -08:00
< Row >
< Col md = { 12 } >
2016-02-11 08:12:28 -08:00
< Button id = "btnCancel" onClick = { this . handleCancel } > Cancel < / Button >
{ ' ' }
< Button id = "btnSave" bsStyle = "primary" onClick = { this . handleSave } disabled = { this . state . teams . length === 0 } > Save < / Button >
2015-12-21 07:58:41 -08:00
< / Col >
< / Row >
< / Grid >
2015-12-19 07:39:51 -08:00
) ;
2015-12-19 06:51:19 -08:00
}
} ) ;
var TeamList = React . createClass ( {
2016-05-25 11:31:57 -07:00
getInitialState : function ( ) {
return {
2016-05-25 13:18:48 -07:00
showTeamListItemNew : false ,
team : {
url : '' ,
name : '' ,
index : false
}
2016-05-25 11:31:57 -07:00
} ;
} ,
2015-12-21 07:58:41 -08:00
handleTeamRemove : function ( index ) {
console . log ( index ) ;
2015-12-19 06:51:19 -08:00
var teams = this . props . teams ;
2015-12-21 07:58:41 -08:00
teams . splice ( index , 1 ) ;
2015-12-19 06:51:19 -08:00
this . props . onTeamsChange ( teams ) ;
} ,
2015-12-21 07:58:41 -08:00
handleTeamAdd : function ( team ) {
2015-12-19 06:51:19 -08:00
var teams = this . props . teams ;
2016-05-25 13:18:48 -07:00
// check if team already exists and then change existing team or add new one
2016-06-17 08:53:03 -07:00
if ( ( team . index !== undefined ) && teams [ team . index ] ) {
2016-05-25 13:18:48 -07:00
teams [ team . index ] . name = team . name ;
teams [ team . index ] . url = team . url ;
} else {
teams . push ( team ) ;
}
this . setState ( {
2016-05-31 06:27:14 -07:00
showTeamListItemNew : false ,
team : {
url : '' ,
name : '' ,
index : false
}
2016-05-25 13:18:48 -07:00
} ) ;
2015-12-19 06:51:19 -08:00
this . props . onTeamsChange ( teams ) ;
} ,
2016-05-25 13:18:48 -07:00
handleTeamEditing : function ( teamName , teamUrl , teamIndex ) {
this . setState ( {
showTeamListItemNew : true ,
team : {
url : teamUrl ,
name : teamName ,
index : teamIndex
}
} )
} ,
2015-12-19 06:51:19 -08:00
render : function ( ) {
var thisObj = this ;
2015-12-19 07:39:51 -08:00
var teamNodes = this . props . teams . map ( function ( team , i ) {
2015-12-21 07:58:41 -08:00
var handleTeamRemove = function ( ) {
thisObj . handleTeamRemove ( i ) ;
2015-12-19 06:51:19 -08:00
} ;
2016-05-25 13:18:48 -07:00
var handleTeamEditing = function ( ) {
thisObj . handleTeamEditing ( team . name , team . url , i ) ;
} ;
2015-12-19 06:51:19 -08:00
return (
2016-05-25 13:28:47 -07:00
< TeamListItem index = { i } key = { "teamListItem" + i } name = { team . name } url = { team . url } onTeamRemove = { handleTeamRemove } onTeamEditing = { handleTeamEditing }
/ >
2015-12-19 07:39:51 -08:00
) ;
2015-12-19 06:51:19 -08:00
} ) ;
2016-05-25 11:31:57 -07:00
var addTeamForm ;
2016-05-25 13:18:48 -07:00
if ( this . props . showAddTeamForm || this . state . showTeamListItemNew ) {
addTeamForm = < TeamListItemNew onTeamAdd = { this . handleTeamAdd } teamIndex = { this . state . team . index } teamName = { this . state . team . name } teamUrl = { this . state . team . url } / > ;
2016-05-25 11:31:57 -07:00
} else {
addTeamForm = '' ;
}
2015-12-19 06:51:19 -08:00
return (
2015-12-21 07:58:41 -08:00
< ListGroup class = "teamList" >
{ teamNodes }
2016-05-25 11:31:57 -07:00
{ addTeamForm }
2015-12-21 07:58:41 -08:00
< / ListGroup >
2015-12-19 07:39:51 -08:00
) ;
2015-12-19 06:51:19 -08:00
}
} ) ;
2015-12-21 07:58:41 -08:00
var TeamListItem = React . createClass ( {
handleTeamRemove : function ( ) {
this . props . onTeamRemove ( ) ;
2015-12-19 06:51:19 -08:00
} ,
2016-05-25 13:18:48 -07:00
handleTeamEditing : function ( ) {
this . props . onTeamEditing ( ) ;
} ,
2015-12-19 06:51:19 -08:00
render : function ( ) {
2015-12-21 07:58:41 -08:00
var style = {
left : {
"display" : 'inline-block'
}
} ;
2015-12-19 06:51:19 -08:00
return (
2015-12-21 07:58:41 -08:00
< 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" >
2016-05-25 13:18:48 -07:00
< Button bsSize = "xsmall" onClick = { this . handleTeamEditing } >
< Glyphicon glyph = "pencil" / >
< / Button >
{ ' ' }
2015-12-21 07:58:41 -08:00
< Button bsSize = "xsmall" onClick = { this . handleTeamRemove } >
< Glyphicon glyph = "remove" / >
< / Button >
< / div >
2015-12-19 06:51:19 -08:00
< / div >
2015-12-19 07:39:51 -08:00
) ;
2015-12-19 06:51:19 -08:00
}
} ) ;
2015-12-21 07:58:41 -08:00
var TeamListItemNew = React . createClass ( {
2015-12-19 07:39:51 -08:00
getInitialState : function ( ) {
return {
2016-05-25 13:18:48 -07:00
name : this . props . teamName ,
url : this . props . teamUrl ,
index : this . props . teamIndex
2015-12-19 07:39:51 -08:00
} ;
2015-12-19 06:51:19 -08:00
} ,
2015-12-21 07:58:41 -08:00
handleSubmit : function ( e ) {
console . log ( 'submit' ) ;
e . preventDefault ( ) ;
this . props . onTeamAdd ( {
2016-03-10 06:25:35 -08:00
name : this . state . name . trim ( ) ,
2016-05-25 13:18:48 -07:00
url : this . state . url . trim ( ) ,
index : this . state . index ,
2015-12-19 07:39:51 -08:00
} ) ;
2016-05-31 06:27:14 -07:00
this . setState ( {
name : '' ,
url : '' ,
index : ''
2015-12-19 07:39:51 -08:00
} ) ;
2015-12-19 06:51:19 -08:00
} ,
2015-12-19 07:39:51 -08:00
handleNameChange : function ( e ) {
2015-12-21 07:58:41 -08:00
console . log ( 'name' ) ;
2015-12-19 07:39:51 -08:00
this . setState ( {
name : e . target . value
} ) ;
2015-12-19 06:51:19 -08:00
} ,
2015-12-19 07:39:51 -08:00
handleURLChange : function ( e ) {
2015-12-21 07:58:41 -08:00
console . log ( 'url' ) ;
2015-12-19 07:39:51 -08:00
this . setState ( {
url : e . target . value
} ) ;
2015-12-19 06:51:19 -08:00
} ,
2016-03-10 06:25:35 -08:00
shouldEnableAddButton : function ( ) {
2016-05-25 13:28:47 -07:00
return ( this . state . name . trim ( ) !== '' || this . props . teamName !== '' )
&& ( this . state . url . trim ( ) !== '' || this . props . teamUrl !== '' ) ;
2016-03-10 06:25:35 -08:00
} ,
2015-12-19 06:51:19 -08:00
render : function ( ) {
2016-05-25 13:18:48 -07:00
var existingTeam = false ;
if ( this . state . name !== '' && this . state . url !== '' ) {
existingTeam = true ;
}
var btnAddText ;
if ( existingTeam ) {
btnAddText = 'Save' ;
} else {
btnAddText = 'Add' ;
}
2015-12-19 06:51:19 -08:00
return (
2015-12-21 07:58:41 -08:00
< ListGroupItem >
< form className = "form-inline" onSubmit = { this . handleSubmit } >
< div className = "form-group" >
< label for = "inputTeamName" > Name < / label >
{ ' ' }
< input type = "text" className = "form-control" id = "inputTeamName" placeholder = "Example team" value = { this . state . name } onChange = { this . handleNameChange } / >
< / div >
{ ' ' }
< div className = "form-group" >
< label for = "inputTeamURL" > URL < / label >
{ ' ' }
2016-03-13 08:52:41 -07:00
< input type = "url" className = "form-control" id = "inputTeamURL" placeholder = "https://example.com/team" value = { this . state . url } onChange = { this . handleURLChange } / >
2015-12-21 07:58:41 -08:00
< / div >
{ ' ' }
2016-05-25 13:28:47 -07:00
< Button type = "submit" disabled = { ! this . shouldEnableAddButton ( ) } >
{ btnAddText }
< / Button >
2015-12-21 07:58:41 -08:00
< / form >
< / ListGroupItem >
2015-12-19 07:39:51 -08:00
) ;
2015-12-19 06:51:19 -08:00
}
} ) ;
var configFile = remote . getGlobal ( 'config-file' ) ;
2015-12-23 00:55:39 -08:00
var contextMenu = require ( './menus/context' ) ;
var menu = contextMenu . createDefault ( ) ;
window . addEventListener ( 'contextmenu' , function ( e ) {
menu . popup ( remote . getCurrentWindow ( ) ) ;
} , false ) ;
2015-12-19 06:51:19 -08:00
ReactDOM . render (
2015-12-19 07:39:51 -08:00
< SettingsPage configFile = { configFile } / > ,
2015-12-19 06:51:19 -08:00
document . getElementById ( 'content' )
) ;