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' ) ;
const { Button , Checkbox , Col , FormGroup , FormControl , ControlLabel , Grid , Navbar , Row } = require ( 'react-bootstrap' ) ;
2016-11-01 07:46:13 -07:00
const { ipcRenderer , remote } = require ( 'electron' ) ;
const AutoLaunch = require ( 'auto-launch' ) ;
const settings = require ( '../../common/settings' ) ;
const TeamList = require ( './TeamList.jsx' ) ;
const appLauncher = new AutoLaunch ( {
name : 'Mattermost' ,
isHidden : true
} ) ;
function backToIndex ( ) {
remote . getCurrentWindow ( ) . loadURL ( 'file://' + _ _dirname + '/index.html' ) ;
}
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 ;
return initialState ;
} ,
componentDidMount ( ) {
if ( process . platform === 'win32' || process . platform === 'linux' ) {
var self = this ;
appLauncher . isEnabled ( ) . then ( ( enabled ) => {
self . setState ( {
autostart : enabled
} ) ;
} ) ;
}
} ,
handleTeamsChange ( teams ) {
this . setState ( {
showAddTeamForm : false ,
teams
} ) ;
} ,
handleSave ( ) {
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 ( ( enabled ) => {
if ( enabled && ! autostart ) {
appLauncher . disable ( ) ;
} else if ( ! enabled && autostart ) {
appLauncher . enable ( ) ;
}
} ) ;
}
ipcRenderer . send ( 'update-menu' , config ) ;
ipcRenderer . send ( 'update-config' ) ;
backToIndex ( ) ;
} ,
handleCancel ( ) {
backToIndex ( ) ;
} ,
handleChangeDisableWebSecurity ( ) {
this . setState ( {
2016-11-02 08:35:07 -07:00
disablewebsecurity : ! this . refs . disablewebsecurity . props . checked
2016-11-01 07:46:13 -07:00
} ) ;
} ,
handleChangeHideMenuBar ( ) {
this . setState ( {
2016-11-02 08:35:07 -07:00
hideMenuBar : ! this . refs . hideMenuBar . props . checked
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
} ) ;
}
} ,
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
} ) ;
} ,
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
} ) ;
} ,
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
} ) ;
} ,
handleChangeToggleWindowOnTrayIconClick ( ) {
this . setState ( {
2016-11-02 08:35:07 -07:00
toggleWindowOnTrayIconClick : ! this . refs . toggleWindowOnTrayIconClick . props . checked
2016-11-01 07:46:13 -07:00
} ) ;
} ,
toggleShowTeamForm ( ) {
this . setState ( {
showAddTeamForm : ! this . state . showAddTeamForm
} ) ;
} ,
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
}
} ) ;
} ,
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
} ) ;
} ,
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 }
2016-11-01 07:46:13 -07:00
onTeamsChange = { this . handleTeamsChange }
/ >
< / Col >
< / Row >
) ;
var options = [ ] ;
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 = 'inputHideMenuBar'
id = 'inputHideMenuBar'
ref = 'hideMenuBar'
checked = { this . state . hideMenuBar }
onChange = { this . handleChangeHideMenuBar }
2016-11-02 08:35:07 -07:00
> { 'Hide menu bar (Press Alt to show menu bar)' } < / 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' ?
'Show icon on menu bar (need to restart the application)' :
'Show icon in notification area (need to restart the application)' } < / Checkbox > ) ;
2016-11-01 07:46:13 -07:00
}
if ( process . platform === 'linux' ) {
options . push (
2016-12-10 11:27:09 -08:00
< FormGroup >
< ControlLabel > { 'Icon theme (Need to restart the application)' } < / ControlLabel >
< FormControl
componentClass = 'select'
key = 'inputTrayIconTheme'
ref = 'trayIconTheme'
value = { this . state . trayIconTheme }
onChange = { this . handleChangeTrayIconTheme }
>
< option value = 'light' > { 'Light' } < / option >
< option value = 'dark' > { 'Dark' } < / option >
< / FormControl >
< / FormGroup > ) ;
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 = 'inputDisableWebSecurity'
id = 'inputDisableWebSecurity'
ref = 'disablewebsecurity'
checked = { this . state . disablewebsecurity }
onChange = { this . handleChangeDisableWebSecurity }
2016-11-02 08:35:07 -07:00
> { 'Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.)' } < / Checkbox > ) ;
2016-11-01 07:46:13 -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
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 }
2016-11-02 08:35:07 -07:00
> { 'Start app on login.' } < / 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 = 'inputMinimizeToTray'
id = 'inputMinimizeToTray'
ref = 'minimizeToTray'
disabled = { ! this . state . showTrayIcon || ! this . state . trayWasVisible }
checked = { this . state . minimizeToTray }
onChange = { this . handleChangeMinimizeToTray }
2016-11-02 08:35:07 -07:00
> { 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)' } < / Checkbox > ) ;
2016-11-01 07:46:13 -07:00
}
if ( process . platform === 'win32' ) {
options . push (
2016-11-02 08:35:07 -07:00
< Checkbox
2016-11-01 07:46:13 -07:00
key = 'inputToggleWindowOnTrayIconClick'
id = 'inputToggleWindowOnTrayIconClick'
ref = 'toggleWindowOnTrayIconClick'
checked = { this . state . toggleWindowOnTrayIconClick }
onChange = { this . handleChangeToggleWindowOnTrayIconClick }
2016-11-02 08:35:07 -07:00
> { 'Toggle window visibility when clicking on the tray icon.' } < / 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 }
2016-11-02 08:35:07 -07:00
> { '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.' } < / 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 }
2016-11-02 08:35:07 -07:00
> { 'Flash the taskbar icon when a new message is received.' } < / Checkbox > ) ;
2016-11-01 07:46:13 -07:00
}
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 optionsRow = ( options . length > 0 ) ? (
< Row >
< Col md = { 12 } >
< 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 }
>
< 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 }
2017-01-16 14:51:28 -08:00
id = 'addNewServer'
2016-11-01 07:46:13 -07:00
href = '#'
onClick = { this . toggleShowTeamForm }
> { '⊞ Add new team' } < / a >
< / p >
< / Col >
< / Row >
{ teamsRow }
< hr / >
{ optionsRow }
< / Grid >
< Navbar className = 'navbar-fixed-bottom' >
< div
className = 'text-right'
style = { settingsPage . footer }
>
2016-11-02 08:35:07 -07:00
< Button
2016-11-01 07:46:13 -07:00
id = 'btnCancel'
2016-11-02 08:35:07 -07:00
className = 'btn-link'
2016-11-01 07:46:13 -07:00
onClick = { this . handleCancel }
2016-11-02 08:35:07 -07:00
> { 'Cancel' } < / Button >
2016-11-01 07:46:13 -07:00
{ ' ' }
2016-11-02 08:35:07 -07:00
< Button
2016-11-01 07:46:13 -07:00
id = 'btnSave'
2016-11-02 08:35:07 -07:00
className = 'navbar-btn'
2016-11-01 07:46:13 -07:00
bsStyle = 'primary'
onClick = { this . handleSave }
disabled = { this . state . teams . length === 0 }
2016-11-02 08:35:07 -07:00
> { 'Save' } < / Button >
2016-11-01 07:46:13 -07:00
< / div >
< / Navbar >
< / div >
) ;
}
} ) ;
module . exports = SettingsPage ;