2015-12-19 06:51:19 -08:00
'use strict' ;
2016-08-08 07:56:21 -07:00
window . eval = global . eval = function ( ) {
throw new Error ( "Sorry, Mattermost does not support window.eval() for security reasons." ) ;
}
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' ) ;
2016-08-22 05:48:28 -07:00
const { Grid , Row , Col , Input , Button , ListGroup , ListGroupItem , Glyphicon , HelpBlock } = 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
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-07-05 07:49:10 -07:00
var initialState ;
2016-01-14 06:27:37 -08:00
try {
2016-07-05 07:49:10 -07:00
initialState = settings . readFileSync ( this . props . configFile ) ;
2016-01-14 06:27:37 -08:00
} catch ( e ) {
2016-07-05 07:49:10 -07:00
initialState = settings . loadDefault ( ) ;
2016-01-14 06:27:37 -08:00
}
2016-05-25 11:31:57 -07:00
2016-07-05 07:49:10 -07:00
initialState . showAddTeamForm = false ;
initialState . trayWasVisible = remote . getCurrentWindow ( ) . trayWasVisible ;
2016-05-25 11:31:57 -07:00
2016-07-05 07:49:10 -07:00
return initialState ;
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 ( {
2016-07-03 07:58:08 -07:00
showAddTeamForm : false ,
2015-12-19 07:39:51 -08:00
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 ,
2016-07-03 07:12:04 -07:00
minimizeToTray : this . state . minimizeToTray ,
2016-06-28 06:07:29 -07:00
toggleWindowOnTrayIconClick : this . state . toggleWindowOnTrayIconClick ,
2016-06-05 03:50:15 -07:00
notifications : {
flashWindow : this . state . notifications . flashWindow
2016-07-15 04:04:14 -07:00
} ,
showUnreadBadge : this . state . showUnreadBadge
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 ( ) {
2016-07-03 07:12:04 -07:00
var shouldShowTrayIcon = this . refs . showTrayIcon . getChecked ( ) ;
2016-04-11 05:51:24 -07:00
this . setState ( {
2016-07-03 07:12:04 -07:00
showTrayIcon : shouldShowTrayIcon
2016-04-11 05:51:24 -07:00
} ) ;
2016-07-03 07:12:04 -07:00
if ( process . platform === 'darwin' && ! shouldShowTrayIcon ) {
this . setState ( {
minimizeToTray : false
} ) ;
}
2016-04-11 05:51:24 -07:00
} ,
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-07-03 07:12:04 -07:00
handleChangeMinimizeToTray : function ( ) {
var shouldMinimizeToTray = ( process . platform !== 'darwin' || this . refs . showTrayIcon . getChecked ( ) )
&& this . refs . minimizeToTray . getChecked ( ) ;
this . setState ( {
minimizeToTray : shouldMinimizeToTray
} ) ;
} ,
2016-06-28 06:07:29 -07:00
handleChangeToggleWindowOnTrayIconClick : function ( ) {
2016-06-30 09:03:31 -07:00
this . setState ( {
toggleWindowOnTrayIconClick : this . refs . toggleWindowOnTrayIconClick . getChecked ( )
} ) ;
2016-06-27 00:06:20 -07:00
} ,
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
}
} ) ;
} ,
2016-07-15 04:04:14 -07:00
handleShowUnreadBadge : function ( ) {
this . setState ( {
showUnreadBadge : this . refs . showUnreadBadge . getChecked ( )
} ) ;
} ,
2015-12-19 06:51:19 -08:00
render : function ( ) {
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-07-11 14:17:31 -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 }
2016-05-02 08:42:13 -07:00
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-07-11 14:17:31 -07:00
options . push ( < Input key = "inputShowTrayIcon" id = "inputShowTrayIcon" ref = "showTrayIcon" type = "checkbox" label = "Show icon on menu bar (Need to restart the application)" checked = { this . state . showTrayIcon }
2016-06-22 08:03:04 -07:00
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-06-21 08:33:14 -07:00
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.)"
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' ) {
2016-06-22 08:03:04 -07:00
options . push ( < Input key = "inputAutoStart" id = "inputAutoStart" ref = "autostart" type = "checkbox" label = "Start app on login." checked = { this . state . autostart } onChange = { this . handleChangeAutoStart }
/ > ) ;
2016-06-10 17:17:18 -07:00
}
2016-06-30 13:17:31 -07:00
2016-07-05 07:49:10 -07:00
if ( process . platform === 'darwin' || process . platform === 'linux' ) {
2016-07-03 13:13:48 -07:00
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 } / > ) ;
2016-07-03 07:12:04 -07:00
}
2016-06-30 13:17:31 -07:00
if ( process . platform === 'win32' ) {
2016-06-28 06:10:20 -07:00
options . push ( < Input key = "inputToggleWindowOnTrayIconClick" id = "inputToggleWindowOnTrayIconClick" ref = "toggleWindowOnTrayIconClick" type = "checkbox" label = "Toggle window visibility when clicking on the tray icon."
2016-06-30 09:03:31 -07:00
checked = { this . state . toggleWindowOnTrayIconClick } onChange = { this . handleChangeToggleWindowOnTrayIconClick } / > ) ;
2016-06-10 17:17:18 -07:00
}
2016-07-03 05:58:48 -07:00
2016-07-15 04:04:14 -07:00
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 } / > ) ;
}
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-18 05:39:34 -07:00
var notifications _row = null ;
2016-07-12 13:14:32 -07:00
if ( process . platform === 'win32' || process . platform === 'linux' ) {
2016-06-18 05:39:34 -07:00
var notificationSettings = [
{
label : 'Never' ,
state : 0
} ,
/ * 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
{
label : 'Only when idle (after 10 seconds)' ,
state : 1
} , * /
{
label : 'Always' ,
state : 2
}
] ;
var that = this ;
var notificationElements = notificationSettings . map ( function ( item ) {
var boundClick = that . handleFlashWindowSetting . bind ( that , item ) ;
return (
< 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
2016-06-18 05:39:34 -07:00
notifications _row = (
2016-06-22 08:03:04 -07:00
< Row id = "notificationsRow" >
2016-06-18 05:39:34 -07:00
< Col md = { 12 } >
2016-07-09 13:59:18 -07:00
< h3 > Notifications < / h3 > Flash the taskbar icon when a new message is received .
2016-06-18 05:39:34 -07:00
{ 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 >
2016-06-18 05:39:34 -07:00
< Col xs = { 4 } sm = { 2 } md = { 2 } lg = { 1 } >
2016-06-03 09:21:15 -07:00
< h2 > Teams < / h2 >
< / Col >
2016-06-18 05:39:34 -07:00
< Col xs = { 8 } sm = { 10 } md = { 10 } lg = { 11 } >
< Button bsSize = "small" style = { { marginTop : 20 } } 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-18 05:39:34 -07:00
{ notifications _row }
2016-06-05 03:50:15 -07:00
< 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-18 04:40:12 -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 ) {
2016-07-03 08:12:58 -07:00
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 }
/ > ;
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 ,
2016-08-22 05:48:28 -07:00
index : this . props . teamIndex ,
errorMessage : null
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 ( ) ;
2016-08-22 05:48:28 -07:00
const errorMessage = this . getValidationErrorMessage ( ) ;
if ( errorMessage ) {
this . setState ( {
errorMessage
} ) ;
return ;
}
2015-12-21 07:58:41 -08:00
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 : '' ,
2016-08-22 05:48:28 -07:00
index : '' ,
errorMessage : null
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-08-22 05:48:28 -07:00
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 ;
2016-03-10 06:25:35 -08:00
} ,
2016-08-22 05:48:28 -07:00
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 ) ;
} ,
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 >
{ ' ' }
2016-08-22 05:48:28 -07:00
< input type = "text" required className = "form-control" id = "inputTeamName" ref = "inputTeamName" placeholder = "Example team" value = { this . state . name } onChange = { this . handleNameChange }
/ >
2015-12-21 07:58:41 -08:00
< / div >
{ ' ' }
< div className = "form-group" >
< label for = "inputTeamURL" > URL < / label >
{ ' ' }
2016-08-22 05:48:28 -07:00
< input type = "url" required className = "form-control" id = "inputTeamURL" ref = "inputTeamURL" placeholder = "https://example.com/team" value = { this . state . url } onChange = { this . handleURLChange }
/ >
2015-12-21 07:58:41 -08:00
< / div >
{ ' ' }
2016-08-22 05:48:28 -07:00
< Button type = "submit" >
2016-05-25 13:28:47 -07:00
{ btnAddText }
< / Button >
2015-12-21 07:58:41 -08:00
< / form >
2016-08-22 05:48:28 -07:00
{ ( ( ) => {
if ( this . state . errorMessage !== null ) {
return ( < HelpBlock style = { { color : '#777777' } } >
{ this . state . errorMessage }
< / HelpBlock > ) ;
}
return null ;
} ) ( ) }
2015-12-21 07:58:41 -08:00
< / 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' )
) ;