diff options
Diffstat (limited to 'web/react/components')
| -rw-r--r-- | web/react/components/edit_channel_modal.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/file_attachment.jsx | 10 | ||||
| -rw-r--r-- | web/react/components/file_upload.jsx | 33 | ||||
| -rw-r--r-- | web/react/components/invite_member_modal.jsx | 68 | ||||
| -rw-r--r-- | web/react/components/more_channels.jsx | 123 | ||||
| -rw-r--r-- | web/react/components/new_channel.jsx | 12 | ||||
| -rw-r--r-- | web/react/components/rename_channel_modal.jsx | 10 | ||||
| -rw-r--r-- | web/react/components/sidebar.jsx | 20 | ||||
| -rw-r--r-- | web/react/components/signup_team_complete.jsx | 609 | ||||
| -rw-r--r-- | web/react/components/view_image.jsx | 57 |
10 files changed, 550 insertions, 394 deletions
diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx index 06d7fc3e8..dcff5b89d 100644 --- a/web/react/components/edit_channel_modal.jsx +++ b/web/react/components/edit_channel_modal.jsx @@ -14,7 +14,7 @@ module.exports = React.createClass({ Client.updateChannelDesc(data, function(data) { this.setState({ server_error: "" }); - AsyncClient.getChannels(true); + AsyncClient.getChannel(this.state.channel_id); $(this.refs.modal.getDOMNode()).modal('hide'); }.bind(this), function(err) { diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index b7ea5734f..c36c908d2 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -113,6 +113,14 @@ module.exports = React.createClass({ fileSizeString = utils.fileSizeToString(this.state.fileSize); } + var filenameString = decodeURIComponent(utils.getFileName(filename)); + var trimmedFilename; + if (filenameString.length > 35) { + trimmedFilename = filenameString.substring(0, Math.min(35, filenameString.length)) + "..."; + } else { + trimmedFilename = filenameString; + } + return ( <div className="post-image__column" key={filename}> <a className="post-image__thumbnail" href="#" onClick={this.props.handleImageClick} @@ -120,7 +128,7 @@ module.exports = React.createClass({ {thumbnail} </a> <div className="post-image__details"> - <div className="post-image__name">{decodeURIComponent(utils.getFileName(filename))}</div> + <div data-toggle="tooltip" title={filenameString} className="post-image__name">{trimmedFilename}</div> <div> <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span> <span className="post-image__size">{fileSizeString}</span> diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index b90fa4fd3..c1fab669c 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -7,6 +7,13 @@ var ChannelStore = require('../stores/channel_store.jsx'); var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ + displayName: 'FileUpload', + propTypes: { + onUploadError: React.PropTypes.func, + getFileCount: React.PropTypes.func, + onFileUpload: React.PropTypes.func, + onUploadStart: React.PropTypes.func + }, getInitialState: function() { return {requests: {}}; }, @@ -21,7 +28,7 @@ module.exports = React.createClass({ // This looks redundant, but must be done this way due to // setState being an asynchronous call var numFiles = 0; - for(var i = 0; i < files.length; i++) { + for (var i = 0; i < files.length; i++) { if (files[i].size <= Constants.MAX_FILE_SIZE) { numFiles++; } @@ -51,11 +58,11 @@ module.exports = React.createClass({ var request = client.uploadFile(formData, function(data) { var parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId); + this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = this.state.requests; - for (var i = 0; i < parsedData['client_ids'].length; i++) { - delete requests[parsedData['client_ids'][i]]; + for (var i = 0; i < parsedData.client_ids.length; i++) { + delete requests[parsedData.client_ids[i]]; } this.setState({requests: requests}); }.bind(this), @@ -100,12 +107,9 @@ module.exports = React.createClass({ if (items) { for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { - var ext = items[i].type.split('/')[1].toLowerCase(); - if (ext === 'jpeg') { - ext = 'jpg'; - } + var testExt = items[i].type.split('/')[1].toLowerCase(); - if (Constants.IMAGE_TYPES.indexOf(ext) < 0) { + if (Constants.IMAGE_TYPES.indexOf(testExt) < 0) { continue; } @@ -113,7 +117,7 @@ module.exports = React.createClass({ } } - var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channelId), numItems); + var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(ChannelStore.getCurrentId()), numItems); if (numItems > numToUpload) { self.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.'); @@ -124,9 +128,6 @@ module.exports = React.createClass({ var file = items[i].getAsFile(); var ext = items[i].type.split('/')[1].toLowerCase(); - if (ext === 'jpeg') { - ext = 'jpg'; - } if (Constants.IMAGE_TYPES.indexOf(ext) < 0) { continue; @@ -161,11 +162,11 @@ module.exports = React.createClass({ var request = client.uploadFile(formData, function(data) { var parsedData = $.parseJSON(data); - self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId); + self.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = self.state.requests; - for (var i = 0; i < parsedData['client_ids'].length; i++) { - delete requests[parsedData['client_ids'][i]]; + for (var i = 0; i < parsedData.client_ids.length; i++) { + delete requests[parsedData.client_ids[i]]; } self.setState({requests: requests}); }, diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index 3eca79bae..5b6924891 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -2,6 +2,7 @@ // 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'); @@ -35,6 +36,10 @@ module.exports = React.createClass({ }); }, handleSubmit: function(e) { + if (!this.state.emailEnabled) { + return; + } + var inviteIds = this.state.inviteIds; var count = inviteIds.length; var invites = []; @@ -147,12 +152,18 @@ module.exports = React.createClass({ idCount: 0, emailErrors: {}, firstNameErrors: {}, - lastNameErrors: {} + lastNameErrors: {}, + emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false) }; }, render: function() { var currentUser = UserStore.getCurrentUser(); + var inputDisabled = ''; + if (!this.state.emailEnabled) { + inputDisabled = 'disabled'; + } + if (currentUser != null) { var inviteSections = []; var inviteIds = this.state.inviteIds; @@ -195,13 +206,13 @@ module.exports = React.createClass({ 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' /> + <input type='text' className='form-control' ref={'first_name' + index} placeholder='First name' maxLength='64' disabled={!this.state.emailEnabled}/> {firstNameError} </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' /> + <input type='text' className='form-control' ref={'last_name' + index} placeholder='Last name' maxLength='64' disabled={!this.state.emailEnabled}/> {lastNameError} </div> </div> @@ -212,7 +223,7 @@ module.exports = React.createClass({ <div key={'key' + index}> {removeButton} <div className={emailClass}> - <input onKeyUp={this.displayNameKeyUp} type='text' ref={'email' + index} className='form-control' placeholder='email@domain.com' maxLength='64' /> + <input onKeyUp={this.displayNameKeyUp} type='text' ref={'email' + index} className='form-control' placeholder='email@domain.com' maxLength='64' disabled={!this.state.emailEnabled}/> {emailError} </div> {nameFields} @@ -225,6 +236,45 @@ module.exports = React.createClass({ serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; } + var content = null; + var sendButton = null; + if (this.state.emailEnabled) { + content = ( + <div> + {serverError} + <button type='button' className='btn btn-default' onClick={this.addInviteFields}>Add another</button> + <br/> + <br/> + <span>People invited automatically join Town Square channel.</span> + </div> + ); + + sendButton = <button onClick={this.handleSubmit} type='button' className='btn btn-primary'>Send Invitations</button> + } else { + var teamInviteLink = null; + if (currentUser && this.props.teamType === 'O') { + var linkUrl = utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id; + var link = <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={linkUrl} onClick={ + function() { + $('#invite_member').modal('hide'); + } + }>Team Invite Link</a>; + + teamInviteLink = ( + <p> + You can also invite people using the {link}. + </p> + ); + } + + content = ( + <div> + <p>Email is currently disabled for your team, and email invitations cannot be sent. Contact your system administrator to enable email and email invitations.</p> + {teamInviteLink} + </div> + ); + } + return ( <div> <div className='modal fade' ref='modal' id='invite_member' tabIndex='-1' role='dialog' aria-hidden='true'> @@ -238,15 +288,11 @@ module.exports = React.createClass({ <form role='form'> {inviteSections} </form> - {serverError} - <button type='button' className='btn btn-default' onClick={this.addInviteFields}>Add another</button> - <br/> - <br/> - <span>People invited automatically join Town Square channel.</span> + {content} </div> <div className='modal-footer'> <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button> - <button onClick={this.handleSubmit} type='button' className='btn btn-primary'>Send Invitations</button> + {sendButton} </div> </div> </div> @@ -256,7 +302,7 @@ module.exports = React.createClass({ parent_id='invite_member' title='Discard Invitations?' message='You have unsent invitations, are you sure you want to discard them?' - confirm_button='Yes, Discard/' + confirm_button='Yes, Discard' /> </div> ); diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 007476f9b..5261ed6a7 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -1,34 +1,32 @@ // 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'); var ChannelStore = require('../stores/channel_store.jsx'); var LoadingScreen = require('./loading_screen.jsx'); function getStateFromStores() { - return { - channels: ChannelStore.getMoreAll(), - server_error: null - }; + return { + channels: ChannelStore.getMoreAll(), + serverError: null + }; } module.exports = React.createClass({ - displayName: "MoreChannelsModal", + displayName: 'MoreChannelsModal', componentDidMount: function() { ChannelStore.addMoreChangeListener(this._onChange); - $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) { + $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function shown() { asyncClient.getMoreChannels(true); }); var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { + $(this.refs.modal.getDOMNode()).on('show.bs.modal', function show(e) { var button = e.relatedTarget; - self.setState({ channel_type: $(button).attr('data-channeltype') }); + self.setState({channelType: $(button).attr('data-channeltype')}); }); }, componentWillUnmount: function() { @@ -42,18 +40,17 @@ module.exports = React.createClass({ }, getInitialState: function() { var initState = getStateFromStores(); - initState.channel_type = ""; + initState.channelType = ''; return initState; }, - handleJoin: function(e) { - var self = this; - client.joinChannel(e, - function(data) { - $(self.refs.modal.getDOMNode()).modal('hide'); - asyncClient.getChannels(true); + handleJoin: function(id) { + client.joinChannel(id, + function() { + $(this.refs.modal.getDOMNode()).modal('hide'); + asyncClient.getChannel(id); }.bind(this), function(err) { - this.state.server_error = err.message; + this.state.serverError = err.message; this.setState(this.state); }.bind(this) ); @@ -62,52 +59,66 @@ module.exports = React.createClass({ $(this.refs.modal.getDOMNode()).modal('hide'); }, render: function() { - var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; + var serverError; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + var outter = this; var moreChannels; - if (this.state.channels != null) - moreChannels = this.state.channels; + if (this.state.channels != null) { + var channels = this.state.channels; + if (!channels.loading) { + if (channels.length) { + moreChannels = ( + <table className='more-channel-table table'> + <tbody> + {channels.map(function cMap(channel) { + return ( + <tr key={channel.id}> + <td> + <p className='more-channel-name'>{channel.display_name}</p> + <p className='more-channel-description'>{channel.description}</p> + </td> + <td className='td--action'><button onClick={outter.handleJoin.bind(outter, channel.id)} className='btn btn-primary'>Join</button></td> + </tr> + ); + })} + </tbody> + </table> + ); + } else { + moreChannels = ( + <div className='no-channel-message'> + <p className='primary-message'>No more channels to join</p> + <p className='secondary-message'>Click 'Create New Channel' to make a new one</p> + </div> + ); + } + } else { + moreChannels = <LoadingScreen />; + } + } return ( - <div className="modal fade" id="more_channels" 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">Close</span> + <div className='modal fade' id='more_channels' 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'>Close</span> </button> - <h4 className="modal-title">More Channels</h4> - <button data-toggle="modal" data-target="#new_channel" data-channeltype={this.state.channel_type} type="button" className="btn btn-primary channel-create-btn" onClick={this.handleNewChannel}>Create New Channel</button> + <h4 className='modal-title'>More Channels</h4> + <button data-toggle='modal' data-target='#new_channel' data-channeltype={this.state.channelType} type='button' className='btn btn-primary channel-create-btn' onClick={this.handleNewChannel}>Create New Channel</button> </div> - <div className="modal-body"> - {!moreChannels.loading ? - (moreChannels.length ? - <table className="more-channel-table table"> - <tbody> - {moreChannels.map(function(channel) { - return ( - <tr key={channel.id}> - <td> - <p className="more-channel-name">{channel.display_name}</p> - <p className="more-channel-description">{channel.description}</p> - </td> - <td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="btn btn-primary">Join</button></td> - </tr> - ) - })} - </tbody> - </table> - : <div className="no-channel-message"> - <p className="primary-message">No more channels to join</p> - <p className="secondary-message">Click 'Create New Channel' to make a new one</p> - </div>) - : <LoadingScreen /> } - { server_error } + <div className='modal-body'> + {moreChannels} + {serverError} </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> + <div className='modal-footer'> + <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button> </div> </div> </div> diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx index c22147022..b00376758 100644 --- a/web/react/components/new_channel.jsx +++ b/web/react/components/new_channel.jsx @@ -55,16 +55,16 @@ module.exports = React.createClass({ channel.description = this.refs.channel_desc.getDOMNode().value.trim(); channel.type = this.state.channelType; - var self = this; client.createChannel(channel, - function() { + function(data) { + $(this.refs.modal.getDOMNode()).modal('hide'); + + asyncClient.getChannel(data.id); + utils.switchChannel(data); + this.refs.display_name.getDOMNode().value = ''; this.refs.channel_name.getDOMNode().value = ''; this.refs.channel_desc.getDOMNode().value = ''; - - $(self.refs.modal.getDOMNode()).modal('hide'); - window.location = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; - asyncClient.getChannels(true); }.bind(this), function(err) { state.serverError = err.message; diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx index 26593b7fa..93cb6ef21 100644 --- a/web/react/components/rename_channel_modal.jsx +++ b/web/react/components/rename_channel_modal.jsx @@ -63,12 +63,14 @@ module.exports = React.createClass({ Client.updateChannel(channel, function(data, text, req) { + $(this.refs.modal.getDOMNode()).modal('hide'); + + AsyncClient.getChannel(channel.id); + utils.updateTabTitle(channel.display_name); + utils.updateAddressBar(channel.name); + this.refs.display_name.getDOMNode().value = ""; this.refs.channel_name.getDOMNode().value = ""; - - $('#' + this.props.modalId).modal('hide'); - window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + this.state.channel_name; - AsyncClient.getChannels(true); }.bind(this), function(err) { state.server_error = err.message; diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index fe73cbcf7..80e3632c7 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -102,7 +102,7 @@ function getStateFromStores() { } readDirectChannels = readDirectChannels.slice(index); - showDirectChannels.sort(function(a, b) { + showDirectChannels.sort(function directSort(a, b) { if (a.display_name < b.display_name) { return -1; } @@ -114,7 +114,7 @@ function getStateFromStores() { } return { - active_id: currentId, + activeId: currentId, channels: ChannelStore.getAll(), members: members, showDirectChannels: showDirectChannels, @@ -157,9 +157,11 @@ module.exports = React.createClass({ onSocketChange: function(msg) { if (msg.action === 'posted') { if (ChannelStore.getCurrentId() === msg.channel_id) { - AsyncClient.getChannels(true, window.isActive); + if (window.isActive) { + AsyncClient.updateLastViewedAt(); + } } else { - AsyncClient.getChannels(true); + AsyncClient.getChannels(); } if (UserStore.getCurrentId() !== msg.user_id) { @@ -214,12 +216,12 @@ module.exports = React.createClass({ } } } else if (msg.action === 'viewed') { - if (ChannelStore.getCurrentId() != msg.channel_id) { - AsyncClient.getChannels(true); + if (ChannelStore.getCurrentId() !== msg.channel_id && UserStore.getCurrentId() === msg.user_id) { + AsyncClient.getChannel(msg.channel_id); } } else if (msg.action === 'user_added') { if (UserStore.getCurrentId() === msg.user_id) { - AsyncClient.getChannels(true); + AsyncClient.getChannel(msg.channel_id); } } else if (msg.action === 'user_removed') { if (msg.user_id === UserStore.getCurrentId()) { @@ -282,7 +284,7 @@ module.exports = React.createClass({ }, render: function() { var members = this.state.members; - var activeId = this.state.active_id; + var activeId = this.state.activeId; var badgesActive = false; // keep track of the first and last unread channels so we can use them to set the unread indicators @@ -294,7 +296,7 @@ module.exports = React.createClass({ var channelMember = members[channel.id]; var linkClass = ''; - if (channel.id === self.state.active_id) { + if (channel.id === activeId) { linkClass = 'active'; } diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 3f35a5912..e27fcd19d 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -1,8 +1,8 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // 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 BrowserStore = require('../stores/browser_store.jsx'); @@ -11,111 +11,132 @@ var constants = require('../utils/constants.jsx'); WelcomePage = React.createClass({ submitNext: function (e) { if (!BrowserStore.isLocalStorageSupported()) { - this.setState({ storage_error: "This service requires local storage to be enabled. Please enable it or exit private browsing."} ); + this.setState({storageError: 'This service requires local storage to be enabled. Please enable it or exit private browsing.'}); return; } e.preventDefault(); - this.props.state.wizard = "team_display_name"; + this.props.state.wizard = 'team_display_name'; this.props.updateParent(this.props.state); }, handleDiffEmail: function (e) { e.preventDefault(); - this.setState({ use_diff: true }); + this.setState({useDiff: true}); }, handleDiffSubmit: function (e) { e.preventDefault(); - var state = { use_diff: true, server_error: "" }; + var state = {useDiff: true, serverError: ''}; var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); if (!email || !utils.isEmail(email)) { - state.email_error = "Please enter a valid email address"; + state.emailError = 'Please enter a valid email address'; this.setState(state); return; - } - else if (!BrowserStore.isLocalStorageSupported()) { - state.email_error = "This service requires local storage to be enabled. Please enable it or exit private browsing."; + } else if (!BrowserStore.isLocalStorageSupported()) { + state.emailError = 'This service requires local storage to be enabled. Please enable it or exit private browsing.'; this.setState(state); return; - } - else { - state.email_error = ""; + } else { + state.emailError = ''; } client.signupTeam(email, function(data) { - if (data["follow_link"]) { - window.location.href = data["follow_link"]; + if (data['follow_link']) { + window.location.href = data['follow_link']; } else { - this.props.state.wizard = "finished"; + this.props.state.wizard = 'finished'; this.props.updateParent(this.props.state); - window.location.href = "/signup_team_confirm/?email=" + encodeURIComponent(team.email); + window.location.href = '/signup_team_confirm/?email=' + encodeURIComponent(team.email); } }.bind(this), function(err) { - this.state.server_error = err.message; + this.state.serverError = err.message; this.setState(this.state); }.bind(this) ); }, getInitialState: function() { - return { use_diff: false }; + return {useDiff: false}; }, handleKeyPress: function(event) { - if (event.keyCode == 13) { + if (event.keyCode === 13) { this.submitNext(event); } }, componentWillMount: function() { - document.addEventListener("keyup", this.handleKeyPress, false); + document.addEventListener('keyup', this.handleKeyPress, false); }, componentWillUnmount: function() { - document.removeEventListener("keyup", this.handleKeyPress, false); + document.removeEventListener('keyup', this.handleKeyPress, false); }, render: function() { - client.track('signup', 'signup_team_01_welcome'); - var storage_error = this.state.storage_error ? <label className="control-label">{ this.state.storage_error }</label> : null; - var email_error = this.state.email_error ? <label className="control-label">{ this.state.email_error }</label> : null; - var server_error = this.state.server_error ? <div className={ "form-group has-error" }><label className="control-label">{ this.state.server_error }</label></div> : null; + var storageError = null; + if (this.state.storageError) { + storageError = <label className='control-label'>{this.state.storageError}</label>; + } + + var emailError = null; + var emailDivClass = 'form-group'; + if (this.state.emailError) { + emailError = <label className='control-label'>{this.state.emailError}</label>; + emailDivClass += ' has-error'; + } + + var serverError = null; + if (this.state.serverError) { + serverError = ( + <div className='form-group has-error'> + <label className='control-label'>{this.state.serverError}</label> + </div> + ); + } + + var differentEmailLinkClass = ''; + var emailDivContainerClass = 'hidden'; + if (this.state.useDiff) { + differentEmailLinkClass = 'hidden'; + emailDivContainerClass = ''; + } return ( <div> <p> - <img className="signup-team-logo" src="/static/images/logo.png" /> - <h3 className="sub-heading">Welcome to:</h3> - <h1 className="margin--top-none">{config.SiteName}</h1> + <img className='signup-team-logo' src='/static/images/logo.png' /> + <h3 className='sub-heading'>Welcome to:</h3> + <h1 className='margin--top-none'>{config.SiteName}</h1> </p> - <p className="margin--less">Let's set up your new team</p> + <p className='margin--less'>Let's set up your new team</p> <p> Please confirm your email address:<br /> - <div className="inner__content"> - <div className="block--gray">{ this.props.state.team.email }</div> + <div className='inner__content'> + <div className='block--gray'>{this.props.state.team.email}</div> </div> </p> - <p className="margin--extra color--light"> + <p className='margin--extra color--light'> Your account will administer the new team site. <br /> You can add other administrators later. </p> - <div className="form-group"> - <button className="btn-primary btn form-group" type="submit" onClick={this.submitNext}><i className="glyphicon glyphicon-ok"></i>Yes, this address is correct</button> - { storage_error } + <div className='form-group'> + <button className='btn-primary btn form-group' type='submit' onClick={this.submitNext}><i className='glyphicon glyphicon-ok'></i>Yes, this address is correct</button> + {storageError} </div> <hr /> - <div className={ this.state.use_diff ? "" : "hidden" }> - <div className={ email_error ? "form-group has-error" : "form-group" }> - <div className="row"> - <div className="col-sm-9"> - <input type="email" ref="email" className="form-control" placeholder="Email Address" maxLength="128" /> + <div className={emailDivContainerClass}> + <div className={emailDivClass}> + <div className='row'> + <div className='col-sm-9'> + <input type='email' ref='email' className='form-control' placeholder='Email Address' maxLength='128' /> </div> </div> - { email_error } + {emailError} </div> - { server_error } - <button className="btn btn-md btn-primary" type="button" onClick={this.handleDiffSubmit} type="submit">Use this instead</button> + {serverError} + <button className='btn btn-md btn-primary' type='button' onClick={this.handleDiffSubmit} type='submit'>Use this instead</button> </div> - <a href="#" onClick={this.handleDiffEmail} className={ this.state.use_diff ? "hidden" : "" }>Use a different email</a> + <a href='#' onClick={this.handleDiffEmail} className={differentEmailLinkClass}>Use a different email</a> </div> ); } @@ -124,7 +145,7 @@ WelcomePage = React.createClass({ TeamDisplayNamePage = React.createClass({ submitBack: function (e) { e.preventDefault(); - this.props.state.wizard = "welcome"; + this.props.state.wizard = 'welcome'; this.props.updateParent(this.props.state); }, submitNext: function (e) { @@ -132,17 +153,17 @@ TeamDisplayNamePage = React.createClass({ var display_name = this.refs.name.getDOMNode().value.trim(); if (!display_name) { - this.setState({name_error: "This field is required"}); + this.setState({nameError: 'This field is required'}); return; } - this.props.state.wizard = "team_url"; + this.props.state.wizard = 'team_url'; this.props.state.team.display_name = display_name; this.props.state.team.name = utils.cleanUpUrlable(display_name); this.props.updateParent(this.props.state); }, getInitialState: function() { - return { }; + return {}; }, handleFocus: function(e) { e.preventDefault(); @@ -150,31 +171,35 @@ TeamDisplayNamePage = React.createClass({ e.currentTarget.select(); }, render: function() { - client.track('signup', 'signup_team_02_name'); - var name_error = this.state.name_error ? <label className="control-label">{ this.state.name_error }</label> : null; + 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" /> + <img className='signup-team-logo' src='/static/images/logo.png' /> - <h2>{utils.toTitleCase(strings.Team) + " Name"}</h2> - <div className={ name_error ? "form-group has-error" : "form-group" }> - <div className="row"> - <div className="col-sm-9"> - <input type="text" ref="name" className="form-control" placeholder="" maxLength="128" defaultValue={this.props.state.team.display_name} autoFocus={true} onFocus={this.handleFocus} /> + <h2>{utils.toTitleCase(strings.Team) + ' Name'}</h2> + <div className={nameDivClass}> + <div className='row'> + <div className='col-sm-9'> + <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' defaultValue={this.props.state.team.display_name} autoFocus={true} onFocus={this.handleFocus} /> + </div> + </div> + {nameError} </div> - </div> - { name_error } - </div> - <div>{"Name your " + strings.Team + " in any language. Your " + strings.Team + " name shows in menus and headings."}</div> - <button type="submit" className="btn btn-primary margin--extra" onClick={this.submitNext}>Next<i className="glyphicon glyphicon-chevron-right"></i></button> - <div className="margin--extra"> - <a href="#" onClick={this.submitBack}>Back to previous step</a> - </div> - </form> + <div>{'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'}</div> + <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <div className='margin--extra'> + <a href='#' onClick={this.submitBack}>Back to previous step</a> + </div> + </form> </div> ); } @@ -183,7 +208,7 @@ TeamDisplayNamePage = React.createClass({ TeamURLPage = React.createClass({ submitBack: function (e) { e.preventDefault(); - this.props.state.wizard = "team_display_name"; + this.props.state.wizard = 'team_display_name'; this.props.updateParent(this.props.state); }, submitNext: function (e) { @@ -191,25 +216,24 @@ TeamURLPage = React.createClass({ var name = this.refs.name.getDOMNode().value.trim(); if (!name) { - this.setState({name_error: "This field is required"}); + this.setState({nameError: 'This field is required'}); return; } - var cleaned_name = utils.cleanUpUrlable(name); + var cleanedName = utils.cleanUpUrlable(name); var urlRegex = /^[a-z0-9]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g; - if (cleaned_name != name || !urlRegex.test(name)) { - this.setState({name_error: "Must be lowercase alphanumeric characters"}); + if (cleanedName !== name || !urlRegex.test(name)) { + this.setState({nameError: 'Must be lowercase alphanumeric characters'}); return; - } - else if (cleaned_name.length <= 3 || cleaned_name.length > 15) { - this.setState({name_error: "Name must be 4 or more characters up to a maximum of 15"}) + } else if (cleanedName.length <= 3 || cleanedName.length > 15) { + this.setState({nameError: 'Name must be 4 or more characters up to a maximum of 15'}); return; } for (var index = 0; index < constants.RESERVED_TEAM_NAMES.length; index++) { - if (cleaned_name.indexOf(constants.RESERVED_TEAM_NAMES[index]) == 0) { - this.setState({name_error: "This team name is unavailable"}) + if (cleanedName.indexOf(constants.RESERVED_TEAM_NAMES[index]) === 0) { + this.setState({nameError: 'This team name is unavailable'}); return; } } @@ -218,28 +242,27 @@ TeamURLPage = React.createClass({ function(data) { if (!data) { if (config.AllowSignupDomainsWizard) { - this.props.state.wizard = "allowed_domains"; + this.props.state.wizard = 'allowed_domains'; } else { - this.props.state.wizard = "send_invites"; + this.props.state.wizard = 'send_invites'; this.props.state.team.type = 'O'; } this.props.state.team.name = name; this.props.updateParent(this.props.state); - } - else { - this.state.name_error = "This URL is unavailable. Please try another."; + } else { + this.state.nameError = 'This URL is unavailable. Please try another.'; this.setState(this.state); } }.bind(this), function(err) { - this.state.name_error = err.message; + this.state.nameError = err.message; this.setState(this.state); }.bind(this) ); }, getInitialState: function() { - return { }; + return {}; }, handleFocus: function(e) { e.preventDefault(); @@ -247,40 +270,44 @@ TeamURLPage = React.createClass({ e.currentTarget.select(); }, render: function() { - $('body').tooltip( {selector: '[data-toggle=tooltip]', trigger: 'hover click'} ); client.track('signup', 'signup_team_03_url'); - var name_error = this.state.name_error ? <label className="control-label">{ this.state.name_error }</label> : null; + 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>{utils.toTitleCase(strings.Team) + " URL"}</h2> - <div className={ name_error ? "form-group has-error" : "form-group" }> - <div className="row"> - <div className="col-sm-11"> - <div className="input-group input-group--limit"> - <span data-toggle="tooltip" title={ utils.getWindowLocationOrigin() + "/" } className="input-group-addon">{ utils.getWindowLocationOrigin() + "/" }</span> - <input type="text" ref="name" className="form-control" placeholder="" maxLength="128" defaultValue={this.props.state.team.name} autoFocus={true} onFocus={this.handleFocus}/> + <img className='signup-team-logo' src='/static/images/logo.png' /> + <h2>{utils.toTitleCase(strings.Team) + ' URL'}</h2> + <div className={nameDivClass}> + <div className='row'> + <div className='col-sm-11'> + <div className='input-group input-group--limit'> + <span data-toggle='tooltip' title={utils.getWindowLocationOrigin() + '/'} className='input-group-addon'>{utils.getWindowLocationOrigin() + '/'}</span> + <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' defaultValue={this.props.state.team.name} autoFocus={true} onFocus={this.handleFocus}/> + </div> + </div> </div> + {nameError} </div> - </div> - { name_error } - </div> - <p>{"Choose the web address of your new " + strings.Team + ":"}</p> - <ul className="color--light"> - <li>Short and memorable is best</li> - <li>Use lowercase letters, numbers and dashes</li> - <li>Must start with a letter and can't end in a dash</li> - </ul> - <button type="submit" className="btn btn-primary margin--extra" onClick={this.submitNext}>Next<i className="glyphicon glyphicon-chevron-right"></i></button> - <div className="margin--extra"> - <a href="#" onClick={this.submitBack}>Back to previous step</a> - </div> - </form> + <p>{'Choose the web address of your new ' + strings.Team + ':'}</p> + <ul className='color--light'> + <li>Short and memorable is best</li> + <li>Use lowercase letters, numbers and dashes</li> + <li>Must start with a letter and can't end in a dash</li> + </ul> + <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <div className='margin--extra'> + <a href='#' onClick={this.submitBack}>Back to previous step</a> + </div> + </form> </div> ); } @@ -289,14 +316,14 @@ TeamURLPage = React.createClass({ AllowedDomainsPage = React.createClass({ submitBack: function (e) { e.preventDefault(); - this.props.state.wizard = "team_url"; + this.props.state.wizard = 'team_url'; this.props.updateParent(this.props.state); }, submitNext: function (e) { e.preventDefault(); if (this.refs.open_network.getDOMNode().checked) { - this.props.state.wizard = "send_invites"; + this.props.state.wizard = 'send_invites'; this.props.state.team.type = 'O'; this.props.updateParent(this.props.state); return; @@ -304,65 +331,72 @@ AllowedDomainsPage = React.createClass({ if (this.refs.allow.getDOMNode().checked) { var name = this.refs.name.getDOMNode().value.trim(); - var domainRegex = /^\w+\.\w+$/ + var domainRegex = /^\w+\.\w+$/; if (!name) { - this.setState({name_error: "This field is required"}); + this.setState({nameError: 'This field is required'}); return; } - if(!name.trim().match(domainRegex)) { - this.setState({name_error: "The domain doesn't appear valid"}); + if (!name.trim().match(domainRegex)) { + this.setState({nameError: 'The domain doesn\'t appear valid'}); return; } - this.props.state.wizard = "send_invites"; + 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"; + } else { + this.props.state.wizard = 'send_invites'; this.props.state.team.type = 'I'; this.props.updateParent(this.props.state); } }, getInitialState: function() { - return { }; + return {}; }, render: function() { - client.track('signup', 'signup_team_04_allow_domains'); - var name_error = this.state.name_error ? <label className="control-label">{ this.state.name_error }</label> : null; + 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 />{" 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={ name_error ? "form-group has-error" : "form-group" }> - <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}/> + <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 />{' 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> - </div> - { name_error } - </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> + <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> ); } @@ -370,10 +404,10 @@ AllowedDomainsPage = React.createClass({ EmailItem = React.createClass({ getInitialState: function() { - return { }; + return {}; }, getValue: function() { - return this.refs.email.getDOMNode().value.trim() + return this.refs.email.getDOMNode().value.trim(); }, validate: function(teamEmail) { var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); @@ -383,43 +417,44 @@ EmailItem = React.createClass({ } if (!utils.isEmail(email)) { - this.state.email_error = "Please enter a valid email address"; + this.state.emailError = 'Please enter a valid email address'; this.setState(this.state); return false; - } - else if (email === teamEmail) { - this.state.email_error = "Please use a different email than the one used at signup"; + } else if (email === teamEmail) { + this.state.emailError = 'Please use a different email than the one used at signup'; this.setState(this.state); return false; - } - else { - this.state.email_error = ""; + } else { + this.state.emailError = ''; this.setState(this.state); return true; } }, render: function() { - - var email_error = this.state.email_error ? <label className="control-label">{ this.state.email_error }</label> : null; + var emailError = null; + var emailDivClass = 'form-group'; + if (this.state.emailError) { + emailError = <label className='control-label'>{ this.state.emailError }</label>; + emailDivClass += ' has-error'; + } return ( - <div className={ email_error ? "form-group has-error" : "form-group" }> - <input autoFocus={this.props.focus} type="email" ref="email" className="form-control" placeholder="Email Address" defaultValue={this.props.email} maxLength="128" /> - { email_error } + <div className={emailDivClass}> + <input autoFocus={this.props.focus} type='email' ref='email' className='form-control' placeholder='Email Address' defaultValue={this.props.email} maxLength='128' /> + {emailError} </div> ); } }); - SendInivtesPage = React.createClass({ submitBack: function (e) { e.preventDefault(); if (config.AllowSignupDomainsWizard) { - this.props.state.wizard = "allowed_domains"; + 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); @@ -428,69 +463,93 @@ SendInivtesPage = React.createClass({ e.preventDefault(); var valid = true; - var emails = []; - for (var i = 0; i < this.props.state.invites.length; i++) { - if (!this.refs['email_' + i].validate(this.props.state.team.email)) { - valid = false; - } else { - emails.push(this.refs['email_' + i].getValue()); + if (this.state.emailEnabled) { + var emails = []; + + for (var i = 0; i < this.props.state.invites.length; i++) { + if (!this.refs['email_' + i].validate(this.props.state.team.email)) { + valid = false; + } else { + emails.push(this.refs['email_' + i].getValue()); + } } - } - if (!valid) { - return; + if (valid) { + this.props.state.invites = emails; + } } - this.props.state.wizard = "username"; - this.props.state.invites = emails; - this.props.updateParent(this.props.state); + if (valid) { + this.props.state.wizard = 'username'; + this.props.updateParent(this.props.state); + } }, submitAddInvite: function (e) { e.preventDefault(); - this.props.state.wizard = "send_invites"; - if (this.props.state.invites == null || this.props.state.invites.length == 0) { + this.props.state.wizard = 'send_invites'; + if (!this.props.state.invites) { this.props.state.invites = []; } - this.props.state.invites.push(""); + this.props.state.invites.push(''); this.props.updateParent(this.props.state); }, submitSkip: function (e) { e.preventDefault(); - this.props.state.wizard = "username"; + this.props.state.wizard = 'username'; this.props.updateParent(this.props.state); }, getInitialState: function() { - return { }; + return { + emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false) + }; }, render: function() { - client.track('signup', 'signup_team_05_send_invites'); - var name_error = this.state.name_error ? <label className="control-label">{ this.state.name_error }</label> : null; + var content = null; + var bottomContent = null; - var emails = []; + if (this.state.emailEnabled) { + var emails = []; - for (var i = 0; i < this.props.state.invites.length; i++) { - if (i == 0) { - emails.push(<EmailItem focus={true} key={i} ref={'email_' + i} email={this.props.state.invites[i]} />); - } else { - emails.push(<EmailItem focus={false} key={i} ref={'email_' + i} email={this.props.state.invites[i]} />); + for (var i = 0; i < this.props.state.invites.length; i++) { + if (i === 0) { + emails.push(<EmailItem focus={true} key={i} ref={'email_' + i} email={this.props.state.invites[i]} />); + } else { + emails.push(<EmailItem focus={false} key={i} ref={'email_' + i} email={this.props.state.invites[i]} />); + } } + + content = ( + <div> + {emails} + <div className='form-group text-right'><a href='#' onClick={this.submitAddInvite}>Add Invitation</a></div> + </div> + ); + + bottomContent = ( + <p className='color--light'>{'if you prefer, you can invite ' + strings.Team + ' members later'}<br /> and <a href='#' onClick={this.submitSkip}>skip this step</a> for now.</p> + ); + } else { + content = ( + <div className='form-group color--light'>Email is currently disabled for your team, and emails cannot be sent. Contact your system administrator to enable email and email invitations.</div> + ); } return ( <div> <form> - <img className="signup-team-logo" src="/static/images/logo.png" /> - <h2>{"Invite " + utils.toTitleCase(strings.Team) + " Members"}</h2> - { emails } - <div className="form-group text-right"><a href="#" onClick={this.submitAddInvite}>Add Invitation</a></div> - <div className="form-group"><button type="submit" className="btn-primary btn" onClick={this.submitNext}>Next<i className="glyphicon glyphicon-chevron-right"></i></button></div> + <img className='signup-team-logo' src='/static/images/logo.png' /> + <h2>{'Invite ' + utils.toTitleCase(strings.Team) + ' Members'}</h2> + {content} + <div className='form-group'> + <button type='submit' className='btn-primary btn' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + </div> </form> - <p className="color--light">{"if you prefer, you can invite " + strings.Team + " members later"}<br /> and <a href="#" onClick={this.submitSkip}>skip this step</a> for now.</p> - <div className="margin--extra"> - <a href="#" onClick={this.submitBack}>Back to previous step</a> + {bottomContent} + <div className='margin--extra'> + <a href='#' onClick={this.submitBack}>Back to previous step</a> </div> </div> ); @@ -508,12 +567,12 @@ UsernamePage = React.createClass({ var name = this.refs.name.getDOMNode().value.trim(); - var username_error = utils.isValidUsername(name); - if (username_error === 'Cannot use a reserved word as a username.') { - this.setState({name_error: 'This username is reserved, please choose a new one.'}); + var usernameError = utils.isValidUsername(name); + if (usernameError === 'Cannot use a reserved word as a username.') { + this.setState({nameError: 'This username is reserved, please choose a new one.'}); return; - } else if (username_error) { - this.setState({name_error: "Username must begin with a letter, and contain 3 to 15 characters in total, which may be numbers, lowercase letters, or any of the symbols '.', '-', or '_'"}); + } else if (usernameError) { + this.setState({nameError: 'Username must begin with a letter, and contain 3 to 15 characters in total, which may be numbers, lowercase letters, or any of the symbols \'.\', \'-\', or \'_\''}); return; } @@ -527,31 +586,36 @@ UsernamePage = React.createClass({ render: function() { client.track('signup', 'signup_team_06_username'); - var name_error = this.state.name_error ? <label className='control-label'>{this.state.name_error}</label> : null; + 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 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> - <div className='inner__content margin--extra'> - <div className={name_error ? 'form-group has-error' : 'form-group'}> - <div className='row'> - <div className='col-sm-11'> - <h5><strong>Choose your username</strong></h5> - <input autoFocus={true} type='text' ref='name' className='form-control' placeholder='' defaultValue={this.props.state.user.username} maxLength='128' /> - <div className='color--light form__hint'>Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</div> + <img className='signup-team-logo' 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> + <div className='inner__content margin--extra'> + <div className={nameDivClass}> + <div className='row'> + <div className='col-sm-11'> + <h5><strong>Choose your username</strong></h5> + <input autoFocus={true} type='text' ref='name' className='form-control' placeholder='' defaultValue={this.props.state.user.username} maxLength='128' /> + <div className='color--light form__hint'>Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</div> + </div> + </div> + {nameError} </div> </div> - {name_error} + <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <div className='margin--extra'> + <a href='#' onClick={this.submitBack}>Back to previous step</a> </div> - </div> - <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> - <div className='margin--extra'> - <a href='#' onClick={this.submitBack}>Back to previous step</a> - </div> - </form> + </form> </div> ); } @@ -560,7 +624,7 @@ UsernamePage = React.createClass({ PasswordPage = React.createClass({ submitBack: function (e) { e.preventDefault(); - this.props.state.wizard = "username"; + this.props.state.wizard = 'username'; this.props.updateParent(this.props.state); }, submitNext: function (e) { @@ -568,11 +632,11 @@ PasswordPage = React.createClass({ var password = this.refs.password.getDOMNode().value.trim(); if (!password || password.length < 5) { - this.setState({password_error: "Please enter at least 5 characters"}); + this.setState({passwordError: 'Please enter at least 5 characters'}); return; } - this.setState({password_error: null, server_error: null}); + this.setState({passwordError: null, serverError: null}); $('#finish-button').button('loading'); var teamSignup = JSON.parse(JSON.stringify(this.props.state)); teamSignup.user.password = password; @@ -582,13 +646,12 @@ PasswordPage = React.createClass({ client.createTeamFromSignup(teamSignup, function(data) { - client.track('signup', 'signup_team_08_complete'); var props = this.props; $('#sign-up-button').button('reset'); - props.state.wizard = "finished"; + props.state.wizard = 'finished'; props.updateParent(props.state, true); window.location.href = utils.getWindowLocationOrigin() + '/' + props.state.team.name + '/login?email=' + encodeURIComponent(teamSignup.team.email); @@ -601,55 +664,63 @@ PasswordPage = React.createClass({ // window.location.href = '/channels/town-square'; // }.bind(ctl), // function(err) { - // this.setState({name_error: err.message}); + // this.setState({nameError: err.message}); // }.bind(ctl) // ); }.bind(this), function(err) { - this.setState({server_error: err.message}); + this.setState({serverError: err.message}); $('#sign-up-button').button('reset'); }.bind(this) ); }, getInitialState: function() { - return { }; + return {}; }, render: function() { - client.track('signup', 'signup_team_07_password'); - var password_error = this.state.password_error ? <div className="form-group has-error"><label className="control-label">{ this.state.password_error }</label></div> : null; - var server_error = this.state.server_error ? <div className="form-group has-error"><label className="control-label">{ this.state.server_error }</label></div> : null; + var passwordError = null; + var passwordDivStyle = 'form-group'; + if (this.state.passwordError) { + passwordError = <div className='form-group has-error'><label className='control-label'>{this.state.passwordError}</label></div>; + passwordDivStyle = ' has-error'; + } + + var serverError = null; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } return ( <div> <form> - <img className="signup-team-logo" src="/static/images/logo.png" /> - <h2 className="margin--less">Your password</h2> - <h5 className="color--light">Select a password that you'll use to login with your email address:</h5> - <div className="inner__content margin--extra"> - <h5><strong>Email</strong></h5> - <div className="block--gray form-group">{this.props.state.team.email}</div> - <div className={ password_error ? "form-group has-error" : "form-group" }> - <div className="row"> - <div className="col-sm-11"> - <h5><strong>Choose your password</strong></h5> - <input autoFocus={true} type="password" ref="password" className="form-control" placeholder="" maxLength="128" /> - <div className="color--light form__hint">Passwords must contain 5 to 50 characters. Your password will be strongest if it contains a mix of symbols, numbers, and upper and lowercase characters.</div> + <img className='signup-team-logo' src='/static/images/logo.png' /> + <h2 className='margin--less'>Your password</h2> + <h5 className='color--light'>Select a password that you'll use to login with your email address:</h5> + <div className='inner__content margin--extra'> + <h5><strong>Email</strong></h5> + <div className='block--gray form-group'>{this.props.state.team.email}</div> + <div className={passwordDivStyle}> + <div className='row'> + <div className='col-sm-11'> + <h5><strong>Choose your password</strong></h5> + <input autoFocus={true} type='password' ref='password' className='form-control' placeholder='' maxLength='128' /> + <div className='color--light form__hint'>Passwords must contain 5 to 50 characters. Your password will be strongest if it contains a mix of symbols, numbers, and upper and lowercase characters.</div> + </div> + </div> + {passwordError} + {serverError} </div> </div> - { password_error } - { server_error } + <div className='form-group'> + <button 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 + '...'} onClick={this.submitNext}>Finish</button> </div> - </div> - <div className="form-group"> - <button 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+"..."} 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> - <div className="margin--extra"> - <a href="#" onClick={this.submitBack}>Back to previous step</a> - </div> - </form> + <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> + <div className='margin--extra'> + <a href='#' onClick={this.submitBack}>Back to previous step</a> + </div> + </form> </div> ); } @@ -668,14 +739,14 @@ module.exports = React.createClass({ if (!props) { props = {}; - props.wizard = "welcome"; + props.wizard = 'welcome'; props.team = {}; props.team.email = this.props.email; - props.team.allowed_domains = ""; + props.team.allowed_domains = ''; props.invites = []; - props.invites.push(""); - props.invites.push(""); - props.invites.push(""); + props.invites.push(''); + props.invites.push(''); + props.invites.push(''); props.user = {}; props.hash = this.props.hash; props.data = this.props.data; @@ -684,36 +755,34 @@ module.exports = React.createClass({ return props; }, render: function() { - if (this.state.wizard == "welcome") { - return <WelcomePage state={this.state} updateParent={this.updateParent} /> + if (this.state.wizard === 'welcome') { + return <WelcomePage state={this.state} updateParent={this.updateParent} />; } - if (this.state.wizard == "team_display_name") { - return <TeamDisplayNamePage state={this.state} updateParent={this.updateParent} /> + if (this.state.wizard === 'team_display_name') { + return <TeamDisplayNamePage state={this.state} updateParent={this.updateParent} />; } - if (this.state.wizard == "team_url") { - return <TeamURLPage state={this.state} updateParent={this.updateParent} /> + if (this.state.wizard === 'team_url') { + return <TeamURLPage state={this.state} updateParent={this.updateParent} />; } - if (this.state.wizard == "allowed_domains") { - return <AllowedDomainsPage state={this.state} updateParent={this.updateParent} /> + if (this.state.wizard === 'allowed_domains') { + return <AllowedDomainsPage state={this.state} updateParent={this.updateParent} />; } - if (this.state.wizard == "send_invites") { - return <SendInivtesPage state={this.state} updateParent={this.updateParent} /> + if (this.state.wizard === 'send_invites') { + return <SendInivtesPage state={this.state} updateParent={this.updateParent} />; } - if (this.state.wizard == "username") { - return <UsernamePage state={this.state} updateParent={this.updateParent} /> + if (this.state.wizard === 'username') { + return <UsernamePage state={this.state} updateParent={this.updateParent} />; } - if (this.state.wizard == "password") { - return <PasswordPage state={this.state} updateParent={this.updateParent} /> + if (this.state.wizard === 'password') { + return <PasswordPage state={this.state} updateParent={this.updateParent} />; } return (<div>You've already completed the signup process for this invitation or this invitation has expired.</div>); } }); - - diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index dc85b53e5..2b7f64030 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -6,6 +6,13 @@ var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ displayName: 'ViewImageModal', + propTypes: { + filenames: React.PropTypes.array, + modalId: React.PropTypes.string, + channelId: React.PropTypes.string, + userId: React.PropTypes.string, + startId: React.PropTypes.number + }, canSetState: false, handleNext: function() { var id = this.state.imgId + 1; @@ -56,8 +63,8 @@ module.exports = React.createClass({ progress[id] = img.completedPercentage; self.setState({progress: progress}); }); - img.onload = function(imgid) { - return function() { + img.onload = function onload(imgid) { + return function onloadReturn() { var loaded = self.state.loaded; loaded[imgid] = true; self.setState({loaded: loaded}); @@ -83,21 +90,21 @@ module.exports = React.createClass({ }, componentDidMount: function() { var self = this; - $('#' + this.props.modalId).on('shown.bs.modal', function() { + $('#' + this.props.modalId).on('shown.bs.modal', function onModalShow() { self.setState({viewed: true}); self.loadImage(self.state.imgId); }); - $(this.refs.modal.getDOMNode()).click(function(e) { + $(this.refs.modal.getDOMNode()).click(function onModalClick(e) { if (e.target === this || e.target === self.refs.imageBody.getDOMNode()) { $('.image_modal').modal('hide'); } }); $(this.refs.imageWrap.getDOMNode()).hover( - function() { + function onModalHover() { $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); - }, function() { + }, function offModalHover() { $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show'); } ); @@ -117,10 +124,14 @@ module.exports = React.createClass({ data.user_id = this.props.userId; data.filename = this.props.filenames[this.state.imgId]; Client.getPublicLink(data, - function(serverData) { - window.open(serverData.public_link); + function sucess(serverData) { + if (utils.isMobile()) { + window.location.href = serverData.public_link; + } else { + window.open(serverData.public_link); + } }, - function() { + function error() { } ); }, @@ -145,7 +156,7 @@ module.exports = React.createClass({ getInitialState: function() { var loaded = []; var progress = []; - for (var i = 0; i < this.props.filenames.length; i ++) { + for (var i = 0; i < this.props.filenames.length; i++) { loaded.push(false); progress.push(0); } @@ -198,7 +209,7 @@ module.exports = React.createClass({ if (!(filename in this.state.fileSizes)) { var self = this; - utils.getFileSize(utils.getFileUrl(filename), function(fileSize) { + utils.getFileSize(utils.getFileUrl(filename), function fileSizeOp(fileSize) { if (self.canSetState) { var fileSizes = self.state.fileSizes; fileSizes[filename] = fileSize; @@ -210,14 +221,20 @@ module.exports = React.createClass({ } else { // display a progress indicator when the preview for an image is still loading var percentage = Math.floor(this.state.progress[this.state.imgId]); - content = ( - <div> - <img className='loader-image' src='/static/images/load.gif' /> - { percentage > 0 ? - <span className='loader-percent' >{'Previewing ' + percentage + '%'}</span> - : ''} - </div> - ); + if (percentage) { + content = ( + <div> + <img className='loader-image' src='/static/images/load.gif' /> + <span className='loader-percent' >{'Previewing ' + percentage + '%'}</span> + </div> + ); + } else { + content = ( + <div> + <img className='loader-image' src='/static/images/load.gif' /> + </div> + ); + } bgClass = 'black-bg'; } @@ -256,7 +273,7 @@ module.exports = React.createClass({ <div className='modal-close' data-dismiss='modal'></div> {content} <div ref='imageFooter' className='modal-button-bar'> - <span className='pull-left text'>{'Image ' + (this.state.imgId + 1) + ' of ' + this.props.filenames.length}</span> + <span className='pull-left text'>{'File ' + (this.state.imgId + 1) + ' of ' + this.props.filenames.length}</span> <div className='image-links'> {publicLink} <a href={fileUrl} download={name} className='text'>Download</a> |