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-09-11 08:18:09 -07:00
const { Grid , Row , Col , Input , Button , ListGroup , ListGroupItem , Glyphicon , HelpBlock , Navbar , Nav } = 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 ( {
2016-08-02 12:29:24 -07:00
name : 'Mattermost' ,
isHidden : true
2016-06-10 17:17:18 -07:00
} ) ;
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-09-11 08:18:09 -07:00
handleFlashWindow : function ( ) {
2016-06-05 03:50:15 -07:00
this . setState ( {
notifications : {
2016-09-11 08:18:09 -07:00
flashWindow : this . refs . flashWindow . getChecked ( ) ? 2 : 0
2016-06-05 03:50:15 -07:00
}
} ) ;
} ,
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-09-11 08:18:09 -07:00
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 } / > ) ;
}
2016-09-12 08:53:45 -07:00
const settingsPage = {
navbar : {
2016-09-13 09:23:10 -07:00
backgroundColor : '#fff' ,
} ,
close : {
position : 'absolute' ,
right : '0' ,
top : '20px' ,
fontSize : '1.3em' ,
fontWeight : 'normal' ,
color : '#bbb' ,
cursor : 'pointer'
2016-09-12 08:53:45 -07:00
} ,
heading : {
textAlign : 'center' ,
fontSize : '24px' ,
margin : '0' ,
2016-09-13 09:23:10 -07:00
padding : '1em 0' ,
position : 'relative'
2016-09-12 08:53:45 -07:00
} ,
sectionHeading : {
fontSize : '20px' ,
margin : '0' ,
padding : '1em 0'
} ,
sectionHeadingLink : {
marginTop : '24px' ,
display : 'inline-block' ,
fontSize : '15px'
} ,
footer : {
padding : '0.4em 0'
}
}
2016-01-14 05:50:12 -08:00
var options _row = ( options . length > 0 ) ? (
< Row >
< Col md = { 12 } >
2016-09-12 08:53:45 -07:00
< h2 style = { settingsPage . sectionHeading } > App options < / h2 >
2016-02-11 08:12:28 -08:00
{ options }
2016-01-14 05:50:12 -08:00
< / Col >
< / Row >
) : null ;
2015-12-19 06:51:19 -08:00
return (
2016-09-11 08:18:09 -07:00
< div >
2016-09-12 09:02:11 -07:00
< Navbar className = "navbar-fixed-top" style = { settingsPage . navbar } >
2016-09-13 09:23:10 -07:00
< h1 style = { settingsPage . heading } >
2016-09-13 09:25:39 -07:00
Settings
< div style = { settingsPage . close } onClick = { this . handleCancel } >
< span > × < / span >
< / div >
< / h1 >
2016-09-11 08:18:09 -07:00
< / Navbar >
2016-09-13 09:23:10 -07:00
< Grid className = "settingsPage" style = { { 'padding' : '100px 15px' } } >
2016-09-11 08:18:09 -07:00
< Row >
< Col md = { 10 } xs = { 8 } >
2016-09-12 08:53:45 -07:00
< h2 style = { settingsPage . sectionHeading } > Team Management < / h2 >
2016-09-11 08:18:09 -07:00
< / Col >
< Col md = { 2 } xs = { 4 } >
2016-09-12 08:53:45 -07:00
< p className = "text-right" > < a style = { settingsPage . sectionHeadingLink } href = "#" onClick = { this . toggleShowTeamForm } > ⊞ Add new team < / a > < / p >
2016-09-11 08:18:09 -07:00
< / Col >
< / Row >
{ teams _row }
2016-09-12 08:53:45 -07:00
< hr / >
2016-09-11 08:18:09 -07:00
{ options _row }
< div >
< / div >
2016-09-13 09:23:10 -07:00
< Row >
< Col md = { 12 } >
< / Col >
< / Row >
2016-09-11 08:18:09 -07:00
< / Grid >
< Navbar className = "navbar-fixed-bottom" >
2016-09-12 08:53:45 -07:00
< div className = 'text-right' style = { settingsPage . footer } >
< button id = "btnCancel" className = "btn btn-link" onClick = { this . handleCancel } > Cancel < / button >
2016-09-11 08:18:09 -07:00
{ ' ' }
< button id = "btnSave" className = "btn btn-primary navbar-btn" bsStyle = "primary" onClick = { this . handleSave } disabled = { this . state . teams . length === 0 } > Save < / button >
2016-09-12 08:53:45 -07:00
< / div >
2016-09-11 08:18:09 -07:00
< / Navbar >
< / div >
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-09-12 08:53:45 -07:00
< a hre = "#" onClick = { this . handleTeamEditing } > Edit < / a >
2016-09-11 08:18:09 -07:00
{ ' - ' }
2016-09-12 08:53:45 -07:00
< a hre = "#" onClick = { this . handleTeamRemove } > Remove < / a >
2015-12-21 07:58:41 -08:00
< / 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' ) ;
2016-09-04 12:05:28 -07:00
require ( 'electron-context-menu' ) ( {
window : remote . getCurrentWindow ( )
} ) ;
2015-12-23 00:55:39 -08:00
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' )
) ;