diff options
Diffstat (limited to 'web/react')
32 files changed, 950 insertions, 416 deletions
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index 68984c9e0..e82fe1b76 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -2,35 +2,58 @@ // See License.txt for license information. var AdminSidebar = require('./admin_sidebar.jsx'); -var EmailTab = require('./email_settings.jsx'); -var JobsTab = require('./jobs_settings.jsx'); +var AdminStore = require('../../stores/admin_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 Navbar = require('../../components/navbar.jsx'); export default class AdminController extends React.Component { constructor(props) { super(props); this.selectTab = this.selectTab.bind(this); + this.onConfigListenerChange = this.onConfigListenerChange.bind(this); this.state = { + config: null, selected: 'email_settings' }; } + componentDidMount() { + AdminStore.addConfigChangeListener(this.onConfigListenerChange); + AsyncClient.getConfig(); + } + + componentWillUnmount() { + AdminStore.removeConfigChangeListener(this.onConfigListenerChange); + } + + onConfigListenerChange() { + this.setState({ + config: AdminStore.getConfig(), + selected: this.state.selected + }); + } + selectTab(tab) { this.setState({selected: tab}); } render() { - var tab = ''; - - if (this.state.selected === 'email_settings') { - tab = <EmailTab />; - } else if (this.state.selected === 'job_settings') { - tab = <JobsTab />; - } else if (this.state.selected === 'logs') { - tab = <LogsTab />; + 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 />; + } } return ( @@ -45,7 +68,6 @@ export default class AdminController extends React.Component { /> <div className='inner__wrap channel__wrap'> <div className='row header'> - <Navbar teamDisplayName='Admin Console' /> </div> <div className='row main'> <div 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 index a04bceef5..a6e689490 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var SidebarHeader = require('../sidebar_header.jsx'); +var AdminSidebarHeader = require('./admin_sidebar_header.jsx'); export default class AdminSidebar extends React.Component { constructor(props) { @@ -14,7 +14,8 @@ export default class AdminSidebar extends React.Component { }; } - handleClick(name) { + handleClick(name, e) { + e.preventDefault(); this.props.selectTab(name); } @@ -27,58 +28,21 @@ export default class AdminSidebar extends React.Component { } componentDidMount() { - $('.nav__menu-item').on('click', function clickme(e) { - e.preventDefault(); - $(this).closest('.sidebar--collapsable').find('.nav__menu-item').removeClass('active'); - $(this).addClass('active'); - $(this).closest('.sidebar--collapsable').find('.nav__sub-menu').addClass('hide'); - $(this).next('.nav__sub-menu').removeClass('hide'); - }); - - $('.nav__sub-menu a').on('click', function clickme(e) { - e.preventDefault(); - $(this).closest('.nav__sub-menu').find('a').removeClass('active'); - $(this).addClass('active'); - }); - - $('.nav__sub-menu-item').on('click', function clickme(e) { - e.preventDefault(); - $(this).closest('.sidebar--collapsable').find('.nav__inner-menu').addClass('hide'); - $(this).closest('li').next('li').find('.nav__inner-menu').removeClass('hide'); - $(this).closest('li').next('li').find('.nav__inner-menu li:first a').addClass('active'); - }); - - $('.nav__inner-menu a').on('click', function clickme() { - $(this).closest('.nav__inner-menu').closest('li').prev('li').find('a').addClass('active'); - }); - - $('.nav__sub-menu .menu__close').on('click', function close() { - var menuItem = $(this).closest('li'); - menuItem.next('li').remove(); - menuItem.remove(); - }); } render() { return ( <div className='sidebar--left sidebar--collapsable'> <div> - <SidebarHeader - teamDisplayName='Admin Console' - teamType='I' - /> + <AdminSidebarHeader /> <ul className='nav nav-pills nav-stacked'> <li> - <a href='#' - className='nav__menu-item active' - > - <span className='icon fa fa-gear'></span> <span>{'Basic Settings'}</span></a> <ul className='nav nav__sub-menu'> <li> <a href='#' className={this.isSelected('email_settings')} - onClick={this.handleClick.bind(null, 'email_settings')} + onClick={this.handleClick.bind(this, 'email_settings')} > {'Email Settings'} </a> @@ -86,110 +50,21 @@ export default class AdminSidebar extends React.Component { <li> <a href='#' - className={this.isSelected('logs')} - onClick={this.handleClick.bind(null, 'logs')} - > - {'Logs'} - </a> - </li> - </ul> - </li> - <li> - <a - href='#' - className='nav__menu-item' - > - <span className='icon fa fa-gear'></span> <span>{'Jobs'}</span> - </a> - <ul className='nav nav__sub-menu hide'> - <li> - <a - href='#' - className={this.isSelected('job_settings')} - onClick={this.handleClick.bind(null, 'job_settings')} + className={this.isSelected('log_settings')} + onClick={this.handleClick.bind(this, 'log_settings')} > - {'Job Settings'} + {'Log Settings'} </a> </li> - </ul> - </li> - <li> - <a - href='#' - className='nav__menu-item' - > - <span className='icon fa fa-gear'></span> - <span>{'Team Settings (306)'}</span> - <span className='menu-icon--right'> - <i className='fa fa-plus'></i> - </span> - </a> - <ul className='nav nav__sub-menu hide'> - <li> - <a - href='#' - className='nav__sub-menu-item active' - > - {'Adal '} - <span className='menu-icon--right menu__close'>{'x'}</span> - </a> - </li> - <li> - <ul className='nav nav__inner-menu'> - <li> - <a - href='#' - className='active' - > - {'- Users'} - </a> - </li> - <li><a href='#'>{'- View Statistics'}</a></li> - <li> - <a href='#'> - {'- View Audit Log'} - <span className='badge pull-right small'>{'1'}</span> - </a> - </li> - </ul> - </li> <li> <a href='#' - className='nav__sub-menu-item' + className={this.isSelected('logs')} + onClick={this.handleClick.bind(this, 'logs')} > - {'Boole '} - <span className='menu-icon--right menu__close'>{'x'}</span> + {'Logs'} </a> </li> - <li> - <ul className='nav nav__inner-menu hide'> - <li> - <a - href='#' - className='active' - > - {'- Users'} - </a> - </li> - <li><a href='#'>{'- View Statistics'}</a></li> - <li> - <a href='#'> - {'- View Audit Log'} - <span className='badge pull-right small'>{'1'}</span> - </a> - </li> - </ul> - </li> - <li> - <span - data-toggle='modal' - data-target='#select-team' - className='nav-more' - > - {'Select a team'} - </span> - </li> </ul> </li> </ul> 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/jobs_settings.jsx b/web/react/components/admin_console/jobs_settings.jsx deleted file mode 100644 index 0b4fc4185..000000000 --- a/web/react/components/admin_console/jobs_settings.jsx +++ /dev/null @@ -1,183 +0,0 @@ -// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. -// See License.txt for license information. - -export default class Jobs extends React.Component { - constructor(props) { - super(props); - - this.state = { - }; - } - - render() { - return ( - <div className='wrapper--fixed'> - <h3>{' ************** JOB Settings'}</h3> - <form - className='form-horizontal' - role='form' - > - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='email' - > - {'Bypass Email: '} - <a - href='#' - data-trigger='hover click' - data-toggle='popover' - data-position='bottom' - data-content={'Here\'s some more help text inside a popover for the Bypass Email field just to show how popovers look.'} - > - {'(?)'} - </a> - </label> - <div className='col-sm-8'> - <label className='radio-inline'> - <input - type='radio' - name='byPassEmail' - value='option1' - /> - {'True'} - </label> - <label className='radio-inline'> - <input - type='radio' - name='byPassEmail' - value='option2' - /> - {'False'} - </label> - <p className='help-text'>{'This is some sample help text for the Bypass Email field'}</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='email' - className='form-control' - id='smtpUsername' - placeholder='Enter your SMTP username' - value='' - /> - <div className='help-text'> - <div className='alert alert-warning'><i className='fa fa-warning'></i>{' This is some error text for the Bypass Email field'}</div> - </div> - <p className='help-text'>{'This is some sample help text for the SMTP username field'}</p> - </div> - </div> - <div - className='panel-group' - id='accordion' - role='tablist' - aria-multiselectable='true' - > - <div className='panel panel-default'> - <div - className='panel-heading' - role='tab' - id='headingOne' - > - <h3 className='panel-title'> - <a - className='collapsed' - role='button' - data-toggle='collapse' - data-parent='#accordion' - href='#collapseOne' - aria-expanded='true' - aria-controls='collapseOne' - > - {'Advanced Settings '} - <i className='fa fa-plus'></i> - <i className='fa fa-minus'></i> - </a> - </h3> - </div> - <div - id='collapseOne' - className='panel-collapse collapse' - role='tabpanel' - aria-labelledby='headingOne' - > - <div className='panel-body'> - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='feedbackUsername' - > - {'Apple push server:'} - </label> - <div className='col-sm-8'> - <input - type='text' - className='form-control' - id='feedbackUsername' - placeholder='Enter your Apple push server' - value='' - /> - <p className='help-text'>{'This is some sample help text for the Apple push server field'}</p> - </div> - </div> - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='feedbackUsername' - > - {'Apple push certificate public:'} - </label> - <div className='col-sm-8'> - <input - type='text' - className='form-control' - id='feedbackUsername' - placeholder='Enter your public apple push certificate' - value='' - /> - </div> - </div> - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='feedbackUsername' - > - {'Apple push certificate private:'} - </label> - <div className='col-sm-8'> - <input - type='text' - className='form-control' - id='feedbackUsername' - placeholder='Enter your private apple push certificate' - value='' - /> - </div> - </div> - </div> - </div> - </div> - </div> - - <div className='form-group'> - <div className='col-sm-12'> - <button - type='submit' - className='btn btn-primary' - > - {'Save'} - </button> - </div> - </div> - </form> - </div> - ); - } -}
\ No newline at end of file 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..4e3db8f68 --- /dev/null +++ b/web/react/components/admin_console/log_settings.jsx @@ -0,0 +1,261 @@ +// 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 = { + saveNeeded: false, + serverError: null + }; + } + + handleChange() { + this.setState({saveNeeded: true, serverError: this.state.serverError}); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.LogSettings.ConsoleEnable = React.findDOMNode(this.refs.consoleEnable).checked; + config.LogSettings.ConsoleLevel = React.findDOMNode(this.refs.consoleLevel).value; + config.LogSettings.FileEnable = 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({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>{'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.ConsoleEnable} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='consoleEnable' + value='false' + defaultChecked={!this.props.config.LogSettings.ConsoleEnable} + onChange={this.handleChange} + /> + {'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 then the server will output 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} + > + <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 debugging issues 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.FileEnable} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='fileEnable' + value='false' + defaultChecked={!this.props.config.LogSettings.FileEnable} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'Typically set to true in production. When true log files are written to the 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} + > + <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 file. ERROR: Outputs only error messages. INFO: Outputs error messages and information around startup and initialization. DEBUG: Prints high detail for developers debugging issues 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} + /> + <p className='help-text'>{'File to which log files are written. If blank, will be set to ./logs/mattermost.log. Log rotation is enabled and new files may be created in the same directory.'}</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} + /> + <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 index d7de76a94..0bb749bbd 100644 --- a/web/react/components/admin_console/logs.jsx +++ b/web/react/components/admin_console/logs.jsx @@ -21,9 +21,11 @@ export default class Logs extends React.Component { AdminStore.addLogChangeListener(this.onLogListenerChange); AsyncClient.getLogs(); } + componentWillUnmount() { AdminStore.removeLogChangeListener(this.onLogListenerChange); } + onLogListenerChange() { this.setState({ logs: AdminStore.getLogs() diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 0dbbc20d4..8d23ec646 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -111,7 +111,7 @@ export default class ChannelHeader extends React.Component { const popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>); let channelTitle = channel.display_name; const currentId = UserStore.getCurrentId(); - const isAdmin = this.state.memberChannel.roles.indexOf('admin') > -1 || this.state.memberTeam.roles.indexOf('admin') > -1; + const isAdmin = Utils.isAdmin(this.state.memberChannel.roles) || Utils.isAdmin(this.state.memberTeam.roles); const isDirect = (this.state.channel.type === 'D'); if (isDirect) { diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index 5feeb4e88..82fc51184 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -121,7 +121,7 @@ export default class ChannelInviteModal extends React.Component { var currentMember = ChannelStore.getCurrentMember(); var isAdmin = false; if (currentMember) { - isAdmin = currentMember.roles.indexOf('admin') > -1 || UserStore.getCurrentUser().roles.indexOf('admin') > -1; + isAdmin = utils.isAdmin(currentMember.roles) || utils.isAdmin(UserStore.getCurrentUser().roles); } var content; diff --git a/web/react/components/channel_members.jsx b/web/react/components/channel_members.jsx index 04fa2c7a2..1eda6a104 100644 --- a/web/react/components/channel_members.jsx +++ b/web/react/components/channel_members.jsx @@ -130,7 +130,7 @@ export default class ChannelMembers extends React.Component { const currentMember = ChannelStore.getCurrentMember(); let isAdmin = false; if (currentMember) { - isAdmin = currentMember.roles.indexOf('admin') > -1 || UserStore.getCurrentUser().roles.indexOf('admin') > -1; + isAdmin = Utils.isAdmin(currentMember.roles) || Utils.isAdmin(UserStore.getCurrentUser().roles); } var memberList = null; diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx index 9a31a2e30..158ff65be 100644 --- a/web/react/components/member_list_item.jsx +++ b/web/react/components/member_list_item.jsx @@ -2,6 +2,7 @@ // See License.txt for license information. var UserStore = require('../stores/user_store.jsx'); +const Utils = require('../utils/utils.jsx'); export default class MemberListItem extends React.Component { constructor(props) { @@ -26,7 +27,7 @@ export default class MemberListItem extends React.Component { render() { var member = this.props.member; var isAdmin = this.props.isAdmin; - var isMemberAdmin = member.roles.indexOf('admin') > -1; + var isMemberAdmin = Utils.isAdmin(member.roles); var timestamp = UserStore.getCurrentUser().update_at; var invite; diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index ba8be12b2..65cd40975 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -6,6 +6,7 @@ var client = require('../utils/client.jsx'); var asyncClient = require('../utils/async_client.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var LoadingScreen = require('./loading_screen.jsx'); +var NewChannelFlow = require('./new_channel_flow.jsx'); function getStateFromStores() { return { @@ -25,6 +26,7 @@ export default class MoreChannels extends React.Component { var initState = getStateFromStores(); initState.channelType = ''; initState.joiningChannel = -1; + initState.showNewChannelModal = false; this.state = initState; } componentDidMount() { @@ -66,6 +68,7 @@ export default class MoreChannels extends React.Component { } handleNewChannel() { $(React.findDOMNode(this.refs.modal)).modal('hide'); + this.setState({showNewChannelModal: true}); } render() { var serverError; @@ -148,20 +151,22 @@ export default class MoreChannels extends React.Component { className='close' data-dismiss='modal' > - <span aria-hidden='true'>×</span> - <span className='sr-only'>Close</span> + <span aria-hidden='true'>{'×'}</span> + <span className='sr-only'>{'Close'}</span> </button> - <h4 className='modal-title'>More Channels</h4> + <h4 className='modal-title'>{'More Channels'}</h4> <button - data-toggle='modal' - data-target='#new_channel' - data-channeltype={this.state.channelType} type='button' className='btn btn-primary channel-create-btn' onClick={this.handleNewChannel} > - Create New Channel + {'Create New Channel'} </button> + <NewChannelFlow + show={this.state.showNewChannelModal} + channelType={this.state.channelType} + onModalDismissed={() => this.setState({showNewChannelModal: false})} + /> </div> <div className='modal-body'> {moreChannels} @@ -173,7 +178,7 @@ export default class MoreChannels extends React.Component { className='btn btn-default' data-dismiss='modal' > - Close + {'Close'} </button> </div> </div> diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index cae9f12e4..da9874b0b 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -8,6 +8,7 @@ var ChannelStore = require('../stores/channel_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); var MessageWrapper = require('./message_wrapper.jsx'); var NotifyCounts = require('./notify_counts.jsx'); +const Utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; @@ -335,7 +336,7 @@ export default class Navbar extends React.Component { options={{singleline: true, mentionHighlight: false}} /> ); - isAdmin = this.state.member.roles.indexOf('admin') > -1; + isAdmin = Utils.isAdmin(this.state.member.roles); if (channel.type === 'O') { channelTitle = channel.display_name; diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index b7566cfb9..4c01d2c43 100644 --- a/web/react/components/navbar_dropdown.jsx +++ b/web/react/components/navbar_dropdown.jsx @@ -30,12 +30,12 @@ export default class NavbarDropdown extends React.Component { UserStore.addTeamsChangeListener(this.onListenerChange); TeamStore.addChangeListener(this.onListenerChange); - $(React.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', function resetDropdown() { + $(React.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', () => { this.blockToggle = true; - setTimeout(function blockTimeout() { + setTimeout(() => { this.blockToggle = false; - }.bind(this), 100); - }.bind(this)); + }, 100); + }); } componentWillUnmount() { UserStore.removeTeamsChangeListener(this.onListenerChange); @@ -53,12 +53,16 @@ export default class NavbarDropdown extends React.Component { var teamLink = ''; var inviteLink = ''; var manageLink = ''; + var sysAdminLink = ''; + var adminDivider = ''; var currentUser = UserStore.getCurrentUser(); var isAdmin = false; + var isSystemAdmin = false; var teamSettings = null; if (currentUser != null) { - isAdmin = currentUser.roles.indexOf('admin') > -1; + isAdmin = Utils.isAdmin(currentUser.roles); + isSystemAdmin = Utils.isInRole(currentUser.roles, 'system_admin'); inviteLink = ( <li> @@ -67,7 +71,7 @@ export default class NavbarDropdown extends React.Component { data-toggle='modal' data-target='#invite_member' > - Invite New Member + {'Invite New Member'} </a> </li> ); @@ -82,7 +86,7 @@ export default class NavbarDropdown extends React.Component { data-title='Team Invite' data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id} > - Get Team Invite Link + {'Get Team Invite Link'} </a> </li> ); @@ -97,19 +101,36 @@ export default class NavbarDropdown extends React.Component { data-toggle='modal' data-target='#team_members' > - Manage Team + {'Manage Team'} + </a> + </li> + ); + + adminDivider = (<li className='divider'></li>); + + teamSettings = ( + <li> + <a + href='#' + data-toggle='modal' + data-target='#team_settings' + > + {'Team Settings'} + </a> + </li> + ); + } + + if (isSystemAdmin) { + sysAdminLink = ( + <li> + <a + href='/admin_console' + > + {'System Console'} </a> </li> ); - teamSettings = (<li> - <a - href='#' - data-toggle='modal' - data-target='#team_settings' - > - Team Settings - </a> - </li>); } var teams = []; @@ -123,9 +144,9 @@ export default class NavbarDropdown extends React.Component { ); if (this.state.teams.length > 1 && this.state.currentTeam) { var curTeamName = this.state.currentTeam.name; - this.state.teams.forEach(function listTeams(teamName) { + this.state.teams.forEach((teamName) => { if (teamName !== curTeamName) { - teams.push(<li key={teamName}><a href={Utils.getWindowLocationOrigin() + '/' + teamName}>Switch to {teamName}</a></li>); + teams.push(<li key={teamName}><a href={Utils.getWindowLocationOrigin() + '/' + teamName}>{'Switch to ' + teamName}</a></li>); } }); } @@ -135,7 +156,7 @@ export default class NavbarDropdown extends React.Component { target='_blank' href={Utils.getWindowLocationOrigin() + '/signup_team'} > - Create a New Team + {'Create a New Team'} </a> </li>); @@ -167,21 +188,23 @@ export default class NavbarDropdown extends React.Component { data-toggle='modal' data-target='#user_settings' > - Account Settings + {'Account Settings'} </a> </li> - {teamSettings} {inviteLink} {teamLink} - {manageLink} <li> <a href='#' onClick={this.handleLogoutClick} > - Logout + {'Logout'} </a> </li> + {adminDivider} + {teamSettings} + {manageLink} + {sysAdminLink} {teams} <li className='divider'></li> <li> @@ -189,7 +212,7 @@ export default class NavbarDropdown extends React.Component { target='_blank' href='/static/help/help.html' > - Help + {'Help'} </a> </li> <li> @@ -197,7 +220,7 @@ export default class NavbarDropdown extends React.Component { target='_blank' href='/static/help/report_problem.html' > - Report a Problem + {'Report a Problem'} </a> </li> </ul> diff --git a/web/react/components/new_channel_modal.jsx b/web/react/components/new_channel_modal.jsx index fc7b8c183..c43137744 100644 --- a/web/react/components/new_channel_modal.jsx +++ b/web/react/components/new_channel_modal.jsx @@ -107,8 +107,8 @@ export default class NewChannelModal extends React.Component { {channelSwitchText} </div> <div className={displayNameClass}> - <label className='col-sm-2 form__label control-label'>{'Name'}</label> - <div className='col-sm-10'> + <label className='col-sm-3 form__label control-label'>{'Name'}</label> + <div className='col-sm-9'> <input onChange={this.handleChange} type='text' @@ -121,7 +121,7 @@ export default class NewChannelModal extends React.Component { tabIndex='1' /> {displayNameError} - <p className='input__help'> + <p className='input__help dark'> {'Channel URL: ' + prettyTeamURL + this.props.channelData.name + ' ('} <a href='#' @@ -134,11 +134,11 @@ export default class NewChannelModal extends React.Component { </div> </div> <div className='form-group less'> - <div className='col-sm-2'> + <div className='col-sm-3'> <label className='form__label control-label'>{'Description'}</label> <label className='form__label light'>{'(optional)'}</label> </div> - <div className='col-sm-10'> + <div className='col-sm-9'> <textarea className='form-control no-resize' ref='channel_desc' @@ -150,7 +150,7 @@ export default class NewChannelModal extends React.Component { tabIndex='2' /> <p className='input__help'> - {'This is the purpose of your channel and helps others decide whether to join.'} + {'Description helps others decide whether to join this channel.'} </p> {serverError} </div> diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 3be615bb9..dbbcdc409 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -35,9 +35,6 @@ export default class PostBody extends React.Component { parseEmojis() { twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); - this.getAllChildNodes(React.findDOMNode(this)).forEach((current) => { - global.window.emojify.run(current); - }); } componentDidMount() { @@ -154,17 +151,18 @@ export default class PostBody extends React.Component { return ( <div className='post-body'> {comment} - <p + <div key={`${post.id}_message`} id={`${post.id}_message`} className={postClass} > {loading} <span + ref='message_span' onClick={TextFormatting.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}} /> - </p> + </div> {fileAttachmentHolder} {embed} </div> diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index c80b287a3..d2a0a4035 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -20,7 +20,7 @@ export default class PostInfo extends React.Component { createDropdown() { var post = this.props.post; var isOwner = UserStore.getCurrentId() === post.user_id; - var isAdmin = UserStore.getCurrentUser().roles.indexOf('admin') > -1; + var isAdmin = utils.isAdmin(UserStore.getCurrentUser().roles); if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING || post.state === Constants.POST_DELETED) { return ''; @@ -151,7 +151,10 @@ export default class PostInfo extends React.Component { return ( <ul className='post-header post-info'> <li className='post-header-col'> - <time className='post-profile-time'> + <time + className='post-profile-time' + title={new Date(post.create_at).toString()} + > {utils.displayDateTime(post.create_at)} </time> </li> diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index faa5e5f0b..703e548fb 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -83,6 +83,7 @@ export default class PostList extends React.Component { }; } componentDidMount() { + window.onload = () => this.scrollToBottom(); if (this.props.isActive) { this.activate(); this.loadFirstPosts(this.props.channelId); @@ -419,7 +420,7 @@ export default class PostList extends React.Component { var members = ChannelStore.getExtraInfo(channel.id).members; for (var i = 0; i < members.length; i++) { - if (members[i].roles.indexOf('admin') > -1) { + if (utils.isAdmin(members[i].roles)) { return members[i].username; } } diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx index ed136c01f..8cc2d309b 100644 --- a/web/react/components/rhs_comment.jsx +++ b/web/react/components/rhs_comment.jsx @@ -193,7 +193,10 @@ export default class RhsComment extends React.Component { <strong><UserProfile userId={post.user_id} /></strong> </li> <li className='post-header-col'> - <time className='post-right-comment-time'> + <time + className='post-profile-time' + title={new Date(post.create_at).toString()} + > {Utils.displayCommentDateTime(post.create_at)} </time> </li> @@ -204,7 +207,8 @@ export default class RhsComment extends React.Component { <div className='post-body'> <p className={postClass}> {loading} - <span + <div + ref='message_holder' onClick={TextFormatting.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} /> diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index 85755a85c..86620a499 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -132,7 +132,14 @@ export default class RhsRootPost extends React.Component { <div className='post__content'> <ul className='post-header'> <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li> - <li className='post-header-col'><time className='post-right-root-time'>{utils.displayCommentDateTime(post.create_at)}</time></li> + <li className='post-header-col'> + <time + className='post-profile-time' + title={new Date(post.create_at).toString()} + > + {utils.displayCommentDateTime(post.create_at)} + </time> + </li> <li className='post-header-col post-header__reply'> <div className='dropdown'> {ownerOptions} @@ -140,7 +147,8 @@ export default class RhsRootPost extends React.Component { </li> </ul> <div className='post-body'> - <p + <div + ref='message_holder' onClick={TextFormatting.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} /> diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 959411f1e..072c14e0a 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -12,7 +12,8 @@ export default class SidebarHeader extends React.Component { this.state = {}; } - toggleDropdown() { + toggleDropdown(e) { + e.preventDefault(); if (this.refs.dropdown.blockToggle) { this.refs.dropdown.blockToggle = false; return; diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 5ecd502ba..2671d560b 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -26,7 +26,7 @@ export default class SidebarRightMenu extends React.Component { var isAdmin = false; if (currentUser != null) { - isAdmin = currentUser.roles.indexOf('admin') > -1; + isAdmin = utils.isAdmin(currentUser.roles); inviteLink = ( <li> diff --git a/web/react/components/user_settings_security.jsx b/web/react/components/user_settings_security.jsx index 6ccd09cb1..c10d790ae 100644 --- a/web/react/components/user_settings_security.jsx +++ b/web/react/components/user_settings_security.jsx @@ -251,6 +251,17 @@ export default class SecurityTab extends React.Component { <div className='divider-dark first'/> {passwordSection} <div className='divider-dark'/> + <ul + className='section-min' + > + <li className='col-sm-10 section-title'>{'Version ' + global.window.config.Version}</li> + <li className='col-sm-7 section-describe'> + <div className='text-nowrap'>{'Build Number: ' + global.window.config.BuildNumber}</div> + <div className='text-nowrap'>{'Build Date: ' + global.window.config.BuildDate}</div> + <div className='text-nowrap'>{'Build Hash: ' + global.window.config.BuildHash}</div> + </li> + </ul> + <div className='divider-dark'/> <br></br> <a data-toggle='modal' diff --git a/web/react/package.json b/web/react/package.json index 04e0f6bab..dd7d45f8a 100644 --- a/web/react/package.json +++ b/web/react/package.json @@ -9,7 +9,8 @@ "object-assign": "3.0.0", "react-zeroclipboard-mixin": "0.1.0", "twemoji": "1.4.1", - "babel-runtime": "5.8.24" + "babel-runtime": "5.8.24", + "marked": "0.3.5" }, "devDependencies": { "browserify": "11.0.1", diff --git a/web/react/stores/admin_store.jsx b/web/react/stores/admin_store.jsx index 591b52d05..dd5b60a24 100644 --- a/web/react/stores/admin_store.jsx +++ b/web/react/stores/admin_store.jsx @@ -8,16 +8,22 @@ var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; var LOG_CHANGE_EVENT = 'log_change'; +var CONFIG_CHANGE_EVENT = 'config_change'; class AdminStoreClass extends EventEmitter { constructor() { super(); this.logs = null; + this.config = null; this.emitLogChange = this.emitLogChange.bind(this); this.addLogChangeListener = this.addLogChangeListener.bind(this); this.removeLogChangeListener = this.removeLogChangeListener.bind(this); + + this.emitConfigChange = this.emitConfigChange.bind(this); + this.addConfigChangeListener = this.addConfigChangeListener.bind(this); + this.removeConfigChangeListener = this.removeConfigChangeListener.bind(this); } emitLogChange() { @@ -32,6 +38,18 @@ class AdminStoreClass extends EventEmitter { this.removeListener(LOG_CHANGE_EVENT, callback); } + emitConfigChange() { + this.emit(CONFIG_CHANGE_EVENT); + } + + addConfigChangeListener(callback) { + this.on(CONFIG_CHANGE_EVENT, callback); + } + + removeConfigChangeListener(callback) { + this.removeListener(CONFIG_CHANGE_EVENT, callback); + } + getLogs() { return this.logs; } @@ -39,6 +57,14 @@ class AdminStoreClass extends EventEmitter { saveLogs(logs) { this.logs = logs; } + + getConfig() { + return this.config; + } + + saveConfig(config) { + this.config = config; + } } var AdminStore = new AdminStoreClass(); @@ -51,6 +77,10 @@ AdminStoreClass.dispatchToken = AppDispatcher.register((payload) => { AdminStore.saveLogs(action.logs); AdminStore.emitLogChange(); break; + case ActionTypes.RECIEVED_CONFIG: + AdminStore.saveConfig(action.config); + AdminStore.emitConfigChange(); + break; default: } }); diff --git a/web/react/stores/browser_store.jsx b/web/react/stores/browser_store.jsx index e1ca52746..d2dedb271 100644 --- a/web/react/stores/browser_store.jsx +++ b/web/react/stores/browser_store.jsx @@ -9,9 +9,6 @@ function getPrefix() { return UserStore.getCurrentId() + '_'; } -// Also change model/utils.go ETAG_ROOT_VERSION -var BROWSER_STORE_VERSION = '.5'; - class BrowserStoreClass { constructor() { this.getItem = this.getItem.bind(this); @@ -25,9 +22,9 @@ class BrowserStoreClass { this.isLocalStorageSupported = this.isLocalStorageSupported.bind(this); var currentVersion = localStorage.getItem('local_storage_version'); - if (currentVersion !== BROWSER_STORE_VERSION) { + if (currentVersion !== global.window.config.Version) { this.clear(); - localStorage.setItem('local_storage_version', BROWSER_STORE_VERSION); + localStorage.setItem('local_storage_version', global.window.config.Version); } } diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index 3e23e5c33..ed228f6c4 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -345,6 +345,32 @@ export function getLogs() { ); } +export function getConfig() { + if (isCallInProgress('getConfig')) { + return; + } + + callTracker.getConfig = utils.getTimestamp(); + client.getConfig( + (data, textStatus, xhr) => { + callTracker.getConfig = 0; + + if (xhr.status === 304 || !data) { + return; + } + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_CONFIG, + config: data + }); + }, + (err) => { + callTracker.getConfig = 0; + dispatchError(err, 'getConfig'); + } + ); +} + export function findTeams(email) { if (isCallInProgress('findTeams_' + email)) { return; diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index ba3042d78..c9eb09c00 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -297,7 +297,7 @@ export function getLogs(success, error) { dataType: 'json', contentType: 'application/json', type: 'GET', - success: success, + success, error: function onError(xhr, status, err) { var e = handleError('getLogs', xhr, status, err); error(e); @@ -305,6 +305,35 @@ export function getLogs(success, error) { }); } +export function getConfig(success, error) { + $.ajax({ + url: '/api/v1/admin/config', + dataType: 'json', + contentType: 'application/json', + type: 'GET', + success, + error: function onError(xhr, status, err) { + var e = handleError('getConfig', xhr, status, err); + error(e); + } + }); +} + +export function saveConfig(config, success, error) { + $.ajax({ + url: '/api/v1/admin/save_config', + dataType: 'json', + contentType: 'application/json', + type: 'POST', + data: JSON.stringify(config), + success, + error: function onError(xhr, status, err) { + var e = handleError('saveConfig', xhr, status, err); + error(e); + } + }); +} + export function getMeSynchronous(success, error) { var currentUser = null; $.ajax({ diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx new file mode 100644 index 000000000..7210201ff --- /dev/null +++ b/web/react/utils/emoticons.jsx @@ -0,0 +1,159 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +const emoticonPatterns = { + smile: /:-?\)/g, // :) + open_mouth: /:o/gi, // :o + scream: /:-o/gi, // :-o + smirk: /[:;]-?]/g, // :] + grinning: /[:;]-?d/gi, // :D + stuck_out_tongue_closed_eyes: /x-d/gi, // x-d + stuck_out_tongue_winking_eye: /[:;]-?p/gi, // ;p + rage: /:-?[\[@]/g, // :@ + frowning: /:-?\(/g, // :( + sob: /:['’]-?\(|:'\(/g, // :`( + kissing_heart: /:-?\*/g, // :* + wink: /;-?\)/g, // ;) + pensive: /:-?\//g, // :/ + confounded: /:-?s/gi, // :s + flushed: /:-?\|/g, // :| + relaxed: /:-?\$/g, // :$ + mask: /:-x/gi, // :-x + heart: /<3|<3/g, // <3 + broken_heart: /<\/3|</3/g, // </3 + thumbsup: /:\+1:/g, // :+1: + thumbsdown: /:\-1:/g // :-1: +}; + +function initializeEmoticonMap() { + const emoticonNames = + ('+1,-1,100,1234,8ball,a,ab,abc,abcd,accept,aerial_tramway,airplane,alarm_clock,alien,ambulance,anchor,angel,' + + 'anger,angry,anguished,ant,apple,aquarius,aries,arrow_backward,arrow_double_down,arrow_double_up,arrow_down,' + + 'arrow_down_small,arrow_forward,arrow_heading_down,arrow_heading_up,arrow_left,arrow_lower_left,' + + 'arrow_lower_right,arrow_right,arrow_right_hook,arrow_up,arrow_up_down,arrow_up_small,arrow_upper_left,' + + 'arrow_upper_right,arrows_clockwise,arrows_counterclockwise,art,articulated_lorry,astonished,atm,b,baby,' + + 'baby_bottle,baby_chick,baby_symbol,back,baggage_claim,balloon,ballot_box_with_check,bamboo,banana,bangbang,' + + 'bank,bar_chart,barber,baseball,basketball,bath,bathtub,battery,bear,bee,beer,beers,beetle,beginner,bell,bento,' + + 'bicyclist,bike,bikini,bird,birthday,black_circle,black_joker,black_medium_small_square,black_medium_square,' + + 'black_nib,black_small_square,black_square,black_square_button,blossom,blowfish,blue_book,blue_car,blue_heart,' + + 'blush,boar,boat,bomb,book,bookmark,bookmark_tabs,books,boom,boot,bouquet,bow,bowling,bowtie,boy,bread,' + + 'bride_with_veil,bridge_at_night,briefcase,broken_heart,bug,bulb,bullettrain_front,bullettrain_side,bus,busstop,' + + 'bust_in_silhouette,busts_in_silhouette,cactus,cake,calendar,calling,camel,camera,cancer,candy,capital_abcd,' + + 'capricorn,car,card_index,carousel_horse,cat,cat2,cd,chart,chart_with_downwards_trend,chart_with_upwards_trend,' + + 'checkered_flag,cherries,cherry_blossom,chestnut,chicken,children_crossing,chocolate_bar,christmas_tree,church,' + + 'cinema,circus_tent,city_sunrise,city_sunset,cl,clap,clapper,clipboard,clock1,clock10,clock1030,clock11,' + + 'clock1130,clock12,clock1230,clock130,clock2,clock230,clock3,clock330,clock4,clock430,clock5,clock530,clock6,' + + 'clock630,clock7,clock730,clock8,clock830,clock9,clock930,closed_book,closed_lock_with_key,closed_umbrella,cloud,' + + 'clubs,cn,cocktail,coffee,cold_sweat,collision,computer,confetti_ball,confounded,confused,congratulations,' + + 'construction,construction_worker,convenience_store,cookie,cool,cop,copyright,corn,couple,couple_with_heart,' + + 'couplekiss,cow,cow2,credit_card,crescent_moon,crocodile,crossed_flags,crown,cry,crying_cat_face,crystal_ball,' + + 'cupid,curly_loop,currency_exchange,curry,custard,customs,cyclone,dancer,dancers,dango,dart,dash,date,de,' + + 'deciduous_tree,department_store,diamond_shape_with_a_dot_inside,diamonds,disappointed,disappointed_relieved,' + + 'dizzy,dizzy_face,do_not_litter,dog,dog2,dollar,dolls,dolphin,donut,door,doughnut,dragon,dragon_face,dress,' + + 'dromedary_camel,droplet,dvd,e-mail,ear,ear_of_rice,earth_africa,earth_americas,earth_asia,egg,eggplant,eight,' + + 'eight_pointed_black_star,eight_spoked_asterisk,electric_plug,elephant,email,end,envelope,es,euro,' + + 'european_castle,european_post_office,evergreen_tree,exclamation,expressionless,eyeglasses,eyes,facepunch,' + + 'factory,fallen_leaf,family,fast_forward,fax,fearful,feelsgood,feet,ferris_wheel,file_folder,finnadie,fire,' + + 'fire_engine,fireworks,first_quarter_moon,first_quarter_moon_with_face,fish,fish_cake,fishing_pole_and_fish,fist,' + + 'five,flags,flashlight,floppy_disk,flower_playing_cards,flushed,foggy,football,fork_and_knife,fountain,four,' + + 'four_leaf_clover,fr,free,fried_shrimp,fries,frog,frowning,fu,fuelpump,full_moon,full_moon_with_face,game_die,gb,' + + 'gem,gemini,ghost,gift,gift_heart,girl,globe_with_meridians,goat,goberserk,godmode,golf,grapes,green_apple,' + + 'green_book,green_heart,grey_exclamation,grey_question,grimacing,grin,grinning,guardsman,guitar,gun,haircut,' + + 'hamburger,hammer,hamster,hand,handbag,hankey,hash,hatched_chick,hatching_chick,headphones,hear_no_evil,heart,' + + 'heart_decoration,heart_eyes,heart_eyes_cat,heartbeat,heartpulse,hearts,heavy_check_mark,heavy_division_sign,' + + 'heavy_dollar_sign,heavy_exclamation_mark,heavy_minus_sign,heavy_multiplication_x,heavy_plus_sign,helicopter,' + + 'herb,hibiscus,high_brightness,high_heel,hocho,honey_pot,honeybee,horse,horse_racing,hospital,hotel,hotsprings,' + + 'hourglass,hourglass_flowing_sand,house,house_with_garden,hurtrealbad,hushed,ice_cream,icecream,id,' + + 'ideograph_advantage,imp,inbox_tray,incoming_envelope,information_desk_person,information_source,innocent,' + + 'interrobang,iphone,it,izakaya_lantern,jack_o_lantern,japan,japanese_castle,japanese_goblin,japanese_ogre,jeans,' + + 'joy,joy_cat,jp,key,keycap_ten,kimono,kiss,kissing,kissing_cat,kissing_closed_eyes,kissing_face,kissing_heart,' + + 'kissing_smiling_eyes,koala,koko,kr,large_blue_circle,large_blue_diamond,large_orange_diamond,last_quarter_moon,' + + 'last_quarter_moon_with_face,laughing,leaves,ledger,left_luggage,left_right_arrow,leftwards_arrow_with_hook,' + + 'lemon,leo,leopard,libra,light_rail,link,lips,lipstick,lock,lock_with_ink_pen,lollipop,loop,loudspeaker,' + + 'love_hotel,love_letter,low_brightness,m,mag,mag_right,mahjong,mailbox,mailbox_closed,mailbox_with_mail,' + + 'mailbox_with_no_mail,man,man_with_gua_pi_mao,man_with_turban,mans_shoe,maple_leaf,mask,massage,meat_on_bone,' + + 'mega,melon,memo,mens,metal,metro,microphone,microscope,milky_way,minibus,minidisc,mobile_phone_off,' + + 'money_with_wings,moneybag,monkey,monkey_face,monorail,mortar_board,mount_fuji,mountain_bicyclist,' + + 'mountain_cableway,mountain_railway,mouse,mouse2,movie_camera,moyai,muscle,mushroom,musical_keyboard,' + + 'musical_note,musical_score,mute,nail_care,name_badge,neckbeard,necktie,negative_squared_cross_mark,' + + 'neutral_face,new,new_moon,new_moon_with_face,newspaper,ng,nine,no_bell,no_bicycles,no_entry,no_entry_sign,' + + 'no_good,no_mobile_phones,no_mouth,no_pedestrians,no_smoking,non-potable_water,nose,notebook,' + + 'notebook_with_decorative_cover,notes,nut_and_bolt,o,o2,ocean,octocat,octopus,oden,office,ok,ok_hand,' + + 'ok_woman,older_man,older_woman,on,oncoming_automobile,oncoming_bus,oncoming_police_car,oncoming_taxi,one,' + + 'open_file_folder,open_hands,open_mouth,ophiuchus,orange_book,outbox_tray,ox,package,page_facing_up,' + + 'page_with_curl,pager,palm_tree,panda_face,paperclip,parking,part_alternation_mark,partly_sunny,' + + 'passport_control,paw_prints,peach,pear,pencil,pencil2,penguin,pensive,performing_arts,persevere,' + + 'person_frowning,person_with_blond_hair,person_with_pouting_face,phone,pig,pig2,pig_nose,pill,pineapple,pisces,' + + 'pizza,plus1,point_down,point_left,point_right,point_up,point_up_2,police_car,poodle,poop,post_office,' + + 'postal_horn,postbox,potable_water,pouch,poultry_leg,pound,pouting_cat,pray,princess,punch,purple_heart,purse,' + + 'pushpin,put_litter_in_its_place,question,rabbit,rabbit2,racehorse,radio,radio_button,rage,rage1,rage2,rage3,' + + 'rage4,railway_car,rainbow,raised_hand,raised_hands,raising_hand,ram,ramen,rat,recycle,red_car,red_circle,' + + 'registered,relaxed,relieved,repeat,repeat_one,restroom,revolving_hearts,rewind,ribbon,rice,rice_ball,' + + 'rice_cracker,rice_scene,ring,rocket,roller_coaster,rooster,rose,rotating_light,round_pushpin,rowboat,ru,' + + 'rugby_football,runner,running,running_shirt_with_sash,sa,sagittarius,sailboat,sake,sandal,santa,satellite,' + + 'satisfied,saxophone,school,school_satchel,scissors,scorpius,scream,scream_cat,scroll,seat,secret,see_no_evil,' + + 'seedling,seven,shaved_ice,sheep,shell,ship,shipit,shirt,shit,shoe,shower,signal_strength,six,six_pointed_star,' + + 'ski,skull,sleeping,sleepy,slot_machine,small_blue_diamond,small_orange_diamond,small_red_triangle,' + + 'small_red_triangle_down,smile,smile_cat,smiley,smiley_cat,smiling_imp,smirk,smirk_cat,smoking,snail,snake,' + + 'snowboarder,snowflake,snowman,sob,soccer,soon,sos,sound,space_invader,spades,spaghetti,sparkle,sparkler,' + + 'sparkles,sparkling_heart,speak_no_evil,speaker,speech_balloon,speedboat,squirrel,star,star2,stars,station,' + + 'statue_of_liberty,steam_locomotive,stew,straight_ruler,strawberry,stuck_out_tongue,stuck_out_tongue_closed_eyes,' + + 'stuck_out_tongue_winking_eye,sun_with_face,sunflower,sunglasses,sunny,sunrise,sunrise_over_mountains,surfer,' + + 'sushi,suspect,suspension_railway,sweat,sweat_drops,sweat_smile,sweet_potato,swimmer,symbols,syringe,tada,' + + 'tanabata_tree,tangerine,taurus,taxi,tea,telephone,telephone_receiver,telescope,tennis,tent,thought_balloon,' + + 'three,thumbsdown,thumbsup,ticket,tiger,tiger2,tired_face,tm,toilet,tokyo_tower,tomato,tongue,top,tophat,' + + 'tractor,traffic_light,train,train2,tram,triangular_flag_on_post,triangular_ruler,trident,triumph,trolleybus,' + + 'trollface,trophy,tropical_drink,tropical_fish,truck,trumpet,tshirt,tulip,turtle,tv,twisted_rightwards_arrows,' + + 'two,two_hearts,two_men_holding_hands,two_women_holding_hands,u5272,u5408,u55b6,u6307,u6708,u6709,u6e80,u7121,' + + 'u7533,u7981,u7a7a,uk,umbrella,unamused,underage,unlock,up,us,v,vertical_traffic_light,vhs,vibration_mode,' + + 'video_camera,video_game,violin,virgo,volcano,vs,walking,waning_crescent_moon,waning_gibbous_moon,warning,watch,' + + 'water_buffalo,watermelon,wave,wavy_dash,waxing_crescent_moon,waxing_gibbous_moon,wc,weary,wedding,whale,whale2,' + + 'wheelchair,white_check_mark,white_circle,white_flower,white_large_square,white_medium_small_square,' + + 'white_medium_square,white_small_square,white_square_button,wind_chime,wine_glass,wink,wolf,woman,' + + 'womans_clothes,womans_hat,womens,worried,wrench,x,yellow_heart,yen,yum,zap,zero,zzz').split(','); + + // use a map to help make lookups faster instead of having to use indexOf on an array + const out = new Map(); + + for (let i = 0; i < emoticonNames.length; i++) { + out[emoticonNames[i]] = true; + } + + return out; +} + +const emoticonMap = initializeEmoticonMap(); + +export function handleEmoticons(text, tokens) { + let output = text; + + function replaceEmoticonWithToken(match, name) { + if (emoticonMap[name]) { + const index = tokens.size; + const alias = `MM_EMOTICON${index}`; + + tokens.set(alias, { + value: `<img align="absmiddle" alt=${match} class="emoji" src=${getImagePathForEmoticon(name)} title=${match} />`, + originalText: match + }); + + return alias; + } + + return match; + } + + output = output.replace(/:([a-zA-Z0-9_-]+):/g, replaceEmoticonWithToken); + + $.each(emoticonPatterns, (name, pattern) => { + // this might look a bit funny, but since the name isn't contained in the actual match + // like with the named emoticons, we need to add it in manually + output = output.replace(pattern, (match) => replaceEmoticonWithToken(match, name)); + }); + + return output; +} + +function getImagePathForEmoticon(name) { + return `/static/images/emoji/${name}.png`; +} diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx new file mode 100644 index 000000000..96da54217 --- /dev/null +++ b/web/react/utils/markdown.jsx @@ -0,0 +1,22 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +const marked = require('marked'); + +export class MattermostMarkdownRenderer extends marked.Renderer { + link(href, title, text) { + let outHref = href; + + if (outHref.lastIndexOf('http', 0) !== 0) { + outHref = `http://${outHref}`; + } + + let output = '<a class="theme" href="' + outHref + '"'; + if (title) { + output += ' title="' + title + '"'; + } + output += '>' + text + '</a>'; + + return output; + } +} diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx index 2025e16da..be82f7b9c 100644 --- a/web/react/utils/text_formatting.jsx +++ b/web/react/utils/text_formatting.jsx @@ -3,21 +3,44 @@ const Autolinker = require('autolinker'); const Constants = require('./constants.jsx'); +const Emoticons = require('./emoticons.jsx'); +const Markdown = require('./markdown.jsx'); const UserStore = require('../stores/user_store.jsx'); const Utils = require('./utils.jsx'); +const marked = require('marked'); + +const markdownRenderer = new Markdown.MattermostMarkdownRenderer(); + // Performs formatting of user posts including highlighting mentions and search terms and converting urls, hashtags, and // @mentions to links by taking a user's message and returning a string of formatted html. Also takes a number of options // as part of the second parameter: // - searchTerm - If specified, this word is highlighted in the resulting html. Defaults to nothing. // - mentionHighlight - Specifies whether or not to highlight mentions of the current user. Defaults to true. // - singleline - Specifies whether or not to remove newlines. Defaults to false. +// - emoticons - Enables emoticon parsing. Defaults to true. +// - markdown - Enables markdown parsing. Defaults to true. export function formatText(text, options = {}) { - let output = sanitizeHtml(text); + if (!('markdown' in options)) { + options.markdown = true; + } + + // wait until marked can sanitize the html so that we don't break markdown block quotes + let output; + if (!options.markdown) { + output = sanitizeHtml(text); + } else { + output = text; + } + const tokens = new Map(); // replace important words and phrases with tokens - output = autolinkUrls(output, tokens); + if (!('emoticons' in options) || options.emoticon) { + output = Emoticons.handleEmoticons(output, tokens); + } + + output = autolinkUrls(output, tokens, !!options.markdown); output = autolinkAtMentions(output, tokens); output = autolinkHashtags(output, tokens); @@ -29,11 +52,21 @@ export function formatText(text, options = {}) { output = highlightCurrentMentions(output, tokens); } + // perform markdown parsing while we have an html-free input string + if (options.markdown) { + output = marked(output, { + renderer: markdownRenderer, + sanitize: true + }); + } + // reinsert tokens with formatted versions of the important words and phrases output = replaceTokens(output, tokens); // replace newlines with html line breaks - output = replaceNewlines(output, options.singleline); + if (options.singleline) { + output = replaceNewlines(output); + } return output; } @@ -51,17 +84,17 @@ export function sanitizeHtml(text) { return output; } -function autolinkUrls(text, tokens) { +function autolinkUrls(text, tokens, markdown) { function replaceUrlWithToken(autolinker, match) { const linkText = match.getMatchedText(); let url = linkText; - if (!url.lastIndexOf('http', 0) === 0) { + if (url.lastIndexOf('http', 0) !== 0) { url = `http://${linkText}`; } const index = tokens.size; - const alias = `__MM_LINK${index}__`; + const alias = `MM_LINK${index}`; tokens.set(alias, { value: `<a class='theme' target='_blank' href='${url}'>${linkText}</a>`, @@ -81,7 +114,30 @@ function autolinkUrls(text, tokens) { replaceFn: replaceUrlWithToken }); - return autolinker.link(text); + let output = text; + + // temporarily replace markdown links if markdown is enabled so that we don't accidentally parse them twice + const markdownLinkTokens = new Map(); + if (markdown) { + function replaceMarkdownLinkWithToken(markdownLink) { + const index = markdownLinkTokens.size; + const alias = `MM_MARKDOWNLINK${index}`; + + markdownLinkTokens.set(alias, {value: markdownLink}); + + return alias; + } + + output = output.replace(/\]\([^\)]*\)/g, replaceMarkdownLinkWithToken); + } + + output = autolinker.link(output); + + if (markdown) { + output = replaceTokens(output, markdownLinkTokens); + } + + return output; } function autolinkAtMentions(text, tokens) { @@ -91,7 +147,7 @@ function autolinkAtMentions(text, tokens) { const usernameLower = username.toLowerCase(); if (Constants.SPECIAL_MENTIONS.indexOf(usernameLower) !== -1 || UserStore.getProfileByUsername(usernameLower)) { const index = tokens.size; - const alias = `__MM_ATMENTION${index}__`; + const alias = `MM_ATMENTION${index}`; tokens.set(alias, { value: `<a class='mention-link' href='#' data-mention='${usernameLower}'>${mention}</a>`, @@ -119,7 +175,7 @@ function highlightCurrentMentions(text, tokens) { for (const [alias, token] of tokens) { if (mentionKeys.indexOf(token.originalText) !== -1) { const index = tokens.size + newTokens.size; - const newAlias = `__MM_SELFMENTION${index}__`; + const newAlias = `MM_SELFMENTION${index}`; newTokens.set(newAlias, { value: `<span class='mention-highlight'>${alias}</span>`, @@ -138,7 +194,7 @@ function highlightCurrentMentions(text, tokens) { // look for self mentions in the text function replaceCurrentMentionWithToken(fullMatch, prefix, mention) { const index = tokens.size; - const alias = `__MM_SELFMENTION${index}__`; + const alias = `MM_SELFMENTION${index}`; tokens.set(alias, { value: `<span class='mention-highlight'>${mention}</span>`, @@ -162,7 +218,7 @@ function autolinkHashtags(text, tokens) { for (const [alias, token] of tokens) { if (token.originalText.lastIndexOf('#', 0) === 0) { const index = tokens.size + newTokens.size; - const newAlias = `__MM_HASHTAG${index}__`; + const newAlias = `MM_HASHTAG${index}`; newTokens.set(newAlias, { value: `<a class='mention-link' href='#' data-hashtag='${token.originalText}'>${token.originalText}</a>`, @@ -181,7 +237,7 @@ function autolinkHashtags(text, tokens) { // look for hashtags in the text function replaceHashtagWithToken(fullMatch, prefix, hashtag) { const index = tokens.size; - const alias = `__MM_HASHTAG${index}__`; + const alias = `MM_HASHTAG${index}`; tokens.set(alias, { value: `<a class='mention-link' href='#' data-hashtag='${hashtag}'>${hashtag}</a>`, @@ -201,7 +257,7 @@ function highlightSearchTerm(text, tokens, searchTerm) { for (const [alias, token] of tokens) { if (token.originalText === searchTerm) { const index = tokens.size + newTokens.size; - const newAlias = `__MM_SEARCHTERM${index}__`; + const newAlias = `MM_SEARCHTERM${index}`; newTokens.set(newAlias, { value: `<span class='search-highlight'>${alias}</span>`, @@ -219,7 +275,7 @@ function highlightSearchTerm(text, tokens, searchTerm) { function replaceSearchTermWithToken(fullMatch, prefix, word) { const index = tokens.size; - const alias = `__MM_SEARCHTERM${index}__`; + const alias = `MM_SEARCHTERM${index}`; tokens.set(alias, { value: `<span class='search-highlight'>${word}</span>`, @@ -246,11 +302,7 @@ function replaceTokens(text, tokens) { return output; } -function replaceNewlines(text, singleline) { - if (!singleline) { - return text.replace(/\n/g, '<br />'); - } - +function replaceNewlines(text) { return text.replace(/\n/g, ' '); } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 032cf4ff4..074591489 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -54,6 +54,29 @@ export function isTestDomain() { return false; } +export function isInRole(roles, inRole) { + var parts = roles.split(' '); + for (var i = 0; i < parts.length; i++) { + if (parts[i] === inRole) { + return true; + } + } + + return false; +} + +export function isAdmin(roles) { + if (isInRole(roles, 'admin')) { + return true; + } + + if (isInRole(roles, 'system_admin')) { + return true; + } + + return false; +} + export function getDomainWithOutSub() { var parts = window.location.host.split('.'); |