diff options
Diffstat (limited to 'web')
19 files changed, 1260 insertions, 970 deletions
diff --git a/web/react/.eslintrc b/web/react/.eslintrc index d8b36f6ca..cdf96905b 100644 --- a/web/react/.eslintrc +++ b/web/react/.eslintrc @@ -1,139 +1,160 @@ { - "ecmaFeatures": { - "jsx": true, - "blockBindings": true, - "modules": true - }, - "plugins": [ - "react" - ], - "env": { - "browser": true, - "node": true, - "jquery": true, - "es6": true - }, - "globals": { - "React": false - }, - "rules": { - "comma-dangle": [2, "never"], - "no-cond-assign": [2, "except-parens"], - "no-console": 1, - "no-constant-condition": 1, - "no-debugger": 1, - "no-dupe-args": 2, - "no-dupe-keys": 2, - "no-duplicate-case": 2, - "no-empty": 1, - "no-ex-assign": 1, - "no-extra-semi": 2, - "no-func-assign": 1, - "no-inner-declarations": 0, - "no-invalid-regexp": 2, - "no-irregular-whitespace": 2, - "no-unreachable": 2, - "valid-typeof": 2, - "no-unexpected-multiline": 2, + "extends": "eslint:recommended", + "ecmaFeatures": { + "jsx": true, + "blockBindings": true, + "modules": true, + "classes": true + }, + "plugins": [ + "react" + ], + "env": { + "browser": true, + "node": true, + "jquery": true, + "es6": true + }, + "globals": { + "React": false + }, + "rules": { + "comma-dangle": [2, "never"], + "no-cond-assign": [2, "except-parens"], + "no-console": 1, + "no-constant-condition": 1, + "no-debugger": 1, + "no-dupe-args": 2, + "no-dupe-keys": 2, + "no-duplicate-case": 2, + "no-empty": 1, + "no-ex-assign": 1, + "no-extra-semi": 2, + "no-func-assign": 1, + "no-inner-declarations": 0, + "no-invalid-regexp": 2, + "no-irregular-whitespace": 2, + "no-unreachable": 2, + "valid-typeof": 2, + "no-unexpected-multiline": 2, - "block-scoped-var": 1, - "complexity": [1, 8], - "consistent-return": 2, - "curly": [2, "all"], - "dot-notation": 2, - "dot-location": [2, "object"], - "eqeqeq": [2, "smart"], - "guard-for-in": 1, - "no-alert": 1, - "no-caller": 2, - "no-div-regex": 1, - "no-else-return": 1, - "no-eval": 2, - "no-extend-native": 2, - "no-floating-decimal": 2, - "no-labels": 2, - "no-lone-blocks": 1, - "no-multi-spaces": [2, { "exceptions": { "Property": false } }], - "no-multi-str": 0, - "no-param-reassign": 2, - "no-process-env": 2, - "no-redeclare": 2, - "no-return-assign": [2, "always"], - "no-script-url": 2, - "no-self-compare": 2, - "no-sequences": 2, - "no-throw-literal": 2, - "no-unused-expressions": 2, - "no-void": 2, - "no-warning-comments": 0, - "no-with": 2, - "radix": 2, - "vars-on-top": 0, - "wrap-iife": [2, "outside"], - "yoda": [2, "never", {"exceptRange": false, "onlyEquality": false}], + "block-scoped-var": 1, + "complexity": [1, 8], + "consistent-return": 2, + "curly": [2, "all"], + "dot-notation": 2, + "dot-location": [2, "object"], + "eqeqeq": [2, "smart"], + "guard-for-in": 1, + "no-alert": 1, + "no-array-constructor": 2, + "no-caller": 2, + "no-div-regex": 1, + "no-else-return": 1, + "no-eval": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-floating-decimal": 2, + "no-implied-eval": 2, + "no-iterator": 2, + "no-labels": 2, + "no-lone-blocks": 1, + "no-loop-func": 2, + "no-multi-spaces": [2, { "exceptions": { "Property": false } }], + "no-multi-str": 0, + "no-native-reassign": 2, + "no-new": 2, + "no-new-func": 2, + "no-new-object": 2, + "no-new-wrappers": 2, + "no-octal-escape": 2, + "no-param-reassign": 2, + "no-process-env": 2, + "no-process-exit": 2, + "no-proto": 2, + "no-redeclare": 2, + "no-return-assign": [2, "always"], + "no-script-url": 2, + "no-self-compare": 2, + "no-sequences": 2, + "no-throw-literal": 2, + "no-unused-expressions": 2, + "no-undef-init": 2, + "no-void": 2, + "no-warning-comments": 0, + "no-with": 2, + "radix": 2, + "vars-on-top": 0, + "wrap-iife": [2, "outside"], + "yoda": [2, "never", {"exceptRange": false, "onlyEquality": false}], - "no-undefined": 2, - "no-shadow": [2, {"hoist": "functions"}], - "no-unused-vars": [2, {"vars": "all", "args": "all"}], - "no-use-before-define": [2, "nofunc"], + "no-undefined": 2, + "no-shadow": [2, {"hoist": "functions"}], + "no-shadow-restricted-names": 2, + "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], + "no-use-before-define": [2, "nofunc"], - // Style - "array-bracket-spacing": [2, "never"], - "brace-style": [2, "1tbs", { "allowSingleLine": false }], - "camelcase": [2, {"properties": "always"}], - "comma-spacing": [2, {"before": false, "after": true}], - "comma-style": [2, "last"], - "computed-property-spacing": [2, "never"], - "consistent-this": [2, "self"], - "func-names": 2, - "func-style": [2, "declaration"], - "indent": [2, 4, {"indentSwitchCase": false}], - "key-spacing": [2, {"beforeColon": false, "afterColon": true}], - "lines-around-comment": [2, { "beforeBlockComment": true, "beforeLineComment": true, "allowBlockStart": true, "allowBlockEnd": true }], - "linebreak-style": 2, - "new-cap": 2, - "new-parens": 2, - "no-lonely-if": 2, - "no-mixed-spaces-and-tabs": 2, - "no-multiple-empty-lines": [2, {"max": 1}], - "no-spaced-func": 2, - "no-ternary": 2, - "no-trailing-spaces": [2, { "skipBlankLines": false }], - "no-underscore-dangle": 2, - "no-unneeded-ternary": 2, - "object-curly-spacing": [2, "never"], - "one-var": [2, "never"], - "operator-linebreak": [2, "after"], - "padded-blocks": [2, "never"], - "quote-props": [2, "as-needed"], - "quotes": [2, "single", "avoid-escape"], - "semi-spacing": [2, {"before": false, "after": true}], - "semi": [2, "always"], - "space-after-keywords": [2, "always"], - "space-before-blocks": [2, "always"], - "space-before-function-paren": [2, "never"], - "space-in-parens": [2, "never"], - "space-infix-ops": 2, - "space-return-throw-case": 2, - "space-unary-ops": [2, { "words": true, "nonwords": false }], - "wrap-regex": 2, + // Style + "array-bracket-spacing": [2, "never"], + "brace-style": [2, "1tbs", { "allowSingleLine": false }], + "camelcase": [2, {"properties": "always"}], + "comma-spacing": [2, {"before": false, "after": true}], + "comma-style": [2, "last"], + "computed-property-spacing": [2, "never"], + "consistent-this": [2, "self"], + "func-names": 2, + "func-style": [2, "declaration"], + "indent": [2, 4, {"SwitchCase": 0}], + "key-spacing": [2, {"beforeColon": false, "afterColon": true}], + "lines-around-comment": [2, { "beforeBlockComment": true, "beforeLineComment": true, "allowBlockStart": true, "allowBlockEnd": true }], + "linebreak-style": 2, + "new-cap": 2, + "new-parens": 2, + "no-lonely-if": 2, + "no-mixed-spaces-and-tabs": 2, + "no-multiple-empty-lines": [2, {"max": 1}], + "no-spaced-func": 2, + "no-ternary": 2, + "no-trailing-spaces": [2, { "skipBlankLines": false }], + "no-underscore-dangle": 2, + "no-unneeded-ternary": 2, + "object-curly-spacing": [2, "never"], + "one-var": [2, "never"], + "operator-linebreak": [2, "after"], + "padded-blocks": [2, "never"], + "quote-props": [2, "as-needed"], + "quotes": [2, "single", "avoid-escape"], + "semi-spacing": [2, {"before": false, "after": true}], + "semi": [2, "always"], + "space-after-keywords": [2, "always"], + "space-before-blocks": [2, "always"], + "space-before-function-paren": [2, "never"], + "space-in-parens": [2, "never"], + "space-infix-ops": 2, + "space-return-throw-case": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "wrap-regex": 2, - // React Specific - "react/display-name": [2, { "acceptTranspilerName": true }], - "react/jsx-boolean-value": [2, "always"], - "react/jsx-curly-spacing": [2, "never"], - "react/jsx-no-duplicate-props": [2, { "ignoreCase": false }], - "react/jsx-no-undef": 2, - "react/jsx-quotes": [2, "single", "avoid-escape"], - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, - "react/no-danger": 0, - "react/no-did-mount-set-state": 2, - "react/no-did-update-set-state": 2, - "react/no-multi-comp": 2, - "react/no-unknown-property": 2, - "react/prop-types": 2, - "react/sort-comp": 0, - "react/wrap-multilines": 2 - } + // React Specific + "react/display-name": [2, { "acceptTranspilerName": true }], + "react/jsx-boolean-value": [2, "always"], + "react/jsx-curly-spacing": [2, "never"], + "react/jsx-max-props-per-line": [2, { "maximum": 1 }], + // SOON "react/jsx-indent-props": [2, 4], + "react/jsx-no-duplicate-props": [2, { "ignoreCase": false }], + "react/jsx-no-literals": 0, + "react/jsx-no-undef": 2, + "react/jsx-quotes": [2, "single", "avoid-escape"], + "react/jsx-uses-react": 2, + "react/jsx-uses-vars": 2, + "react/no-danger": 0, + "react/no-did-mount-set-state": 2, + "react/no-did-update-set-state": 2, + "react/no-multi-comp": 2, + "react/no-unknown-property": 2, + "react/prop-types": 2, + "react/sort-comp": 0, + "react/self-closing-comp": 2, + "react/wrap-multilines": 2 + } } diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 901cd228f..11ddbcbd1 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -3,67 +3,102 @@ var ChannelStore = require('../stores/channel_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); +var Client = require('../utils/client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ + displayName: 'MoreDirectChannels', componentDidMount: function() { var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { + $(this.refs.modal.getDOMNode()).on('show.bs.modal', function showModal(e) { var button = e.relatedTarget; - self.setState({ channels: $(button).data('channels') }); + self.setState({channels: $(button).data('channels')}); }); }, getInitialState: function() { - return { channels: [] }; + return {channels: [], loadingDMChannel: -1}; }, render: function() { var self = this; - var directMessageItems = this.state.channels.map(function(channel) { - var badge = ""; - var titleClass = "" + var directMessageItems = this.state.channels.map(function mapActivityToChannel(channel, index) { + var badge = ''; + var titleClass = ''; + var active = ''; + var handleClick = null; if (!channel.fake) { - var active = channel.id === ChannelStore.getCurrentId() ? "active" : ""; + if (channel.id === ChannelStore.getCurrentId()) { + active = 'active'; + } if (channel.unread) { - badge = <span className="badge pull-right small">{channel.unread}</span>; - badgesActive = true; - titleClass = "unread-title" + badge = <span className='badge pull-right small'>{channel.unread}</span>; + titleClass = 'unread-title'; } - return ( - <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel, channel.teammate_username); $(self.refs.modal.getDOMNode()).modal('hide')}}>{badge}{channel.display_name}</a></li> - ); + + handleClick = function clickHandler(e) { + e.preventDefault(); + utils.switchChannel(channel, channel.teammate_username); + $(self.refs.modal.getDOMNode()).modal('hide'); + }; } else { - return ( - <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href={TeamStore.getCurrentTeamUrl() + "/channels/"+channel.name}>{badge}{channel.display_name}</a></li> - ); + // It's a direct message channel that doesn't exist yet so let's create it now + var otherUserId = utils.getUserIdFromChannelName(channel); + + if (self.state.loadingDMChannel === index) { + badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>; + } + + if (self.state.loadingDMChannel === -1) { + handleClick = function clickHandler(e) { + e.preventDefault(); + self.setState({loadingDMChannel: index}); + + Client.createDirectChannel(channel, otherUserId, + function success(data) { + $(self.refs.modal.getDOMNode()).modal('hide'); + self.setState({loadingDMChannel: -1}); + AsyncClient.getChannel(data.id); + utils.switchChannel(data); + }, + function error() { + self.setState({loadingDMChannel: -1}); + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; + } + ); + }; + } } + + return ( + <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}>{badge}{channel.display_name}</a></li> + ); }); return ( - <div className="modal fade" id="more_direct_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_direct_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 Private Messages</h4> + <h4 className='modal-title'>More Private Messages</h4> </div> - <div className="modal-body"> - <ul className="nav nav-pills nav-stacked"> + <div className='modal-body'> + <ul className='nav nav-pills nav-stacked'> {directMessageItems} </ul> </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> </div> - ); } }); diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index b798dc7ca..7bc6a8c01 100644 --- a/web/react/components/post.jsx +++ b/web/react/components/post.jsx @@ -3,7 +3,6 @@ var PostHeader = require('./post_header.jsx'); var PostBody = require('./post_body.jsx'); -var PostInfo = require('./post_info.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var UserStore = require('../stores/user_store.jsx'); @@ -13,6 +12,8 @@ var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; +var PostInfo = require('./post_info.jsx'); + module.exports = React.createClass({ displayName: "Post", handleCommentClick: function(e) { diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index f6ab0ed8a..c5b015cb9 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -6,11 +6,18 @@ var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); -module.exports = React.createClass({ - getInitialState: function() { - return { }; - }, - render: function() { +export default class PostInfo extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + shouldShowComment(state, type, isOwner) { + if (state === Constants.POST_FAILED || state === Constants.POST_LOADING) { + return false; + } + return isOwner || (this.props.allowReply === 'true' && type !== 'Comment'); + } + createDropdown() { var post = this.props.post; var isOwner = UserStore.getCurrentId() === post.user_id; var isAdmin = UserStore.getCurrentUser().roles.indexOf('admin') > -1; @@ -20,54 +27,120 @@ module.exports = React.createClass({ type = 'Comment'; } - var comments = ''; - var lastCommentClass = ' comment-icon__container__hide'; - if (this.props.isLastComment) { - lastCommentClass = ' comment-icon__container__show'; + if (!this.shouldShowComment(post.state, type, isOwner)) { + return ''; } - if (this.props.commentCount >= 1 && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) { - comments = <a href='#' className={'comment-icon__container theme' + lastCommentClass} onClick={this.props.handleCommentClick}><span className='comment-icon' dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} />{this.props.commentCount}</a>; + var dropdownContents = []; + var dataComments = 0; + if (type === 'Post') { + dataComments = this.props.commentCount; } - var showDropdown = isOwner || (this.props.allowReply === 'true' && type !== 'Comment'); - if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) { - showDropdown = false; + if (isOwner) { + dropdownContents.push( + <li role='presentation'> + <a + href='#' + role='menuitem' + data-toggle='modal' + data-target='#edit_post' + data-title={type} + data-message={post.message} + data-postid={post.id} + data-channelid={post.channel_id} + data-comments={dataComments} + > + Edit + </a> + </li> + ); } - var dropdownContents = []; - var dropdown; - if (showDropdown) { - var dataComments = 0; - if (type === 'Post') { - dataComments = this.props.commentCount; - } - - if (isOwner) { - dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Edit</a></li>); - } + if (isOwner || isAdmin) { + dropdownContents.push( + <li role='presentation'> + <a + href='#' + role='menuitem' + data-toggle='modal' + data-target='#delete_post' + data-title={type} + data-postid={post.id} + data-channelid={post.channel_id} + data-comments={dataComments} + > + Delete + </a> + </li> + ); + } - if (isOwner || isAdmin) { - dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Delete</a></li>); - } + if (this.props.allowReply === 'true') { + dropdownContents.push( + <li role='presentation'> + <a + className='reply-link theme' + href='#' + onClick={this.props.handleCommentClick} + > + Reply + </a> + </li> + ); + } - if (this.props.allowReply === 'true') { - dropdownContents.push(<li role='presentation'><a className='reply-link theme' href='#' onClick={this.props.handleCommentClick}>Reply</a></li>); - } + return ( + <div> + <a + href='#' + className='dropdown-toggle theme' + type='button' + data-toggle='dropdown' + aria-expanded='false' + /> + <ul + className='dropdown-menu' + role='menu' + > + {dropdownContents} + </ul> + </div> + ); + } + render() { + var post = this.props.post; + var comments = ''; + var lastCommentClass = ' comment-icon__container__hide'; + if (this.props.isLastComment) { + lastCommentClass = ' comment-icon__container__show'; + } - dropdown = ( - <div> - <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> - <ul className='dropdown-menu' role='menu'> - {dropdownContents} - </ul> - </div> + if (this.props.commentCount >= 1 && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) { + comments = ( + <a + href='#' + className={'comment-icon__container theme' + lastCommentClass} + onClick={this.props.handleCommentClick} + > + <span + className='comment-icon' + dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} + /> + {this.props.commentCount} + </a> ); } + var dropdown = this.createDropdown(); + return ( <ul className='post-header post-info'> - <li className='post-header-col'><time className='post-profile-time'>{utils.displayDateTime(post.create_at)}</time></li> + <li className='post-header-col'> + <time className='post-profile-time'> + {utils.displayDateTime(post.create_at)} + </time> + </li> <li className='post-header-col post-header__reply'> <div className='dropdown'> {dropdown} @@ -77,4 +150,18 @@ module.exports = React.createClass({ </ul> ); } -}); +} + +PostInfo.defaultProps = { + post: null, + commentCount: 0, + isLastComment: false, + allowReply: false +}; +PostInfo.propTypes = { + post: React.PropTypes.object, + commentCount: React.PropTypes.number, + isLastComment: React.PropTypes.bool, + allowReply: React.PropTypes.string, + handleCommentClick: React.PropTypes.func +}; diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index c210853ac..586ac1d37 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -198,12 +198,6 @@ module.exports = React.createClass({ PostStore.storePost(post); } else if (msg.action === 'post_edited') { if (this.state.channel.id === msg.channel_id) { - this.setState({postList: postList}); - } - - PostStore.storePosts(post.channel_id, postList); - } else if (msg.action === 'post_edited') { - if (this.state.channel.id === msg.channel_id) { postList = this.state.postList; if (!(msg.props.post_id in postList.posts)) { return; @@ -324,7 +318,7 @@ module.exports = React.createClass({ var lastViewed = Number.MAX_VALUE; if (ChannelStore.getCurrentMember() != null) { - lastViewed = ChannelStore.getCurrentMember().lastViewed_at; + lastViewed = ChannelStore.getCurrentMember().last_viewed_at; } if (this.state.postList != null) { diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 6735bd6e5..d79505e9e 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -1,8 +1,8 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var UserStore = require('../stores/user_store.jsx'); @@ -11,9 +11,7 @@ var BrowserStore = require('../stores/browser_store.jsx'); 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 ActionTypes = Constants.ActionTypes; function getStateFromStores() { var members = ChannelStore.getAllMembers(); @@ -70,13 +68,14 @@ function getStateFromStores() { tempChannel.status = UserStore.getStatus(teammate.id); tempChannel.last_post_at = 0; tempChannel.total_msg_count = 0; + tempChannel.type = 'D'; readDirectChannels.push(tempChannel); } } // If we don't have MAX_DMS unread channels, sort the read list by last_post_at if (showDirectChannels.length < Constants.MAX_DMS) { - readDirectChannels.sort(function(a, b) { + readDirectChannels.sort(function sortByLastPost(a, b) { // sort by last_post_at first if (a.last_post_at > b.last_post_at) { return -1; @@ -124,6 +123,10 @@ function getStateFromStores() { module.exports = React.createClass({ displayName: 'Sidebar', + propTypes: { + teamType: React.PropTypes.string, + teamDisplayName: React.PropTypes.string + }, componentDidMount: function() { ChannelStore.addChangeListener(this.onChange); UserStore.addChangeListener(this.onChange); @@ -244,17 +247,17 @@ module.exports = React.createClass({ var channel = ChannelStore.getCurrent(); if (channel) { if (channel.type === 'D') { - var teammate_username = utils.getDirectTeammate(channel.id).username; - document.title = teammate_username + ' ' + document.title.substring(document.title.lastIndexOf('-')); + var teammateUsername = utils.getDirectTeammate(channel.id).username; + document.title = teammateUsername + ' ' + document.title.substring(document.title.lastIndexOf('-')); } else { document.title = channel.display_name + ' ' + document.title.substring(document.title.lastIndexOf('-')); } } }, - onScroll: function(e) { + onScroll: function() { this.updateUnreadIndicators(); }, - onResize: function(e) { + onResize: function() { this.updateUnreadIndicators(); }, updateUnreadIndicators: function() { @@ -282,7 +285,10 @@ module.exports = React.createClass({ } }, getInitialState: function() { - return getStateFromStores(); + var newState = getStateFromStores(); + newState.loadingDMChannel = -1; + + return newState; }, render: function() { var members = this.state.members; @@ -294,8 +300,9 @@ module.exports = React.createClass({ this.firstUnreadChannel = null; this.lastUnreadChannel = null; - function createChannelElement(channel) { + function createChannelElement(channel, index) { var channelMember = members[channel.id]; + var msgCount; var linkClass = ''; if (channel.id === activeId) { @@ -304,7 +311,7 @@ module.exports = React.createClass({ var unread = false; if (channelMember) { - var msgCount = channel.total_msg_count - channelMember.msg_count; + msgCount = channel.total_msg_count - channelMember.msg_count; unread = (msgCount > 0 && channelMember.notify_level !== 'quiet') || channelMember.mention_count > 0; } @@ -322,7 +329,7 @@ module.exports = React.createClass({ if (channelMember) { if (channel.type === 'D') { // direct message channels show badges for any number of unread posts - var msgCount = channel.total_msg_count - channelMember.msg_count; + msgCount = channel.total_msg_count - channelMember.msg_count; if (msgCount > 0) { badge = <span className='badge pull-right small'>{msgCount}</span>; badgesActive = true; @@ -332,6 +339,8 @@ module.exports = React.createClass({ badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>; badgesActive = true; } + } else if (self.state.loadingDMChannel === index && channel.type === 'D') { + badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>; } // set up status icon for direct message channels @@ -349,39 +358,59 @@ module.exports = React.createClass({ } // set up click handler to switch channels (or create a new channel for non-existant ones) - var clickHandler = null; + var handleClick = null; var href = '#'; var teamURL = TeamStore.getCurrentTeamUrl(); + if (!channel.fake) { - clickHandler = function(e) { + handleClick = function clickHandler(e) { e.preventDefault(); utils.switchChannel(channel); }; - } - if (channel.fake && teamURL){ - href = teamURL + '/channels/' + channel.name; + } else if (channel.fake && teamURL) { + // It's a direct message channel that doesn't exist yet so let's create it now + var otherUserId = utils.getUserIdFromChannelName(channel); + + if (self.state.loadingDMChannel === -1) { + handleClick = function clickHandler(e) { + e.preventDefault(); + self.setState({loadingDMChannel: index}); + + Client.createDirectChannel(channel, otherUserId, + function success(data) { + self.setState({loadingDMChannel: -1}); + AsyncClient.getChannel(data.id); + utils.switchChannel(data); + }, + function error() { + self.setState({loadingDMChannel: -1}); + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; + } + ); + }; + } } return ( <li key={channel.name} ref={channel.name} className={linkClass}> - <a className={'sidebar-channel ' + titleClass} href={href} onClick={clickHandler}> + <a className={'sidebar-channel ' + titleClass} href={href} onClick={handleClick}> {status} {channel.display_name} {badge} </a> </li> ); - }; + } // create elements for all 3 types of channels var channelItems = this.state.channels.filter( - function(channel) { + function filterPublicChannels(channel) { return channel.type === 'O'; } ).map(createChannelElement); var privateChannelItems = this.state.channels.filter( - function(channel) { + function filterPrivateChannels(channel) { return channel.type === 'P'; } ).map(createChannelElement); @@ -410,7 +439,7 @@ module.exports = React.createClass({ directMessageMore = ( <li> <a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}> - {'More ('+this.state.hideDirectChannels.length+')'} + {'More (' + this.state.hideDirectChannels.length + ')'} </a> </li> ); diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index e27fcd19d..756aae638 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -1,732 +1,22 @@ // 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 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'); var BrowserStore = require('../stores/browser_store.jsx'); -var constants = require('../utils/constants.jsx'); - -WelcomePage = React.createClass({ - submitNext: function (e) { - if (!BrowserStore.isLocalStorageSupported()) { - 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.updateParent(this.props.state); - }, - handleDiffEmail: function (e) { - e.preventDefault(); - this.setState({useDiff: true}); - }, - handleDiffSubmit: function (e) { - e.preventDefault(); - - var state = {useDiff: true, serverError: ''}; - - var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); - if (!email || !utils.isEmail(email)) { - state.emailError = 'Please enter a valid email address'; - this.setState(state); - return; - } 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.emailError = ''; - } - - client.signupTeam(email, - function(data) { - if (data['follow_link']) { - window.location.href = data['follow_link']; - } else { - this.props.state.wizard = 'finished'; - this.props.updateParent(this.props.state); - window.location.href = '/signup_team_confirm/?email=' + encodeURIComponent(team.email); - } - }.bind(this), - function(err) { - this.state.serverError = err.message; - this.setState(this.state); - }.bind(this) - ); - }, - getInitialState: function() { - return {useDiff: false}; - }, - handleKeyPress: function(event) { - if (event.keyCode === 13) { - this.submitNext(event); - } - }, - componentWillMount: function() { - document.addEventListener('keyup', this.handleKeyPress, false); - }, - componentWillUnmount: function() { - document.removeEventListener('keyup', this.handleKeyPress, false); - }, - render: function() { - client.track('signup', 'signup_team_01_welcome'); - - 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> - </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> - </p> - <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> - {storageError} - </div> - <hr /> - <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> - {emailError} - </div> - {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={differentEmailLinkClass}>Use a different email</a> - </div> - ); - } -}); - -TeamDisplayNamePage = React.createClass({ - submitBack: function (e) { - e.preventDefault(); - this.props.state.wizard = 'welcome'; - this.props.updateParent(this.props.state); - }, - submitNext: function (e) { - e.preventDefault(); - - var display_name = this.refs.name.getDOMNode().value.trim(); - if (!display_name) { - this.setState({nameError: 'This field is required'}); - return; - } - - 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 {}; - }, - handleFocus: function(e) { - e.preventDefault(); - - e.currentTarget.select(); - }, - render: function() { - client.track('signup', 'signup_team_02_name'); - - 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) + ' 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 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> - ); - } -}); - -TeamURLPage = React.createClass({ - submitBack: function (e) { - e.preventDefault(); - this.props.state.wizard = 'team_display_name'; - this.props.updateParent(this.props.state); - }, - submitNext: function (e) { - e.preventDefault(); - - var name = this.refs.name.getDOMNode().value.trim(); - if (!name) { - this.setState({nameError: 'This field is required'}); - return; - } - - var cleanedName = utils.cleanUpUrlable(name); - - var urlRegex = /^[a-z0-9]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g; - if (cleanedName !== name || !urlRegex.test(name)) { - this.setState({nameError: 'Must be lowercase alphanumeric characters'}); - return; - } 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 (cleanedName.indexOf(constants.RESERVED_TEAM_NAMES[index]) === 0) { - this.setState({nameError: 'This team name is unavailable'}); - return; - } - } - - client.findTeamByName(name, - function(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.team.name = name; - this.props.updateParent(this.props.state); - } else { - this.state.nameError = 'This URL is unavailable. Please try another.'; - this.setState(this.state); - } - }.bind(this), - function(err) { - this.state.nameError = err.message; - this.setState(this.state); - }.bind(this) - ); - }, - getInitialState: function() { - return {}; - }, - handleFocus: function(e) { - e.preventDefault(); - - e.currentTarget.select(); - }, - render: function() { - $('body').tooltip( {selector: '[data-toggle=tooltip]', trigger: 'hover click'} ); - - client.track('signup', 'signup_team_03_url'); - - 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={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> - <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> - ); - } -}); - -AllowedDomainsPage = React.createClass({ - submitBack: function (e) { - e.preventDefault(); - 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.team.type = 'O'; - this.props.updateParent(this.props.state); - return; - } - - if (this.refs.allow.getDOMNode().checked) { - var name = this.refs.name.getDOMNode().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); - } - }, - getInitialState: function() { - return {}; - }, - render: function() { - 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 />{' 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> - ); - } -}); - -EmailItem = React.createClass({ - getInitialState: function() { - return {}; - }, - getValue: function() { - return this.refs.email.getDOMNode().value.trim(); - }, - validate: function(teamEmail) { - var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); - - if (!email) { - return true; - } - - if (!utils.isEmail(email)) { - this.state.emailError = 'Please enter a valid email address'; - this.setState(this.state); - return false; - } 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.emailError = ''; - this.setState(this.state); - return true; - } - }, - render: function() { - 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={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'; - } else { - this.props.state.wizard = 'team_url'; - } - - this.props.updateParent(this.props.state); - }, - submitNext: function (e) { - e.preventDefault(); - - var valid = true; - - 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) { - this.props.state.invites = emails; - } - } - - 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) { - this.props.state.invites = []; - } - this.props.state.invites.push(''); - this.props.updateParent(this.props.state); - }, - submitSkip: function (e) { - e.preventDefault(); - this.props.state.wizard = 'username'; - this.props.updateParent(this.props.state); - }, - getInitialState: function() { - return { - emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false) - }; - }, - render: function() { - client.track('signup', 'signup_team_05_send_invites'); - - var content = null; - var bottomContent = null; - - 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]} />); - } - } - - 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> - {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> - {bottomContent} - <div className='margin--extra'> - <a href='#' onClick={this.submitBack}>Back to previous step</a> - </div> - </div> - ); - } -}); - -UsernamePage = React.createClass({ - submitBack: function(e) { - e.preventDefault(); - this.props.state.wizard = 'send_invites'; - this.props.updateParent(this.props.state); - }, - submitNext: function(e) { - e.preventDefault(); - - var name = this.refs.name.getDOMNode().value.trim(); - - 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 (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; - } - - this.props.state.wizard = 'password'; - this.props.state.user.username = name; - this.props.updateParent(this.props.state); - }, - getInitialState: function() { - return {}; - }, - render: function() { - client.track('signup', 'signup_team_06_username'); - - 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={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> - <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> - ); - } -}); - -PasswordPage = React.createClass({ - submitBack: function (e) { - e.preventDefault(); - this.props.state.wizard = 'username'; - this.props.updateParent(this.props.state); - }, - submitNext: function (e) { - e.preventDefault(); - - var password = this.refs.password.getDOMNode().value.trim(); - if (!password || password.length < 5) { - this.setState({passwordError: 'Please enter at least 5 characters'}); - return; - } - - this.setState({passwordError: null, serverError: null}); - $('#finish-button').button('loading'); - var teamSignup = JSON.parse(JSON.stringify(this.props.state)); - teamSignup.user.password = password; - teamSignup.user.allow_marketing = true; - delete teamSignup.wizard; - var ctl = this; - - 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.updateParent(props.state, true); - - window.location.href = utils.getWindowLocationOrigin() + '/' + props.state.team.name + '/login?email=' + encodeURIComponent(teamSignup.team.email); - - // client.loginByEmail(teamSignup.team.domain, teamSignup.team.email, teamSignup.user.password, - // function(data) { - // TeamStore.setLastName(teamSignup.team.domain); - // UserStore.setLastEmail(teamSignup.team.email); - // UserStore.setCurrentUser(data); - // window.location.href = '/channels/town-square'; - // }.bind(ctl), - // function(err) { - // this.setState({nameError: err.message}); - // }.bind(ctl) - // ); - }.bind(this), - function(err) { - this.setState({serverError: err.message}); - $('#sign-up-button').button('reset'); - }.bind(this) - ); - }, - getInitialState: function() { - return {}; - }, - render: function() { - client.track('signup', 'signup_team_07_password'); - - 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={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> - <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> - </div> - ); - } -}); module.exports = React.createClass({ + displayName: 'SignupTeamComplete', + propTypes: { + hash: React.PropTypes.string, + email: React.PropTypes.string, + data: React.PropTypes.string + }, updateParent: function(state, skipSet) { BrowserStore.setGlobalItem(this.props.hash, state); diff --git a/web/react/components/team_signup_allowed_domains_page.jsx b/web/react/components/team_signup_allowed_domains_page.jsx new file mode 100644 index 000000000..90c7ff668 --- /dev/null +++ b/web/react/components/team_signup_allowed_domains_page.jsx @@ -0,0 +1,98 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var client = require('../utils/client.jsx'); + +module.exports = React.createClass({ + displayName: 'TeamSignupAllowedDomainsPage', + propTypes: { + state: React.PropTypes.object, + updateParent: React.PropTypes.func + }, + submitBack: function(e) { + e.preventDefault(); + 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.team.type = 'O'; + this.props.updateParent(this.props.state); + return; + } + + if (this.refs.allow.getDOMNode().checked) { + var name = this.refs.name.getDOMNode().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); + } + }, + getInitialState: function() { + return {}; + }, + render: function() { + 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> + ); + } +}); diff --git a/web/react/components/team_signup_display_name_page.jsx b/web/react/components/team_signup_display_name_page.jsx new file mode 100644 index 000000000..b5e93de1b --- /dev/null +++ b/web/react/components/team_signup_display_name_page.jsx @@ -0,0 +1,72 @@ +// 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'); + +module.exports = React.createClass({ + displayName: 'TeamSignupDisplayNamePage', + propTypes: { + state: React.PropTypes.object, + updateParent: React.PropTypes.func + }, + submitBack: function(e) { + e.preventDefault(); + this.props.state.wizard = 'welcome'; + this.props.updateParent(this.props.state); + }, + submitNext: function(e) { + e.preventDefault(); + + var displayName = this.refs.name.getDOMNode().value.trim(); + if (!displayName) { + this.setState({nameError: 'This field is required'}); + return; + } + + this.props.state.wizard = 'team_url'; + this.props.state.team.display_name = displayName; + this.props.state.team.name = utils.cleanUpUrlable(displayName); + this.props.updateParent(this.props.state); + }, + getInitialState: function() { + return {}; + }, + handleFocus: function(e) { + e.preventDefault(); + e.currentTarget.select(); + }, + render: function() { + client.track('signup', 'signup_team_02_name'); + + 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) + ' 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 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> + ); + } +}); diff --git a/web/react/components/team_signup_email_item.jsx b/web/react/components/team_signup_email_item.jsx new file mode 100644 index 000000000..11cd17e74 --- /dev/null +++ b/web/react/components/team_signup_email_item.jsx @@ -0,0 +1,53 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var utils = require('../utils/utils.jsx'); + +module.exports = React.createClass({ + displayName: 'TeamSignupEmailItem', + propTypes: { + focus: React.PropTypes.bool, + email: React.PropTypes.string + }, + getInitialState: function() { + return {}; + }, + getValue: function() { + return this.refs.email.getDOMNode().value.trim(); + }, + validate: function(teamEmail) { + var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); + + if (!email) { + return true; + } + + if (!utils.isEmail(email)) { + this.state.emailError = 'Please enter a valid email address'; + this.setState(this.state); + return false; + } else if (email === teamEmail) { + this.state.emailError = 'Please use a different email than the one used at signup'; + this.setState(this.state); + return false; + } + this.state.emailError = ''; + this.setState(this.state); + return true; + }, + render: function() { + 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={emailDivClass}> + <input autoFocus={this.props.focus} type='email' ref='email' className='form-control' placeholder='Email Address' defaultValue={this.props.email} maxLength='128' /> + {emailError} + </div> + ); + } +}); diff --git a/web/react/components/team_signup_password_page.jsx b/web/react/components/team_signup_password_page.jsx new file mode 100644 index 000000000..e4f35f100 --- /dev/null +++ b/web/react/components/team_signup_password_page.jsx @@ -0,0 +1,116 @@ +// 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'); + +module.exports = React.createClass({ + displayName: 'TeamSignupPasswordPage', + propTypes: { + state: React.PropTypes.object, + updateParent: React.PropTypes.func + }, + submitBack: function(e) { + e.preventDefault(); + this.props.state.wizard = 'username'; + this.props.updateParent(this.props.state); + }, + submitNext: function(e) { + e.preventDefault(); + + var password = this.refs.password.getDOMNode().value.trim(); + if (!password || password.length < 5) { + this.setState({passwordError: 'Please enter at least 5 characters'}); + return; + } + + this.setState({passwordError: null, serverError: null}); + $('#finish-button').button('loading'); + var teamSignup = JSON.parse(JSON.stringify(this.props.state)); + teamSignup.user.password = password; + teamSignup.user.allow_marketing = true; + delete teamSignup.wizard; + + // var ctl = this; + + client.createTeamFromSignup(teamSignup, + function success() { + client.track('signup', 'signup_team_08_complete'); + + var props = this.props; + + $('#sign-up-button').button('reset'); + props.state.wizard = 'finished'; + props.updateParent(props.state, true); + + window.location.href = utils.getWindowLocationOrigin() + '/' + props.state.team.name + '/login?email=' + encodeURIComponent(teamSignup.team.email); + + // client.loginByEmail(teamSignup.team.domain, teamSignup.team.email, teamSignup.user.password, + // function(data) { + // TeamStore.setLastName(teamSignup.team.domain); + // UserStore.setLastEmail(teamSignup.team.email); + // UserStore.setCurrentUser(data); + // window.location.href = '/channels/town-square'; + // }.bind(ctl), + // function(err) { + // this.setState({nameError: err.message}); + // }.bind(ctl) + // ); + }.bind(this), + function error(err) { + this.setState({serverError: err.message}); + $('#sign-up-button').button('reset'); + }.bind(this) + ); + }, + getInitialState: function() { + return {}; + }, + render: function() { + client.track('signup', 'signup_team_07_password'); + + 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={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> + <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> + </div> + ); + } +}); diff --git a/web/react/components/team_signup_send_invites_page.jsx b/web/react/components/team_signup_send_invites_page.jsx new file mode 100644 index 000000000..4bc03798b --- /dev/null +++ b/web/react/components/team_signup_send_invites_page.jsx @@ -0,0 +1,121 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// 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'); + +module.exports = React.createClass({ + displayName: 'TeamSignupSendInivtesPage', + propTypes: { + state: React.PropTypes.object, + updateParent: React.PropTypes.func + }, + submitBack: function(e) { + e.preventDefault(); + + if (config.AllowSignupDomainsWizard) { + this.props.state.wizard = 'allowed_domains'; + } else { + this.props.state.wizard = 'team_url'; + } + + this.props.updateParent(this.props.state); + }, + submitNext: function(e) { + e.preventDefault(); + + var valid = true; + + 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) { + this.props.state.invites = emails; + } + } + + 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) { + this.props.state.invites = []; + } + this.props.state.invites.push(''); + this.props.updateParent(this.props.state); + }, + submitSkip: function(e) { + e.preventDefault(); + this.props.state.wizard = 'username'; + this.props.updateParent(this.props.state); + }, + getInitialState: function() { + return { + emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false) + }; + }, + render: function() { + client.track('signup', 'signup_team_05_send_invites'); + + var content = null; + var bottomContent = null; + + 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]} />); + } + } + + 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 ' + strings.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> + {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> + {bottomContent} + <div className='margin--extra'> + <a href='#' onClick={this.submitBack}>Back to previous step</a> + </div> + </div> + ); + } +}); diff --git a/web/react/components/team_signup_url_page.jsx b/web/react/components/team_signup_url_page.jsx new file mode 100644 index 000000000..beef725e2 --- /dev/null +++ b/web/react/components/team_signup_url_page.jsx @@ -0,0 +1,119 @@ +// 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 constants = require('../utils/constants.jsx'); + +module.exports = React.createClass({ + displayName: 'TeamSignupURLPage', + propTypes: { + state: React.PropTypes.object, + updateParent: React.PropTypes.func + }, + submitBack: function(e) { + e.preventDefault(); + this.props.state.wizard = 'team_display_name'; + this.props.updateParent(this.props.state); + }, + submitNext: function(e) { + e.preventDefault(); + + var name = this.refs.name.getDOMNode().value.trim(); + if (!name) { + this.setState({nameError: 'This field is required'}); + return; + } + + var cleanedName = utils.cleanUpUrlable(name); + + var urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g; + if (cleanedName !== name || !urlRegex.test(name)) { + this.setState({nameError: "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash."}); + return; + } 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 (cleanedName.indexOf(constants.RESERVED_TEAM_NAMES[index]) === 0) { + this.setState({nameError: 'This team name is unavailable'}); + return; + } + } + + 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.team.name = name; + this.props.updateParent(this.props.state); + } else { + this.state.nameError = 'This URL is unavailable. Please try another.'; + this.setState(this.state); + } + }.bind(this), + function error(err) { + this.state.nameError = err.message; + this.setState(this.state); + }.bind(this) + ); + }, + getInitialState: function() { + return {}; + }, + handleFocus: function(e) { + e.preventDefault(); + + e.currentTarget.select(); + }, + render: function() { + $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); + + client.track('signup', 'signup_team_03_url'); + + 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={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> + <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> + ); + } +}); diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx new file mode 100644 index 000000000..56882e6a1 --- /dev/null +++ b/web/react/components/team_signup_username_page.jsx @@ -0,0 +1,75 @@ +// 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'); + +module.exports = React.createClass({ + displayName: 'TeamSignupUsernamePage', + propTypes: { + state: React.PropTypes.object, + updateParent: React.PropTypes.func + }, + submitBack: function(e) { + e.preventDefault(); + this.props.state.wizard = 'send_invites'; + this.props.updateParent(this.props.state); + }, + submitNext: function(e) { + e.preventDefault(); + + var name = this.refs.name.getDOMNode().value.trim(); + + 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 (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; + } + + this.props.state.wizard = 'password'; + this.props.state.user.username = name; + this.props.updateParent(this.props.state); + }, + getInitialState: function() { + return {}; + }, + render: function() { + client.track('signup', 'signup_team_06_username'); + + 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={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> + <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> + ); + } +}); diff --git a/web/react/components/team_signup_welcome_page.jsx b/web/react/components/team_signup_welcome_page.jsx new file mode 100644 index 000000000..f0c680bd8 --- /dev/null +++ b/web/react/components/team_signup_welcome_page.jsx @@ -0,0 +1,144 @@ +// 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 BrowserStore = require('../stores/browser_store.jsx'); + +module.exports = React.createClass({ + displayName: 'TeamSignupWelcomePage', + propTypes: { + state: React.PropTypes.object, + updateParent: React.PropTypes.func + }, + submitNext: function(e) { + if (!BrowserStore.isLocalStorageSupported()) { + 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.updateParent(this.props.state); + }, + handleDiffEmail: function(e) { + e.preventDefault(); + this.setState({useDiff: true}); + }, + handleDiffSubmit: function(e) { + e.preventDefault(); + + var state = {useDiff: true, serverError: ''}; + + var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); + if (!email || !utils.isEmail(email)) { + state.emailError = 'Please enter a valid email address'; + this.setState(state); + return; + } 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; + } + state.emailError = ''; + + client.signupTeam(email, + function success(data) { + if (data.follow_link) { + window.location.href = data.follow_link; + } else { + this.props.state.wizard = 'finished'; + this.props.updateParent(this.props.state); + window.location.href = '/signup_team_confirm/?email=' + encodeURIComponent(email); + } + }.bind(this), + function error(err) { + this.state.serverError = err.message; + this.setState(this.state); + }.bind(this) + ); + }, + getInitialState: function() { + return {useDiff: false}; + }, + handleKeyPress: function(event) { + if (event.keyCode === 13) { + this.submitNext(event); + } + }, + componentWillMount: function() { + document.addEventListener('keyup', this.handleKeyPress, false); + }, + componentWillUnmount: function() { + document.removeEventListener('keyup', this.handleKeyPress, false); + }, + render: function() { + client.track('signup', 'signup_team_01_welcome'); + + 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> + </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> + </p> + <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> + {storageError} + </div> + <hr /> + <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> + {emailError} + </div> + {serverError} + <button className='btn btn-md btn-primary' type='button' onClick={this.handleDiffSubmit}>Use this instead</button> + </div> + <a href='#' onClick={this.handleDiffEmail} className={differentEmailLinkClass}>Use a different email</a> + </div> + ); + } +}); diff --git a/web/react/package.json b/web/react/package.json index 2bba29e2b..c930c4db6 100644 --- a/web/react/package.json +++ b/web/react/package.json @@ -3,22 +3,21 @@ "version": "0.0.1", "private": true, "dependencies": { - "flux": "^2.0.0", - "keymirror": "~0.1.0", - "object-assign": "^1.0.0", - "react": "^0.12.0", - "autolinker": "^0.15.2", + "autolinker": "^0.18.1", + "flux": "^2.1.1", + "keymirror": "^0.1.1", + "object-assign": "^3.0.0", + "react": "^0.13.3", "react-zeroclipboard-mixin": "^0.1.0" }, "devDependencies": { - "browserify": "^6.2.0", - "envify": "^3.0.0", - "jest-cli": "~0.1.17", - "reactify": "^0.15.2", - "uglify-js": "~2.4.15", - "watchify": "^2.1.1", - "eslint": "^0.24.1", - "eslint-plugin-react": "^3.0.0" + "browserify": "^11.0.1", + "envify": "^3.4.0", + "babelify": "^6.1.3", + "uglify-js": "^2.4.24", + "watchify": "^3.3.1", + "eslint": "^1.1.0", + "eslint-plugin-react": "^3.2.3" }, "scripts": { "start": "watchify --extension=jsx -o ../static/js/bundle.js -v -d ./**/*.jsx", @@ -28,7 +27,7 @@ }, "browserify": { "transform": [ - "reactify", + ["babelify", {"blacklist": ["strict"]}], "envify" ] }, diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index ce044457a..da0b74081 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -438,6 +438,23 @@ module.exports.createChannel = function(channel, success, error) { module.exports.track('api', 'api_channels_create', channel.type, 'name', channel.name); }; +module.exports.createDirectChannel = function(channel, userId, success, error) { + $.ajax({ + url: '/api/v1/channels/create_direct', + dataType: 'json', + contentType: 'application/json', + type: 'POST', + data: JSON.stringify({user_id: userId}), + success: success, + error: function(xhr, status, err) { + var e = handleError('createDirectChannel', xhr, status, err); + error(e); + } + }); + + module.exports.track('api', 'api_channels_create_direct', channel.type, 'name', channel.name); +}; + module.exports.updateChannel = function(channel, success, error) { $.ajax({ url: "/api/v1/channels/update", diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 3f7d204e4..618cc1557 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -968,4 +968,17 @@ module.exports.generateId = function() { module.exports.isBrowserFirefox = function() { return navigator && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf('firefox') > -1; -} +}; + +// Used to get the id of the other user from a DM channel +module.exports.getUserIdFromChannelName = function(channel) { + var ids = channel.name.split('__'); + var otherUserId = ''; + if (ids[0] === UserStore.getCurrentId()) { + otherUserId = ids[1]; + } else { + otherUserId = ids[0]; + } + + return otherUserId; +}; diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index bf2a1de50..6d9f2ad8b 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -122,3 +122,9 @@ } } } + +.channel-loading-gif { + height:15px; + width:15px; + margin-top:2px; +} |