diff options
Diffstat (limited to 'web/react/components')
23 files changed, 1537 insertions, 249 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..bb43af802 --- /dev/null +++ b/web/react/components/admin_console/admin_controller.jsx @@ -0,0 +1,59 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// 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 Navbar = require('../../components/navbar.jsx'); + +export default class AdminController extends React.Component { + constructor(props) { + super(props); + + this.selectTab = this.selectTab.bind(this); + + this.state = { + selected: 'email_settings' + }; + } + + 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 />; + } + + return ( + <div className='container-fluid'> + <div + className='sidebar--menu' + id='sidebar-menu' + /> + <AdminSidebar + selected={this.state.selected} + selectTab={this.selectTab} + /> + <div className='inner__wrap channel__wrap'> + <div className='row header'> + <Navbar teamDisplayName='Admin Console' /> + </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_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx new file mode 100644 index 000000000..6b3be89d0 --- /dev/null +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -0,0 +1,197 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SidebarHeader = require('../sidebar_header.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.state = { + }; + } + + handleClick(name) { + this.props.selectTab(name); + } + + isSelected(name) { + if (this.props.selected === name) { + return 'active'; + } + + return ''; + } + + 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' + /> + <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')} + > + {'Email Settings'} + </a> + </li> + <li><a href='#'>{'Other Settings'}</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')} + > + {'Job 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' + > + {'Boole '} + <span className='menu-icon--right menu__close'>{'x'}</span> + </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> + </div> + </div> + ); + } +} + +AdminSidebar.propTypes = { + selected: React.PropTypes.string, + selectTab: React.PropTypes.func +};
\ 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..3c53a8ee1 --- /dev/null +++ b/web/react/components/admin_console/email_settings.jsx @@ -0,0 +1,311 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class EmailSettings extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + 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='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='form-group'> + <label + className='control-label col-sm-4' + htmlFor='smtpPassword' + > + {'SMTP Password:'} + </label> + <div className='col-sm-8'> + <input + type='password' + className='form-control' + id='smtpPassword' + placeholder='Enter your SMTP password' + value='' + /> + </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' + placeholder='Enter your SMTP server' + value='' + /> + <div className='help-text'> + <a + href='#' + className='help-link' + > + {'Test Connection'} + </a> + <div className='alert alert-success'><i className='fa fa-check'></i>{' Connection successful'}</div> + <div className='alert alert-warning hide'><i className='fa fa-warning'></i>{' Connection unsuccessful'}</div> + </div> + </div> + </div> + <div className='form-group'> + <label className='control-label col-sm-4'>{'Use TLS:'}</label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='tls' + value='option1' + /> + {'True'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='tls' + value='option2' + /> + {'False'} + </label> + </div> + </div> + <div className='form-group'> + <label className='control-label col-sm-4'>{'Use Start TLS:'}</label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='starttls' + value='option1' + /> + {'True'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='starttls' + value='option2' + /> + {'False'} + </label> + </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='text' + className='form-control' + id='feedbackEmail' + placeholder='Enter your feedback email' + value='' + /> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Feedback Username:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your feedback username' + value='' + /> + </div> + </div> + <div className='form-group'> + <div className='col-sm-offset-4 col-sm-8'> + <div className='checkbox'> + <label><input type='checkbox' />{'Remember me'}</label> + </div> + </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' + > + {'Submit'} + </button> + </div> + </div> + </form> + </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 new file mode 100644 index 000000000..34ec9693d --- /dev/null +++ b/web/react/components/admin_console/jobs_settings.jsx @@ -0,0 +1,183 @@ +// 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' + > + {'Submit'} + </button> + </div> + </div> + </form> + </div> + ); + } +}
\ No newline at end of file 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..fa30de7b2 --- /dev/null +++ b/web/react/components/admin_console/select_team_modal.jsx @@ -0,0 +1,124 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class SelectTeam extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + return ( + <div className='modal fade' + id='select-team' + tabIndex='-1' + role='dialog' + aria-labelledby='teamsModalLabel' + > + <div className='modal-dialog' + role='document' + > + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 + className='modal-title' + id='teamsModalLabel' + > + {'Select a team'} + </h4> + </div> + <div className='modal-body'> + <table className='more-channel-table table'> + <tbody> + <tr> + <td> + <p className='more-channel-name'>{'Descartes'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Grouping'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Adventure'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Crossroads'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Sky scraping'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Outdoors'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Microsoft'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Apple'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + </tbody> + </table> + </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + {'Close'} + </button> + </div> + </div> + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/change_url_modal.jsx b/web/react/components/change_url_modal.jsx new file mode 100644 index 000000000..28fa70c1f --- /dev/null +++ b/web/react/components/change_url_modal.jsx @@ -0,0 +1,177 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Modal = ReactBootstrap.Modal; +var Utils = require('../utils/utils.jsx'); + +export default class ChangeUrlModal extends React.Component { + constructor(props) { + super(props); + + this.onURLChanged = this.onURLChanged.bind(this); + this.doSubmit = this.doSubmit.bind(this); + this.doCancel = this.doCancel.bind(this); + + this.state = { + currentURL: props.currentURL, + urlError: '', + userEdit: false + }; + } + componentWillReceiveProps(nextProps) { + // This check prevents the url being deleted when we re-render + // because of user status check + if (!this.state.userEdit) { + this.setState({ + currentURL: nextProps.currentURL + }); + } + } + componentDidUpdate(prevProps) { + if (this.props.show === true && prevProps.show === false) { + React.findDOMNode(this.refs.urlinput).select(); + } + } + onURLChanged(e) { + const url = e.target.value.trim(); + this.setState({currentURL: url.replace(/[^A-Za-z0-9-_]/g, '').toLowerCase(), userEdit: true}); + } + getURLError(url) { + let error = []; //eslint-disable-line prefer-const + if (url.length < 2) { + error.push(<span key='error1'>{'Must be longer than two characters'}<br/></span>); + } + if (url.charAt(0) === '-' || url.charAt(0) === '_') { + error.push(<span key='error2'>{'Must start with a letter or number'}<br/></span>); + } + if (url.length > 1 && (url.charAt(url.length - 1) === '-' || url.charAt(url.length - 1) === '_')) { + error.push(<span key='error3'>{'Must end with a letter or number'}<br/></span>); + } + if (url.indexOf('__') > -1) { + error.push(<span key='error4'>{'Can not contain two underscores in a row.'}<br/></span>); + } + + // In case of error we don't detect + if (error.length === 0) { + error.push(<span key='errorlast'>{'Invalid URL'}<br/></span>); + } + return error; + } + doSubmit(e) { + e.preventDefault(); + + const url = React.findDOMNode(this.refs.urlinput).value; + const cleanedURL = Utils.cleanUpUrlable(url); + if (cleanedURL !== url || url.length < 2 || url.indexOf('__') > -1) { + this.setState({urlError: this.getURLError(url)}); + return; + } + this.setState({urlError: '', userEdit: false}); + this.props.onModalSubmit(url); + } + doCancel() { + this.setState({urlError: '', userEdit: false}); + this.props.onModalDismissed(); + } + render() { + let urlClass = 'input-group input-group--limit'; + let urlError = null; + let serverError = null; + + if (this.state.urlError) { + urlClass += ' has-error'; + urlError = (<p className='input__help error'>{this.state.urlError}</p>); + } + + if (this.props.serverError) { + serverError = <div className='form-group has-error'><p className='input__help error'>{this.props.serverError}</p></div>; + } + + const fullTeamUrl = Utils.getTeamURLFromAddressBar(); + const teamURL = Utils.getShortenedTeamURL(); + + return ( + <Modal + show={this.props.show} + onHide={this.doCancel} + > + <Modal.Header closeButton={true}> + <Modal.Title>{this.props.title}</Modal.Title> + </Modal.Header> + <form + role='form' + className='form-horizontal' + > + <Modal.Body> + <div className='modal-intro'>{this.props.description}</div> + <div className='form-group'> + <label className='col-sm-2 form__label control-label'>{this.props.urlLabel}</label> + <div className='col-sm-10'> + <div className={urlClass}> + <span + data-toggle='tooltip' + title={fullTeamUrl} + className='input-group-addon' + > + {teamURL} + </span> + <input + type='text' + ref='urlinput' + className='form-control' + maxLength='22' + onChange={this.onURLChanged} + value={this.state.currentURL} + autoFocus={true} + tabIndex='1' + /> + </div> + {urlError} + {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' + > + {this.props.submitButtonText} + </button> + </Modal.Footer> + </form> + </Modal> + ); + } +} + +ChangeUrlModal.defaultProps = { + show: false, + title: 'Change URL', + desciption: '', + urlLabel: 'URL', + submitButtonText: 'Submit', + currentURL: '', + serverError: '' +}; + +ChangeUrlModal.propTypes = { + show: React.PropTypes.bool.isRequired, + title: React.PropTypes.string, + description: React.PropTypes.string, + urlLabel: React.PropTypes.string, + submitButtonText: React.PropTypes.string, + currentURL: React.PropTypes.string, + serverError: React.PropTypes.string, + onModalSubmit: React.PropTypes.func.isRequired, + onModalDismissed: React.PropTypes.func.isRequired +}; diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index db23a5831..0dbbc20d4 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -8,6 +8,7 @@ const SocketStore = require('../stores/socket_store.jsx'); const NavbarSearchBox = require('./search_bar.jsx'); const AsyncClient = require('../utils/async_client.jsx'); const Client = require('../utils/client.jsx'); +const TextFormatting = require('../utils/text_formatting.jsx'); const Utils = require('../utils/utils.jsx'); const MessageWrapper = require('./message_wrapper.jsx'); const PopoverListMembers = require('./popover_list_members.jsx'); @@ -107,7 +108,6 @@ export default class ChannelHeader extends React.Component { } const channel = this.state.channel; - const description = Utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); const popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>); let channelTitle = channel.display_name; const currentId = UserStore.getCurrentId(); @@ -326,9 +326,9 @@ export default class ChannelHeader extends React.Component { data-toggle='popover' data-content={popoverContent} className='description' - > - {description} - </div> + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.description, {singleline: true, mentionHighlight: false})}} + /> </div> </th> <th> diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 534f0136e..3cb284171 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -20,12 +20,11 @@ export default class FileUpload extends React.Component { } fileUploadSuccess(channelId, data) { - var parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); + this.props.onFileUpload(data.filenames, data.client_ids, channelId); var requests = this.state.requests; - for (var j = 0; j < parsedData.client_ids.length; j++) { - delete requests[parsedData.client_ids[j]]; + for (var j = 0; j < data.client_ids.length; j++) { + delete requests[data.client_ids[j]]; } this.setState({requests: requests}); } @@ -53,7 +52,7 @@ export default class FileUpload extends React.Component { } // generate a unique id that can be used by other components to refer back to this upload - var clientId = utils.generateId(); + let clientId = utils.generateId(); // prepare data to be uploaded var formData = new FormData(); diff --git a/web/react/components/message_wrapper.jsx b/web/react/components/message_wrapper.jsx index bce305853..5adf4f228 100644 --- a/web/react/components/message_wrapper.jsx +++ b/web/react/components/message_wrapper.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var Utils = require('../utils/utils.jsx'); +var TextFormatting = require('../utils/text_formatting.jsx'); export default class MessageWrapper extends React.Component { constructor(props) { @@ -10,10 +10,7 @@ export default class MessageWrapper extends React.Component { } render() { if (this.props.message) { - var inner = Utils.textToJsx(this.props.message, this.props.options); - return ( - <div>{inner}</div> - ); + return <div dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.message, this.props.options)}}/>; } return <div/>; @@ -21,8 +18,7 @@ export default class MessageWrapper extends React.Component { } MessageWrapper.defaultProps = { - message: null, - options: null + message: '' }; MessageWrapper.propTypes = { message: React.PropTypes.string, diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 2258bf2b3..cae9f12e4 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -332,7 +332,7 @@ export default class Navbar extends React.Component { popoverContent = React.renderToString( <MessageWrapper message={channel.description} - options={{singleline: true, noMentionHighlight: true}} + options={{singleline: true, mentionHighlight: false}} /> ); isAdmin = this.state.member.roles.indexOf('admin') > -1; diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx deleted file mode 100644 index 1a11fc652..000000000 --- a/web/react/components/new_channel.jsx +++ /dev/null @@ -1,211 +0,0 @@ -// 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 asyncClient = require('../utils/async_client.jsx'); -var UserStore = require('../stores/user_store.jsx'); - -export default class NewChannelModal extends React.Component { - constructor() { - super(); - - this.handleSubmit = this.handleSubmit.bind(this); - this.displayNameKeyUp = this.displayNameKeyUp.bind(this); - this.handleClose = this.handleClose.bind(this); - - this.state = {channelType: ''}; - } - handleSubmit(e) { - e.preventDefault(); - - var channel = {}; - var state = {serverError: ''}; - - channel.display_name = React.findDOMNode(this.refs.display_name).value.trim(); - if (!channel.display_name) { - state.displayNameError = 'This field is required'; - state.inValid = true; - } else if (channel.display_name.length > 22) { - state.displayNameError = 'This field must be less than 22 characters'; - state.inValid = true; - } else { - state.displayNameError = ''; - } - - channel.name = React.findDOMNode(this.refs.channel_name).value.trim(); - if (!channel.name) { - state.nameError = 'This field is required'; - state.inValid = true; - } else if (channel.name.length > 22) { - state.nameError = 'This field must be less than 22 characters'; - state.inValid = true; - } else { - var cleanedName = utils.cleanUpUrlable(channel.name); - if (cleanedName !== channel.name) { - state.nameError = "Must be lowercase alphanumeric characters, allowing '-' but not starting or ending with '-'"; - state.inValid = true; - } else { - state.nameError = ''; - } - } - - this.setState(state); - - if (state.inValid) { - return; - } - - var cu = UserStore.getCurrentUser(); - channel.team_id = cu.team_id; - - channel.description = React.findDOMNode(this.refs.channel_desc).value.trim(); - channel.type = this.state.channelType; - - client.createChannel(channel, - function success(data) { - $(React.findDOMNode(this.refs.modal)).modal('hide'); - - asyncClient.getChannel(data.id); - utils.switchChannel(data); - - React.findDOMNode(this.refs.display_name).value = ''; - React.findDOMNode(this.refs.channel_name).value = ''; - React.findDOMNode(this.refs.channel_desc).value = ''; - }.bind(this), - function error(err) { - state.serverError = err.message; - state.inValid = true; - this.setState(state); - }.bind(this) - ); - } - displayNameKeyUp() { - var displayName = React.findDOMNode(this.refs.display_name).value.trim(); - var channelName = utils.cleanUpUrlable(displayName); - React.findDOMNode(this.refs.channel_name).value = channelName; - } - componentDidMount() { - var self = this; - $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function onModalShow(e) { - var button = e.relatedTarget; - self.setState({channelType: $(button).attr('data-channeltype')}); - }); - $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose); - } - componentWillUnmount() { - $(React.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose); - } - handleClose() { - $(React.findDOMNode(this)).find('.form-control').each(function clearForms() { - this.value = ''; - }); - - this.setState({channelType: '', displayNameError: '', nameError: '', serverError: '', inValid: false}); - } - render() { - var displayNameError = null; - var nameError = null; - var serverError = null; - var displayNameClass = 'form-group'; - var nameClass = 'form-group'; - - if (this.state.displayNameError) { - displayNameError = <label className='control-label'>{this.state.displayNameError}</label>; - displayNameClass += ' has-error'; - } - if (this.state.nameError) { - nameError = <label className='control-label'>{this.state.nameError}</label>; - nameClass += ' has-error'; - } - if (this.state.serverError) { - serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; - } - - var channelTerm = 'Channel'; - if (this.state.channelType === 'P') { - channelTerm = 'Group'; - } - - return ( - <div - className='modal fade' - id='new_channel' - ref='modal' - tabIndex='-1' - role='dialog' - aria-hidden='true' - > - <div className='modal-dialog'> - <div className='modal-content'> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' - > - <span aria-hidden='true'>×</span> - <span className='sr-only'>Cancel</span> - </button> - <h4 className='modal-title'>New {channelTerm}</h4> - </div> - <form role='form'> - <div className='modal-body'> - <div className={displayNameClass}> - <label className='control-label'>Display Name</label> - <input - onKeyUp={this.displayNameKeyUp} - type='text' - ref='display_name' - className='form-control' - placeholder='Enter display name' - maxLength='22' - /> - {displayNameError} - </div> - <div className={nameClass}> - <label className='control-label'>Handle</label> - <input - type='text' - className='form-control' - ref='channel_name' - placeholder="lowercase alphanumeric's only" - maxLength='22' - /> - {nameError} - </div> - <div className='form-group'> - <label className='control-label'>Description</label> - <textarea - className='form-control no-resize' - ref='channel_desc' - rows='3' - placeholder='Description' - maxLength='1024' - /> - </div> - {serverError} - </div> - <div className='modal-footer'> - <button - type='button' - className='btn btn-default' - data-dismiss='modal' - > - Cancel - </button> - <button - onClick={this.handleSubmit} - type='submit' - className='btn btn-primary' - > - Create New {channelTerm} - </button> - </div> - </form> - </div> - </div> - </div> - ); - } -} diff --git a/web/react/components/new_channel_flow.jsx b/web/react/components/new_channel_flow.jsx new file mode 100644 index 000000000..df6a119d5 --- /dev/null +++ b/web/react/components/new_channel_flow.jsx @@ -0,0 +1,206 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Utils = require('../utils/utils.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); +var Client = require('../utils/client.jsx'); +var UserStore = require('../stores/user_store.jsx'); + +var NewChannelModal = require('./new_channel_modal.jsx'); +var ChangeURLModal = require('./change_url_modal.jsx'); + +const SHOW_NEW_CHANNEL = 1; +const SHOW_EDIT_URL = 2; +const SHOW_EDIT_URL_THEN_COMPLETE = 3; + +export default class NewChannelFlow extends React.Component { + constructor(props) { + super(props); + + this.doSubmit = this.doSubmit.bind(this); + this.typeSwitched = this.typeSwitched.bind(this); + this.urlChangeRequested = this.urlChangeRequested.bind(this); + this.urlChangeSubmitted = this.urlChangeSubmitted.bind(this); + this.urlChangeDismissed = this.urlChangeDismissed.bind(this); + this.channelDataChanged = this.channelDataChanged.bind(this); + + this.state = { + serverError: '', + channelType: 'O', + flowState: SHOW_NEW_CHANNEL, + channelDisplayName: '', + channelName: '', + channelDescription: '', + nameModified: false + }; + } + componentWillReceiveProps(nextProps) { + // If we are being shown, grab channel type from props and clear + if (nextProps.show === true && this.props.show === false) { + this.setState({ + serverError: '', + channelType: nextProps.channelType, + flowState: SHOW_NEW_CHANNEL, + channelDisplayName: '', + channelName: '', + channelDescription: '', + nameModified: false + }); + } + } + doSubmit() { + var channel = {}; + + channel.display_name = this.state.channelDisplayName; + if (!channel.display_name) { + this.setState({serverError: 'Invalid Channel Name'}); + return; + } + + channel.name = this.state.channelName; + if (channel.name.length < 2) { + this.setState({flowState: SHOW_EDIT_URL_THEN_COMPLETE}); + return; + } + + const cu = UserStore.getCurrentUser(); + channel.team_id = cu.team_id; + channel.description = this.state.channelDescription; + channel.type = this.state.channelType; + + Client.createChannel(channel, + (data) => { + this.props.onModalDismissed(); + AsyncClient.getChannel(data.id); + Utils.switchChannel(data); + }, + (err) => { + if (err.message === 'Name must be 2 or more lowercase alphanumeric characters') { + this.setState({flowState: SHOW_EDIT_URL_THEN_COMPLETE}); + } + if (err.message === 'A channel with that handle already exists') { + this.setState({serverError: 'A channel with that URL already exists'}); + return; + } + this.setState({serverError: err.message}); + } + ); + } + typeSwitched() { + if (this.state.channelType === 'P') { + this.setState({channelType: 'O'}); + } else { + this.setState({channelType: 'P'}); + } + } + urlChangeRequested() { + this.setState({flowState: SHOW_EDIT_URL}); + } + urlChangeSubmitted(newURL) { + if (this.state.flowState === SHOW_EDIT_URL_THEN_COMPLETE) { + this.setState({channelName: newURL, nameModified: true}, this.doSubmit); + } else { + this.setState({flowState: SHOW_NEW_CHANNEL, serverError: '', channelName: newURL, nameModified: true}); + } + } + urlChangeDismissed() { + this.setState({flowState: SHOW_NEW_CHANNEL}); + } + channelDataChanged(data) { + this.setState({ + channelDisplayName: data.displayName, + channelDescription: data.description + }); + if (!this.state.nameModified) { + this.setState({channelName: Utils.cleanUpUrlable(data.displayName.trim())}); + } + } + render() { + const channelData = { + name: this.state.channelName, + displayName: this.state.channelDisplayName, + description: this.state.channelDescription + }; + + let showChannelModal = false; + let showGroupModal = false; + let showChangeURLModal = false; + + let changeURLTitle = ''; + let changeURLSubmitButtonText = ''; + let channelTerm = ''; + + // Only listen to flow state if we are being shown + if (this.props.show) { + switch (this.state.flowState) { + case SHOW_NEW_CHANNEL: + if (this.state.channelType === 'O') { + showChannelModal = true; + channelTerm = 'Channel'; + } else { + showGroupModal = true; + channelTerm = 'Group'; + } + break; + case SHOW_EDIT_URL: + showChangeURLModal = true; + changeURLTitle = 'Change ' + channelTerm + ' URL'; + changeURLSubmitButtonText = 'Change ' + channelTerm + ' URL'; + break; + case SHOW_EDIT_URL_THEN_COMPLETE: + showChangeURLModal = true; + changeURLTitle = 'Set ' + channelTerm + ' URL'; + changeURLSubmitButtonText = 'Create ' + channelTerm; + break; + } + } + return ( + <span> + <NewChannelModal + show={showChannelModal} + channelType={'O'} + channelData={channelData} + serverError={this.state.serverError} + onSubmitChannel={this.doSubmit} + onModalDismissed={this.props.onModalDismissed} + onTypeSwitched={this.typeSwitched} + onChangeURLPressed={this.urlChangeRequested} + onDataChanged={this.channelDataChanged} + /> + <NewChannelModal + show={showGroupModal} + channelType={'P'} + channelData={channelData} + serverError={this.state.serverError} + onSubmitChannel={this.doSubmit} + onModalDismissed={this.props.onModalDismissed} + onTypeSwitched={this.typeSwitched} + onChangeURLPressed={this.urlChangeRequested} + onDataChanged={this.channelDataChanged} + /> + <ChangeURLModal + show={showChangeURLModal} + title={changeURLTitle} + description={'Some characters are not allowed in URLs and may be removed.'} + urlLabel={channelTerm + ' URL'} + submitButtonText={changeURLSubmitButtonText} + currentURL={this.state.channelName} + serverError={this.state.serverError} + onModalSubmit={this.urlChangeSubmitted} + onModalDismissed={this.urlChangeDismissed} + /> + </span> + ); + } +} + +NewChannelFlow.defaultProps = { + show: false, + channelType: 'O' +}; + +NewChannelFlow.propTypes = { + show: React.PropTypes.bool.isRequired, + channelType: React.PropTypes.string.isRequired, + onModalDismissed: React.PropTypes.func.isRequired +}; diff --git a/web/react/components/new_channel_modal.jsx b/web/react/components/new_channel_modal.jsx new file mode 100644 index 000000000..2bf645dc5 --- /dev/null +++ b/web/react/components/new_channel_modal.jsx @@ -0,0 +1,198 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +const Utils = require('../utils/utils.jsx'); +var Modal = ReactBootstrap.Modal; + +export default class NewChannelModal extends React.Component { + constructor(props) { + super(props); + + this.handleSubmit = this.handleSubmit.bind(this); + this.handleChange = this.handleChange.bind(this); + + this.state = { + displayNameError: '' + }; + } + componentWillReceiveProps(nextProps) { + if (nextProps.show === true && this.props.show === false) { + this.setState({ + displayNameError: '' + }); + } + } + handleSubmit(e) { + e.preventDefault(); + + const displayName = React.findDOMNode(this.refs.display_name).value.trim(); + if (displayName.length < 1) { + this.setState({displayNameError: 'This field is required'}); + return; + } + + this.props.onSubmitChannel(); + } + handleChange() { + const newData = { + displayName: React.findDOMNode(this.refs.display_name).value, + description: React.findDOMNode(this.refs.channel_desc).value + }; + this.props.onDataChanged(newData); + } + render() { + var displayNameError = null; + var serverError = null; + var displayNameClass = 'form-group'; + + if (this.state.displayNameError) { + displayNameError = <p className='input__help error'>{this.state.displayNameError}</p>; + displayNameClass += ' has-error'; + } + + if (this.props.serverError) { + serverError = <div className='form-group has-error'><p className='input__help error'>{this.props.serverError}</p></div>; + } + + var channelTerm = ''; + var channelSwitchText = ''; + switch (this.props.channelType) { + case 'P': + channelTerm = 'Group'; + channelSwitchText = ( + <div className='modal-intro'> + {'Create a new private group with restricted membership. '} + <a + href='#' + onClick={this.props.onTypeSwitched} + > + {'Create a public channel'} + </a> + </div> + ); + break; + case 'O': + channelTerm = 'Channel'; + channelSwitchText = ( + <div className='modal-intro'> + {'Create a new public channel anyone can join. '} + <a + href='#' + onClick={this.props.onTypeSwitched} + > + {'Create a private group'} + </a> + </div> + ); + break; + } + + const prettyTeamURL = Utils.getShortenedTeamURL(); + + return ( + <span> + <Modal + show={this.props.show} + onHide={this.props.onModalDismissed} + > + <Modal.Header closeButton={true}> + <Modal.Title>{'New ' + channelTerm}</Modal.Title> + </Modal.Header> + <form + role='form' + className='form-horizontal' + > + <Modal.Body> + <div> + {channelSwitchText} + </div> + <div className={displayNameClass}> + <label className='col-sm-2 form__label control-label'>{'Name'}</label> + <div className='col-sm-10'> + <input + onChange={this.handleChange} + type='text' + ref='display_name' + className='form-control' + placeholder='Ex: "Bugs", "Marketing", "办公室恋情"' + maxLength='22' + value={this.props.channelData.displayName} + autoFocus={true} + tabIndex='1' + /> + {displayNameError} + <p className='input__help'> + {'Channel URL: ' + prettyTeamURL + this.props.channelData.name + ' ('} + <a + href='#' + onClick={this.props.onChangeURLPressed} + > + {'change this URL'} + </a> + {')'} + </p> + </div> + </div> + <div className='form-group less'> + <div className='col-sm-2'> + <label className='form__label control-label'>{'Description'}</label> + <label className='form__label light'>{'(optional)'}</label> + </div> + <div className='col-sm-10'> + <textarea + className='form-control no-resize' + ref='channel_desc' + rows='4' + placeholder='Description' + maxLength='1024' + value={this.props.channelData.description} + onChange={this.handleChange} + tabIndex='2' + /> + <p className='input__help'> + {'The purpose of your channel. To help others decide whether to join.'} + </p> + {serverError} + </div> + </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.props.onModalDismissed} + > + {'Cancel'} + </button> + <button + onClick={this.handleSubmit} + type='submit' + className='btn btn-primary' + tabIndex='3' + > + {'Create New ' + channelTerm} + </button> + </Modal.Footer> + </form> + </Modal> + </span> + ); + } +} + +NewChannelModal.defaultProps = { + show: false, + channelType: 'O', + serverError: '' +}; +NewChannelModal.propTypes = { + show: React.PropTypes.bool.isRequired, + channelType: React.PropTypes.string.isRequired, + channelData: React.PropTypes.object.isRequired, + serverError: React.PropTypes.string, + onSubmitChannel: React.PropTypes.func.isRequired, + onModalDismissed: React.PropTypes.func.isRequired, + onTypeSwitched: React.PropTypes.func.isRequired, + onChangeURLPressed: React.PropTypes.func.isRequired, + onDataChanged: React.PropTypes.func.isRequired +}; diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index d9b8f20ce..df4ed3d57 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -5,6 +5,7 @@ const FileAttachmentList = require('./file_attachment_list.jsx'); const UserStore = require('../stores/user_store.jsx'); const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); +const TextFormatting = require('../utils/text_formatting.jsx'); const twemoji = require('twemoji'); export default class PostBody extends React.Component { @@ -33,7 +34,6 @@ export default class PostBody extends React.Component { const post = this.props.post; const filenames = this.props.post.filenames; const parentPost = this.props.parentPost; - const inner = Utils.textToJsx(this.state.message); let comment = ''; let postClass = ''; @@ -135,7 +135,11 @@ export default class PostBody extends React.Component { key={`${post.id}_message`} className={postClass} > - {loading}<span>{inner}</span> + {loading} + <span + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}} + /> </p> {fileAttachmentHolder} {embed} diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx index f1a90102c..ed136c01f 100644 --- a/web/react/components/rhs_comment.jsx +++ b/web/react/components/rhs_comment.jsx @@ -12,6 +12,7 @@ var FileAttachmentList = require('./file_attachment_list.jsx'); var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; +var TextFormatting = require('../utils/text_formatting.jsx'); var twemoji = require('twemoji'); export default class RhsComment extends React.Component { @@ -84,7 +85,6 @@ export default class RhsComment extends React.Component { type = 'Comment'; } - var message = Utils.textToJsx(post.message); var timestamp = UserStore.getCurrentUser().update_at; var loading; @@ -202,7 +202,13 @@ export default class RhsComment extends React.Component { </li> </ul> <div className='post-body'> - <p className={postClass}>{loading}{message}</p> + <p className={postClass}> + {loading} + <span + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} + /> + </p> {fileAttachment} </div> </div> diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index 83b57b955..85755a85c 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -4,6 +4,7 @@ var ChannelStore = require('../stores/channel_store.jsx'); var UserProfile = require('./user_profile.jsx'); var UserStore = require('../stores/user_store.jsx'); +var TextFormatting = require('../utils/text_formatting.jsx'); var utils = require('../utils/utils.jsx'); var FileAttachmentList = require('./file_attachment_list.jsx'); var twemoji = require('twemoji'); @@ -35,7 +36,6 @@ export default class RhsRootPost extends React.Component { } render() { var post = this.props.post; - var message = utils.textToJsx(post.message); var isOwner = UserStore.getCurrentId() === post.user_id; var timestamp = UserStore.getProfile(post.user_id).update_at; var channel = ChannelStore.get(post.channel_id); @@ -140,7 +140,10 @@ export default class RhsRootPost extends React.Component { </li> </ul> <div className='post-body'> - <p>{message}</p> + <p + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} + /> {fileAttachment} </div> </div> diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index aa56f1174..0e951f5c6 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -10,6 +10,7 @@ var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); +var TextFormatting = require('../utils/text_formatting.jsx'); var ActionTypes = Constants.ActionTypes; export default class SearchResultsItem extends React.Component { @@ -56,7 +57,6 @@ export default class SearchResultsItem extends React.Component { } render() { - var message = utils.textToJsx(this.props.post.message, {searchTerm: this.props.term, noMentionHighlight: !this.props.isMentionSearch}); var channelName = ''; var channel = ChannelStore.get(this.props.post.channel_id); var timestamp = UserStore.getCurrentUser().update_at; @@ -68,6 +68,11 @@ export default class SearchResultsItem extends React.Component { } } + const formattingOptions = { + searchTerm: this.props.term, + mentionHighlight: this.props.isMentionSearch + }; + return ( <div className='search-item-container post' @@ -91,7 +96,12 @@ export default class SearchResultsItem extends React.Component { </time> </li> </ul> - <div className='search-item-snippet'><span>{message}</span></div> + <div className='search-item-snippet'> + <span + onClick={this.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}} + /> + </div> </div> </div> ); @@ -102,4 +112,4 @@ SearchResultsItem.propTypes = { post: React.PropTypes.object, isMentionSearch: React.PropTypes.bool, term: React.PropTypes.string -};
\ No newline at end of file +}; diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index ad934d271..977fecb5c 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -12,6 +12,7 @@ var Utils = require('../utils/utils.jsx'); var SidebarHeader = require('./sidebar_header.jsx'); var SearchBox = require('./search_bar.jsx'); var Constants = require('../utils/constants.jsx'); +var NewChannelFlow = require('./new_channel_flow.jsx'); export default class Sidebar extends React.Component { constructor(props) { @@ -28,6 +29,7 @@ export default class Sidebar extends React.Component { this.createChannelElement = this.createChannelElement.bind(this); this.state = this.getStateFromStores(); + this.state.modal = ''; this.state.loadingDMChannel = -1; } getStateFromStores() { @@ -473,8 +475,18 @@ export default class Sidebar extends React.Component { ); } + let showChannelModal = false; + if (this.state.modal !== '') { + showChannelModal = true; + } + return ( <div> + <NewChannelFlow + show={showChannelModal} + channelType={this.state.modal} + onModalDismissed={() => this.setState({modal: ''})} + /> <SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} @@ -508,11 +520,9 @@ export default class Sidebar extends React.Component { <a className='add-channel-btn' href='#' - data-toggle='modal' - data-target='#new_channel' - data-channeltype='O' + onClick={() => this.setState({modal: 'O'})} > - + + {'+'} </a> </h4> </li> @@ -537,11 +547,9 @@ export default class Sidebar extends React.Component { <a className='add-channel-btn' href='#' - data-toggle='modal' - data-target='#new_channel' - data-channeltype='P' + onClick={() => this.setState({modal: 'P'})} > - + + {'+'} </a> </h4> </li> diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index f078f6169..6e71eae32 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -32,7 +32,7 @@ export default class SignupUserComplete extends React.Component { handleSubmit(e) { e.preventDefault(); - this.state.user.username = React.findDOMNode(this.refs.name).value.trim(); + this.state.user.username = React.findDOMNode(this.refs.name).value.trim().toLowerCase(); if (!this.state.user.username) { this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''}); return; diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx index 031abc36a..8315430e4 100644 --- a/web/react/components/team_import_tab.jsx +++ b/web/react/components/team_import_tab.jsx @@ -35,7 +35,7 @@ export default class TeamImportTab extends React.Component { var uploadHelpText = ( <div> <p>{'Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team\'\s public channels.'}</p> - <p>{'The Slack import to Mattermost is in "Preview". Slack bot posts and channels with underscores do not yet import.'}</p> + <p>{'The Slack import to Mattermost is in "Preview". Slack bot posts do not yet import.'}</p> </div> ); diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx index b5c8b14df..984c7afab 100644 --- a/web/react/components/team_signup_username_page.jsx +++ b/web/react/components/team_signup_username_page.jsx @@ -22,7 +22,7 @@ export default class TeamSignupUsernamePage extends React.Component { submitNext(e) { e.preventDefault(); - var name = React.findDOMNode(this.refs.name).value.trim(); + var name = React.findDOMNode(this.refs.name).value.trim().toLowerCase(); var usernameError = Utils.isValidUsername(name); if (usernameError === 'Cannot use a reserved word as a username.') { diff --git a/web/react/components/user_settings_general.jsx b/web/react/components/user_settings_general.jsx index 184534a9a..dd0abc8a5 100644 --- a/web/react/components/user_settings_general.jsx +++ b/web/react/components/user_settings_general.jsx @@ -40,7 +40,7 @@ export default class UserSettingsGeneralTab extends React.Component { e.preventDefault(); var user = this.props.user; - var username = this.state.username.trim(); + var username = this.state.username.trim().toLowerCase(); var usernameError = utils.isValidUsername(username); if (usernameError === 'Cannot use a reserved word as a username.') { diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index b0eaba5d6..8d3495e3b 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -105,6 +105,14 @@ export default class ViewImageModal extends React.Component { this.loadImage(this.state.imgId); }.bind(this)); + $('#' + this.props.modalId).on('hidden.bs.modal', function onModalHide() { + if (this.refs.video) { + var video = React.findDOMNode(this.refs.video); + video.pause(); + video.currentTime = 0; + } + }.bind(this)); + $(React.findDOMNode(this.refs.modal)).click(function onModalClick(e) { if (e.target === this || e.target === React.findDOMNode(this.refs.imageBody)) { $('.image_modal').modal('hide'); @@ -211,6 +219,16 @@ export default class ViewImageModal extends React.Component { /> </a> ); + } else if (fileType === 'video' || fileType === 'audio') { + content = ( + <video + ref='video' + data-setup='{}' + controls='controls' + > + <source src={Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename} /> + </video> + ); } else { // non-image files include a section providing details about the file var infoString = 'File type ' + fileInfo.ext.toUpperCase(); |