diff options
| -rw-r--r-- | Makefile | 12 | ||||
| -rw-r--r-- | README.md | 100 | ||||
| -rw-r--r-- | docker/0.6/config_docker.json | 2 | ||||
| -rw-r--r-- | docker/dev/config_docker.json | 16 | ||||
| -rw-r--r-- | web/react/components/delete_channel_modal.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/delete_post_modal.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/edit_channel_modal.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/edit_post_modal.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/get_link_modal.jsx | 49 | ||||
| -rw-r--r-- | web/react/components/invite_member_modal.jsx | 270 | ||||
| -rw-r--r-- | web/react/components/mention_list.jsx | 180 | ||||
| -rw-r--r-- | web/react/components/new_channel.jsx | 134 | ||||
| -rw-r--r-- | web/react/components/signup_team_complete.jsx | 6 | ||||
| -rw-r--r-- | web/react/components/team_settings_modal.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/user_settings_modal.jsx | 2 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_files.scss | 7 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_get-link.scss | 6 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_signup.scss | 22 | ||||
| -rw-r--r-- | web/sass-files/sass/styles.scss | 1 | ||||
| -rw-r--r-- | web/templates/signup_team.html | 2 |
20 files changed, 470 insertions, 349 deletions
@@ -69,6 +69,12 @@ travis: mkdir -p $(DIST_PATH)/api cp -RL api/templates $(DIST_PATH)/api + cp APACHE-2.0.txt $(DIST_PATH) + cp GNU-AGPL-3.0.txt $(DIST_PATH) + cp LICENSE.txt $(DIST_PATH) + cp NOTICE.txt $(DIST_PATH) + cp README.md $(DIST_PATH) + mv $(DIST_PATH)/web/static/js/bundle.min.js $(DIST_PATH)/web/static/js/bundle-$(BUILD_NUMBER).min.js @sed -i'.bak' 's|react-with-addons-0.13.1.js|react-with-addons-0.13.1.min.js|g' $(DIST_PATH)/web/templates/head.html @@ -242,6 +248,12 @@ dist: install mkdir -p $(DIST_PATH)/api cp -RL api/templates $(DIST_PATH)/api + cp APACHE-2.0.txt $(DIST_PATH) + cp GNU-AGPL-3.0.txt $(DIST_PATH) + cp LICENSE.txt $(DIST_PATH) + cp NOTICE.txt $(DIST_PATH) + cp README.md $(DIST_PATH) + mv $(DIST_PATH)/web/static/js/bundle.min.js $(DIST_PATH)/web/static/js/bundle-$(BUILD_NUMBER).min.js @sed -i'.bak' 's|react-with-addons-0.13.1.js|react-with-addons-0.13.1.min.js|g' $(DIST_PATH)/web/templates/head.html @@ -1,47 +1,47 @@ -**Mattermost Alpha** -**Team Communication Service** +**Mattermost Alpha** +**Team Communication Service** **Development Build** About Mattermost ================ -Mattermost is a team communication service. It brings team messaging and file sharing into one place, accessible across PCs and phones, with archiving and search. - -We built Mattermost to help teams focus on what matters most to them. It works for us, we hope it works for you too. +Mattermost is an open-source team communication service. It brings team messaging and file sharing into one place, accessible across PCs and phones, with archiving and search. Learn More ========== -<ul> -<li/>Ask the core team anything at: http://forum.mattermost.org</li> -<li/>Share feature requests and upvotes: http://www.mattermost.org/feature-requests/</li> -<li/>File bugs: http://www.mattermost.org/filing-issues/</li> -<li/>Make a pull request: http://www.mattermost.org/contribute-to-mattermost/</li> -</ul> +- Ask the core team anything at: http://forum.mattermost.org +- Share feature requests and upvotes: http://www.mattermost.org/feature-requests/ +- File bugs: http://www.mattermost.org/filing-issues/ +- Make a pull request: http://www.mattermost.org/contribute-to-mattermost/ + Installing Mattermost ===================== -You're installing "Mattermost Alpha", a pre-released version intended for an early look at what we're building. While SpinPunch runs this version internally, it's not recommended for production deployments since we can't guarantee API stability or backwards compatibility until our production release. +You're installing "Mattermost Alpha", a pre-released version providing an early look at what we're building. While the core team runs this version internally, it's not recommended for production since we can't guarantee API stability or backwards compatibility. That said, any issues at all, please let us know on the Mattermost forum at: http://forum.mattermost.org +Notes: +- For Alpha, Docker is intentionally setup as a single container, since production deployment not yet recommended. + Local Machine Setup (Docker) ----------------------------- ### Mac OSX ### -1. Follow the instructions at http://docs.docker.com/installation/mac/ - 1. Use the Boot2Docker command-line utility +1. Follow the instructions at: http://docs.docker.com/installation/mac/ + 1. Use the Boot2Docker command-line utility. 2. If you do command-line setup use: `boot2docker init eval “$(boot2docker shellinit)”` -2. Get your Docker IP address with `boot2docker ip` -3. Add a line to your /etc/hosts that goes `<Docker IP> dockerhost` -4. Run `boot2docker shellinit` and copy the export statements to your ~/.bash\_profile -5. Run `docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium`. -6. When docker is done fetching the image, open http://dockerhost:8065/ in your browser +2. Get your Docker IP address with: `boot2docker ip` +3. Add a line to your /etc/hosts that goes: `<Docker IP> dockerhost` +4. Run: `boot2docker shellinit` and copy the export statements to your ~/.bash\_profile. +5. Run: `docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform` +6. When docker is done fetching the image, open http://dockerhost:8065/ in your browser. ### Ubuntu ### -1. Follow the instructions at https://docs.docker.com/installation/ubuntulinux/ or use the summary below. +1. Follow the instructions at https://docs.docker.com/installation/ubuntulinux/ or use the summary below: ``` bash sudo apt-get update @@ -52,8 +52,13 @@ Local Machine Setup (Docker) newgrp docker ``` -2. Run `docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium` -3. When docker is done fetching the image, open http://localhost:8065/ in your browser +2. Start docker container: + + ``` bash + docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform + ``` + +3. When docker is done fetching the image, open http://localhost:8065/ in your browser. ### Arch ### 1. Install docker using the following commands: @@ -69,39 +74,36 @@ Local Machine Setup (Docker) 2. Start docker container: ``` bash - docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium + docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform ``` 3. When docker is done fetching the image, open http://localhost:8065/ in your browser. -### Notes ### -If your ISP blocks port 25 then you may install locally but email will not be sent. +### Additional Notes ### +- If you want to work with the latest bits in the repository (i.e. not a stable release) you can run the cmd: +`docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:dev` -If you want to work with the latest bits in the repo you can run the cmd -`docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:latest` +- You can update to the latest bits by running: +`docker pull mattermost/platform:dev` -You can update to the latest bits by running -`docker pull mattermost/platform:latest` +- If you wish to remove mattermost-dev use: + `docker stop mattermost-dev` + `docker rm -v mattermost-dev` -If you wish to remove mattermost-dev use the following commands - -1. `docker stop mattermost-dev` -2. `docker rm -v mattermost-dev` - -If you wish to gain access to the container use the following commands -1. `docker exec -ti mattermost-dev /bin/bash` +- If you wish to gain access to a shell on the container use: + `docker exec -ti mattermost-dev /bin/bash` AWS Elastic Beanstalk Setup (Docker) ------------------------------------ -1. Create a new elastic beanstalk docker application using the Dockerrun.aws.json file provided. - 1. From the AWS console select Elastic Beanstalk +1. Create a new elastic beanstalk docker application using the [Dockerrun.aws.json](docker/0.6/Dockerrun.aws.json) file provided. + 1. From the AWS console select Elastic Beanstalk. 2. Select "Create New Application" from the top right. - 3. Name the application and press next + 3. Name the application and press next. 4. Select "Create a web server" environment. - 5. If asked, select create and IAM role and instance profile and press next. - 6. For predefined configuration select docker. For environment type select single instance. - 7. For application source, select upload your own and upload Dockerrun.aws.json from docker/Dockerrun.aws.json. Everything else may be left at default. + 5. If asked, select create an IAM role and instance profile and press next. + 6. For predefined configuration select under Generic: Docker. For environment type select single instance. + 7. For application source, select upload your own and upload Dockerrun.aws.json from [docker/0.6/Dockerrun.aws.json](docker/0.6/Dockerrun.aws.json). Everything else may be left at default. 8. Select an environment name, this is how you will refer to your environment. Make sure the URL is available then press next. 9. The options on the additional resources page may be left at default unless you wish to change them. Press Next. 10. On the configuration details place. Select an instance type of t2.small or larger. @@ -111,22 +113,24 @@ AWS Elastic Beanstalk Setup (Docker) 4. Try it out! 14. Wait for beanstalk to update the environment. - 15. Try it out by entering the domain of the form \*.elasticbeanstalk.com found at the top of the dashboard into your browser. You can also map your own domain if you wish. + 15. Try it out by entering the domain of the form \*.elasticbeanstalk.com found at the top of the dashboard into your browser. You can also map your own domain if you wish. Configuration Settings ---------------------- -There are a few configuration settings you might want to adjust when setting up your instance of Mattermost. You can edit them in ./config/config.json or ./config/config/config_docker.json if you're running a docker instance. +There are a few configuration settings you might want to adjust when setting up your instance of Mattermost. You can edit them in [config/config.json](config/config.json) or [docker/0.6/config_docker.json](docker/0.6/config_docker.json) if you're running a docker instance. -* *EmailSettings*:*ByPassEmail* - If this is set to true, then users on the system will not need to verify their email addresses when signing up. In addition, no emails will ever be sent. -* *ServiceSettings*:*UseLocalStorage* - If this is set to true, then your Mattermost server will store uploaded files in the storage directory specified by *StorageDirectory*. *StorageDirectory* must be set if *UseLocalStorage* is set to true. -* *ServiceSettings*:*StorageDirectory* - The file path where files will be stored locally if *UseLocalStorage* is set to true. The operating system user that is running the Mattermost application must have read and write privileges to this directory. +* *EmailSettings*:*ByPassEmail* - If this is set to true, then users on the system will not need to verify their email addresses when signing up. In addition, no emails will ever be sent. +* *ServiceSettings*:*UseLocalStorage* - If this is set to true, then your Mattermost server will store uploaded files in the storage directory specified by *StorageDirectory*. *StorageDirectory* must be set if *UseLocalStorage* is set to true. +* *ServiceSettings*:*StorageDirectory* - The file path where files will be stored locally if *UseLocalStorage* is set to true. The operating system user that is running the Mattermost application must have read and write privileges to this directory. * *AWSSettings*:*S3*\* - If *UseLocalStorage* is set to false, and the S3 settings are configured here, then Mattermost will store files in the provided S3 bucket. Contributing ------------ -To contribute to this open source project please review the Mattermost Contribution Guidelines at http://www.mattermost.org/contribute-to-mattermost/. +To contribute to this open source project please review the [Mattermost Contribution Guidelines]( http://www.mattermost.org/contribute-to-mattermost/). + +To setup your machine for development of mattermost see: [Developer Machine Setup](scripts/README_DEV.md) License ------- diff --git a/docker/0.6/config_docker.json b/docker/0.6/config_docker.json index fc3d2132a..128dc1274 100644 --- a/docker/0.6/config_docker.json +++ b/docker/0.6/config_docker.json @@ -86,7 +86,7 @@ "TeamSettings": { "MaxUsersPerTeam": 150, "AllowPublicLink": true, - "AllowValet": false, + "AllowValetDefault": false, "TermsLink": "/static/help/configure_links.html", "PrivacyLink": "/static/help/configure_links.html", "AboutLink": "/static/help/configure_links.html", diff --git a/docker/dev/config_docker.json b/docker/dev/config_docker.json index f6b1e7b79..cd612c7fe 100644 --- a/docker/dev/config_docker.json +++ b/docker/dev/config_docker.json @@ -21,7 +21,8 @@ "ResetSalt": "IPxFzSfnDFsNsRafZxz8NaYqFKhf9y2t", "AnalyticsUrl": "", "UseLocalStorage": true, - "StorageDirectory": "/mattermost/data/" + "StorageDirectory": "/mattermost/data/", + "AllowedLoginAttempts": 10 }, "SSOSettings": { "gitlab": { @@ -49,8 +50,8 @@ "S3Region": "" }, "ImageSettings": { - "ThumbnailWidth": 200, - "ThumbnailHeight": 0, + "ThumbnailWidth": 120, + "ThumbnailHeight": 100, "PreviewWidth": 1024, "PreviewHeight": 0, "ProfileWidth": 128, @@ -69,6 +70,13 @@ "ApplePushCertPublic": "", "ApplePushCertPrivate": "" }, + "RateLimitSettings": { + "UseRateLimiter": true, + "PerSec": 10, + "MemoryStoreSize": 10000, + "VaryByRemoteAddr": true, + "VaryByHeader": "" + }, "PrivacySettings": { "ShowEmailAddress": true, "ShowPhoneNumber": true, @@ -78,7 +86,7 @@ "TeamSettings": { "MaxUsersPerTeam": 150, "AllowPublicLink": true, - "AllowValet": false, + "AllowValetDefault": false, "TermsLink": "/static/help/configure_links.html", "PrivacyLink": "/static/help/configure_links.html", "AboutLink": "/static/help/configure_links.html", diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx index 64ceec450..589737271 100644 --- a/web/react/components/delete_channel_modal.jsx +++ b/web/react/components/delete_channel_modal.jsx @@ -34,7 +34,7 @@ module.exports = React.createClass({ var channelType = ChannelStore.getCurrent() && ChannelStore.getCurrent().type === 'P' ? "private group" : "channel" return ( - <div className="modal fade" ref="modal" id="delete_channel" role="dialog" aria-hidden="true"> + <div className="modal fade" ref="modal" id="delete_channel" role="dialog" tabIndex="-1" aria-hidden="true"> <div className="modal-dialog"> <div className="modal-content"> <div className="modal-header"> diff --git a/web/react/components/delete_post_modal.jsx b/web/react/components/delete_post_modal.jsx index f0cb809af..1b6a7e162 100644 --- a/web/react/components/delete_post_modal.jsx +++ b/web/react/components/delete_post_modal.jsx @@ -82,7 +82,7 @@ module.exports = React.createClass({ var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null; return ( - <div className="modal fade" id="delete_post" ref="modal" role="dialog" aria-hidden="true"> + <div className="modal fade" id="delete_post" ref="modal" role="dialog" tabIndex="-1" aria-hidden="true"> <div className="modal-dialog modal-push-down"> <div className="modal-content"> <div className="modal-header"> diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx index 1b0cc185f..06d7fc3e8 100644 --- a/web/react/components/edit_channel_modal.jsx +++ b/web/react/components/edit_channel_modal.jsx @@ -51,7 +51,7 @@ module.exports = React.createClass({ var server_error = this.state.server_error ? <div className='form-group has-error'><br/><label className='control-label'>{ this.state.server_error }</label></div> : null; return ( - <div className="modal fade" ref="modal" id="edit_channel" role="dialog" aria-hidden="true"> + <div className="modal fade" ref="modal" id="edit_channel" role="dialog" tabIndex="-1" aria-hidden="true"> <div className="modal-dialog"> <div className="modal-content"> <div className="modal-header"> diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx index 21b75bb6e..064d3fa94 100644 --- a/web/react/components/edit_post_modal.jsx +++ b/web/react/components/edit_post_modal.jsx @@ -71,7 +71,7 @@ module.exports = React.createClass({ var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null; return ( - <div className="modal fade edit-modal" ref="modal" id="edit_post" role="dialog" aria-hidden="true"> + <div className="modal fade edit-modal" ref="modal" id="edit_post" role="dialog" tabIndex="-1" aria-hidden="true"> <div className="modal-dialog modal-push-down"> <div className="modal-content"> <div className="modal-header"> diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index af5314e64..ea22ad0f3 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -10,46 +10,57 @@ ZeroClipboardMixin.ZeroClipboard.config({ module.exports = React.createClass({ zeroclipboardElementsSelector: '[data-copy-btn]', - mixins: [ ZeroClipboardMixin ], + mixins: [ZeroClipboardMixin], componentDidMount: function() { var self = this; - if(this.refs.modal) { + if (this.refs.modal) { $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { var button = e.relatedTarget; - self.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value') }); + self.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value')}); + }); + $(this.refs.modal.getDOMNode()).on('hide.bs.modal', function() { + self.setState({copiedLink: false}); }); } }, getInitialState: function() { - return { }; + return {copiedLink: false}; + }, + handleClick: function() { + this.setState({copiedLink: true}); }, render: function() { - var currentUser = UserStore.getCurrentUser() + var currentUser = UserStore.getCurrentUser(); + var copyLinkConfirm = null; + + if (this.state.copiedLink) { + copyLinkConfirm = <p className='copy-link-confirm'>Link copied to clipboard.</p>; + } if (currentUser != null) { return ( - <div className="modal fade" ref="modal" id="get_link" 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" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" id="myModalLabel">{this.state.title} Link</h4> + <div className='modal fade' ref='modal' id='get_link' 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' aria-label='Close'><span aria-hidden='true'>×</span></button> + <h4 className='modal-title' id='myModalLabel'>{this.state.title} Link</h4> </div> - <div className="modal-body"> - <p>{"The link below is used for open " + strings.TeamPlural + " or if you allowed your " + strings.Team + " members to sign up using their " + strings.Company + " email addresses."} + <div className='modal-body'> + <p>{'The link below is used for open ' + strings.TeamPlural + ' or if you allowed your ' + strings.Team + ' members to sign up using their ' + strings.Company + ' email addresses.'} </p> - <textarea className="form-control no-resize" readOnly="true" value={this.state.value}></textarea> + <textarea className='form-control no-resize' readOnly='true' value={this.state.value}></textarea> </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> - <button data-copy-btn type="button" className="btn btn-primary pull-left" data-clipboard-text={this.state.value}>Copy Link</button> + <div className='modal-footer'> + <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button> + <button data-copy-btn='true' type='button' className='btn btn-primary pull-left' onClick={this.handleClick} data-clipboard-text={this.state.value}>Copy Link</button> + {copyLinkConfirm} </div> </div> </div> </div> ); - } else { - return <div/>; } + return <div/>; } }); diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index fed96b50a..3eca79bae 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -2,7 +2,7 @@ // See License.txt for license information. var utils = require('../utils/utils.jsx'); -var Client =require('../utils/client.jsx'); +var Client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); var ConfirmModal = require('./confirm_modal.jsx'); @@ -15,20 +15,19 @@ module.exports = React.createClass({ return; } - var not_empty = false; - for (var i = 0; i < self.state.invite_ids.length; i++) { - var index = self.state.invite_ids[i]; - if (self.refs["email"+index].getDOMNode().value.trim() !== '') { - not_empty = true; + var notEmpty = false; + for (var i = 0; i < self.state.inviteIds.length; i++) { + var index = self.state.inviteIds[i]; + if (self.refs['email' + index].getDOMNode().value.trim() !== '') { + notEmpty = true; break; } } - if (not_empty) { + if (notEmpty) { $('#confirm_invite_modal').modal('show'); e.preventDefault(); } - }); $('#invite_member').on('hidden.bs.modal', function() { @@ -36,52 +35,54 @@ module.exports = React.createClass({ }); }, handleSubmit: function(e) { - var invite_ids = this.state.invite_ids; - var count = invite_ids.length; + var inviteIds = this.state.inviteIds; + var count = inviteIds.length; var invites = []; - var email_errors = this.state.email_errors; - var first_name_errors = this.state.first_name_errors; - var last_name_errors = this.state.last_name_errors; + var emailErrors = this.state.emailErrors; + var firstNameErrors = this.state.firstNameErrors; + var lastNameErrors = this.state.lastNameErrors; var valid = true; for (var i = 0; i < count; i++) { - var index = invite_ids[i]; + var index = inviteIds[i]; var invite = {}; - invite.email = this.refs["email"+index].getDOMNode().value.trim(); + invite.email = this.refs['email' + index].getDOMNode().value.trim(); if (!invite.email || !utils.isEmail(invite.email)) { - email_errors[index] = "Please enter a valid email address"; + emailErrors[index] = 'Please enter a valid email address'; valid = false; } else { - email_errors[index] = ""; + emailErrors[index] = ''; } if (config.AllowInviteNames) { - invite.first_name = this.refs["first_name"+index].getDOMNode().value.trim(); - if (!invite.first_name && config.RequireInviteNames) { - first_name_errors[index] = "This is a required field"; + invite.firstName = this.refs['first_name' + index].getDOMNode().value.trim(); + if (!invite.firstName && config.RequireInviteNames) { + firstNameErrors[index] = 'This is a required field'; valid = false; } else { - first_name_errors[index] = ""; + firstNameErrors[index] = ''; } - invite.last_name = this.refs["last_name"+index].getDOMNode().value.trim(); - if (!invite.last_name && config.RequireInviteNames) { - last_name_errors[index] = "This is a required field"; + invite.lastName = this.refs['last_name' + index].getDOMNode().value.trim(); + if (!invite.lastName && config.RequireInviteNames) { + lastNameErrors[index] = 'This is a required field'; valid = false; } else { - last_name_errors[index] = ""; + lastNameErrors[index] = ''; } } invites.push(invite); } - this.setState({ email_errors: email_errors, first_name_errors: first_name_errors, last_name_errors: last_name_errors }); + this.setState({emailErrors: emailErrors, firstNameErrors: firstNameErrors, lastNameErrors: lastNameErrors}); - if (!valid || invites.length === 0) return; + if (!valid || invites.length === 0) { + return; + } - var data = {} - data["invites"] = invites; + var data = {}; + data.invites = invites; Client.inviteMembers(data, function() { @@ -89,146 +90,177 @@ module.exports = React.createClass({ $(this.refs.modal.getDOMNode()).modal('hide'); }.bind(this), function(err) { - if (err.message === "This person is already on your team") { - email_errors[err.detailed_error] = err.message; - this.setState({ email_errors: email_errors }); + if (err.message === 'This person is already on your team') { + emailErrors[err.detailed_error] = err.message; + this.setState({emailErrors: emailErrors}); + } else { + this.setState({serverError: err.message}); } - else - this.setState({ server_error: err.message}); }.bind(this) ); - }, componentDidUpdate: function() { $(this.refs.modalBody.getDOMNode()).css('max-height', $(window).height() - 200); $(this.refs.modalBody.getDOMNode()).css('overflow-y', 'scroll'); }, addInviteFields: function() { - var count = this.state.id_count + 1; - var invite_ids = this.state.invite_ids; - invite_ids.push(count); - this.setState({ invite_ids: invite_ids, id_count: count }); + var count = this.state.idCount + 1; + var inviteIds = this.state.inviteIds; + inviteIds.push(count); + this.setState({inviteIds: inviteIds, idCount: count}); }, clearFields: function() { - var invite_ids = this.state.invite_ids; + var inviteIds = this.state.inviteIds; - for (var i = 0; i < invite_ids.length; i++) { - var index = invite_ids[i]; - this.refs["email"+index].getDOMNode().value = ""; + for (var i = 0; i < inviteIds.length; i++) { + var index = inviteIds[i]; + this.refs['email' + index].getDOMNode().value = ''; if (config.AllowInviteNames) { - this.refs["first_name"+index].getDOMNode().value = ""; - this.refs["last_name"+index].getDOMNode().value = ""; + this.refs['first_name' + index].getDOMNode().value = ''; + this.refs['last_name' + index].getDOMNode().value = ''; } } this.setState({ - invite_ids: [0], - id_count: 0, - email_errors: {}, - first_name_errors: {}, - last_name_errors: {} + inviteIds: [0], + idCount: 0, + emailErrors: {}, + firstNameErrors: {}, + lastNameErrors: {} }); }, removeInviteFields: function(index) { - var count = this.state.id_count; - var invite_ids = this.state.invite_ids; - var i = invite_ids.indexOf(index); - if (i > -1) invite_ids.splice(i, 1); - if (!invite_ids.length) invite_ids.push(++count); - this.setState({ invite_ids: invite_ids, id_count: count }); + var count = this.state.idCount; + var inviteIds = this.state.inviteIds; + var i = inviteIds.indexOf(index); + if (i > -1) { + inviteIds.splice(i, 1); + } + if (!inviteIds.length) { + inviteIds.push(++count); + } + this.setState({inviteIds: inviteIds, idCount: count}); }, getInitialState: function() { return { - invite_ids: [0], - id_count: 0, - email_errors: {}, - first_name_errors: {}, - last_name_errors: {} + inviteIds: [0], + idCount: 0, + emailErrors: {}, + firstNameErrors: {}, + lastNameErrors: {} }; }, render: function() { - var currentUser = UserStore.getCurrentUser() + var currentUser = UserStore.getCurrentUser(); if (currentUser != null) { - var invite_sections = []; - var invite_ids = this.state.invite_ids; - var self = this; - for (var i = 0; i < invite_ids.length; i++) { - var index = invite_ids[i]; - var email_error = this.state.email_errors[index] ? <label className='control-label'>{ this.state.email_errors[index] }</label> : null; - var first_name_error = this.state.first_name_errors[index] ? <label className='control-label'>{ this.state.first_name_errors[index] }</label> : null; - var last_name_error = this.state.last_name_errors[index] ? <label className='control-label'>{ this.state.last_name_errors[index] }</label> : null; - - invite_sections[index] = ( - <div key={"key" + index}> - <div> - <button type="button" className="btn btn-link remove__member" onClick={this.removeInviteFields.bind(this, index)}><span className="fa fa-trash"></span></button> - </div> - <div className={ email_error ? "form-group invite has-error" : "form-group invite" }> - <input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" /> - { email_error } - </div> - <div className="row--invite"> - { config.AllowInviteNames ? - <div className="col-sm-6"> - <div className={ first_name_error ? "form-group has-error" : "form-group" }> - <input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" /> - { first_name_error } - </div> - </div> - : "" } - { config.AllowInviteNames ? - <div className="col-sm-6"> - <div className={ last_name_error ? "form-group has-error" : "form-group" }> - <input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" /> - { last_name_error } - </div> - </div> - : "" } + var inviteSections = []; + var inviteIds = this.state.inviteIds; + for (var i = 0; i < inviteIds.length; i++) { + var index = inviteIds[i]; + var emailError = null; + if (this.state.emailErrors[index]) { + emailError = <label className='control-label'>{this.state.emailErrors[index]}</label>; + } + var firstNameError = null; + if (this.state.firstNameErrors[index]) { + firstNameError = <label className='control-label'>{this.state.firstNameErrors[index]}</label>; + } + var lastNameError = null; + if (this.state.lastNameErrors[index]) { + lastNameError = <label className='control-label'>{this.state.lastNameErrors[index]}</label>; + } + + var removeButton = null; + if (index) { + removeButton = (<div> + <button type='button' className='btn btn-link remove__member' onClick={this.removeInviteFields.bind(this, index)}><span className='fa fa-trash'></span></button> + </div>); + } + var emailClass = 'form-group invite'; + if (emailError) { + emailClass += ' has-error'; + } + + var nameFields = null; + if (config.AllowInviteNames) { + var firstNameClass = 'form-group'; + if (firstNameError) { + firstNameClass += ' has-error'; + } + var lastNameClass = 'form-group'; + if (lastNameError) { + lastNameClass += ' has-error'; + } + nameFields = (<div className='row--invite'> + <div className='col-sm-6'> + <div className={firstNameClass}> + <input type='text' className='form-control' ref={'first_name' + index} placeholder='First name' maxLength='64' /> + {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' /> + {lastNameError} + </div> + </div> + </div>); + } + + inviteSections[index] = ( + <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' /> + {emailError} </div> + {nameFields} </div> ); } - 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 = null; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } return ( <div> - <div className="modal fade" ref="modal" id="invite_member" 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" aria-label="Close" data-reactid=".5.0.0.0.0"><span aria-hidden="true" data-reactid=".5.0.0.0.0.0">×</span></button> - <h4 className="modal-title" id="myModalLabel">Invite New Member</h4> + <div className='modal fade' ref='modal' id='invite_member' 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' aria-label='Close' data-reactid='.5.0.0.0.0'><span aria-hidden='true' data-reactid='.5.0.0.0.0.0'>×</span></button> + <h4 className='modal-title' id='myModalLabel'>Invite New Member</h4> </div> - <div ref="modalBody" className="modal-body"> - <form role="form"> - { invite_sections } + <div ref='modalBody' className='modal-body'> + <form role='form'> + {inviteSections} </form> - { server_error } - <button type="button" className="btn btn-default" onClick={this.addInviteFields}>Add another</button> + {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> - <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> + <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> </div> </div> </div> </div> <ConfirmModal - id="confirm_invite_modal" - parent_id="invite_member" - title="Discard Invitations?" - message="You have unsent invitations, are you sure you want to discard them?" - confirm_button="Yes, Discard" + id='confirm_invite_modal' + parent_id='invite_member' + title='Discard Invitations?' + message='You have unsent invitations, are you sure you want to discard them?' + confirm_button='Yes, Discard/' /> </div> ); - } else { - return <div/>; } + return <div/>; } }); diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 71a6083d2..a0f68df98 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -15,81 +15,78 @@ var MAX_ITEMS_IN_LIST = 25; var ITEM_HEIGHT = 36; module.exports = React.createClass({ - displayName: "MentionList", + displayName: 'MentionList', componentDidMount: function() { - PostStore.addMentionDataChangeListener(this._onChange); + PostStore.addMentionDataChangeListener(this.onListenerChange); var self = this; - $('body').on('keydown.mentionlist', '#'+this.props.id, + $('body').on('keydown.mentionlist', '#' + this.props.id, function(e) { - if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { + if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) { e.stopPropagation(); e.preventDefault(); self.addCurrentMention(); - } - else if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 38 || e.which === 40)) { + } else if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 38 || e.which === 40)) { e.stopPropagation(); e.preventDefault(); - var tempSelectedMention = -1; - if (e.which === 38) { - if (self.getSelection(self.state.selectedMention - 1)) - self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username }); - else { - while (self.getSelection(++tempSelectedMention)) - ; //Need to find the top of the list - self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username }); + if (e.which === 38) { + if (self.getSelection(self.state.selectedMention - 1)) { + self.setState({selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username}); + } + } else if (e.which === 40) { + if (self.getSelection(self.state.selectedMention + 1)) { + self.setState({selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username}); } - } - else if (e.which === 40) { - if (self.getSelection(self.state.selectedMention + 1)) - self.setState({ selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username }); - else - self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username }); } - self.scrollToMention(e.which, tempSelectedMention); + self.scrollToMention(e.which); } } ); $(document).click(function(e) { - if (!($('#'+self.props.id).is(e.target) || $('#'+self.props.id).has(e.target).length || - ('mentionlist' in self.refs && $(self.refs['mentionlist'].getDOMNode()).has(e.target).length))) { - self.setState({mentionText: "-1"}) + if (!($('#' + self.props.id).is(e.target) || $('#' + self.props.id).has(e.target).length || + ('mentionlist' in self.refs && $(self.refs.mentionlist.getDOMNode()).has(e.target).length))) { + self.setState({mentionText: '-1'}); } }); }, componentWillUnmount: function() { - PostStore.removeMentionDataChangeListener(this._onChange); - $('body').off('keydown.mentionlist', '#'+this.props.id); + PostStore.removeMentionDataChangeListener(this.onListenerChange); + $('body').off('keydown.mentionlist', '#' + this.props.id); }, componentDidUpdate: function() { - if (this.state.mentionText != "-1") { - if (this.state.selectedUsername !== "" && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) { + if (this.state.mentionText !== '-1') { + if (this.state.selectedUsername !== '' && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) { var tempSelectedMention = -1; var foundMatch = false; while (tempSelectedMention < this.state.selectedMention && this.getSelection(++tempSelectedMention)) { if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) { - this.setState({ selectedMention: tempSelectedMention }); + this.setState({selectedMention: tempSelectedMention}); foundMatch = true; break; } } if (this.getSelection(0) && !foundMatch) { - this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username }); + this.setState({selectedMention: 0, selectedUsername: this.refs.mention0.props.username}); } } - } - else if (this.state.selectedMention !== 0) { - this.setState({ selectedMention: 0, selectedUsername: "" }); + } else if (this.state.selectedMention !== 0) { + this.setState({selectedMention: 0, selectedUsername: ''}); } }, - _onChange: function(id, mentionText, excludeList) { - if (id !== this.props.id) return; + onListenerChange: function(id, mentionText, excludeList) { + if (id !== this.props.id) { + return; + } var newState = this.state; - if (mentionText != null) newState.mentionText = mentionText; - if (excludeList != null) newState.excludeUsers = excludeList; + if (mentionText != null) { + newState.mentionText = mentionText; + } + if (excludeList != null) { + newState.excludeUsers = excludeList; + } this.setState(newState); }, @@ -100,44 +97,49 @@ module.exports = React.createClass({ username: name }); - this.setState({ mentionText: '-1' }); + this.setState({mentionText: '-1'}); }, handleMouseEnter: function(listId) { - this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username }); + this.setState({selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username}); }, getSelection: function(listId) { - if (!this.refs['mention' + listId]) + if (!this.refs['mention' + listId]) { return false; - else - return true; + } + return true; }, addCurrentMention: function() { - if (!this.getSelection(this.state.selectedMention)) + if (!this.getSelection(this.state.selectedMention)) { this.addFirstMention(); - else + } else { this.refs['mention' + this.state.selectedMention].handleClick(); + } }, addFirstMention: function() { - if (!this.refs.mention0) return; + if (!this.refs.mention0) { + return; + } this.refs.mention0.handleClick(); }, isEmpty: function() { return (!this.refs.mention0); }, - scrollToMention: function(keyPressed, ifLoopUp) { - var direction = keyPressed === 38 ? "up" : "down"; + scrollToMention: function(keyPressed) { + var direction; + if (keyPressed === 38) { + direction = 'up'; + } else { + direction = 'down'; + } var scrollAmount = 0; - if (direction === "up" && ifLoopUp !== -1) - scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom - else if (direction === "down" && this.state.selectedMention === 0) - scrollAmount = 0; - else if (direction === "up") - scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5); - else if (direction === "down") - scrollAmount = "+=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5); + if (direction === 'up') { + scrollAmount = '-=' + ($('#' + this.refs['mention' + this.state.selectedMention].props.id + '_mentions').innerHeight() - 5); + } else if (direction === 'down') { + scrollAmount = '+=' + ($('#' + this.refs['mention' + this.state.selectedMention].props.id + '_mentions').innerHeight() - 5); + } - $("#mentionsbox").animate({ + $('#mentionsbox').animate({ scrollTop: scrollAmount }, 75); }, @@ -151,12 +153,14 @@ module.exports = React.createClass({ return false; }, getInitialState: function() { - return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" }; + return {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''}; }, render: function() { var self = this; var mentionText = this.state.mentionText; - if (mentionText === '-1') return null; + if (mentionText === '-1') { + return null; + } var profiles = UserStore.getActiveOnlyProfiles(); var users = []; @@ -165,32 +169,38 @@ module.exports = React.createClass({ } var all = {}; - all.username = "all"; - all.nickname = ""; - all.secondary_text = "Notifies everyone in the team"; - all.id = "allmention"; + all.username = 'all'; + all.nickname = ''; + all.secondary_text = 'Notifies everyone in the team'; + all.id = 'allmention'; users.push(all); var channel = {}; - channel.username = "channel"; - channel.nickname = ""; - channel.secondary_text = "Notifies everyone in the channel"; - channel.id = "channelmention"; + channel.username = 'channel'; + channel.nickname = ''; + channel.secondary_text = 'Notifies everyone in the channel'; + channel.id = 'channelmention'; users.push(channel); - users.sort(function(a,b) { - if (a.username < b.username) return -1; - if (a.username > b.username) return 1; + users.sort(function(a, b) { + if (a.username < b.username) { + return -1; + } + if (a.username > b.username) { + return 1; + } return 0; }); var mentions = {}; var index = 0; for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) { - if (this.alreadyMentioned(users[i].username)) continue; - - if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText,0) === 0) - || (users[i].last_name && users[i].last_name.lastIndexOf(mentionText,0) === 0) || users[i].username.lastIndexOf(mentionText,0) === 0) { + if (this.alreadyMentioned(users[i].username)) { + continue; + } + if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText, 0) === 0) || + (users[i].last_name && users[i].last_name.lastIndexOf(mentionText, 0) === 0) || + users[i].username.lastIndexOf(mentionText, 0) === 0) { mentions[index] = ( <Mention ref={'mention' + index} @@ -198,7 +208,7 @@ module.exports = React.createClass({ secondary_text={Utils.getFullName(users[i])} id={users[i].id} listId={index} - isFocused={this.state.selectedMention === index ? "mentions-focus" : ""} + isFocused={this.state.selectedMention === index ? 'mentions-focus' : ''} handleMouseEnter={function(value) { return function() { self.handleMouseEnter(value); } }(index)} handleClick={this.handleClick} /> ); @@ -208,21 +218,23 @@ module.exports = React.createClass({ var numMentions = Object.keys(mentions).length; - if (numMentions < 1) return null; + if (numMentions < 1) { + return null; + } - var $mention_tab = $('#'+this.props.id); - var maxHeight = Math.min(MAX_HEIGHT_LIST, $mention_tab.offset().top - 10); + var $mentionTab = $('#' + this.props.id); + var maxHeight = Math.min(MAX_HEIGHT_LIST, $mentionTab.offset().top - 10); var style = { - height: Math.min(maxHeight, (numMentions*ITEM_HEIGHT) + 4), - width: $mention_tab.parent().width(), - bottom: $(window).height() - $mention_tab.offset().top, - left: $mention_tab.offset().left + height: Math.min(maxHeight, (numMentions * ITEM_HEIGHT) + 4), + width: $mentionTab.parent().width(), + bottom: $(window).height() - $mentionTab.offset().top, + left: $mentionTab.offset().left }; return ( - <div className="mentions--top" style={style}> - <div ref="mentionlist" className="mentions-box" id="mentionsbox"> - { mentions } + <div className='mentions--top' style={style}> + <div ref='mentionlist' className='mentions-box' id='mentionsbox'> + {mentions} </div> </div> ); diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx index 49e088458..93884f6eb 100644 --- a/web/react/components/new_channel.jsx +++ b/web/react/components/new_channel.jsx @@ -1,138 +1,146 @@ // 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 TeamStore = require('../stores/team_store.jsx'); -var Constants = require('../utils/constants.jsx'); module.exports = React.createClass({ + displayName: 'NewChannelModal', handleSubmit: function(e) { e.preventDefault(); var channel = {}; - var state = { server_error: "" }; + var state = {serverError: ''}; channel.display_name = this.refs.display_name.getDOMNode().value.trim(); if (!channel.display_name) { - state.display_name_error = "This field is required"; + state.displayNameError = 'This field is required'; state.inValid = true; - } - else if (channel.display_name.length > 22) { - state.display_name_error = "This field must be less than 22 characters"; + } else if (channel.display_name.length > 22) { + state.displayNameError = 'This field must be less than 22 characters'; state.inValid = true; - } - else { - state.display_name_error = ""; + } else { + state.displayNameError = ''; } channel.name = this.refs.channel_name.getDOMNode().value.trim(); if (!channel.name) { - state.name_error = "This field is required"; + state.nameError = 'This field is required'; state.inValid = true; - } - else if(channel.name.length > 22){ - state.name_error = "This field must be less than 22 characters"; + } else if (channel.name.length > 22) { + state.nameError = 'This field must be less than 22 characters'; state.inValid = true; - } - else { - var cleaned_name = utils.cleanUpUrlable(channel.name); - if (cleaned_name != channel.name) { - state.name_error = "Must be lowercase alphanumeric characters, allowing '-' but not starting or ending with '-'"; + } else { + var cleanedName = utils.cleanUpUrlable(channel.name); + if (cleanedName !== channel.name) { + state.nameError = "Must be lowercase alphanumeric characters, allowing '-' but not starting or ending with '-'"; state.inValid = true; - } - else { - state.name_error = ""; + } else { + state.nameError = ''; } } this.setState(state); - if (state.inValid) + if (state.inValid) { return; + } var cu = UserStore.getCurrentUser(); channel.team_id = cu.team_id; channel.description = this.refs.channel_desc.getDOMNode().value.trim(); - channel.type = this.state.channel_type; + channel.type = this.state.channelType; var self = this; client.createChannel(channel, function() { - this.refs.display_name.getDOMNode().value = ""; - this.refs.channel_name.getDOMNode().value = ""; - this.refs.channel_desc.getDOMNode().value = ""; + 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; + window.location = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; asyncClient.getChannels(true); }.bind(this), function(err) { - state.server_error = err.message; + state.serverError = err.message; state.inValid = true; this.setState(state); }.bind(this) ); }, - displayNameKeyUp: function(e) { - var display_name = this.refs.display_name.getDOMNode().value.trim(); - var channel_name = utils.cleanUpUrlable(display_name); - this.refs.channel_name.getDOMNode().value = channel_name; + displayNameKeyUp: function() { + var displayName = this.refs.display_name.getDOMNode().value.trim(); + var channelName = utils.cleanUpUrlable(displayName); + this.refs.channel_name.getDOMNode().value = channelName; }, componentDidMount: function() { var self = this; $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { var button = e.relatedTarget; - self.setState({ channel_type: $(button).attr('data-channeltype') }); + self.setState({channelType: $(button).attr('data-channeltype')}); }); }, getInitialState: function() { - return { channel_type: "" }; + return {channelType: ''}; }, render: function() { + var displayNameError = null; + var nameError = null; + var serverError = null; + var displayNameClass = 'form-group'; + var nameClass = 'form-group'; - var display_name_error = this.state.display_name_error ? <label className='control-label'>{ this.state.display_name_error }</label> : null; - var name_error = this.state.name_error ? <label className='control-label'>{ this.state.name_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; + if (this.state.displayNameError) { + displayNameError = <label className='control-label'>{this.state.displayNameError}</label>; + displayNameClass += ' has-error'; + } + if (this.state.nameError) { + nameError = <label className='control-label'>{this.state.nameError}</label>; + nameClass += ' has-error'; + } + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } return ( - <div className="modal fade" id="new_channel" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal"> - <span aria-hidden="true">×</span> - <span className="sr-only">Close</span> + <div className='modal fade' id='new_channel' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'> + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button type='button' className='close' data-dismiss='modal'> + <span aria-hidden='true'>×</span> + <span className='sr-only'>Cancel</span> </button> - <h4 className="modal-title">New Channel</h4> + <h4 className='modal-title'>New Channel</h4> </div> - <div className="modal-body"> - <form role="form"> - <div className={ this.state.display_name_error ? "form-group has-error" : "form-group" }> + <form role='form'> + <div className='modal-body'> + <div className={displayNameClass}> <label className='control-label'>Display Name</label> - <input onKeyUp={this.displayNameKeyUp} type="text" ref="display_name" className="form-control" placeholder="Enter display name" maxLength="64" /> - { display_name_error } + <input onKeyUp={this.displayNameKeyUp} type='text' ref='display_name' className='form-control' placeholder='Enter display name' maxLength='64' /> + {displayNameError} </div> - <div className={ this.state.name_error ? "form-group has-error" : "form-group" }> + <div className={nameClass}> <label className='control-label'>Handle</label> - <input type="text" className="form-control" ref="channel_name" placeholder="lowercase alphanumeric's only" maxLength="64" /> - { name_error } + <input type='text' className='form-control' ref='channel_name' placeholder="lowercase alphanumeric's only" maxLength='64' /> + {nameError} </div> - <div className="form-group"> + <div className='form-group'> <label className='control-label'>Description</label> - <textarea className="form-control no-resize" ref="channel_desc" rows="3" placeholder="Description" maxLength="1024"></textarea> + <textarea className='form-control no-resize' ref='channel_desc' rows='3' placeholder='Description' maxLength='1024'></textarea> </div> - { server_error } - </form> - </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> - <button onClick={this.handleSubmit} type="button" className="btn btn-primary">Create New Channel</button> - </div> + {serverError} + </div> + <div className='modal-footer'> + <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button> + <button onClick={this.handleSubmit} type='submit' className='btn btn-primary'>Create New Channel</button> + </div> + </form> </div> </div> </div> diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 447a405bd..3f35a5912 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -248,6 +248,8 @@ TeamURLPage = React.createClass({ }, 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; @@ -260,8 +262,8 @@ TeamURLPage = React.createClass({ <div className={ name_error ? "form-group has-error" : "form-group" }> <div className="row"> <div className="col-sm-11"> - <div className="input-group"> - <span className="input-group-addon">{ utils.getWindowLocationOrigin() + "/" }</span> + <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> diff --git a/web/react/components/team_settings_modal.jsx b/web/react/components/team_settings_modal.jsx index e50378b7f..b1c38fd16 100644 --- a/web/react/components/team_settings_modal.jsx +++ b/web/react/components/team_settings_modal.jsx @@ -29,7 +29,7 @@ module.exports = React.createClass({ tabs.push({name: "feature", ui_name: "Features", icon: "glyphicon glyphicon-wrench"}); return ( - <div className="modal fade" ref="modal" id="team_settings" role="dialog" aria-hidden="true"> + <div className="modal fade" ref="modal" id="team_settings" role="dialog" tabIndex="-1" aria-hidden="true"> <div className="modal-dialog settings-modal"> <div className="modal-content"> <div className="modal-header"> diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx index d1aff74f2..702e7ad7a 100644 --- a/web/react/components/user_settings_modal.jsx +++ b/web/react/components/user_settings_modal.jsx @@ -32,7 +32,7 @@ module.exports = React.createClass({ tabs.push({name: "appearance", ui_name: "Appearance", icon: "glyphicon glyphicon-wrench"}); return ( - <div className="modal fade" ref="modal" id="user_settings1" role="dialog" aria-hidden="true"> + <div className="modal fade" ref="modal" id="user_settings1" role="dialog" tabIndex="-1" aria-hidden="true"> <div className="modal-dialog settings-modal"> <div className="modal-content"> <div className="modal-header"> diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index ddc5e98bb..22e2f44c5 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -114,8 +114,7 @@ height: 100px; float: left; margin: 5px 10px 5px 0; - @include display-flex; - display: -ms-flexbox; + display: table; border: 1px solid lightgrey; .post__load { height: 100%; @@ -137,10 +136,14 @@ } } .post-image__thumbnail { + display: table-cell; + vertical-align: top; width: 50%; height: 100%; } .post-image__details { + display: table-cell; + vertical-align: top; width: 50%; height: 100%; background: white; diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss new file mode 100644 index 000000000..c84befd6a --- /dev/null +++ b/web/sass-files/sass/partials/_get-link.scss @@ -0,0 +1,6 @@ +.copy-link-confirm { + position: fixed; + color: rgb(153, 230, 153); + top: 84%; + left: 130px; +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index 4b6ee79a1..3a6f73316 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/partials/_signup.scss @@ -54,6 +54,28 @@ margin-bottom: 1em; } + .input-group { + &.input-group--limit { + table-layout: fixed; + width: 100%; + .tooltip-inner { + word-wrap: break-word; + } + .form-control { + text-align: left; + display: table-cell; + width: 100%; + } + .input-group-addon { + text-align: left; + width: 50%; + display: table-cell; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + .inner__content { padding: 0 15px; margin: 30px 0 20px; diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index ffd1f42b8..eb5152a2c 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -33,6 +33,7 @@ @import "partials/error"; @import "partials/error-bar"; @import "partials/loading"; +@import "partials/get-link"; // Responsive Css @import "partials/responsive"; diff --git a/web/templates/signup_team.html b/web/templates/signup_team.html index b84b8e486..313ed9d5f 100644 --- a/web/templates/signup_team.html +++ b/web/templates/signup_team.html @@ -10,7 +10,7 @@ <div class="signup-team__container"> <img class="signup-team-logo" src="/static/images/logo.png" /> <h1>Mattermost</h1> - <h4 class="color--light">All team communication in one place, searchable and accesible anywhere</h4> + <h4 class="color--light">All team communication in one place, searchable and accessible anywhere</h4> <div id="signup-team"></div> </div> </div> |