diff options
Diffstat (limited to 'web/react/components')
58 files changed, 2277 insertions, 606 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..68984c9e0 --- /dev/null +++ b/web/react/components/admin_console/admin_controller.jsx @@ -0,0 +1,62 @@ +// 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 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.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 />; + } else if (this.state.selected === 'logs') { + tab = <LogsTab />; + } + + 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..a04bceef5 --- /dev/null +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -0,0 +1,205 @@ +// 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='#' + 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')} + > + {'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..e8fb25858 --- /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' + > + {'Save'} + </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..0b4fc4185 --- /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' + > + {'Save'} + </button> + </div> + </div> + </form> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/logs.jsx b/web/react/components/admin_console/logs.jsx new file mode 100644 index 000000000..d7de76a94 --- /dev/null +++ b/web/react/components/admin_console/logs.jsx @@ -0,0 +1,88 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminStore = require('../../stores/admin_store.jsx'); +var LoadingScreen = require('../loading_screen.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class Logs extends React.Component { + constructor(props) { + super(props); + + this.onLogListenerChange = this.onLogListenerChange.bind(this); + this.reload = this.reload.bind(this); + + this.state = { + logs: AdminStore.getLogs() + }; + } + + componentDidMount() { + AdminStore.addLogChangeListener(this.onLogListenerChange); + AsyncClient.getLogs(); + } + componentWillUnmount() { + AdminStore.removeLogChangeListener(this.onLogListenerChange); + } + onLogListenerChange() { + this.setState({ + logs: AdminStore.getLogs() + }); + } + + reload() { + AdminStore.saveLogs(null); + this.setState({ + logs: null + }); + + AsyncClient.getLogs(); + } + + render() { + var content = null; + + if (this.state.logs === null) { + content = <LoadingScreen />; + } else { + content = []; + + for (var i = 0; i < this.state.logs.length; i++) { + var style = { + whiteSpace: 'nowrap', + fontFamily: 'monospace' + }; + + if (this.state.logs[i].indexOf('[EROR]') > 0) { + style.color = 'red'; + } + + content.push(<br key={'br_' + i} />); + content.push( + <span + key={'log_' + i} + style={style} + > + {this.state.logs[i]} + </span> + ); + } + } + + return ( + <div className='panel'> + <h3>{'Server Logs'}</h3> + <button + type='submit' + className='btn btn-primary' + onClick={this.reload} + > + {'Reload'} + </button> + <div className='log__panel'> + {content} + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/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/authorize.jsx b/web/react/components/authorize.jsx new file mode 100644 index 000000000..dd4479ad4 --- /dev/null +++ b/web/react/components/authorize.jsx @@ -0,0 +1,72 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../utils/client.jsx'); + +export default class Authorize extends React.Component { + constructor(props) { + super(props); + + this.handleAllow = this.handleAllow.bind(this); + this.handleDeny = this.handleDeny.bind(this); + + this.state = {}; + } + handleAllow() { + const responseType = this.props.responseType; + const clientId = this.props.clientId; + const redirectUri = this.props.redirectUri; + const state = this.props.state; + const scope = this.props.scope; + + Client.allowOAuth2(responseType, clientId, redirectUri, state, scope, + (data) => { + if (data.redirect) { + window.location.replace(data.redirect); + } + }, + () => {} + ); + } + handleDeny() { + window.location.replace(this.props.redirectUri + '?error=access_denied'); + } + render() { + return ( + <div className='authorize-box'> + <div className='authorize-inner'> + <h3>{'An application would like to connect to your '}{this.props.teamName}{' account'}</h3> + <label>{'The app '}{this.props.appName}{' would like the ability to access and modify your basic information.'}</label> + <br/> + <br/> + <label>{'Allow '}{this.props.appName}{' access?'}</label> + <br/> + <button + type='submit' + className='btn authorize-btn' + onClick={this.handleDeny} + > + {'Deny'} + </button> + <button + type='submit' + className='btn btn-primary authorize-btn' + onClick={this.handleAllow} + > + {'Allow'} + </button> + </div> + </div> + ); + } +} + +Authorize.propTypes = { + appName: React.PropTypes.string, + teamName: React.PropTypes.string, + responseType: React.PropTypes.string, + clientId: React.PropTypes.string, + redirectUri: React.PropTypes.string, + state: React.PropTypes.string, + scope: React.PropTypes.string +}; diff --git a/web/react/components/change_url_modal.jsx b/web/react/components/change_url_modal.jsx new file mode 100644 index 000000000..3553e1107 --- /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: 'Save', + 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/email_verify.jsx b/web/react/components/email_verify.jsx index 95948c8dd..92123956f 100644 --- a/web/react/components/email_verify.jsx +++ b/web/react/components/email_verify.jsx @@ -1,8 +1,6 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -import {config} from '../utils/config.js'; - export default class EmailVerify extends React.Component { constructor(props) { super(props); @@ -19,10 +17,10 @@ export default class EmailVerify extends React.Component { var body = ''; var resend = ''; if (this.props.isVerified === 'true') { - title = config.SiteName + ' Email Verified'; + title = global.window.config.SiteName + ' Email Verified'; body = <p>Your email has been verified! Click <a href={this.props.teamURL + '?email=' + this.props.userEmail}>here</a> to log in.</p>; } else { - title = config.SiteName + ' Email Not Verified'; + title = global.window.config.SiteName + ' Email Not Verified'; body = <p>Please verify your email address. Check your inbox for an email.</p>; resend = ( <button 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/find_team.jsx b/web/react/components/find_team.jsx index 52988886c..eb2683a88 100644 --- a/web/react/components/find_team.jsx +++ b/web/react/components/find_team.jsx @@ -3,7 +3,6 @@ var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); -import {strings} from '../utils/config.js'; export default class FindTeam extends React.Component { constructor(props) { @@ -51,8 +50,8 @@ export default class FindTeam extends React.Component { if (this.state.sent) { return ( <div> - <h4>{'Find Your ' + utils.toTitleCase(strings.Team)}</h4> - <p>{'An email was sent with links to any ' + strings.TeamPlural + ' to which you are a member.'}</p> + <h4>{'Find Your team'}</h4> + <p>{'An email was sent with links to any teams to which you are a member.'}</p> </div> ); } @@ -61,7 +60,7 @@ export default class FindTeam extends React.Component { <div> <h4>Find Your Team</h4> <form onSubmit={this.handleSubmit}> - <p>{'Get an email with links to any ' + strings.TeamPlural + ' to which you are a member.'}</p> + <p>{'Get an email with links to any teams to which you are a member.'}</p> <div className='form-group'> <label className='control-label'>Email</label> <div className={emailErrorClass}> diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index 1f25ea0b7..5d8b13f00 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. var UserStore = require('../stores/user_store.jsx'); -import {strings} from '../utils/config.js'; export default class GetLinkModal extends React.Component { constructor(props) { @@ -76,9 +75,9 @@ export default class GetLinkModal extends React.Component { </div> <div className='modal-body'> <p> - Send {strings.Team + 'mates'} the link below for them to sign-up to this {strings.Team} site. + Send teammates the link below for them to sign-up to this team site. <br /><br /> - Be careful not to share this link publicly, since anyone with the link can join your {strings.Team}. + Be careful not to share this link publicly, since anyone with the link can join your team. </p> <textarea className='form-control no-resize' diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index c1cfa7800..650a72516 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -2,11 +2,9 @@ // See License.txt for license information. var utils = require('../utils/utils.jsx'); -var ConfigStore = require('../stores/config_store.jsx'); var Client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); var ConfirmModal = require('./confirm_modal.jsx'); -import {config} from '../utils/config.js'; export default class InviteMemberModal extends React.Component { constructor(props) { @@ -23,7 +21,7 @@ export default class InviteMemberModal extends React.Component { emailErrors: {}, firstNameErrors: {}, lastNameErrors: {}, - emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false) + emailEnabled: !global.window.config.ByPassEmail }; } @@ -79,23 +77,9 @@ export default class InviteMemberModal extends React.Component { emailErrors[index] = ''; } - if (config.AllowInviteNames) { - invite.firstName = React.findDOMNode(this.refs['first_name' + index]).value.trim(); - if (!invite.firstName && config.RequireInviteNames) { - firstNameErrors[index] = 'This is a required field'; - valid = false; - } else { - firstNameErrors[index] = ''; - } + invite.firstName = React.findDOMNode(this.refs['first_name' + index]).value.trim(); - invite.lastName = React.findDOMNode(this.refs['last_name' + index]).value.trim(); - if (!invite.lastName && config.RequireInviteNames) { - lastNameErrors[index] = 'This is a required field'; - valid = false; - } else { - lastNameErrors[index] = ''; - } - } + invite.lastName = React.findDOMNode(this.refs['last_name' + index]).value.trim(); invites.push(invite); } @@ -143,10 +127,8 @@ export default class InviteMemberModal extends React.Component { for (var i = 0; i < inviteIds.length; i++) { var index = inviteIds[i]; React.findDOMNode(this.refs['email' + index]).value = ''; - if (config.AllowInviteNames) { - React.findDOMNode(this.refs['first_name' + index]).value = ''; - React.findDOMNode(this.refs['last_name' + index]).value = ''; - } + React.findDOMNode(this.refs['first_name' + index]).value = ''; + React.findDOMNode(this.refs['last_name' + index]).value = ''; } this.setState({ @@ -210,44 +192,43 @@ export default class InviteMemberModal extends React.Component { } var nameFields = null; - if (config.AllowInviteNames) { - var firstNameClass = 'form-group'; - if (firstNameError) { - firstNameClass += ' has-error'; - } - var lastNameClass = 'form-group'; - if (lastNameError) { - lastNameClass += ' has-error'; - } - nameFields = (<div className='row--invite'> - <div className='col-sm-6'> - <div className={firstNameClass}> - <input - type='text' - className='form-control' - ref={'first_name' + index} - placeholder='First name' - maxLength='64' - disabled={!this.state.emailEnabled} - /> - {firstNameError} - </div> + + var firstNameClass = 'form-group'; + if (firstNameError) { + firstNameClass += ' has-error'; + } + var lastNameClass = 'form-group'; + if (lastNameError) { + lastNameClass += ' has-error'; + } + nameFields = (<div className='row--invite'> + <div className='col-sm-6'> + <div className={firstNameClass}> + <input + type='text' + className='form-control' + ref={'first_name' + index} + placeholder='First name' + maxLength='64' + disabled={!this.state.emailEnabled} + /> + {firstNameError} </div> - <div className='col-sm-6'> - <div className={lastNameClass}> - <input - type='text' - className='form-control' - ref={'last_name' + index} - placeholder='Last name' - maxLength='64' - disabled={!this.state.emailEnabled} - /> - {lastNameError} - </div> + </div> + <div className='col-sm-6'> + <div className={lastNameClass}> + <input + type='text' + className='form-control' + ref={'last_name' + index} + placeholder='Last name' + maxLength='64' + disabled={!this.state.emailEnabled} + /> + {lastNameError} </div> - </div>); - } + </div> + </div>); inviteSections[index] = ( <div key={'key' + index}> diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index b20c62833..ffc07a4dd 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -6,7 +6,6 @@ const Client = require('../utils/client.jsx'); const UserStore = require('../stores/user_store.jsx'); const BrowserStore = require('../stores/browser_store.jsx'); const Constants = require('../utils/constants.jsx'); -import {config, strings} from '../utils/config.js'; export default class Login extends React.Component { constructor(props) { @@ -177,7 +176,7 @@ export default class Login extends React.Component { <div className='signup-team__container'> <h5 className='margin--less'>Sign in to:</h5> <h2 className='signup-team__name'>{teamDisplayName}</h2> - <h2 className='signup-team__subdomain'>on {config.SiteName}</h2> + <h2 className='signup-team__subdomain'>on {global.window.config.SiteName}</h2> <form onSubmit={this.handleSubmit}> <div className={'form-group' + errorClass}> {serverError} @@ -185,11 +184,11 @@ export default class Login extends React.Component { {loginMessage} {emailSignup} <div className='form-group margin--extra form-group--small'> - <span><a href='/find_team'>{'Find other ' + strings.TeamPlural}</a></span> + <span><a href='/find_team'>{'Find other teams'}</a></span> </div> {forgotPassword} <div className='margin--extra'> - <span>{'Want to create your own ' + strings.Team + '? '} + <span>{'Want to create your own team? '} <a href='/' className='signup-team-login' 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/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index 99cdfa1ad..b7566cfb9 100644 --- a/web/react/components/navbar_dropdown.jsx +++ b/web/react/components/navbar_dropdown.jsx @@ -7,7 +7,6 @@ var UserStore = require('../stores/user_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); var Constants = require('../utils/constants.jsx'); -import {config} from '../utils/config.js'; function getStateFromStores() { return {teams: UserStore.getTeams(), currentTeam: TeamStore.getCurrent()}; @@ -188,7 +187,7 @@ export default class NavbarDropdown extends React.Component { <li> <a target='_blank' - href={config.HelpLink} + href='/static/help/help.html' > Help </a> @@ -196,7 +195,7 @@ export default class NavbarDropdown extends React.Component { <li> <a target='_blank' - href={config.ReportProblemLink} + href='/static/help/report_problem.html' > Report a Problem </a> 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..fc7b8c183 --- /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} + > + {'Edit'} + </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'> + {'This is the purpose of your channel and helps 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/password_reset_form.jsx b/web/react/components/password_reset_form.jsx index 1b579efbc..dae582627 100644 --- a/web/react/components/password_reset_form.jsx +++ b/web/react/components/password_reset_form.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. var client = require('../utils/client.jsx'); -import {config} from '../utils/config.js'; export default class PasswordResetForm extends React.Component { constructor(props) { @@ -62,7 +61,7 @@ export default class PasswordResetForm extends React.Component { <div className='signup-team__container'> <h3>Password Reset</h3> <form onSubmit={this.handlePasswordReset}> - <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + config.SiteName + ' account.'}</p> + <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.config.SiteName + ' account.'}</p> <div className={formClass}> <input type='password' diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index fb9522afb..ec873dd00 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -25,7 +25,7 @@ export default class PopoverListMembers extends React.Component { $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); $('body').on('click', function onClick(e) { - if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { + if (e.target.parentNode && $(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { $('#member_popover').popover('hide'); } }); diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index d9b8f20ce..3be615bb9 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 { @@ -16,24 +17,46 @@ export default class PostBody extends React.Component { const linkData = Utils.extractLinks(this.props.post.message); this.state = {links: linkData.links, message: linkData.text}; } + + getAllChildNodes(nodeIn) { + var textNodes = []; + + function getTextNodes(node) { + textNodes.push(node); + + for (var i = 0, len = node.childNodes.length; i < len; ++i) { + getTextNodes(node.childNodes[i]); + } + } + + getTextNodes(nodeIn); + return textNodes; + } + parseEmojis() { twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + this.getAllChildNodes(React.findDOMNode(this)).forEach((current) => { + global.window.emojify.run(current); + }); } + componentDidMount() { this.parseEmojis(); } + componentDidUpdate() { this.parseEmojis(); } + componentWillReceiveProps(nextProps) { const linkData = Utils.extractLinks(nextProps.post.message); this.setState({links: linkData.links, message: linkData.text}); } + render() { 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 = ''; @@ -75,7 +98,7 @@ export default class PostBody extends React.Component { comment = ( <p className='post-link'> <span> - Commented on {name}{apostrophe} message: + {'Commented on '}{name}{apostrophe}{' message:'} <a className='theme' onClick={this.props.handleCommentClick} @@ -98,7 +121,7 @@ export default class PostBody extends React.Component { href='#' onClick={this.props.retryPost} > - Retry + {'Retry'} </a> ); } else if (post.state === Constants.POST_LOADING) { @@ -133,9 +156,14 @@ export default class PostBody extends React.Component { {comment} <p key={`${post.id}_message`} + id={`${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/post_list.jsx b/web/react/components/post_list.jsx index e6aa3f8df..faa5e5f0b 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -15,8 +15,6 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -import {strings} from '../utils/config.js'; - export default class PostList extends React.Component { constructor(props) { super(props); @@ -347,7 +345,7 @@ export default class PostList extends React.Component { return ( <div className='channel-intro'> - <p className='channel-intro-text'>{'This is the start of your private message history with this ' + strings.Team + 'mate. Private messages and files shared here are not shown to people outside this area.'}</p> + <p className='channel-intro-text'>{'This is the start of your private message history with this teammate. Private messages and files shared here are not shown to people outside this area.'}</p> </div> ); } @@ -369,7 +367,7 @@ export default class PostList extends React.Component { <p className='channel-intro__content'> Welcome to {channel.display_name}! <br/><br/> - This is the first channel {strings.Team}mates see when they + This is the first channel teammates see when they <br/> sign up - use it for posting updates everyone needs to know. <br/><br/> diff --git a/web/react/components/register_app_modal.jsx b/web/react/components/register_app_modal.jsx new file mode 100644 index 000000000..3dd5c094e --- /dev/null +++ b/web/react/components/register_app_modal.jsx @@ -0,0 +1,249 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../utils/client.jsx'); + +export default class RegisterAppModal extends React.Component { + constructor() { + super(); + + this.register = this.register.bind(this); + this.onHide = this.onHide.bind(this); + this.save = this.save.bind(this); + + this.state = {clientId: '', clientSecret: '', saved: false}; + } + componentDidMount() { + $(React.findDOMNode(this)).on('hide.bs.modal', this.onHide); + } + register() { + var state = this.state; + state.serverError = null; + + var app = {}; + + var name = this.refs.name.getDOMNode().value; + if (!name || name.length === 0) { + state.nameError = 'Application name must be filled in.'; + this.setState(state); + return; + } + state.nameError = null; + app.name = name; + + var homepage = this.refs.homepage.getDOMNode().value; + if (!homepage || homepage.length === 0) { + state.homepageError = 'Homepage must be filled in.'; + this.setState(state); + return; + } + state.homepageError = null; + app.homepage = homepage; + + var desc = this.refs.desc.getDOMNode().value; + app.description = desc; + + var rawCallbacks = this.refs.callback.getDOMNode().value.trim(); + if (!rawCallbacks || rawCallbacks.length === 0) { + state.callbackError = 'At least one callback URL must be filled in.'; + this.setState(state); + return; + } + state.callbackError = null; + app.callback_urls = rawCallbacks.split('\n'); + + Client.registerOAuthApp(app, + (data) => { + state.clientId = data.id; + state.clientSecret = data.client_secret; + this.setState(state); + }, + (err) => { + state.serverError = err.message; + this.setState(state); + } + ); + } + onHide(e) { + if (!this.state.saved && this.state.clientId !== '') { + e.preventDefault(); + return; + } + + this.setState({clientId: '', clientSecret: '', saved: false}); + } + save() { + this.setState({saved: this.refs.save.getDOMNode().checked}); + } + render() { + var nameError; + if (this.state.nameError) { + nameError = <div className='form-group has-error'><label className='control-label'>{this.state.nameError}</label></div>; + } + var homepageError; + if (this.state.homepageError) { + homepageError = <div className='form-group has-error'><label className='control-label'>{this.state.homepageError}</label></div>; + } + var callbackError; + if (this.state.callbackError) { + callbackError = <div className='form-group has-error'><label className='control-label'>{this.state.callbackError}</label></div>; + } + var serverError; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var body = ''; + if (this.state.clientId === '') { + body = ( + <div className='form-group user-settings'> + <h3>{'Register a New Application'}</h3> + <br/> + <label className='col-sm-4 control-label'>{'Application Name'}</label> + <div className='col-sm-7'> + <input + ref='name' + className='form-control' + type='text' + placeholder='Required' + /> + {nameError} + </div> + <br/> + <br/> + <label className='col-sm-4 control-label'>{'Homepage URL'}</label> + <div className='col-sm-7'> + <input + ref='homepage' + className='form-control' + type='text' + placeholder='Required' + /> + {homepageError} + </div> + <br/> + <br/> + <label className='col-sm-4 control-label'>{'Description'}</label> + <div className='col-sm-7'> + <input + ref='desc' + className='form-control' + type='text' + placeholder='Optional' + /> + </div> + <br/> + <br/> + <label className='col-sm-4 control-label'>{'Callback URL'}</label> + <div className='col-sm-7'> + <textarea + ref='callback' + className='form-control' + type='text' + placeholder='Required' + rows='5' + /> + {callbackError} + </div> + <br/> + <br/> + <br/> + <br/> + <br/> + {serverError} + <a + className='btn btn-sm theme pull-right' + href='#' + data-dismiss='modal' + aria-label='Close' + > + {'Cancel'} + </a> + <a + className='btn btn-sm btn-primary pull-right' + onClick={this.register} + > + {'Register'} + </a> + </div> + ); + } else { + var btnClass = ' disabled'; + if (this.state.saved) { + btnClass = ''; + } + + body = ( + <div className='form-group user-settings'> + <h3>{'Your Application Credentials'}</h3> + <br/> + <br/> + <label className='col-sm-12 control-label'>{'Client ID: '}{this.state.clientId}</label> + <label className='col-sm-12 control-label'>{'Client Secret: '}{this.state.clientSecret}</label> + <br/> + <br/> + <br/> + <br/> + <strong>{'Save these somewhere SAFE and SECURE. We can retrieve your Client Id if you lose it, but your Client Secret will be lost forever if you were to lose it.'}</strong> + <br/> + <br/> + <div className='checkbox'> + <label> + <input + ref='save' + type='checkbox' + checked={this.state.saved} + onClick={this.save} + > + {'I have saved both my Client Id and Client Secret somewhere safe'} + </input> + </label> + </div> + <a + className={'btn btn-sm btn-primary pull-right' + btnClass} + href='#' + data-dismiss='modal' + aria-label='Close' + > + {'Close'} + </a> + </div> + ); + } + + return ( + <div + className='modal fade' + ref='modal' + id='register_app' + 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' + aria-label='Close' + > + <span aria-hidden='true'>{'x'}</span> + </button> + <h4 + className='modal-title' + ref='title' + > + {'Developer Applications'} + </h4> + </div> + <div className='modal-body'> + {body} + </div> + </div> + </div> + </div> + ); + } +} + 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_bar.jsx b/web/react/components/search_bar.jsx index 006d15459..77166fef9 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -75,6 +75,9 @@ export default class SearchBar extends React.Component { PostStore.emitSearchTermChange(false); this.setState({searchTerm: term}); } + handleMouseInput(e) { + e.preventDefault(); + } handleUserFocus(e) { e.target.select(); $('.search-bar__container').addClass('focused'); @@ -140,6 +143,7 @@ export default class SearchBar extends React.Component { value={this.state.searchTerm} onFocus={this.handleUserFocus} onChange={this.handleUserInput} + onMouseUp={this.handleMouseInput} /> {isSearching} </form> 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/setting_item_max.jsx b/web/react/components/setting_item_max.jsx index b1bab1d48..1bffa7c79 100644 --- a/web/react/components/setting_item_max.jsx +++ b/web/react/components/setting_item_max.jsx @@ -26,7 +26,7 @@ export default class SettingItemMax extends React.Component { href='#' onClick={this.props.submit} > - Submit + Save </a> ); } diff --git a/web/react/components/setting_picture.jsx b/web/react/components/setting_picture.jsx index a53112651..ddad4fd53 100644 --- a/web/react/components/setting_picture.jsx +++ b/web/react/components/setting_picture.jsx @@ -1,8 +1,6 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -import {config} from '../utils/config.js'; - export default class SettingPicture extends React.Component { constructor(props) { super(props); @@ -81,7 +79,7 @@ export default class SettingPicture extends React.Component { >Save</a> ); } - var helpText = 'Upload a profile picture in either JPG or PNG format, at least ' + config.ProfileWidth + 'px in width and ' + config.ProfileHeight + 'px height.'; + var helpText = 'Upload a profile picture in either JPG or PNG format, at least ' + global.window.config.ProfileWidth + 'px in width and ' + global.window.config.ProfileHeight + 'px height.'; var self = this; return ( diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index ad934d271..87007edcc 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -12,6 +12,8 @@ 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'); +var UnreadChannelIndicator = require('./unread_channel_indicator.jsx'); export default class Sidebar extends React.Component { constructor(props) { @@ -28,6 +30,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() { @@ -151,6 +154,16 @@ export default class Sidebar extends React.Component { $(window).on('resize', this.onResize); } + shouldComponentUpdate(nextProps, nextState) { + if (!Utils.areStatesEqual(nextProps, this.props)) { + return true; + } + + if (!Utils.areStatesEqual(nextState, this.state)) { + return true; + } + return false; + } componentDidUpdate() { this.updateTitle(); this.updateUnreadIndicators(); @@ -272,15 +285,16 @@ export default class Sidebar extends React.Component { this.updateUnreadIndicators(); } updateUnreadIndicators() { - var container = $(React.findDOMNode(this.refs.container)); + const container = $(React.findDOMNode(this.refs.container)); + + var showTopUnread = false; + var showBottomUnread = false; if (this.firstUnreadChannel) { var firstUnreadElement = $(React.findDOMNode(this.refs[this.firstUnreadChannel])); if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) { - $(React.findDOMNode(this.refs.topUnreadIndicator)).css('display', 'initial'); - } else { - $(React.findDOMNode(this.refs.topUnreadIndicator)).css('display', 'none'); + showTopUnread = true; } } @@ -288,11 +302,14 @@ export default class Sidebar extends React.Component { var lastUnreadElement = $(React.findDOMNode(this.refs[this.lastUnreadChannel])); if (lastUnreadElement.position().top > container.height()) { - $(React.findDOMNode(this.refs.bottomUnreadIndicator)).css('display', 'initial'); - } else { - $(React.findDOMNode(this.refs.bottomUnreadIndicator)).css('display', 'none'); + showBottomUnread = true; } } + + this.setState({ + showTopUnread, + showBottomUnread + }); } createChannelElement(channel, index) { var members = this.state.members; @@ -346,6 +363,11 @@ export default class Sidebar extends React.Component { ); } + var badgeClass; + if (msgCount > 0) { + badgeClass = 'has-badge'; + } + // set up status icon for direct message channels var status = null; if (channel.type === 'D') { @@ -406,7 +428,7 @@ export default class Sidebar extends React.Component { className={linkClass} > <a - className={'sidebar-channel ' + titleClass} + className={'sidebar-channel ' + titleClass + ' ' + badgeClass} href={href} onClick={handleClick} > @@ -425,19 +447,13 @@ export default class Sidebar extends React.Component { this.lastUnreadChannel = null; // create elements for all 3 types of channels - var channelItems = this.state.channels.filter( - function filterPublicChannels(channel) { - return channel.type === 'O'; - } - ).map(this.createChannelElement); + const publicChannels = this.state.channels.filter((channel) => channel.type === 'O'); + const publicChannelItems = publicChannels.map(this.createChannelElement); - var privateChannelItems = this.state.channels.filter( - function filterPrivateChannels(channel) { - return channel.type === 'P'; - } - ).map(this.createChannelElement); + const privateChannels = this.state.channels.filter((channel) => channel.type === 'P'); + const privateChannelItems = privateChannels.map(this.createChannelElement); - var directMessageItems = this.state.showDirectChannels.map(this.createChannelElement); + const directMessageItems = this.state.showDirectChannels.map(this.createChannelElement); // update the favicon to show if there are any notifications var link = document.createElement('link'); @@ -473,28 +489,34 @@ 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} /> <SearchBox /> - <div - ref='topUnreadIndicator' - className='nav-pills__unread-indicator nav-pills__unread-indicator-top' - style={{display: 'none'}} - > - Unread post(s) above - </div> - <div - ref='bottomUnreadIndicator' - className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom' - style={{display: 'none'}} - > - Unread post(s) below - </div> + <UnreadChannelIndicator + show={this.state.showTopUnread} + extraClass='nav-pills__unread-indicator-top' + text={'Unread post(s) above'} + /> + <UnreadChannelIndicator + show={this.state.showBottomUnread} + extraClass='nav-pills__unread-indicator-bottom' + text={'Unread post(s) below'} + /> <div ref='container' @@ -508,15 +530,13 @@ 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> - {channelItems} + {publicChannelItems} <li> <a href='#' @@ -537,11 +557,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/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 0056d7a2f..959411f1e 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -3,7 +3,6 @@ var NavbarDropdown = require('./navbar_dropdown.jsx'); var UserStore = require('../stores/user_store.jsx'); -import {config} from '../utils/config.js'; export default class SidebarHeader extends React.Component { constructor(props) { @@ -59,7 +58,7 @@ export default class SidebarHeader extends React.Component { } SidebarHeader.defaultProps = { - teamDisplayName: config.SiteName, + teamDisplayName: global.window.config.SiteName, teamType: '' }; SidebarHeader.propTypes = { diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index bd10a6ef1..5ecd502ba 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -4,7 +4,6 @@ var UserStore = require('../stores/user_store.jsx'); var client = require('../utils/client.jsx'); var utils = require('../utils/utils.jsx'); -import {config} from '../utils/config.js'; export default class SidebarRightMenu extends React.Component { constructor(props) { @@ -75,8 +74,8 @@ export default class SidebarRightMenu extends React.Component { } var siteName = ''; - if (config.SiteName != null) { - siteName = config.SiteName; + if (global.window.config.SiteName != null) { + siteName = global.window.config.SiteName; } var teamDisplayName = siteName; if (this.props.teamDisplayName) { diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index dc0d1d376..9c03c5c2f 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -4,7 +4,6 @@ var WelcomePage = require('./team_signup_welcome_page.jsx'); var TeamDisplayNamePage = require('./team_signup_display_name_page.jsx'); var TeamURLPage = require('./team_signup_url_page.jsx'); -var AllowedDomainsPage = require('./team_signup_allowed_domains_page.jsx'); var SendInivtesPage = require('./team_signup_send_invites_page.jsx'); var UsernamePage = require('./team_signup_username_page.jsx'); var PasswordPage = require('./team_signup_password_page.jsx'); @@ -70,15 +69,6 @@ export default class SignupTeamComplete extends React.Component { ); } - if (this.state.wizard === 'allowed_domains') { - return ( - <AllowedDomainsPage - state={this.state} - updateParent={this.updateParent} - /> - ); - } - if (this.state.wizard === 'send_invites') { return ( <SendInivtesPage diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index f078f6169..19c3b2d22 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -6,7 +6,6 @@ var client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); var Constants = require('../utils/constants.jsx'); -import {config} from '../utils/config.js'; export default class SignupUserComplete extends React.Component { constructor(props) { @@ -32,7 +31,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; @@ -136,7 +135,7 @@ export default class SignupUserComplete extends React.Component { // set up the email entry and hide it if an email was provided var yourEmailIs = ''; if (this.state.user.email) { - yourEmailIs = <span>Your email address is {this.state.user.email}. You'll use this address to sign in to {config.SiteName}.</span>; + yourEmailIs = <span>Your email address is {this.state.user.email}. You'll use this address to sign in to {global.window.config.SiteName}.</span>; } var emailContainerStyle = 'margin--extra'; @@ -237,11 +236,6 @@ export default class SignupUserComplete extends React.Component { ); } - var termsDisclaimer = null; - if (config.ShowTermsDuringSignup) { - termsDisclaimer = <p>By creating an account and using Mattermost you are agreeing to our <a href={config.TermsLink}>Terms of Service</a>. If you do not agree, you cannot use this service.</p>; - } - return ( <div> <form> @@ -251,12 +245,11 @@ export default class SignupUserComplete extends React.Component { /> <h5 className='margin--less'>Welcome to:</h5> <h2 className='signup-team__name'>{this.props.teamDisplayName}</h2> - <h2 className='signup-team__subdomain'>on {config.SiteName}</h2> + <h2 className='signup-team__subdomain'>on {global.window.config.SiteName}</h2> <h4 className='color--light'>Let's create your account</h4> {signupMessage} {emailSignup} {serverError} - {termsDisclaimer} </form> </div> ); diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index 25139bb95..ca438df78 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -6,7 +6,6 @@ const SettingItemMax = require('./setting_item_max.jsx'); const Client = require('../utils/client.jsx'); const Utils = require('../utils/utils.jsx'); -import {strings} from '../utils/config.js'; export default class GeneralTab extends React.Component { constructor(props) { @@ -30,7 +29,7 @@ export default class GeneralTab extends React.Component { state.clientError = 'This field is required'; valid = false; } else if (name === this.props.teamDisplayName) { - state.clientError = 'Please choose a new name for your ' + strings.Team; + state.clientError = 'Please choose a new name for your team'; valid = false; } else { state.clientError = ''; @@ -99,7 +98,7 @@ export default class GeneralTab extends React.Component { if (this.props.activeSection === 'name') { let inputs = []; - let teamNameLabel = Utils.toTitleCase(strings.Team) + ' Name'; + let teamNameLabel = 'Team Name'; if (Utils.isMobile()) { teamNameLabel = ''; } @@ -123,7 +122,7 @@ export default class GeneralTab extends React.Component { nameSection = ( <SettingItemMax - title={`${Utils.toTitleCase(strings.Team)} Name`} + title={`Team Name`} inputs={inputs} submit={this.handleNameSubmit} server_error={serverError} @@ -136,7 +135,7 @@ export default class GeneralTab extends React.Component { nameSection = ( <SettingItemMin - title={`${Utils.toTitleCase(strings.Team)} Name`} + title={`Team Name`} describe={describe} updateSection={this.onUpdateSection} /> 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_allowed_domains_page.jsx b/web/react/components/team_signup_allowed_domains_page.jsx deleted file mode 100644 index 721fa142a..000000000 --- a/web/react/components/team_signup_allowed_domains_page.jsx +++ /dev/null @@ -1,143 +0,0 @@ -// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. -// See License.txt for license information. - -var Client = require('../utils/client.jsx'); -import {strings} from '../utils/config.js'; - -export default class TeamSignupAllowedDomainsPage extends React.Component { - constructor(props) { - super(props); - - this.submitBack = this.submitBack.bind(this); - this.submitNext = this.submitNext.bind(this); - - this.state = {}; - } - submitBack(e) { - e.preventDefault(); - this.props.state.wizard = 'team_url'; - this.props.updateParent(this.props.state); - } - submitNext(e) { - e.preventDefault(); - - if (React.findDOMNode(this.refs.open_network).checked) { - this.props.state.wizard = 'send_invites'; - this.props.state.team.type = 'O'; - this.props.updateParent(this.props.state); - return; - } - - if (React.findDOMNode(this.refs.allow).checked) { - var name = React.findDOMNode(this.refs.name).value.trim(); - var domainRegex = /^\w+\.\w+$/; - if (!name) { - this.setState({nameError: 'This field is required'}); - return; - } - - if (!name.trim().match(domainRegex)) { - this.setState({nameError: 'The domain doesn\'t appear valid'}); - return; - } - - this.props.state.wizard = 'send_invites'; - this.props.state.team.allowed_domains = name; - this.props.state.team.type = 'I'; - this.props.updateParent(this.props.state); - } else { - this.props.state.wizard = 'send_invites'; - this.props.state.team.type = 'I'; - this.props.updateParent(this.props.state); - } - } - render() { - Client.track('signup', 'signup_team_04_allow_domains'); - - var nameError = null; - var nameDivClass = 'form-group'; - if (this.state.nameError) { - nameError = <label className='control-label'>{this.state.nameError}</label>; - nameDivClass += ' has-error'; - } - - return ( - <div> - <form> - <img - className='signup-team-logo' - src='/static/images/logo.png' - /> - <h2>Email Domain</h2> - <p> - <div className='checkbox'> - <label> - <input - type='checkbox' - ref='allow' - defaultChecked={true} - /> - {' Allow sign up and ' + strings.Team + ' discovery with a ' + strings.Company + ' email address.'} - </label> - </div> - </p> - <p>{'Check this box to allow your ' + strings.Team + ' members to sign up using their ' + strings.Company + ' email addresses if you share the same domain--otherwise, you need to invite everyone yourself.'}</p> - <h4>{'Your ' + strings.Team + '\'s domain for emails'}</h4> - <div className={nameDivClass}> - <div className='row'> - <div className='col-sm-9'> - <div className='input-group'> - <span className='input-group-addon'>@</span> - <input - type='text' - ref='name' - className='form-control' - placeholder='' - maxLength='128' - defaultValue={this.props.state.team.allowed_domains} - autoFocus={true} - onFocus={this.handleFocus} - /> - </div> - </div> - </div> - {nameError} - </div> - <p>To allow signups from multiple domains, separate each with a comma.</p> - <p> - <div className='checkbox'> - <label> - <input - type='checkbox' - ref='open_network' - defaultChecked={this.props.state.team.type === 'O'} - /> Allow anyone to signup to this domain without an invitation.</label> - </div> - </p> - <button - type='button' - className='btn btn-default' - onClick={this.submitBack} - > - <i className='glyphicon glyphicon-chevron-left'></i> Back - </button> - <button - type='submit' - className='btn-primary btn' - onClick={this.submitNext} - > - Next<i className='glyphicon glyphicon-chevron-right'></i> - </button> - </form> - </div> - ); - } -} - -TeamSignupAllowedDomainsPage.defaultProps = { - state: {} -}; -TeamSignupAllowedDomainsPage.propTypes = { - state: React.PropTypes.object, - updateParent: React.PropTypes.func -}; diff --git a/web/react/components/team_signup_choose_auth.jsx b/web/react/components/team_signup_choose_auth.jsx index acce6ab49..d3107c5c7 100644 --- a/web/react/components/team_signup_choose_auth.jsx +++ b/web/react/components/team_signup_choose_auth.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. var Constants = require('../utils/constants.jsx'); -import {strings} from '../utils/config.js'; export default class ChooseAuthPage extends React.Component { constructor(props) { @@ -24,7 +23,7 @@ export default class ChooseAuthPage extends React.Component { } > <span className='icon' /> - <span>Create new {strings.Team} with GitLab Account</span> + <span>Create new team with GitLab Account</span> </a> ); } @@ -42,7 +41,7 @@ export default class ChooseAuthPage extends React.Component { } > <span className='fa fa-envelope' /> - <span>Create new {strings.Team} with email address</span> + <span>Create new team with email address</span> </a> ); } @@ -55,7 +54,7 @@ export default class ChooseAuthPage extends React.Component { <div> {buttons} <div className='form-group margin--extra-2x'> - <span><a href='/find_team'>{'Find my ' + strings.Team}</a></span> + <span><a href='/find_team'>{'Find my team'}</a></span> </div> </div> ); diff --git a/web/react/components/team_signup_display_name_page.jsx b/web/react/components/team_signup_display_name_page.jsx index 1849f8222..c0d0ed366 100644 --- a/web/react/components/team_signup_display_name_page.jsx +++ b/web/react/components/team_signup_display_name_page.jsx @@ -3,7 +3,6 @@ var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); -import {strings} from '../utils/config.js'; export default class TeamSignupDisplayNamePage extends React.Component { constructor(props) { @@ -54,7 +53,7 @@ export default class TeamSignupDisplayNamePage extends React.Component { className='signup-team-logo' src='/static/images/logo.png' /> - <h2>{utils.toTitleCase(strings.Team) + ' Name'}</h2> + <h2>{'Team Name'}</h2> <div className={nameDivClass}> <div className='row'> <div className='col-sm-9'> @@ -73,7 +72,7 @@ export default class TeamSignupDisplayNamePage extends React.Component { {nameError} </div> <div> - {'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'} + {'Name your team in any language. Your team name shows in menus and headings.'} </div> <button type='submit' diff --git a/web/react/components/team_signup_password_page.jsx b/web/react/components/team_signup_password_page.jsx index aa402846b..b26d9f6ce 100644 --- a/web/react/components/team_signup_password_page.jsx +++ b/web/react/components/team_signup_password_page.jsx @@ -4,7 +4,6 @@ var Client = require('../utils/client.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); var UserStore = require('../stores/user_store.jsx'); -import {strings, config} from '../utils/config.js'; export default class TeamSignupPasswordPage extends React.Component { constructor(props) { @@ -123,13 +122,13 @@ export default class TeamSignupPasswordPage extends React.Component { type='submit' className='btn btn-primary margin--extra' id='finish-button' - data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Creating ' + strings.Team + '...'} + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Creating team...'} onClick={this.submitNext} > Finish </button> </div> - <p>By proceeding to create your account and use {config.SiteName}, you agree to our <a href={config.TermsLink}>Terms of Service</a> and <a href={config.PrivacyLink}>Privacy Policy</a>. If you do not agree, you cannot use {config.SiteName}.</p> + <p>By proceeding to create your account and use {global.window.config.SiteName}, you agree to our <a href='/static/help/terms.html'>Terms of Service</a> and <a href='/static/help/privacy.html'>Privacy Policy</a>. If you do not agree, you cannot use {global.window.config.SiteName}.</p> <div className='margin--extra'> <a href='#' diff --git a/web/react/components/team_signup_send_invites_page.jsx b/web/react/components/team_signup_send_invites_page.jsx index 11a9980d7..41ac98303 100644 --- a/web/react/components/team_signup_send_invites_page.jsx +++ b/web/react/components/team_signup_send_invites_page.jsx @@ -2,10 +2,7 @@ // See License.txt for license information. var EmailItem = require('./team_signup_email_item.jsx'); -var Utils = require('../utils/utils.jsx'); -var ConfigStore = require('../stores/config_store.jsx'); var Client = require('../utils/client.jsx'); -import {strings, config} from '../utils/config.js'; export default class TeamSignupSendInvitesPage extends React.Component { constructor(props) { @@ -16,7 +13,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { this.submitSkip = this.submitSkip.bind(this); this.keySubmit = this.keySubmit.bind(this); this.state = { - emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false) + emailEnabled: !global.window.config.ByPassEmail }; if (!this.state.emailEnabled) { @@ -26,12 +23,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { } submitBack(e) { e.preventDefault(); - - if (config.AllowSignupDomainsWizard) { - this.props.state.wizard = 'allowed_domains'; - } else { - this.props.state.wizard = 'team_url'; - } + this.props.state.wizard = 'team_url'; this.props.updateParent(this.props.state); } @@ -138,7 +130,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { bottomContent = ( <p className='color--light'> - {'if you prefer, you can invite ' + strings.Team + ' members later'} + {'if you prefer, you can invite team members later'} <br /> {' and '} <a @@ -153,7 +145,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { } else { content = ( <div className='form-group color--light'> - {'Email is currently disabled for your ' + strings.Team + ', and emails cannot be sent. Contact your system administrator to enable email and email invitations.'} + {'Email is currently disabled for your team, and emails cannot be sent. Contact your system administrator to enable email and email invitations.'} </div> ); } @@ -165,7 +157,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { className='signup-team-logo' src='/static/images/logo.png' /> - <h2>{'Invite ' + Utils.toTitleCase(strings.Team) + ' Members'}</h2> + <h2>{'Invite Team Members'}</h2> {content} <div className='form-group'> <button diff --git a/web/react/components/team_signup_url_page.jsx b/web/react/components/team_signup_url_page.jsx index ffe9d9fe8..1b722d611 100644 --- a/web/react/components/team_signup_url_page.jsx +++ b/web/react/components/team_signup_url_page.jsx @@ -4,7 +4,6 @@ const Utils = require('../utils/utils.jsx'); const Client = require('../utils/client.jsx'); const Constants = require('../utils/constants.jsx'); -import {strings, config} from '../utils/config.js'; export default class TeamSignupUrlPage extends React.Component { constructor(props) { @@ -51,12 +50,8 @@ export default class TeamSignupUrlPage extends React.Component { Client.findTeamByName(name, function success(data) { if (!data) { - if (config.AllowSignupDomainsWizard) { - this.props.state.wizard = 'allowed_domains'; - } else { - this.props.state.wizard = 'send_invites'; - this.props.state.team.type = 'O'; - } + this.props.state.wizard = 'send_invites'; + this.props.state.team.type = 'O'; this.props.state.team.name = name; this.props.updateParent(this.props.state); @@ -97,7 +92,7 @@ export default class TeamSignupUrlPage extends React.Component { className='signup-team-logo' src='/static/images/logo.png' /> - <h2>{`${Utils.toTitleCase(strings.Team)} URL`}</h2> + <h2>{`Team URL`}</h2> <div className={nameDivClass}> <div className='row'> <div className='col-sm-11'> @@ -124,7 +119,7 @@ export default class TeamSignupUrlPage extends React.Component { </div> {nameError} </div> - <p>{`Choose the web address of your new ${strings.Team}:`}</p> + <p>{`Choose the web address of your new team:`}</p> <ul className='color--light'> <li>Short and memorable is best</li> <li>Use lowercase letters, numbers and dashes</li> diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx index b5c8b14df..0053b011d 100644 --- a/web/react/components/team_signup_username_page.jsx +++ b/web/react/components/team_signup_username_page.jsx @@ -3,7 +3,6 @@ var Utils = require('../utils/utils.jsx'); var Client = require('../utils/client.jsx'); -import {strings} from '../utils/config.js'; export default class TeamSignupUsernamePage extends React.Component { constructor(props) { @@ -22,7 +21,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.') { @@ -55,7 +54,7 @@ export default class TeamSignupUsernamePage extends React.Component { src='/static/images/logo.png' /> <h2 className='margin--less'>Your username</h2> - <h5 className='color--light'>{'Select a memorable username that makes it easy for ' + strings.Team + 'mates to identify you:'}</h5> + <h5 className='color--light'>{'Select a memorable username that makes it easy for teammates to identify you:'}</h5> <div className='inner__content margin--extra'> <div className={nameDivClass}> <div className='row'> diff --git a/web/react/components/team_signup_welcome_page.jsx b/web/react/components/team_signup_welcome_page.jsx index 43b7aea0e..626c6a17b 100644 --- a/web/react/components/team_signup_welcome_page.jsx +++ b/web/react/components/team_signup_welcome_page.jsx @@ -4,7 +4,6 @@ var Utils = require('../utils/utils.jsx'); var Client = require('../utils/client.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); -import {config} from '../utils/config.js'; export default class TeamSignupWelcomePage extends React.Component { constructor(props) { @@ -112,7 +111,7 @@ export default class TeamSignupWelcomePage extends React.Component { src='/static/images/logo.png' /> <h3 className='sub-heading'>Welcome to:</h3> - <h1 className='margin--top-none'>{config.SiteName}</h1> + <h1 className='margin--top-none'>{global.window.config.SiteName}</h1> </p> <p className='margin--less'>Let's set up your new team</p> <p> diff --git a/web/react/components/team_signup_with_email.jsx b/web/react/components/team_signup_with_email.jsx index d75736bd3..4fb1c0d01 100644 --- a/web/react/components/team_signup_with_email.jsx +++ b/web/react/components/team_signup_with_email.jsx @@ -3,7 +3,6 @@ const Utils = require('../utils/utils.jsx'); const Client = require('../utils/client.jsx'); -import {strings} from '../utils/config.js'; export default class EmailSignUpPage extends React.Component { constructor() { @@ -70,7 +69,7 @@ export default class EmailSignUpPage extends React.Component { </button> </div> <div className='form-group margin--extra-2x'> - <span><a href='/find_team'>{`Find my ${strings.Team}`}</a></span> + <span><a href='/find_team'>{`Find my team`}</a></span> </div> </form> ); diff --git a/web/react/components/team_signup_with_sso.jsx b/web/react/components/team_signup_with_sso.jsx index 521c21733..2849b4cbb 100644 --- a/web/react/components/team_signup_with_sso.jsx +++ b/web/react/components/team_signup_with_sso.jsx @@ -4,7 +4,6 @@ var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); var Constants = require('../utils/constants.jsx'); -import {strings} from '../utils/config.js'; export default class SSOSignUpPage extends React.Component { constructor(props) { @@ -84,7 +83,7 @@ export default class SSOSignUpPage extends React.Component { disabled={disabled} > <span className='icon'/> - <span>Create {strings.Team} with GitLab Account</span> + <span>Create team with GitLab Account</span> </a> ); } @@ -111,7 +110,7 @@ export default class SSOSignUpPage extends React.Component { {serverError} </div> <div className='form-group margin--extra-2x'> - <span><a href='/find_team'>{'Find my ' + strings.Team}</a></span> + <span><a href='/find_team'>{'Find my team'}</a></span> </div> </form> ); diff --git a/web/react/components/unread_channel_indicator.jsx b/web/react/components/unread_channel_indicator.jsx new file mode 100644 index 000000000..12a67633e --- /dev/null +++ b/web/react/components/unread_channel_indicator.jsx @@ -0,0 +1,35 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +// Indicator for the left sidebar which indicate if there's unread posts in a channel that is not shown +// because it is either above or below the screen +export default class UnreadChannelIndicator extends React.Component { + constructor(props) { + super(props); + } + render() { + let displayValue = 'none'; + if (this.props.show) { + displayValue = 'initial'; + } + return ( + <div + className={'nav-pills__unread-indicator ' + this.props.extraClass} + style={{display: displayValue}} + > + {this.props.text} + </div> + ); + } +} + +UnreadChannelIndicator.defaultProps = { + show: false, + extraClass: '', + text: '' +}; +UnreadChannelIndicator.propTypes = { + show: React.PropTypes.bool, + extraClass: React.PropTypes.string, + text: React.PropTypes.string +}; diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index 739084053..7cfac69e7 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -3,7 +3,6 @@ var Utils = require('../utils/utils.jsx'); var UserStore = require('../stores/user_store.jsx'); -import {config} from '../utils/config.js'; var id = 0; @@ -58,7 +57,7 @@ export default class UserProfile extends React.Component { } var dataContent = '<img class="user-popover__image" src="/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '" height="128" width="128" />'; - if (!config.ShowEmail) { + if (!global.window.config.ShowEmailAddress) { dataContent += '<div class="text-nowrap">Email not shared</div>'; } else { dataContent += '<div data-toggle="tooltip" title="' + this.state.profile.email + '"><a href="mailto:' + this.state.profile.email + '" class="text-nowrap text-lowercase user-popover__email">' + this.state.profile.email + '</a></div>'; diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 2a607b3e0..48b499068 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -7,6 +7,7 @@ var NotificationsTab = require('./user_settings_notifications.jsx'); var SecurityTab = require('./user_settings_security.jsx'); var GeneralTab = require('./user_settings_general.jsx'); var AppearanceTab = require('./user_settings_appearance.jsx'); +var DeveloperTab = require('./user_settings_developer.jsx'); export default class UserSettings extends React.Component { constructor(props) { @@ -76,6 +77,15 @@ export default class UserSettings extends React.Component { /> </div> ); + } else if (this.props.activeTab === 'developer') { + return ( + <div> + <DeveloperTab + activeSection={this.props.activeSection} + updateSection={this.props.updateSection} + /> + </div> + ); } return <div/>; diff --git a/web/react/components/user_settings_appearance.jsx b/web/react/components/user_settings_appearance.jsx index 3afdd7349..3df013d03 100644 --- a/web/react/components/user_settings_appearance.jsx +++ b/web/react/components/user_settings_appearance.jsx @@ -6,7 +6,8 @@ var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); var Client = require('../utils/client.jsx'); var Utils = require('../utils/utils.jsx'); -import {config} from '../utils/config.js'; + +var ThemeColors = ['#2389d7', '#008a17', '#dc4fad', '#ac193d', '#0072c6', '#d24726', '#ff8f32', '#82ba00', '#03b3b2', '#008299', '#4617b4', '#8c0095', '#004b8b', '#004b8b', '#570000', '#380000', '#585858', '#000000']; export default class UserSettingsAppearance extends React.Component { constructor(props) { @@ -21,8 +22,8 @@ export default class UserSettingsAppearance extends React.Component { getStateFromStores() { var user = UserStore.getCurrentUser(); var theme = '#2389d7'; - if (config.ThemeColors != null) { - theme = config.ThemeColors[0]; + if (ThemeColors != null) { + theme = ThemeColors[0]; } if (user.props && user.props.theme) { theme = user.props.theme; @@ -83,18 +84,18 @@ export default class UserSettingsAppearance extends React.Component { var themeSection; var self = this; - if (config.ThemeColors != null) { + if (ThemeColors != null) { if (this.props.activeSection === 'theme') { var themeButtons = []; - for (var i = 0; i < config.ThemeColors.length; i++) { + for (var i = 0; i < ThemeColors.length; i++) { themeButtons.push( <button - key={config.ThemeColors[i] + 'key' + i} - ref={config.ThemeColors[i]} + key={ThemeColors[i] + 'key' + i} + ref={ThemeColors[i]} type='button' className='btn btn-lg color-btn' - style={{backgroundColor: config.ThemeColors[i]}} + style={{backgroundColor: ThemeColors[i]}} onClick={this.updateTheme} /> ); diff --git a/web/react/components/user_settings_developer.jsx b/web/react/components/user_settings_developer.jsx new file mode 100644 index 000000000..1b04149dc --- /dev/null +++ b/web/react/components/user_settings_developer.jsx @@ -0,0 +1,93 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SettingItemMin = require('./setting_item_min.jsx'); +var SettingItemMax = require('./setting_item_max.jsx'); + +export default class DeveloperTab extends React.Component { + constructor(props) { + super(props); + + this.state = {}; + } + register() { + $('#user_settings1').modal('hide'); + $('#register_app').modal('show'); + } + render() { + var appSection; + var self = this; + if (this.props.activeSection === 'app') { + var inputs = []; + + inputs.push( + <div className='form-group'> + <div className='col-sm-7'> + <a + className='btn btn-sm btn-primary' + onClick={this.register} + > + {'Register New Application'} + </a> + </div> + </div> + ); + + appSection = ( + <SettingItemMax + title='Applications (Preview)' + inputs={inputs} + updateSection={function updateSection(e) { + self.props.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + appSection = ( + <SettingItemMin + title='Applications (Preview)' + describe='Open to register a new third-party application' + updateSection={function updateSection() { + self.props.updateSection('app'); + }} + /> + ); + } + + return ( + <div> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>{'x'}</span> + </button> + <h4 + className='modal-title' + ref='title' + > + <i className='modal-back'></i>{'Developer Settings'} + </h4> + </div> + <div className='user-settings'> + <h3 className='tab-header'>{'Developer Settings'}</h3> + <div className='divider-dark first'/> + {appSection} + <div className='divider-dark'/> + </div> + </div> + ); + } +} + +DeveloperTab.defaultProps = { + activeSection: '' +}; +DeveloperTab.propTypes = { + activeSection: React.PropTypes.string, + updateSection: React.PropTypes.func +}; diff --git a/web/react/components/user_settings_general.jsx b/web/react/components/user_settings_general.jsx index 184534a9a..66cde6ca2 100644 --- a/web/react/components/user_settings_general.jsx +++ b/web/react/components/user_settings_general.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. var UserStore = require('../stores/user_store.jsx'); -var ConfigStore = require('../stores/config_store.jsx'); var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); var SettingPicture = require('./setting_picture.jsx'); @@ -40,7 +39,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.') { @@ -209,7 +208,7 @@ export default class UserSettingsGeneralTab extends React.Component { } setupInitialState(props) { var user = props.user; - var emailEnabled = !ConfigStore.getSettingAsBoolean('ByPassEmail', false); + var emailEnabled = !global.window.config.ByPassEmail; return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname, email: user.email, picture: null, loadingPicture: false, emailEnabled: emailEnabled}; } diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx index 7ec75e000..67a4d0041 100644 --- a/web/react/components/user_settings_modal.jsx +++ b/web/react/components/user_settings_modal.jsx @@ -17,8 +17,8 @@ export default class UserSettingsModal extends React.Component { $('body').on('click', '.modal-back', function changeDisplay() { $(this).closest('.modal-dialog').removeClass('display--content'); }); - $('body').on('click', '.modal-header .close', function closeModal() { - setTimeout(function finishClose() { + $('body').on('click', '.modal-header .close', () => { + setTimeout(() => { $('.modal-dialog.display--content').removeClass('display--content'); }, 500); }); @@ -35,6 +35,9 @@ export default class UserSettingsModal extends React.Component { tabs.push({name: 'security', uiName: 'Security', icon: 'glyphicon glyphicon-lock'}); tabs.push({name: 'notifications', uiName: 'Notifications', icon: 'glyphicon glyphicon-exclamation-sign'}); tabs.push({name: 'appearance', uiName: 'Appearance', icon: 'glyphicon glyphicon-wrench'}); + if (global.window.config.EnableOAuthServiceProvider === 'true') { + tabs.push({name: 'developer', uiName: 'Developer', icon: 'glyphicon glyphicon-th'}); + } return ( <div @@ -54,13 +57,13 @@ export default class UserSettingsModal extends React.Component { data-dismiss='modal' aria-label='Close' > - <span aria-hidden='true'>×</span> + <span aria-hidden='true'>{'x'}</span> </button> <h4 className='modal-title' ref='title' > - Account Settings + {'Account Settings'} </h4> </div> <div className='modal-body'> diff --git a/web/react/components/user_settings_notifications.jsx b/web/react/components/user_settings_notifications.jsx index 33db1a332..dadbb669b 100644 --- a/web/react/components/user_settings_notifications.jsx +++ b/web/react/components/user_settings_notifications.jsx @@ -8,7 +8,6 @@ var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var utils = require('../utils/utils.jsx'); var assign = require('object-assign'); -import {config} from '../utils/config.js'; function getNotificationsStateFromStores() { var user = UserStore.getCurrentUser(); @@ -415,7 +414,7 @@ export default class NotificationsTab extends React.Component { </label> <br/> </div> - <div><br/>{'Email notifications are sent for mentions and private messages after you have been away from ' + config.SiteName + ' for 5 minutes.'}</div> + <div><br/>{'Email notifications are sent for mentions and private messages after you have been away from ' + global.window.config.SiteName + ' for 5 minutes.'}</div> </div> ); diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index b0eaba5d6..f7c980396 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -3,7 +3,6 @@ var Client = require('../utils/client.jsx'); var Utils = require('../utils/utils.jsx'); -import {config} from '../utils/config.js'; export default class ViewImageModal extends React.Component { constructor(props) { @@ -105,6 +104,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 +218,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(); @@ -283,7 +300,7 @@ export default class ViewImageModal extends React.Component { } var publicLink = ''; - if (config.AllowPublicLink) { + if (global.window.config.AllowPublicLink) { publicLink = ( <div> <a |