diff options
Diffstat (limited to 'web/react/components/admin_console')
18 files changed, 4250 insertions, 0 deletions
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx new file mode 100644 index 000000000..92f0bbdce --- /dev/null +++ b/web/react/components/admin_console/admin_controller.jsx @@ -0,0 +1,179 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminSidebar = require('./admin_sidebar.jsx'); +var AdminStore = require('../../stores/admin_store.jsx'); +var TeamStore = require('../../stores/team_store.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); +var LoadingScreen = require('../loading_screen.jsx'); + +var EmailSettingsTab = require('./email_settings.jsx'); +var LogSettingsTab = require('./log_settings.jsx'); +var LogsTab = require('./logs.jsx'); +var FileSettingsTab = require('./image_settings.jsx'); +var PrivacySettingsTab = require('./privacy_settings.jsx'); +var RateSettingsTab = require('./rate_settings.jsx'); +var GitLabSettingsTab = require('./gitlab_settings.jsx'); +var SqlSettingsTab = require('./sql_settings.jsx'); +var TeamSettingsTab = require('./team_settings.jsx'); +var ServiceSettingsTab = require('./service_settings.jsx'); +var TeamUsersTab = require('./team_users.jsx'); + +export default class AdminController extends React.Component { + constructor(props) { + super(props); + + this.selectTab = this.selectTab.bind(this); + this.removeSelectedTeam = this.removeSelectedTeam.bind(this); + this.addSelectedTeam = this.addSelectedTeam.bind(this); + this.onConfigListenerChange = this.onConfigListenerChange.bind(this); + this.onAllTeamsListenerChange = this.onAllTeamsListenerChange.bind(this); + + var selectedTeams = AdminStore.getSelectedTeams(); + if (selectedTeams == null) { + selectedTeams = {}; + selectedTeams[TeamStore.getCurrentId()] = 'true'; + AdminStore.saveSelectedTeams(selectedTeams); + } + + this.state = { + config: AdminStore.getConfig(), + teams: AdminStore.getAllTeams(), + selectedTeams, + selected: 'service_settings', + selectedTeam: null + }; + } + + componentDidMount() { + AdminStore.addConfigChangeListener(this.onConfigListenerChange); + AsyncClient.getConfig(); + + AdminStore.addAllTeamsChangeListener(this.onAllTeamsListenerChange); + AsyncClient.getAllTeams(); + } + + componentWillUnmount() { + AdminStore.removeConfigChangeListener(this.onConfigListenerChange); + AdminStore.removeAllTeamsChangeListener(this.onAllTeamsListenerChange); + } + + onConfigListenerChange() { + this.setState({ + config: AdminStore.getConfig(), + teams: AdminStore.getAllTeams(), + selectedTeams: AdminStore.getSelectedTeams(), + selected: this.state.selected, + selectedTeam: this.state.selectedTeam + }); + } + + onAllTeamsListenerChange() { + this.setState({ + config: AdminStore.getConfig(), + teams: AdminStore.getAllTeams(), + selectedTeams: AdminStore.getSelectedTeams(), + selected: this.state.selected, + selectedTeam: this.state.selectedTeam + + }); + } + + selectTab(tab, teamId) { + this.setState({ + config: AdminStore.getConfig(), + teams: AdminStore.getAllTeams(), + selectedTeams: AdminStore.getSelectedTeams(), + selected: tab, + selectedTeam: teamId + }); + } + + removeSelectedTeam(teamId) { + var selectedTeams = AdminStore.getSelectedTeams(); + Reflect.deleteProperty(selectedTeams, teamId); + AdminStore.saveSelectedTeams(selectedTeams); + + this.setState({ + config: AdminStore.getConfig(), + teams: AdminStore.getAllTeams(), + selectedTeams: AdminStore.getSelectedTeams(), + selected: this.state.selected, + selectedTeam: this.state.selectedTeam + }); + } + + addSelectedTeam(teamId) { + var selectedTeams = AdminStore.getSelectedTeams(); + selectedTeams[teamId] = 'true'; + AdminStore.saveSelectedTeams(selectedTeams); + + this.setState({ + config: AdminStore.getConfig(), + teams: AdminStore.getAllTeams(), + selectedTeams: AdminStore.getSelectedTeams(), + selected: this.state.selected, + selectedTeam: this.state.selectedTeam + }); + } + + render() { + var tab = <LoadingScreen />; + + if (this.state.config != null) { + if (this.state.selected === 'email_settings') { + tab = <EmailSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'log_settings') { + tab = <LogSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'logs') { + tab = <LogsTab />; + } else if (this.state.selected === 'image_settings') { + tab = <FileSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'privacy_settings') { + tab = <PrivacySettingsTab config={this.state.config} />; + } else if (this.state.selected === 'rate_settings') { + tab = <RateSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'gitlab_settings') { + tab = <GitLabSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'sql_settings') { + tab = <SqlSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'team_settings') { + tab = <TeamSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'service_settings') { + tab = <ServiceSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'team_users') { + tab = <TeamUsersTab team={this.state.teams[this.state.selectedTeam]} />; + } + } + + return ( + <div className='container-fluid'> + <div + className='sidebar--menu' + id='sidebar-menu' + /> + <AdminSidebar + selected={this.state.selected} + selectedTeam={this.state.selectedTeam} + selectTab={this.selectTab} + teams={this.state.teams} + selectedTeams={this.state.selectedTeams} + removeSelectedTeam={this.removeSelectedTeam} + addSelectedTeam={this.addSelectedTeam} + /> + <div className='inner__wrap channel__wrap'> + <div className='row header'> + </div> + <div className='row main'> + <div + id='app-content' + className='app__content admin' + > + {tab} + </div> + </div> + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/admin_navbar_dropdown.jsx b/web/react/components/admin_console/admin_navbar_dropdown.jsx new file mode 100644 index 000000000..a3ab81079 --- /dev/null +++ b/web/react/components/admin_console/admin_navbar_dropdown.jsx @@ -0,0 +1,102 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Utils = require('../../utils/utils.jsx'); +var Client = require('../../utils/client.jsx'); +var TeamStore = require('../../stores/team_store.jsx'); + +var Constants = require('../../utils/constants.jsx'); + +function getStateFromStores() { + return {currentTeam: TeamStore.getCurrent()}; +} + +export default class AdminNavbarDropdown extends React.Component { + constructor(props) { + super(props); + this.blockToggle = false; + + this.handleLogoutClick = this.handleLogoutClick.bind(this); + + this.state = getStateFromStores(); + } + + handleLogoutClick(e) { + e.preventDefault(); + Client.logout(); + } + + componentDidMount() { + $(React.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', () => { + this.blockToggle = true; + setTimeout(() => { + this.blockToggle = false; + }, 100); + }); + } + + componentWillUnmount() { + $(React.findDOMNode(this.refs.dropdown)).off('hide.bs.dropdown'); + } + + render() { + return ( + <ul className='nav navbar-nav navbar-right'> + <li + ref='dropdown' + className='dropdown' + > + <a + href='#' + className='dropdown-toggle' + data-toggle='dropdown' + role='button' + aria-expanded='false' + > + <span + className='dropdown__icon' + dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} + /> + </a> + <ul + className='dropdown-menu' + role='menu' + > + <li> + <a + href={Utils.getWindowLocationOrigin() + '/' + this.state.currentTeam.name} + > + {'Switch to ' + this.state.currentTeam.display_name} + </a> + </li> + <li> + <a + href='#' + onClick={this.handleLogoutClick} + > + {'Logout'} + </a> + </li> + <li className='divider'></li> + <li> + <a + target='_blank' + href='/static/help/help.html' + > + {'Help'} + </a> + </li> + <li> + <a + target='_blank' + href='/static/help/report_problem.html' + > + {'Report a Problem'} + </a> + </li> + </ul> + </li> + </ul> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx new file mode 100644 index 000000000..cebb3ff20 --- /dev/null +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -0,0 +1,278 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminSidebarHeader = require('./admin_sidebar_header.jsx'); +var SelectTeamModal = require('./select_team_modal.jsx'); + +export default class AdminSidebar extends React.Component { + constructor(props) { + super(props); + + this.isSelected = this.isSelected.bind(this); + this.handleClick = this.handleClick.bind(this); + this.removeTeam = this.removeTeam.bind(this); + + this.showTeamSelect = this.showTeamSelect.bind(this); + this.teamSelectedModal = this.teamSelectedModal.bind(this); + this.teamSelectedModalDismissed = this.teamSelectedModalDismissed.bind(this); + + this.state = { + showSelectModal: false + }; + } + + handleClick(name, teamId, e) { + e.preventDefault(); + this.props.selectTab(name, teamId); + } + + isSelected(name, teamId) { + if (this.props.selected === name) { + if (name === 'team_users') { + if (this.props.selectedTeam != null && this.props.selectedTeam === teamId) { + return 'active'; + } + } else { + return 'active'; + } + } + + return ''; + } + + removeTeam(teamId, e) { + e.preventDefault(); + Reflect.deleteProperty(this.props.selectedTeams, teamId); + this.props.removeSelectedTeam(teamId); + + if (this.props.selected === 'team_users') { + if (this.props.selectedTeam != null && this.props.selectedTeam === teamId) { + this.props.selectTab('service_settings', null); + } + } + } + + componentDidMount() { + } + + showTeamSelect(e) { + e.preventDefault(); + this.setState({showSelectModal: true}); + } + + teamSelectedModal(teamId) { + this.props.selectedTeams[teamId] = 'true'; + this.setState({showSelectModal: false}); + this.props.addSelectedTeam(teamId); + this.forceUpdate(); + } + + teamSelectedModalDismissed() { + this.setState({showSelectModal: false}); + } + + render() { + var count = '*'; + var teams = 'Loading'; + + if (this.props.teams != null) { + count = '' + Object.keys(this.props.teams).length; + + teams = []; + for (var key in this.props.selectedTeams) { + if (this.props.selectedTeams.hasOwnProperty(key)) { + var team = this.props.teams[key]; + + if (team != null) { + teams.push( + <ul + key={'team_' + team.id} + className='nav nav__sub-menu' + > + <li> + <a + href='#' + onClick={this.handleClick.bind(this, 'team_users', team.id)} + className={'nav__sub-menu-item ' + this.isSelected('team_users', team.id)} + > + {team.name} + <span + className='menu-icon--right menu__close' + onClick={this.removeTeam.bind(this, team.id)} + style={{cursor: 'pointer'}} + > + {'x'} + </span> + </a> + </li> + <li> + <ul className='nav nav__inner-menu'> + <li> + <a + href='#' + className={this.isSelected('team_users', team.id)} + onClick={this.handleClick.bind(this, 'team_users', team.id)} + > + {'- Users'} + </a> + </li> + </ul> + </li> + </ul> + ); + } + } + } + } + + return ( + <div className='sidebar--left sidebar--collapsable'> + <div> + <AdminSidebarHeader /> + <ul className='nav nav-pills nav-stacked'> + <li> + <ul className='nav nav__sub-menu'> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span>{'SETTINGS'}</span> + </h4> + </li> + <li> + <a + href='#' + className={this.isSelected('service_settings')} + onClick={this.handleClick.bind(this, 'service_settings', null)} + > + {'Service Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('team_settings')} + onClick={this.handleClick.bind(this, 'team_settings', null)} + > + {'Team Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('sql_settings')} + onClick={this.handleClick.bind(this, 'sql_settings', null)} + > + {'SQL Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('email_settings')} + onClick={this.handleClick.bind(this, 'email_settings', null)} + > + {'Email Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('image_settings')} + onClick={this.handleClick.bind(this, 'image_settings', null)} + > + {'File Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('log_settings')} + onClick={this.handleClick.bind(this, 'log_settings', null)} + > + {'Log Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('rate_settings')} + onClick={this.handleClick.bind(this, 'rate_settings', null)} + > + {'Rate Limit Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('privacy_settings')} + onClick={this.handleClick.bind(this, 'privacy_settings', null)} + > + {'Privacy Settings'} + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('gitlab_settings')} + onClick={this.handleClick.bind(this, 'gitlab_settings', null)} + > + {'GitLab Settings'} + </a> + </li> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span>{'TEAMS (' + count + ')'}</span> + <span className='menu-icon--right'> + <a + href='#' + onClick={this.showTeamSelect} + > + <i className='fa fa-plus'></i> + </a> + </span> + </h4> + </li> + <li> + {teams} + </li> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span>{'OTHER'}</span> + </h4> + </li> + <li> + <a + href='#' + className={this.isSelected('logs')} + onClick={this.handleClick.bind(this, 'logs', null)} + > + {'Logs'} + </a> + </li> + </ul> + </li> + </ul> + </div> + + <SelectTeamModal + teams={this.props.teams} + show={this.state.showSelectModal} + onModalSubmit={this.teamSelectedModal} + onModalDismissed={this.teamSelectedModalDismissed} + /> + </div> + ); + } +} + +AdminSidebar.propTypes = { + teams: React.PropTypes.object, + selectedTeams: React.PropTypes.object, + removeSelectedTeam: React.PropTypes.func, + addSelectedTeam: React.PropTypes.func, + selected: React.PropTypes.string, + selectedTeam: React.PropTypes.string, + selectTab: React.PropTypes.func +};
\ No newline at end of file diff --git a/web/react/components/admin_console/admin_sidebar_header.jsx b/web/react/components/admin_console/admin_sidebar_header.jsx new file mode 100644 index 000000000..81798da45 --- /dev/null +++ b/web/react/components/admin_console/admin_sidebar_header.jsx @@ -0,0 +1,60 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminNavbarDropdown = require('./admin_navbar_dropdown.jsx'); +var UserStore = require('../../stores/user_store.jsx'); + +export default class SidebarHeader extends React.Component { + constructor(props) { + super(props); + + this.toggleDropdown = this.toggleDropdown.bind(this); + + this.state = {}; + } + + toggleDropdown(e) { + e.preventDefault(); + + if (this.refs.dropdown.blockToggle) { + this.refs.dropdown.blockToggle = false; + return; + } + + $('.team__header').find('.dropdown-toggle').dropdown('toggle'); + } + + render() { + var me = UserStore.getCurrentUser(); + var profilePicture = null; + + if (!me) { + return null; + } + + if (me.last_picture_update) { + profilePicture = ( + <img + className='user__picture' + src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at} + /> + ); + } + + return ( + <div className='team__header theme'> + <a + href='#' + onClick={this.toggleDropdown} + > + {profilePicture} + <div className='header__info'> + <div className='user__name'>{'@' + me.username}</div> + <div className='team__name'>{'System Console'}</div> + </div> + </a> + <AdminNavbarDropdown ref='dropdown' /> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx new file mode 100644 index 000000000..32c832c6a --- /dev/null +++ b/web/react/components/admin_console/email_settings.jsx @@ -0,0 +1,549 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); +var crypto = require('crypto'); + +export default class EmailSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleTestConnection = this.handleTestConnection.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.buildConfig = this.buildConfig.bind(this); + this.handleGenerateInvite = this.handleGenerateInvite.bind(this); + this.handleGenerateReset = this.handleGenerateReset.bind(this); + + this.state = { + sendEmailNotifications: this.props.config.EmailSettings.SendEmailNotifications, + saveNeeded: false, + serverError: null, + emailSuccess: null, + emailFail: null + }; + } + + handleChange(action) { + var s = {saveNeeded: true, serverError: this.state.serverError}; + + if (action === 'sendEmailNotifications_true') { + s.sendEmailNotifications = true; + } + + if (action === 'sendEmailNotifications_false') { + s.sendEmailNotifications = false; + } + + this.setState(s); + } + + buildConfig() { + var config = this.props.config; + config.EmailSettings.EnableSignUpWithEmail = React.findDOMNode(this.refs.allowSignUpWithEmail).checked; + config.EmailSettings.SendEmailNotifications = React.findDOMNode(this.refs.sendEmailNotifications).checked; + config.EmailSettings.RequireEmailVerification = React.findDOMNode(this.refs.requireEmailVerification).checked; + config.EmailSettings.SendEmailNotifications = React.findDOMNode(this.refs.sendEmailNotifications).checked; + config.EmailSettings.FeedbackName = React.findDOMNode(this.refs.feedbackName).value.trim(); + config.EmailSettings.FeedbackEmail = React.findDOMNode(this.refs.feedbackEmail).value.trim(); + config.EmailSettings.SMTPServer = React.findDOMNode(this.refs.SMTPServer).value.trim(); + config.EmailSettings.SMTPPort = React.findDOMNode(this.refs.SMTPPort).value.trim(); + config.EmailSettings.SMTPUsername = React.findDOMNode(this.refs.SMTPUsername).value.trim(); + config.EmailSettings.SMTPPassword = React.findDOMNode(this.refs.SMTPPassword).value.trim(); + config.EmailSettings.ConnectionSecurity = React.findDOMNode(this.refs.ConnectionSecurity).value.trim(); + + config.EmailSettings.InviteSalt = React.findDOMNode(this.refs.InviteSalt).value.trim(); + if (config.EmailSettings.InviteSalt === '') { + config.EmailSettings.InviteSalt = crypto.randomBytes(256).toString('base64').substring(0, 32); + React.findDOMNode(this.refs.InviteSalt).value = config.EmailSettings.InviteSalt; + } + + config.EmailSettings.PasswordResetSalt = React.findDOMNode(this.refs.PasswordResetSalt).value.trim(); + if (config.EmailSettings.PasswordResetSalt === '') { + config.EmailSettings.PasswordResetSalt = crypto.randomBytes(256).toString('base64').substring(0, 32); + React.findDOMNode(this.refs.PasswordResetSalt).value = config.EmailSettings.PasswordResetSalt; + } + + return config; + } + + handleGenerateInvite(e) { + e.preventDefault(); + React.findDOMNode(this.refs.InviteSalt).value = crypto.randomBytes(256).toString('base64').substring(0, 32); + var s = {saveNeeded: true, serverError: this.state.serverError}; + this.setState(s); + } + + handleGenerateReset(e) { + e.preventDefault(); + React.findDOMNode(this.refs.PasswordResetSalt).value = crypto.randomBytes(256).toString('base64').substring(0, 32); + var s = {saveNeeded: true, serverError: this.state.serverError}; + this.setState(s); + } + + handleTestConnection(e) { + e.preventDefault(); + $('#connection-button').button('loading'); + + var config = this.buildConfig(); + + Client.testEmail( + config, + () => { + this.setState({ + sendEmailNotifications: config.EmailSettings.SendEmailNotifications, + serverError: null, + saveNeeded: true, + emailSuccess: true, + emailFail: null + }); + $('#connection-button').button('reset'); + }, + (err) => { + this.setState({ + sendEmailNotifications: config.EmailSettings.SendEmailNotifications, + serverError: null, + saveNeeded: true, + emailSuccess: null, + emailFail: err.message + ' - ' + err.detailed_error + }); + $('#connection-button').button('reset'); + } + ); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.buildConfig(); + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + sendEmailNotifications: config.EmailSettings.SendEmailNotifications, + serverError: null, + saveNeeded: false, + emailSuccess: null, + emailFail: null + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + sendEmailNotifications: config.EmailSettings.SendEmailNotifications, + serverError: err.message, + saveNeeded: true, + emailSuccess: null, + emailFail: null + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + var emailSuccess = ''; + if (this.state.emailSuccess) { + emailSuccess = ( + <div className='alert alert-success'> + <i className='fa fa-check'></i>{'No errors were reported while sending an email. Please check your inbox to make sure.'} + </div> + ); + } + + var emailFail = ''; + if (this.state.emailFail) { + emailSuccess = ( + <div className='alert alert-warning'> + <i className='fa fa-warning'></i>{'Connection unsuccessful: ' + this.state.emailFail} + </div> + ); + } + + return ( + <div className='wrapper--fixed'> + <h3>{'Email Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='allowSignUpWithEmail' + > + {'Allow Sign Up With Email: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='allowSignUpWithEmail' + value='true' + ref='allowSignUpWithEmail' + defaultChecked={this.props.config.EmailSettings.EnableSignUpWithEmail} + onChange={this.handleChange.bind(this, 'allowSignUpWithEmail_true')} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='allowSignUpWithEmail' + value='false' + defaultChecked={!this.props.config.EmailSettings.EnableSignUpWithEmail} + onChange={this.handleChange.bind(this, 'allowSignUpWithEmail_false')} + /> + {'false'} + </label> + <p className='help-text'>{'When true, Mattermost allows team creation and account signup using email and password. This value should be false only when you want to limit signup to a single-sign-on service like OAuth or LDAP.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='sendEmailNotifications' + > + {'Send Email Notifications: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='sendEmailNotifications' + value='true' + ref='sendEmailNotifications' + defaultChecked={this.props.config.EmailSettings.SendEmailNotifications} + onChange={this.handleChange.bind(this, 'sendEmailNotifications_true')} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='sendEmailNotifications' + value='false' + defaultChecked={!this.props.config.EmailSettings.SendEmailNotifications} + onChange={this.handleChange.bind(this, 'sendEmailNotifications_false')} + /> + {'false'} + </label> + <p className='help-text'>{'Typically set to true in production. When true, Mattermost attempts to send email notifications. Developers may set this field to false to skip email setup for faster development.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='requireEmailVerification' + > + {'Require Email Verification: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='requireEmailVerification' + value='true' + ref='requireEmailVerification' + defaultChecked={this.props.config.EmailSettings.RequireEmailVerification} + onChange={this.handleChange.bind(this, 'requireEmailVerification_true')} + disabled={!this.state.sendEmailNotifications} + /> + {'true'} + </label> + <input + type='radio' + name='requireEmailVerification' + value='false' + defaultChecked={!this.props.config.EmailSettings.RequireEmailVerification} + onChange={this.handleChange.bind(this, 'requireEmailVerification_false')} + disabled={!this.state.sendEmailNotifications} + /> + {'false'} + </label> + <p className='help-text'>{'Typically set to true in production. When true, Mattermost requires email verification after account creation prior to allowing login. Developers may set this field to false so skip sending verification emails for faster development.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackName' + > + {'Feedback Name:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackName' + ref='feedbackName' + placeholder='Ex: "Mattermost Notification", "System", "No-Reply"' + defaultValue={this.props.config.EmailSettings.FeedbackName} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{'Display name on email account used when sending notification emails from Mattermost.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackEmail' + > + {'Feedback Email:'} + </label> + <div className='col-sm-8'> + <input + type='email' + className='form-control' + id='feedbackEmail' + ref='feedbackEmail' + placeholder='Ex: "mattermost@yourcompany.com", "admin@yourcompany.com"' + defaultValue={this.props.config.EmailSettings.FeedbackEmail} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{'Email address displayed on email account used when sending notification emails from Mattermost.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='SMTPUsername' + > + {'SMTP Username:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='SMTPUsername' + ref='SMTPUsername' + placeholder='Ex: "admin@yourcompany.com", "AKIADTOVBGERKLCBV"' + defaultValue={this.props.config.EmailSettings.SMTPUsername} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{' Obtain this credential from administrator setting up your email server.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='SMTPPassword' + > + {'SMTP Password:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='SMTPPassword' + ref='SMTPPassword' + placeholder='Ex: "yourpassword", "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"' + defaultValue={this.props.config.EmailSettings.SMTPPassword} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{' Obtain this credential from administrator setting up your email server.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='SMTPServer' + > + {'SMTP Server:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='SMTPServer' + ref='SMTPServer' + placeholder='Ex: "smtp.yourcompany.com", "email-smtp.us-east-1.amazonaws.com"' + defaultValue={this.props.config.EmailSettings.SMTPServer} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{'Location of SMTP email server.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='SMTPPort' + > + {'SMTP Port:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='SMTPPort' + ref='SMTPPort' + placeholder='Ex: "25", "465"' + defaultValue={this.props.config.EmailSettings.SMTPPort} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{'Port of SMTP email server.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ConnectionSecurity' + > + {'Connection Security:'} + </label> + <div className='col-sm-8'> + <select + className='form-control' + id='ConnectionSecurity' + ref='ConnectionSecurity' + defaultValue={this.props.config.EmailSettings.ConnectionSecurity} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + > + <option value=''>{'None'}</option> + <option value='TLS'>{'TLS (Recommended)'}</option> + <option value='STARTTLS'>{'STARTTLS'}</option> + </select> + <div className='help-text'> + <table + className='table-bordered' + cellPadding='5' + > + <tr><td className='help-text'>{'None'}</td><td className='help-text'>{'Mattermost will send email over an unsecure connection.'}</td></tr> + <tr><td className='help-text'>{'TLS'}</td><td className='help-text'>{'Encrypts the communication between Mattermost and your email server.'}</td></tr> + <tr><td className='help-text'>{'STARTTLS'}</td><td className='help-text'>{'Takes an existing insecure connection and attempts to upgrade it to a secure connection using TLS.'}</td></tr> + </table> + </div> + <div className='help-text'> + <button + className='help-link' + onClick={this.handleTestConnection} + disabled={!this.state.sendEmailNotifications} + id='connection-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Testing...'} + > + {'Test Connection'} + </button> + {emailSuccess} + {emailFail} + </div> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='InviteSalt' + > + {'Invite Salt:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='InviteSalt' + ref='InviteSalt' + placeholder='Ex "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9Yo"' + defaultValue={this.props.config.EmailSettings.InviteSalt} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{'32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p> + <div className='help-text'> + <button + className='help-link' + onClick={this.handleGenerateInvite} + disabled={!this.state.sendEmailNotifications} + > + {'Re-Generate'} + </button> + </div> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='PasswordResetSalt' + > + {'Password Reset Salt:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='PasswordResetSalt' + ref='PasswordResetSalt' + placeholder='Ex "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9Yo"' + defaultValue={this.props.config.EmailSettings.PasswordResetSalt} + onChange={this.handleChange} + disabled={!this.state.sendEmailNotifications} + /> + <p className='help-text'>{'32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p> + <div className='help-text'> + <button + className='help-link' + onClick={this.handleGenerateReset} + disabled={!this.state.sendEmailNotifications} + > + {'Re-Generate'} + </button> + </div> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +EmailSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/gitlab_settings.jsx b/web/react/components/admin_console/gitlab_settings.jsx new file mode 100644 index 000000000..1e10c5592 --- /dev/null +++ b/web/react/components/admin_console/gitlab_settings.jsx @@ -0,0 +1,277 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class GitLabSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + Allow: this.props.config.GitLabSettings.Allow, + saveNeeded: false, + serverError: null + }; + } + + handleChange(action) { + var s = {saveNeeded: true, serverError: this.state.serverError}; + + if (action === 'AllowTrue') { + s.Allow = true; + } + + if (action === 'AllowFalse') { + s.Allow = false; + } + + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.GitLabSettings.Allow = React.findDOMNode(this.refs.Allow).checked; + config.GitLabSettings.Secret = React.findDOMNode(this.refs.Secret).value.trim(); + config.GitLabSettings.Id = React.findDOMNode(this.refs.Id).value.trim(); + config.GitLabSettings.Scope = React.findDOMNode(this.refs.Scope).value.trim(); + config.GitLabSettings.AuthEndpoint = React.findDOMNode(this.refs.AuthEndpoint).value.trim(); + config.GitLabSettings.TokenEndpoint = React.findDOMNode(this.refs.TokenEndpoint).value.trim(); + config.GitLabSettings.UserApiEndpoint = React.findDOMNode(this.refs.UserApiEndpoint).value.trim(); + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + return ( + <div className='wrapper--fixed'> + + <h3>{'GitLab Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='Allow' + > + {'Enable Sign Up With GitLab: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='Allow' + value='true' + ref='Allow' + defaultChecked={this.props.config.GitLabSettings.Allow} + onChange={this.handleChange.bind(this, 'AllowTrue')} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='Allow' + value='false' + defaultChecked={!this.props.config.GitLabSettings.Allow} + onChange={this.handleChange.bind(this, 'AllowFalse')} + /> + {'false'} + </label> + <p className='help-text'>{'When true, Mattermost allows team creation and account signup using GitLab OAuth. To configure, log in to your GitLab account and go to Applications -> Profile Settings. Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". Then use "Secret" and "Id" fields to complete the options below.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='Secret' + > + {'Secret:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='Secret' + ref='Secret' + placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"' + defaultValue={this.props.config.GitLabSettings.Secret} + onChange={this.handleChange} + disabled={!this.state.Allow} + /> + <p className='help-text'>{'Obtain this value via the instructions above for logging into GitLab.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='Id' + > + {'Id:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='Id' + ref='Id' + placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"' + defaultValue={this.props.config.GitLabSettings.Id} + onChange={this.handleChange} + disabled={!this.state.Allow} + /> + <p className='help-text'>{'Obtain this value via the instructions above for logging into GitLab'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='Scope' + > + {'Scope:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='Scope' + ref='Scope' + placeholder='Not currently used by GitLab. Please leave blank' + defaultValue={this.props.config.GitLabSettings.Scope} + onChange={this.handleChange} + disabled={!this.state.Allow} + /> + <p className='help-text'>{'This field is not yet used by GitLab OAuth. Other OAuth providers may use this field to specify the scope of account data from OAuth provider that is sent to Mattermost.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='AuthEndpoint' + > + {'Auth Endpoint:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='AuthEndpoint' + ref='AuthEndpoint' + placeholder='Ex ""' + defaultValue={this.props.config.GitLabSettings.AuthEndpoint} + onChange={this.handleChange} + disabled={!this.state.Allow} + /> + <p className='help-text'>{'Enter <your-gitlab-url>/oauth/authorize (example http://localhost:3000/oauth/authorize).'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='TokenEndpoint' + > + {'Token Endpoint:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='TokenEndpoint' + ref='TokenEndpoint' + placeholder='Ex ""' + defaultValue={this.props.config.GitLabSettings.TokenEndpoint} + onChange={this.handleChange} + disabled={!this.state.Allow} + /> + <p className='help-text'>{'Enter <your-gitlab-url>/oauth/token.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='UserApiEndpoint' + > + {'User API Endpoint:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='UserApiEndpoint' + ref='UserApiEndpoint' + placeholder='Ex ""' + defaultValue={this.props.config.GitLabSettings.UserApiEndpoint} + onChange={this.handleChange} + disabled={!this.state.Allow} + /> + <p className='help-text'>{'Enter <your-gitlab-url>/api/v3/user.'}</p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +GitLabSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/image_settings.jsx b/web/react/components/admin_console/image_settings.jsx new file mode 100644 index 000000000..e52f516e8 --- /dev/null +++ b/web/react/components/admin_console/image_settings.jsx @@ -0,0 +1,496 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); +var crypto = require('crypto'); + +export default class FileSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.handleGenerate = this.handleGenerate.bind(this); + + this.state = { + saveNeeded: false, + serverError: null, + DriverName: this.props.config.FileSettings.DriverName + }; + } + + handleChange(action) { + var s = {saveNeeded: true, serverError: this.state.serverError}; + + if (action === 'DriverName') { + s.DriverName = React.findDOMNode(this.refs.DriverName).value; + } + + this.setState(s); + } + + handleGenerate(e) { + e.preventDefault(); + React.findDOMNode(this.refs.PublicLinkSalt).value = crypto.randomBytes(256).toString('base64').substring(0, 32); + var s = {saveNeeded: true, serverError: this.state.serverError}; + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.FileSettings.DriverName = React.findDOMNode(this.refs.DriverName).value; + config.FileSettings.Directory = React.findDOMNode(this.refs.Directory).value; + config.FileSettings.AmazonS3AccessKeyId = React.findDOMNode(this.refs.AmazonS3AccessKeyId).value; + config.FileSettings.AmazonS3SecretAccessKey = React.findDOMNode(this.refs.AmazonS3SecretAccessKey).value; + config.FileSettings.AmazonS3Bucket = React.findDOMNode(this.refs.AmazonS3Bucket).value; + config.FileSettings.AmazonS3Region = React.findDOMNode(this.refs.AmazonS3Region).value; + config.FileSettings.EnablePublicLink = React.findDOMNode(this.refs.EnablePublicLink).checked; + + config.FileSettings.PublicLinkSalt = React.findDOMNode(this.refs.PublicLinkSalt).value.trim(); + + if (config.FileSettings.PublicLinkSalt === '') { + config.FileSettings.PublicLinkSalt = crypto.randomBytes(256).toString('base64').substring(0, 32); + React.findDOMNode(this.refs.PublicLinkSalt).value = config.FileSettings.PublicLinkSalt; + } + + var thumbnailWidth = 120; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ThumbnailWidth).value, 10))) { + thumbnailWidth = parseInt(React.findDOMNode(this.refs.ThumbnailWidth).value, 10); + } + config.FileSettings.ThumbnailWidth = thumbnailWidth; + React.findDOMNode(this.refs.ThumbnailWidth).value = thumbnailWidth; + + var thumbnailHeight = 100; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ThumbnailHeight).value, 10))) { + thumbnailHeight = parseInt(React.findDOMNode(this.refs.ThumbnailHeight).value, 10); + } + config.FileSettings.ThumbnailHeight = thumbnailHeight; + React.findDOMNode(this.refs.ThumbnailHeight).value = thumbnailHeight; + + var previewWidth = 1024; + if (!isNaN(parseInt(React.findDOMNode(this.refs.PreviewWidth).value, 10))) { + previewWidth = parseInt(React.findDOMNode(this.refs.PreviewWidth).value, 10); + } + config.FileSettings.PreviewWidth = previewWidth; + React.findDOMNode(this.refs.PreviewWidth).value = previewWidth; + + var previewHeight = 0; + if (!isNaN(parseInt(React.findDOMNode(this.refs.PreviewHeight).value, 10))) { + previewHeight = parseInt(React.findDOMNode(this.refs.PreviewHeight).value, 10); + } + config.FileSettings.PreviewHeight = previewHeight; + React.findDOMNode(this.refs.PreviewHeight).value = previewHeight; + + var profileWidth = 128; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ProfileWidth).value, 10))) { + profileWidth = parseInt(React.findDOMNode(this.refs.ProfileWidth).value, 10); + } + config.FileSettings.ProfileWidth = profileWidth; + React.findDOMNode(this.refs.ProfileWidth).value = profileWidth; + + var profileHeight = 128; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ProfileHeight).value, 10))) { + profileHeight = parseInt(React.findDOMNode(this.refs.ProfileHeight).value, 10); + } + config.FileSettings.ProfileHeight = profileHeight; + React.findDOMNode(this.refs.ProfileHeight).value = profileHeight; + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + var enableFile = false; + var enableS3 = false; + + if (this.state.DriverName === 'local') { + enableFile = true; + } + + if (this.state.DriverName === 'amazons3') { + enableS3 = true; + } + + return ( + <div className='wrapper--fixed'> + <h3>{'File Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='DriverName' + > + {'Store Files In:'} + </label> + <div className='col-sm-8'> + <select + className='form-control' + id='DriverName' + ref='DriverName' + defaultValue={this.props.config.FileSettings.DriverName} + onChange={this.handleChange.bind(this, 'DriverName')} + > + <option value=''>{'Disable File Storage'}</option> + <option value='local'>{'Local File System'}</option> + <option value='amazons3'>{'Amazon S3'}</option> + </select> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='Directory' + > + {'Local Directory Location:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='Directory' + ref='Directory' + placeholder='Ex "./data/"' + defaultValue={this.props.config.FileSettings.Directory} + onChange={this.handleChange} + disabled={!enableFile} + /> + <p className='help-text'>{'Directory to which image files are written. If blank, will be set to ./data/.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='AmazonS3AccessKeyId' + > + {'Amazon S3 Access Key Id:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='AmazonS3AccessKeyId' + ref='AmazonS3AccessKeyId' + placeholder='Ex "AKIADTOVBGERKLCBV"' + defaultValue={this.props.config.FileSettings.AmazonS3AccessKeyId} + onChange={this.handleChange} + disabled={!enableS3} + /> + <p className='help-text'>{'Obtain this credential from your Amazon EC2 administrator.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='AmazonS3SecretAccessKey' + > + {'Amazon S3 Secret Access Key:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='AmazonS3SecretAccessKey' + ref='AmazonS3SecretAccessKey' + placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"' + defaultValue={this.props.config.FileSettings.AmazonS3SecretAccessKey} + onChange={this.handleChange} + disabled={!enableS3} + /> + <p className='help-text'>{'Obtain this credential from your Amazon EC2 administrator.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='AmazonS3Bucket' + > + {'Amazon S3 Bucket:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='AmazonS3Bucket' + ref='AmazonS3Bucket' + placeholder='Ex "mattermost-media"' + defaultValue={this.props.config.FileSettings.AmazonS3Bucket} + onChange={this.handleChange} + disabled={!enableS3} + /> + <p className='help-text'>{'Name you selected for your S3 bucket in AWS.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='AmazonS3Region' + > + {'Amazon S3 Region:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='AmazonS3Region' + ref='AmazonS3Region' + placeholder='Ex "us-east-1"' + defaultValue={this.props.config.FileSettings.AmazonS3Region} + onChange={this.handleChange} + disabled={!enableS3} + /> + <p className='help-text'>{'AWS region you selected for creating your S3 bucket.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ThumbnailWidth' + > + {'Thumbnail Width:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='ThumbnailWidth' + ref='ThumbnailWidth' + placeholder='Ex "120"' + defaultValue={this.props.config.FileSettings.ThumbnailWidth} + onChange={this.handleChange} + /> + <p className='help-text'>{'Width of thumbnails generated from uploaded images. Updating this value changes how thumbnail images render in future, but does not change images created in the past.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ThumbnailHeight' + > + {'Thumbnail Height:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='ThumbnailHeight' + ref='ThumbnailHeight' + placeholder='Ex "100"' + defaultValue={this.props.config.FileSettings.ThumbnailHeight} + onChange={this.handleChange} + /> + <p className='help-text'>{'Height of thumbnails generated from uploaded images. Updating this value changes how thumbnail images render in future, but does not change images created in the past.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='PreviewWidth' + > + {'Preview Width:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='PreviewWidth' + ref='PreviewWidth' + placeholder='Ex "1024"' + defaultValue={this.props.config.FileSettings.PreviewWidth} + onChange={this.handleChange} + /> + <p className='help-text'>{'Maximum width of preview image. Updating this value changes how preview images render in future, but does not change images created in the past.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='PreviewHeight' + > + {'Preview Height:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='PreviewHeight' + ref='PreviewHeight' + placeholder='Ex "0"' + defaultValue={this.props.config.FileSettings.PreviewHeight} + onChange={this.handleChange} + /> + <p className='help-text'>{'Maximum height of preview image ("0": Sets to auto-size). Updating this value changes how preview images render in future, but does not change images created in the past.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ProfileWidth' + > + {'Profile Width:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='ProfileWidth' + ref='ProfileWidth' + placeholder='Ex "1024"' + defaultValue={this.props.config.FileSettings.ProfileWidth} + onChange={this.handleChange} + /> + <p className='help-text'>{'Width of profile picture.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ProfileHeight' + > + {'Profile Height:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='ProfileHeight' + ref='ProfileHeight' + placeholder='Ex "0"' + defaultValue={this.props.config.FileSettings.ProfileHeight} + onChange={this.handleChange} + /> + <p className='help-text'>{'Height of profile picture.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='EnablePublicLink' + > + {'Share Public File Link: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='EnablePublicLink' + value='true' + ref='EnablePublicLink' + defaultChecked={this.props.config.FileSettings.EnablePublicLink} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='EnablePublicLink' + value='false' + defaultChecked={!this.props.config.FileSettings.EnablePublicLink} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'Allow users to share public links to files and images.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='PublicLinkSalt' + > + {'Public Link Salt:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='PublicLinkSalt' + ref='PublicLinkSalt' + placeholder='Ex "gxHVDcKUyP2y1eiyW8S8na1UYQAfq6J6"' + defaultValue={this.props.config.FileSettings.PublicLinkSalt} + onChange={this.handleChange} + /> + <p className='help-text'>{'32-character salt added to signing of public image links. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p> + <div className='help-text'> + <button + className='help-link' + onClick={this.handleGenerate} + > + {'Re-Generate'} + </button> + </div> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +FileSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/log_settings.jsx b/web/react/components/admin_console/log_settings.jsx new file mode 100644 index 000000000..1c39c60e8 --- /dev/null +++ b/web/react/components/admin_console/log_settings.jsx @@ -0,0 +1,295 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class LogSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + consoleEnable: this.props.config.LogSettings.EnableConsole, + fileEnable: this.props.config.LogSettings.EnableFile, + saveNeeded: false, + serverError: null + }; + } + + handleChange(action) { + var s = {saveNeeded: true, serverError: this.state.serverError}; + + if (action === 'console_true') { + s.consoleEnable = true; + } + + if (action === 'console_false') { + s.consoleEnable = false; + } + + if (action === 'file_true') { + s.fileEnable = true; + } + + if (action === 'file_false') { + s.fileEnable = false; + } + + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.LogSettings.EnableConsole = React.findDOMNode(this.refs.consoleEnable).checked; + config.LogSettings.ConsoleLevel = React.findDOMNode(this.refs.consoleLevel).value; + config.LogSettings.EnableFile = React.findDOMNode(this.refs.fileEnable).checked; + config.LogSettings.FileLevel = React.findDOMNode(this.refs.fileLevel).value; + config.LogSettings.FileLocation = React.findDOMNode(this.refs.fileLocation).value.trim(); + config.LogSettings.FileFormat = React.findDOMNode(this.refs.fileFormat).value.trim(); + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + consoleEnable: config.LogSettings.EnableConsole, + fileEnable: config.LogSettings.EnableFile, + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + consoleEnable: config.LogSettings.EnableConsole, + fileEnable: config.LogSettings.EnableFile, + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + return ( + <div className='wrapper--fixed'> + <h3>{'Log Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='consoleEnable' + > + {'Log To The Console: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='consoleEnable' + value='true' + ref='consoleEnable' + defaultChecked={this.props.config.LogSettings.EnableConsole} + onChange={this.handleChange.bind(this, 'console_true')} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='consoleEnable' + value='false' + defaultChecked={!this.props.config.LogSettings.EnableConsole} + onChange={this.handleChange.bind(this, 'console_false')} + /> + {'false'} + </label> + <p className='help-text'>{'Typically set to false in production. Developers may set this field to true to output log messages to console based on the console level option. If true, server writes messages to the standard output stream (stdout).'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='consoleLevel' + > + {'Console Log Level:'} + </label> + <div className='col-sm-8'> + <select + className='form-control' + id='consoleLevel' + ref='consoleLevel' + defaultValue={this.props.config.LogSettings.consoleLevel} + onChange={this.handleChange} + disabled={!this.state.consoleEnable} + > + <option value='DEBUG'>{'DEBUG'}</option> + <option value='INFO'>{'INFO'}</option> + <option value='ERROR'>{'ERROR'}</option> + </select> + <p className='help-text'>{'This setting determines the level of detail at which log events are written to the console. ERROR: Outputs only error messages. INFO: Outputs error messages and information around startup and initialization. DEBUG: Prints high detail for developers working on debugging issues.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + > + {'Log To File: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='fileEnable' + ref='fileEnable' + value='true' + defaultChecked={this.props.config.LogSettings.EnableFile} + onChange={this.handleChange.bind(this, 'file_true')} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='fileEnable' + value='false' + defaultChecked={!this.props.config.LogSettings.EnableFile} + onChange={this.handleChange.bind(this, 'file_false')} + /> + {'false'} + </label> + <p className='help-text'>{'Typically set to true in production. When true, log files are written to the log file specified in file location field below.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='fileLevel' + > + {'File Log Level:'} + </label> + <div className='col-sm-8'> + <select + className='form-control' + id='fileLevel' + ref='fileLevel' + defaultValue={this.props.config.LogSettings.FileLevel} + onChange={this.handleChange} + disabled={!this.state.fileEnable} + > + <option value='DEBUG'>{'DEBUG'}</option> + <option value='INFO'>{'INFO'}</option> + <option value='ERROR'>{'ERROR'}</option> + </select> + <p className='help-text'>{'This setting determines the level of detail at which log events are written to the log file. ERROR: Outputs only error messages. INFO: Outputs error messages and information around startup and initialization. DEBUG: Prints high detail for developers working on debugging issues.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='fileLocation' + > + {'File Location:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='fileLocation' + ref='fileLocation' + placeholder='Enter your file location' + defaultValue={this.props.config.LogSettings.FileLocation} + onChange={this.handleChange} + disabled={!this.state.fileEnable} + /> + <p className='help-text'>{'File to which log files are written. If blank, will be set to ./logs/mattermost, which writes logs to mattermost.log. Log rotation is enabled and every 10,000 lines of log information is written to new files stored in the same directory, for example mattermost.2015-09-23.001, mattermost.2015-09-23.002, and so forth.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='fileFormat' + > + {'File Format:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='fileFormat' + ref='fileFormat' + placeholder='Enter your file format' + defaultValue={this.props.config.LogSettings.FileFormat} + onChange={this.handleChange} + disabled={!this.state.fileEnable} + /> + <p className='help-text'> + {'Format of log message output. If blank will be set to "[%D %T] [%L] %M", where:'} + <div className='help-text'> + <table + className='table-bordered' + cellPadding='5' + > + <tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr> + <tr><td className='help-text'>{'%D'}</td><td className='help-text'>{'Date (2006/01/02)'}</td></tr> + <tr><td className='help-text'>{'%d'}</td><td className='help-text'>{'Date (01/02/06)'}</td></tr> + <tr><td className='help-text'>{'%L'}</td><td className='help-text'>{'Level (DEBG, INFO, EROR)'}</td></tr> + <tr><td className='help-text'>{'%S'}</td><td className='help-text'>{'Source'}</td></tr> + <tr><td className='help-text'>{'%M'}</td><td className='help-text'>{'Message'}</td></tr> + </table> + </div> + </p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +LogSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/logs.jsx b/web/react/components/admin_console/logs.jsx new file mode 100644 index 000000000..0bb749bbd --- /dev/null +++ b/web/react/components/admin_console/logs.jsx @@ -0,0 +1,90 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminStore = require('../../stores/admin_store.jsx'); +var LoadingScreen = require('../loading_screen.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class Logs extends React.Component { + constructor(props) { + super(props); + + this.onLogListenerChange = this.onLogListenerChange.bind(this); + this.reload = this.reload.bind(this); + + this.state = { + logs: AdminStore.getLogs() + }; + } + + componentDidMount() { + AdminStore.addLogChangeListener(this.onLogListenerChange); + AsyncClient.getLogs(); + } + + componentWillUnmount() { + AdminStore.removeLogChangeListener(this.onLogListenerChange); + } + + onLogListenerChange() { + this.setState({ + logs: AdminStore.getLogs() + }); + } + + reload() { + AdminStore.saveLogs(null); + this.setState({ + logs: null + }); + + AsyncClient.getLogs(); + } + + render() { + var content = null; + + if (this.state.logs === null) { + content = <LoadingScreen />; + } else { + content = []; + + for (var i = 0; i < this.state.logs.length; i++) { + var style = { + whiteSpace: 'nowrap', + fontFamily: 'monospace' + }; + + if (this.state.logs[i].indexOf('[EROR]') > 0) { + style.color = 'red'; + } + + content.push(<br key={'br_' + i} />); + content.push( + <span + key={'log_' + i} + style={style} + > + {this.state.logs[i]} + </span> + ); + } + } + + return ( + <div className='panel'> + <h3>{'Server Logs'}</h3> + <button + type='submit' + className='btn btn-primary' + onClick={this.reload} + > + {'Reload'} + </button> + <div className='log__panel'> + {content} + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/privacy_settings.jsx b/web/react/components/admin_console/privacy_settings.jsx new file mode 100644 index 000000000..affd8ae11 --- /dev/null +++ b/web/react/components/admin_console/privacy_settings.jsx @@ -0,0 +1,163 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class PrivacySettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + saveNeeded: false, + serverError: null + }; + } + + handleChange() { + var s = {saveNeeded: true, serverError: this.state.serverError}; + + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.PrivacySettings.ShowEmailAddress = React.findDOMNode(this.refs.ShowEmailAddress).checked; + config.PrivacySettings.ShowFullName = React.findDOMNode(this.refs.ShowFullName).checked; + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + return ( + <div className='wrapper--fixed'> + <h3>{'Privacy Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ShowEmailAddress' + > + {'Show Email Address: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='ShowEmailAddress' + value='true' + ref='ShowEmailAddress' + defaultChecked={this.props.config.PrivacySettings.ShowEmailAddress} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='ShowEmailAddress' + value='false' + defaultChecked={!this.props.config.PrivacySettings.ShowEmailAddress} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'When false, hides email address of users from other users in the user interface, including team owners and team administrators. Used when system is set up for managing teams where some users choose to keep their contact information private.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ShowFullName' + > + {'Show Full Name: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='ShowFullName' + value='true' + ref='ShowFullName' + defaultChecked={this.props.config.PrivacySettings.ShowFullName} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='ShowFullName' + value='false' + defaultChecked={!this.props.config.PrivacySettings.ShowFullName} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'When false, hides full name of users from other users including team owner and team administrators.'}</p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +PrivacySettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/rate_settings.jsx b/web/react/components/admin_console/rate_settings.jsx new file mode 100644 index 000000000..0081daca3 --- /dev/null +++ b/web/react/components/admin_console/rate_settings.jsx @@ -0,0 +1,272 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class RateSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + EnableRateLimiter: this.props.config.RateLimitSettings.EnableRateLimiter, + VaryByRemoteAddr: this.props.config.RateLimitSettings.VaryByRemoteAddr, + saveNeeded: false, + serverError: null + }; + } + + handleChange(action) { + var s = {saveNeeded: true, serverError: this.state.serverError}; + + if (action === 'EnableRateLimiterTrue') { + s.EnableRateLimiter = true; + } + + if (action === 'EnableRateLimiterFalse') { + s.EnableRateLimiter = false; + } + + if (action === 'VaryByRemoteAddrTrue') { + s.VaryByRemoteAddr = true; + } + + if (action === 'VaryByRemoteAddrFalse') { + s.VaryByRemoteAddr = false; + } + + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.RateLimitSettings.EnableRateLimiter = React.findDOMNode(this.refs.EnableRateLimiter).checked; + config.RateLimitSettings.VaryByRemoteAddr = React.findDOMNode(this.refs.VaryByRemoteAddr).checked; + config.RateLimitSettings.VaryByHeader = React.findDOMNode(this.refs.VaryByHeader).value.trim(); + + var PerSec = 10; + if (!isNaN(parseInt(React.findDOMNode(this.refs.PerSec).value, 10))) { + PerSec = parseInt(React.findDOMNode(this.refs.PerSec).value, 10); + } + config.RateLimitSettings.PerSec = PerSec; + React.findDOMNode(this.refs.PerSec).value = PerSec; + + var MemoryStoreSize = 10000; + if (!isNaN(parseInt(React.findDOMNode(this.refs.MemoryStoreSize).value, 10))) { + MemoryStoreSize = parseInt(React.findDOMNode(this.refs.MemoryStoreSize).value, 10); + } + config.RateLimitSettings.MemoryStoreSize = MemoryStoreSize; + React.findDOMNode(this.refs.MemoryStoreSize).value = MemoryStoreSize; + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + return ( + <div className='wrapper--fixed'> + + <div className='banner'> + <div className='banner__content'> + <h4 className='banner__heading'>{'Note:'}</h4> + <p>{'Changing properties in this section will require a server restart before taking effect.'}</p> + </div> + </div> + + <h3>{'Rate Limit Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='EnableRateLimiter' + > + {'Enable Rate Limiter: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='EnableRateLimiter' + value='true' + ref='EnableRateLimiter' + defaultChecked={this.props.config.RateLimitSettings.EnableRateLimiter} + onChange={this.handleChange.bind(this, 'EnableRateLimiterTrue')} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='EnableRateLimiter' + value='false' + defaultChecked={!this.props.config.RateLimitSettings.EnableRateLimiter} + onChange={this.handleChange.bind(this, 'EnableRateLimiterFalse')} + /> + {'false'} + </label> + <p className='help-text'>{'When true, APIs are throttled at rates specified below.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='PerSec' + > + {'Number Of Queries Per Second:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='PerSec' + ref='PerSec' + placeholder='Ex "10"' + defaultValue={this.props.config.RateLimitSettings.PerSec} + onChange={this.handleChange} + disabled={!this.state.EnableRateLimiter} + /> + <p className='help-text'>{'Throttles API at this number of requests per second.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='MemoryStoreSize' + > + {'Memory Store Size:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='MemoryStoreSize' + ref='MemoryStoreSize' + placeholder='Ex "10000"' + defaultValue={this.props.config.RateLimitSettings.MemoryStoreSize} + onChange={this.handleChange} + disabled={!this.state.EnableRateLimiter} + /> + <p className='help-text'>{'Maximum number of users sessions connected to the system as determined by "Vary By Remote Address" and "Vary By Header" settings below.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='VaryByRemoteAddr' + > + {'Vary By Remote Address: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='VaryByRemoteAddr' + value='true' + ref='VaryByRemoteAddr' + defaultChecked={this.props.config.RateLimitSettings.VaryByRemoteAddr} + onChange={this.handleChange.bind(this, 'VaryByRemoteAddrTrue')} + disabled={!this.state.EnableRateLimiter} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='VaryByRemoteAddr' + value='false' + defaultChecked={!this.props.config.RateLimitSettings.VaryByRemoteAddr} + onChange={this.handleChange.bind(this, 'VaryByRemoteAddrFalse')} + disabled={!this.state.EnableRateLimiter} + /> + {'false'} + </label> + <p className='help-text'>{'When true, rate limit API access by IP address.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='VaryByHeader' + > + {'Vary By HTTP Header:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='VaryByHeader' + ref='VaryByHeader' + placeholder='Ex "X-Real-IP", "X-Forwarded-For"' + defaultValue={this.props.config.RateLimitSettings.VaryByHeader} + onChange={this.handleChange} + disabled={!this.state.EnableRateLimiter || this.state.VaryByRemoteAddr} + /> + <p className='help-text'>{'When filled in, vary rate limiting by HTTP header field specified (e.g. when configuring Ngnix set to "X-Real-IP", when configuring AmazonELB set to "X-Forwarded-For").'}</p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +RateSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/reset_password_modal.jsx b/web/react/components/admin_console/reset_password_modal.jsx new file mode 100644 index 000000000..0b83edb17 --- /dev/null +++ b/web/react/components/admin_console/reset_password_modal.jsx @@ -0,0 +1,132 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var Modal = ReactBootstrap.Modal; + +export default class ResetPasswordModal extends React.Component { + constructor(props) { + super(props); + + this.doSubmit = this.doSubmit.bind(this); + this.doCancel = this.doCancel.bind(this); + + this.state = { + serverError: null + }; + } + + doSubmit(e) { + e.preventDefault(); + var password = React.findDOMNode(this.refs.password).value; + + if (!password || password.length < 5) { + this.setState({serverError: 'Please enter at least 5 characters.'}); + return; + } + + this.setState({serverError: null}); + + var data = {}; + data.new_password = password; + data.name = this.props.team.name; + data.user_id = this.props.user.id; + + Client.resetPassword(data, + () => { + this.props.onModalSubmit(React.findDOMNode(this.refs.password).value); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + + doCancel() { + this.setState({serverError: null}); + this.props.onModalDismissed(); + } + + render() { + if (this.props.user == null) { + return <div/>; + } + + let urlClass = 'input-group input-group--limit'; + let serverError = null; + + if (this.state.serverError) { + urlClass += ' has-error'; + serverError = <div className='form-group has-error'><p className='input__help error'>{this.state.serverError}</p></div>; + } + + return ( + <Modal + show={this.props.show} + onHide={this.doCancel} + > + <Modal.Header closeButton={true}> + <Modal.Title>{'Reset Password'}</Modal.Title> + </Modal.Header> + <form + role='form' + className='form-horizontal' + > + <Modal.Body> + <div className='form-group'> + <div className='col-sm-10'> + <div className={urlClass}> + <span + data-toggle='tooltip' + title='New Password' + className='input-group-addon' + > + {'New Password'} + </span> + <input + type='password' + ref='password' + className='form-control' + maxLength='22' + autoFocus={true} + tabIndex='1' + /> + </div> + {serverError} + </div> + </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.doCancel} + > + {'Close'} + </button> + <button + onClick={this.doSubmit} + type='submit' + className='btn btn-primary' + tabIndex='2' + > + {'Select'} + </button> + </Modal.Footer> + </form> + </Modal> + ); + } +} + +ResetPasswordModal.defaultProps = { + show: false +}; + +ResetPasswordModal.propTypes = { + user: React.PropTypes.object, + team: React.PropTypes.object, + show: React.PropTypes.bool.isRequired, + onModalSubmit: React.PropTypes.func, + onModalDismissed: React.PropTypes.func +}; diff --git a/web/react/components/admin_console/select_team_modal.jsx b/web/react/components/admin_console/select_team_modal.jsx new file mode 100644 index 000000000..343f65131 --- /dev/null +++ b/web/react/components/admin_console/select_team_modal.jsx @@ -0,0 +1,99 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Modal = ReactBootstrap.Modal; + +export default class SelectTeamModal extends React.Component { + constructor(props) { + super(props); + + this.doSubmit = this.doSubmit.bind(this); + this.doCancel = this.doCancel.bind(this); + } + + doSubmit(e) { + e.preventDefault(); + this.props.onModalSubmit(React.findDOMNode(this.refs.team).value); + } + doCancel() { + this.props.onModalDismissed(); + } + render() { + if (this.props.teams == null) { + return <div/>; + } + + var options = []; + + for (var key in this.props.teams) { + if (this.props.teams.hasOwnProperty(key)) { + var team = this.props.teams[key]; + options.push( + <option + key={'opt_' + team.id} + value={team.id} + > + {team.name} + </option> + ); + } + } + + return ( + <Modal + show={this.props.show} + onHide={this.doCancel} + > + <Modal.Header closeButton={true}> + <Modal.Title>{'Select Team'}</Modal.Title> + </Modal.Header> + <form + role='form' + className='form-horizontal' + > + <Modal.Body> + <div className='form-group'> + <div className='col-sm-12'> + <select + ref='team' + size='10' + style={{width: '100%'}} + > + {options} + </select> + </div> + </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.doCancel} + > + {'Close'} + </button> + <button + onClick={this.doSubmit} + type='submit' + className='btn btn-primary' + tabIndex='2' + > + {'Select'} + </button> + </Modal.Footer> + </form> + </Modal> + ); + } +} + +SelectTeamModal.defaultProps = { + show: false +}; + +SelectTeamModal.propTypes = { + teams: React.PropTypes.object, + show: React.PropTypes.bool.isRequired, + onModalSubmit: React.PropTypes.func, + onModalDismissed: React.PropTypes.func +}; diff --git a/web/react/components/admin_console/service_settings.jsx b/web/react/components/admin_console/service_settings.jsx new file mode 100644 index 000000000..245ffa871 --- /dev/null +++ b/web/react/components/admin_console/service_settings.jsx @@ -0,0 +1,296 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class ServiceSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + saveNeeded: false, + serverError: null + }; + } + + handleChange() { + var s = {saveNeeded: true, serverError: this.state.serverError}; + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.ServiceSettings.ListenAddress = React.findDOMNode(this.refs.ListenAddress).value.trim(); + if (config.ServiceSettings.ListenAddress === '') { + config.ServiceSettings.ListenAddress = ':8065'; + React.findDOMNode(this.refs.ListenAddress).value = config.ServiceSettings.ListenAddress; + } + + config.ServiceSettings.SegmentDeveloperKey = React.findDOMNode(this.refs.SegmentDeveloperKey).value.trim(); + config.ServiceSettings.GoogleDeveloperKey = React.findDOMNode(this.refs.GoogleDeveloperKey).value.trim(); + //config.ServiceSettings.EnableOAuthServiceProvider = React.findDOMNode(this.refs.EnableOAuthServiceProvider).checked; + config.ServiceSettings.EnableIncomingWebhooks = React.findDOMNode(this.refs.EnableIncomingWebhooks).checked; + config.ServiceSettings.EnableTesting = React.findDOMNode(this.refs.EnableTesting).checked; + + var MaximumLoginAttempts = 10; + if (!isNaN(parseInt(React.findDOMNode(this.refs.MaximumLoginAttempts).value, 10))) { + MaximumLoginAttempts = parseInt(React.findDOMNode(this.refs.MaximumLoginAttempts).value, 10); + } + config.ServiceSettings.MaximumLoginAttempts = MaximumLoginAttempts; + React.findDOMNode(this.refs.MaximumLoginAttempts).value = MaximumLoginAttempts; + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + return ( + <div className='wrapper--fixed'> + + <h3>{'Service Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='ListenAddress' + > + {'Listen Address:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='ListenAddress' + ref='ListenAddress' + placeholder='Ex ":8065"' + defaultValue={this.props.config.ServiceSettings.ListenAddress} + onChange={this.handleChange} + /> + <p className='help-text'>{'The address to which to bind and listen. Entering ":8065" will bind to all interfaces or you can choose one like "127.0.0.1:8065". Changing this will require a server restart before taking effect.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='MaximumLoginAttempts' + > + {'Maximum Login Attempts:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='MaximumLoginAttempts' + ref='MaximumLoginAttempts' + placeholder='Ex "10"' + defaultValue={this.props.config.ServiceSettings.MaximumLoginAttempts} + onChange={this.handleChange} + /> + <p className='help-text'>{'Login attempts allowed before user is locked out and required to reset password via email.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='SegmentDeveloperKey' + > + {'Segment Developer Key:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='SegmentDeveloperKey' + ref='SegmentDeveloperKey' + placeholder='Ex "g3fgGOXJAQ43QV7rAh6iwQCkV4cA1Gs"' + defaultValue={this.props.config.ServiceSettings.SegmentDeveloperKey} + onChange={this.handleChange} + /> + <p className='help-text'>{'For users running a SaaS services, sign up for a key at Segment.com to track metrics.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='GoogleDeveloperKey' + > + {'Google Developer Key:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='GoogleDeveloperKey' + ref='GoogleDeveloperKey' + placeholder='Ex "7rAh6iwQCkV4cA1Gsg3fgGOXJAQ43QV"' + defaultValue={this.props.config.ServiceSettings.GoogleDeveloperKey} + onChange={this.handleChange} + /> + <p className='help-text'>{'Set this key to enable embedding of YouTube video previews based on hyperlinks appearing in messages or comments. Instructions to obtain a key available at '}<a href='https://www.youtube.com/watch?v=Im69kzhpR3I'>{'https://www.youtube.com/watch?v=Im69kzhpR3I'}</a>{'. Leaving field blank disables the automatic generation of YouTube video previews from links.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='EnableIncomingWebhooks' + > + {'Enable Incoming Webhooks: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='EnableIncomingWebhooks' + value='true' + ref='EnableIncomingWebhooks' + defaultChecked={this.props.config.ServiceSettings.EnableIncomingWebhooks} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='EnableIncomingWebhooks' + value='false' + defaultChecked={!this.props.config.ServiceSettings.EnableIncomingWebhooks} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'When true, incoming webhooks will be allowed.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='EnableTesting' + > + {'Enable Testing: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='EnableTesting' + value='true' + ref='EnableTesting' + defaultChecked={this.props.config.ServiceSettings.EnableTesting} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='EnableTesting' + value='false' + defaultChecked={!this.props.config.ServiceSettings.EnableTesting} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'(Developer Option) When true, /loadtest slash command is enabled to load test accounts and test data. Changing this will require a server restart before taking effect.'}</p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +// <div className='form-group'> +// <label +// className='control-label col-sm-4' +// htmlFor='EnableOAuthServiceProvider' +// > +// {'Enable OAuth Service Provider: '} +// </label> +// <div className='col-sm-8'> +// <label className='radio-inline'> +// <input +// type='radio' +// name='EnableOAuthServiceProvider' +// value='true' +// ref='EnableOAuthServiceProvider' +// defaultChecked={this.props.config.ServiceSettings.EnableOAuthServiceProvider} +// onChange={this.handleChange} +// /> +// {'true'} +// </label> +// <label className='radio-inline'> +// <input +// type='radio' +// name='EnableOAuthServiceProvider' +// value='false' +// defaultChecked={!this.props.config.ServiceSettings.EnableOAuthServiceProvider} +// onChange={this.handleChange} +// /> +// {'false'} +// </label> +// <p className='help-text'>{'When enabled Mattermost will act as an OAuth2 Provider. Changing this will require a server restart before taking effect.'}</p> +// </div> +// </div> + +ServiceSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/sql_settings.jsx b/web/react/components/admin_console/sql_settings.jsx new file mode 100644 index 000000000..430a7453b --- /dev/null +++ b/web/react/components/admin_console/sql_settings.jsx @@ -0,0 +1,283 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); +var crypto = require('crypto'); + +export default class SqlSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.handleGenerate = this.handleGenerate.bind(this); + + this.state = { + saveNeeded: false, + serverError: null + }; + } + + handleChange() { + var s = {saveNeeded: true, serverError: this.state.serverError}; + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.SqlSettings.Trace = React.findDOMNode(this.refs.Trace).checked; + config.SqlSettings.AtRestEncryptKey = React.findDOMNode(this.refs.AtRestEncryptKey).value.trim(); + + if (config.SqlSettings.AtRestEncryptKey === '') { + config.SqlSettings.AtRestEncryptKey = crypto.randomBytes(256).toString('base64').substring(0, 32); + React.findDOMNode(this.refs.AtRestEncryptKey).value = config.SqlSettings.AtRestEncryptKey; + } + + var MaxOpenConns = 10; + if (!isNaN(parseInt(React.findDOMNode(this.refs.MaxOpenConns).value, 10))) { + MaxOpenConns = parseInt(React.findDOMNode(this.refs.MaxOpenConns).value, 10); + } + config.SqlSettings.MaxOpenConns = MaxOpenConns; + React.findDOMNode(this.refs.MaxOpenConns).value = MaxOpenConns; + + var MaxIdleConns = 10; + if (!isNaN(parseInt(React.findDOMNode(this.refs.MaxIdleConns).value, 10))) { + MaxIdleConns = parseInt(React.findDOMNode(this.refs.MaxIdleConns).value, 10); + } + config.SqlSettings.MaxIdleConns = MaxIdleConns; + React.findDOMNode(this.refs.MaxIdleConns).value = MaxIdleConns; + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + handleGenerate(e) { + e.preventDefault(); + React.findDOMNode(this.refs.AtRestEncryptKey).value = crypto.randomBytes(256).toString('base64').substring(0, 32); + var s = {saveNeeded: true, serverError: this.state.serverError}; + this.setState(s); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + var dataSource = '**********' + this.props.config.SqlSettings.DataSource.substring(this.props.config.SqlSettings.DataSource.indexOf('@')); + + var dataSourceReplicas = ''; + this.props.config.SqlSettings.DataSourceReplicas.forEach((replica) => { + dataSourceReplicas += '[**********' + replica.substring(replica.indexOf('@')) + '] '; + }); + + if (this.props.config.SqlSettings.DataSourceReplicas.length === 0) { + dataSourceReplicas = 'none'; + } + + return ( + <div className='wrapper--fixed'> + + <div className='banner'> + <div className='banner__content'> + <h4 className='banner__heading'>{'Note:'}</h4> + <p>{'Changing properties in this section will require a server restart before taking effect.'}</p> + </div> + </div> + + <h3>{'SQL Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='DriverName' + > + {'Driver Name:'} + </label> + <div className='col-sm-8'> + <p className='help-text'>{this.props.config.SqlSettings.DriverName}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='DataSource' + > + {'Data Source:'} + </label> + <div className='col-sm-8'> + <p className='help-text'>{dataSource}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='DataSourceReplicas' + > + {'Data Source Replicas:'} + </label> + <div className='col-sm-8'> + <p className='help-text'>{dataSourceReplicas}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='MaxIdleConns' + > + {'Maximum Idle Connections:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='MaxIdleConns' + ref='MaxIdleConns' + placeholder='Ex "10"' + defaultValue={this.props.config.SqlSettings.MaxIdleConns} + onChange={this.handleChange} + /> + <p className='help-text'>{'Maximum number of idle connections held open to the database.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='MaxOpenConns' + > + {'Maximum Open Connections:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='MaxOpenConns' + ref='MaxOpenConns' + placeholder='Ex "10"' + defaultValue={this.props.config.SqlSettings.MaxOpenConns} + onChange={this.handleChange} + /> + <p className='help-text'>{'Maximum number of open connections held open to the database.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='AtRestEncryptKey' + > + {'At Rest Encrypt Key:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='AtRestEncryptKey' + ref='AtRestEncryptKey' + placeholder='Ex "gxHVDcKUyP2y1eiyW8S8na1UYQAfq6J6"' + defaultValue={this.props.config.SqlSettings.AtRestEncryptKey} + onChange={this.handleChange} + /> + <p className='help-text'>{'32-character salt available to encrypt and decrypt sensitive fields in database.'}</p> + <div className='help-text'> + <button + className='help-link' + onClick={this.handleGenerate} + > + {'Re-Generate'} + </button> + </div> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='Trace' + > + {'Trace: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='Trace' + value='true' + ref='Trace' + defaultChecked={this.props.config.SqlSettings.Trace} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='Trace' + value='false' + defaultChecked={!this.props.config.SqlSettings.Trace} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'(Development Mode) When true, executing SQL statements are written to the log.'}</p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +SqlSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/team_settings.jsx b/web/react/components/admin_console/team_settings.jsx new file mode 100644 index 000000000..0f6f819d3 --- /dev/null +++ b/web/react/components/admin_console/team_settings.jsx @@ -0,0 +1,235 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class TeamSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + saveNeeded: false, + serverError: null + }; + } + + handleChange() { + var s = {saveNeeded: true, serverError: this.state.serverError}; + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.TeamSettings.SiteName = React.findDOMNode(this.refs.SiteName).value.trim(); + config.TeamSettings.RestrictCreationToDomains = React.findDOMNode(this.refs.RestrictCreationToDomains).value.trim(); + config.TeamSettings.EnableTeamCreation = React.findDOMNode(this.refs.EnableTeamCreation).checked; + config.TeamSettings.EnableUserCreation = React.findDOMNode(this.refs.EnableUserCreation).checked; + + var MaxUsersPerTeam = 50; + if (!isNaN(parseInt(React.findDOMNode(this.refs.MaxUsersPerTeam).value, 10))) { + MaxUsersPerTeam = parseInt(React.findDOMNode(this.refs.MaxUsersPerTeam).value, 10); + } + config.TeamSettings.MaxUsersPerTeam = MaxUsersPerTeam; + React.findDOMNode(this.refs.MaxUsersPerTeam).value = MaxUsersPerTeam; + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + return ( + <div className='wrapper--fixed'> + + <h3>{'Team Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='SiteName' + > + {'Site Name:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='SiteName' + ref='SiteName' + placeholder='Ex "Mattermost"' + defaultValue={this.props.config.TeamSettings.SiteName} + onChange={this.handleChange} + /> + <p className='help-text'>{'Name of service shown in login screens and UI.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='MaxUsersPerTeam' + > + {'Max Users Per Team:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='MaxUsersPerTeam' + ref='MaxUsersPerTeam' + placeholder='Ex "25"' + defaultValue={this.props.config.TeamSettings.MaxUsersPerTeam} + onChange={this.handleChange} + /> + <p className='help-text'>{'Maximum total number of users per team, including both active and inactive users.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='EnableTeamCreation' + > + {'Enable Team Creation: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='EnableTeamCreation' + value='true' + ref='EnableTeamCreation' + defaultChecked={this.props.config.TeamSettings.EnableTeamCreation} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='EnableTeamCreation' + value='false' + defaultChecked={!this.props.config.TeamSettings.EnableTeamCreation} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'When false, the ability to create teams is disabled. The create team button displays error when pressed.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='EnableUserCreation' + > + {'Enable User Creation: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='EnableUserCreation' + value='true' + ref='EnableUserCreation' + defaultChecked={this.props.config.TeamSettings.EnableUserCreation} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='EnableUserCreation' + value='false' + defaultChecked={!this.props.config.TeamSettings.EnableUserCreation} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'When false, the ability to create accounts is disabled. The create account button displays error when pressed.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='RestrictCreationToDomains' + > + {'Restrict Creation To Domains:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='RestrictCreationToDomains' + ref='RestrictCreationToDomains' + placeholder='Ex "corp.mattermost.com, mattermost.org"' + defaultValue={this.props.config.TeamSettings.RestrictCreationToDomains} + onChange={this.handleChange} + /> + <p className='help-text'>{'Teams can only be created from a specific domain (e.g. "mattermost.org") or list of comma-separated domains (e.g. "corp.mattermost.com, mattermost.org").'}</p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +TeamSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx new file mode 100644 index 000000000..0a971ff15 --- /dev/null +++ b/web/react/components/admin_console/team_users.jsx @@ -0,0 +1,178 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var LoadingScreen = require('../loading_screen.jsx'); +var UserItem = require('./user_item.jsx'); +var ResetPasswordModal = require('./reset_password_modal.jsx'); + +export default class UserList extends React.Component { + constructor(props) { + super(props); + + this.getTeamProfiles = this.getTeamProfiles.bind(this); + this.getCurrentTeamProfiles = this.getCurrentTeamProfiles.bind(this); + this.doPasswordReset = this.doPasswordReset.bind(this); + this.doPasswordResetDismiss = this.doPasswordResetDismiss.bind(this); + this.doPasswordResetSubmit = this.doPasswordResetSubmit.bind(this); + + this.state = { + teamId: props.team.id, + users: null, + serverError: null, + showPasswordModal: false, + user: null + }; + } + + componentDidMount() { + this.getCurrentTeamProfiles(); + } + + getCurrentTeamProfiles() { + this.getTeamProfiles(this.props.team.id); + } + + // this.setState({ + // teamId: this.state.teamId, + // users: this.state.users, + // serverError: this.state.serverError, + // showPasswordModal: this.state.showPasswordModal, + // user: this.state.user + // }); + + getTeamProfiles(teamId) { + Client.getProfilesForTeam( + teamId, + (users) => { + var memberList = []; + for (var id in users) { + if (users.hasOwnProperty(id)) { + memberList.push(users[id]); + } + } + + memberList.sort((a, b) => { + if (a.username < b.username) { + return -1; + } + + if (a.username > b.username) { + return 1; + } + + return 0; + }); + + this.setState({ + teamId: this.state.teamId, + users: memberList, + serverError: this.state.serverError, + showPasswordModal: this.state.showPasswordModal, + user: this.state.user + }); + }, + (err) => { + this.setState({ + teamId: this.state.teamId, + users: null, + serverError: err.message, + showPasswordModal: this.state.showPasswordModal, + user: this.state.user + }); + } + ); + } + + doPasswordReset(user) { + this.setState({ + teamId: this.state.teamId, + users: this.state.users, + serverError: this.state.serverError, + showPasswordModal: true, + user + }); + } + + doPasswordResetDismiss() { + this.state.showPasswordModal = false; + this.state.user = null; + this.setState({ + teamId: this.state.teamId, + users: this.state.users, + serverError: this.state.serverError, + showPasswordModal: false, + user: null + }); + } + + doPasswordResetSubmit() { + this.setState({ + teamId: this.state.teamId, + users: this.state.users, + serverError: this.state.serverError, + showPasswordModal: false, + user: null + }); + } + + componentWillReceiveProps(newProps) { + this.getTeamProfiles(newProps.team.id); + } + + componentWillUnmount() { + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + if (this.state.users == null) { + return ( + <div className='wrapper--fixed'> + <h3>{'Users for ' + this.props.team.name}</h3> + {serverError} + <LoadingScreen /> + </div> + ); + } + + var memberList = this.state.users.map((user) => { + return ( + <UserItem + key={'user_' + user.id} + user={user} + refreshProfiles={this.getCurrentTeamProfiles} + doPasswordReset={this.doPasswordReset} + />); + }); + + return ( + <div className='wrapper--fixed'> + <h3>{'Users for ' + this.props.team.name + ' (' + this.state.users.length + ')'}</h3> + {serverError} + <form + className='form-horizontal' + role='form' + > + <div className='member-list-holder'> + {memberList} + </div> + </form> + <ResetPasswordModal + user={this.state.user} + show={this.state.showPasswordModal} + team={this.props.team} + onModalSubmit={this.doPasswordResetSubmit} + onModalDismissed={this.doPasswordResetDismiss} + /> + </div> + ); + } +} + +UserList.propTypes = { + team: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx new file mode 100644 index 000000000..32812e875 --- /dev/null +++ b/web/react/components/admin_console/user_item.jsx @@ -0,0 +1,266 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var Utils = require('../../utils/utils.jsx'); + +export default class UserItem extends React.Component { + constructor(props) { + super(props); + + this.handleMakeMember = this.handleMakeMember.bind(this); + this.handleMakeActive = this.handleMakeActive.bind(this); + this.handleMakeNotActive = this.handleMakeNotActive.bind(this); + this.handleMakeAdmin = this.handleMakeAdmin.bind(this); + this.handleMakeSystemAdmin = this.handleMakeSystemAdmin.bind(this); + this.handleResetPassword = this.handleResetPassword.bind(this); + + this.state = {}; + } + + handleMakeMember(e) { + e.preventDefault(); + const data = { + user_id: this.props.user.id, + new_roles: '' + }; + + Client.updateRoles(data, + () => { + this.props.refreshProfiles(); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + + handleMakeActive(e) { + e.preventDefault(); + Client.updateActive(this.props.user.id, true, + () => { + this.props.refreshProfiles(); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + + handleMakeNotActive(e) { + e.preventDefault(); + Client.updateActive(this.props.user.id, false, + () => { + this.props.refreshProfiles(); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + + handleMakeAdmin(e) { + e.preventDefault(); + const data = { + user_id: this.props.user.id, + new_roles: 'admin' + }; + + Client.updateRoles(data, + () => { + this.props.refreshProfiles(); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + + handleMakeSystemAdmin(e) { + e.preventDefault(); + const data = { + user_id: this.props.user.id, + new_roles: 'system_admin' + }; + + Client.updateRoles(data, + () => { + this.props.refreshProfiles(); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + + handleResetPassword(e) { + e.preventDefault(); + this.props.doPasswordReset(this.props.user); + } + + render() { + let serverError = null; + if (this.state.serverError) { + serverError = ( + <div className='has-error'> + <label className='has-error control-label'>{this.state.serverError}</label> + </div> + ); + } + + const user = this.props.user; + let currentRoles = 'Member'; + if (user.roles.length > 0) { + if (user.roles.indexOf('system_admin') > -1) { + currentRoles = 'System Admin'; + } else { + currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1); + } + } + + const email = user.email; + let showMakeMember = user.roles === 'admin' || user.roles === 'system_admin'; + let showMakeAdmin = user.roles === '' || user.roles === 'system_admin'; + let showMakeSystemAdmin = user.roles === '' || user.roles === 'admin'; + let showMakeActive = false; + let showMakeNotActive = user.roles !== 'system_admin'; + + if (user.delete_at > 0) { + currentRoles = 'Inactive'; + currentRoles = 'Inactive'; + showMakeMember = false; + showMakeAdmin = false; + showMakeSystemAdmin = false; + showMakeActive = true; + showMakeNotActive = false; + } + + let makeSystemAdmin = null; + if (showMakeSystemAdmin) { + makeSystemAdmin = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeSystemAdmin} + > + {'Make System Admin'} + </a> + </li> + ); + } + + let makeAdmin = null; + if (showMakeAdmin) { + makeAdmin = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeAdmin} + > + {'Make Admin'} + </a> + </li> + ); + } + + let makeMember = null; + if (showMakeMember) { + makeMember = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeMember} + > + {'Make Member'} + </a> + </li> + ); + } + + let makeActive = null; + if (showMakeActive) { + makeActive = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeActive} + > + {'Make Active'} + </a> + </li> + ); + } + + let makeNotActive = null; + if (showMakeNotActive) { + makeNotActive = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeNotActive} + > + {'Make Inactive'} + </a> + </li> + ); + } + + return ( + <div className='row member-div'> + <img + className='post-profile-img pull-left' + src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} + height='36' + width='36' + /> + <span className='member-name'>{Utils.getDisplayName(user)}</span> + <span className='member-email'>{email}</span> + <div className='dropdown member-drop'> + <a + href='#' + className='dropdown-toggle theme' + type='button' + id='channel_header_dropdown' + data-toggle='dropdown' + aria-expanded='true' + > + <span>{currentRoles} </span> + <span className='caret'></span> + </a> + <ul + className='dropdown-menu member-menu' + role='menu' + aria-labelledby='channel_header_dropdown' + > + {makeAdmin} + {makeMember} + {makeActive} + {makeNotActive} + {makeSystemAdmin} + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleResetPassword} + > + {'Reset Password'} + </a> + </li> + </ul> + </div> + {serverError} + </div> + ); + } +} + +UserItem.propTypes = { + user: React.PropTypes.object.isRequired, + refreshProfiles: React.PropTypes.func.isRequired, + doPasswordReset: React.PropTypes.func.isRequired +}; |