diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-14 08:50:46 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-16 18:02:55 -0400 |
commit | 12896bd23eeba79884245c1c29fdc568cf21a7fa (patch) | |
tree | 4e7f83d3e2564b9b89d669e9f7905ff11768b11a /webapp/components/change_url_modal.jsx | |
parent | 29fe6a3d13c9c7aa490fffebbe5d1b5fdf1e3090 (diff) | |
download | chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.gz chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.bz2 chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.zip |
Converting to Webpack. Stage 1.
Diffstat (limited to 'webapp/components/change_url_modal.jsx')
-rw-r--r-- | webapp/components/change_url_modal.jsx | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/webapp/components/change_url_modal.jsx b/webapp/components/change_url_modal.jsx new file mode 100644 index 000000000..daba16827 --- /dev/null +++ b/webapp/components/change_url_modal.jsx @@ -0,0 +1,222 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import ReactDOM from 'react-dom'; +import {Modal} from 'react-bootstrap'; +import * as Utils from 'utils/utils.jsx'; + +import {FormattedMessage} from 'react-intl'; + +import React from 'react'; + +export default class ChangeUrlModal extends React.Component { + constructor(props) { + super(props); + + this.onURLChanged = this.onURLChanged.bind(this); + this.doSubmit = this.doSubmit.bind(this); + this.doCancel = this.doCancel.bind(this); + + this.state = { + currentURL: props.currentURL, + urlError: '', + userEdit: false + }; + } + componentWillReceiveProps(nextProps) { + // This check prevents the url being deleted when we re-render + // because of user status check + if (!this.state.userEdit) { + this.setState({ + currentURL: nextProps.currentURL + }); + } + } + componentDidUpdate(prevProps) { + if (this.props.show === true && prevProps.show === false) { + ReactDOM.findDOMNode(this.refs.urlinput).select(); + } + } + onURLChanged(e) { + const url = e.target.value.trim(); + this.setState({currentURL: url.replace(/[^A-Za-z0-9-_]/g, '').toLowerCase(), userEdit: true}); + } + getURLError(url) { + let error = []; //eslint-disable-line prefer-const + if (url.length < 2) { + error.push( + <span key='error1'> + <FormattedMessage + id='change_url.longer' + defaultMessage='Must be longer than two characters' + /> + <br/> + </span> + ); + } + if (url.charAt(0) === '-' || url.charAt(0) === '_') { + error.push( + <span key='error2'> + <FormattedMessage + id='change_url.startWithLetter' + defaultMessage='Must start with a letter or number' + /> + <br/> + </span> + ); + } + if (url.length > 1 && (url.charAt(url.length - 1) === '-' || url.charAt(url.length - 1) === '_')) { + error.push( + <span key='error3'> + <FormattedMessage + id='change_url.endWithLetter' + defaultMessage='Must end with a letter or number' + /> + <br/> + </span>); + } + if (url.indexOf('__') > -1) { + error.push( + <span key='error4'> + <FormattedMessage + id='change_url.noUnderscore' + defaultMessage='Can not contain two underscores in a row.' + /> + <br/> + </span>); + } + + // In case of error we don't detect + if (error.length === 0) { + error.push( + <span key='errorlast'> + <FormattedMessage + id='change_url.invalidUrl' + defaultMessage='Invalid URL' + /> + <br/> + </span>); + } + return error; + } + doSubmit(e) { + e.preventDefault(); + + const url = ReactDOM.findDOMNode(this.refs.urlinput).value; + const cleanedURL = Utils.cleanUpUrlable(url); + if (cleanedURL !== url || url.length < 2 || url.indexOf('__') > -1) { + this.setState({urlError: this.getURLError(url)}); + return; + } + this.setState({urlError: '', userEdit: false}); + this.props.onModalSubmit(url); + } + doCancel() { + this.setState({urlError: '', userEdit: false}); + this.props.onModalDismissed(); + } + render() { + let urlClass = 'input-group input-group--limit'; + let urlError = null; + let serverError = null; + + if (this.state.urlError) { + urlClass += ' has-error'; + urlError = (<p className='input__help error'>{this.state.urlError}</p>); + } + + if (this.props.serverError) { + serverError = <div className='form-group has-error'><p className='input__help error'>{this.props.serverError}</p></div>; + } + + const fullTeamUrl = Utils.getTeamURLFromAddressBar(); + const teamURL = Utils.getShortenedTeamURL(); + + return ( + <Modal + show={this.props.show} + onHide={this.doCancel} + > + <Modal.Header closeButton={true}> + <Modal.Title>{this.props.title}</Modal.Title> + </Modal.Header> + <form + role='form' + className='form-horizontal' + > + <Modal.Body> + <div className='modal-intro'>{this.props.description}</div> + <div className='form-group'> + <label className='col-sm-2 form__label control-label'>{this.props.urlLabel}</label> + <div className='col-sm-10'> + <div className={urlClass}> + <span + data-toggle='tooltip' + title={fullTeamUrl} + className='input-group-addon' + > + {teamURL} + </span> + <input + type='text' + ref='urlinput' + className='form-control' + maxLength='22' + onChange={this.onURLChanged} + value={this.state.currentURL} + autoFocus={true} + tabIndex='1' + /> + </div> + {urlError} + {serverError} + </div> + </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.doCancel} + > + <FormattedMessage + id='change_url.close' + defaultMessage='Close' + /> + </button> + <button + onClick={this.doSubmit} + type='submit' + className='btn btn-primary' + tabIndex='2' + > + {this.props.submitButtonText} + </button> + </Modal.Footer> + </form> + </Modal> + ); + } +} + +ChangeUrlModal.defaultProps = { + show: false, + title: 'Change URL', + desciption: '', + urlLabel: 'URL', + submitButtonText: 'Save', + currentURL: '', + serverError: '' +}; + +ChangeUrlModal.propTypes = { + show: React.PropTypes.bool.isRequired, + title: React.PropTypes.string, + description: React.PropTypes.string, + urlLabel: React.PropTypes.string, + submitButtonText: React.PropTypes.string, + currentURL: React.PropTypes.string, + serverError: React.PropTypes.string, + onModalSubmit: React.PropTypes.func.isRequired, + onModalDismissed: React.PropTypes.func.isRequired +}; |