// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. var Modal = ReactBootstrap.Modal; var Utils = require('../utils/utils.jsx'); export default class ChangeUrlModal extends React.Component { constructor(props) { super(props); this.onURLChanged = this.onURLChanged.bind(this); this.doSubmit = this.doSubmit.bind(this); this.doCancel = this.doCancel.bind(this); this.state = { currentURL: props.currentURL, urlError: '', userEdit: false }; } componentWillReceiveProps(nextProps) { // This check prevents the url being deleted when we re-render // because of user status check if (!this.state.userEdit) { this.setState({ currentURL: nextProps.currentURL }); } } componentDidUpdate(prevProps) { if (this.props.show === true && prevProps.show === false) { React.findDOMNode(this.refs.urlinput).select(); } } onURLChanged(e) { const url = e.target.value.trim(); this.setState({currentURL: url.replace(/[^A-Za-z0-9-_]/g, '').toLowerCase(), userEdit: true}); } getURLError(url) { let error = []; //eslint-disable-line prefer-const if (url.length < 2) { error.push({'Must be longer than two characters'}
); } if (url.charAt(0) === '-' || url.charAt(0) === '_') { error.push({'Must start with a letter or number'}
); } if (url.length > 1 && (url.charAt(url.length - 1) === '-' || url.charAt(url.length - 1) === '_')) { error.push({'Must end with a letter or number'}
); } if (url.indexOf('__') > -1) { error.push({'Can not contain two underscores in a row.'}
); } // In case of error we don't detect if (error.length === 0) { error.push({'Invalid URL'}
); } return error; } doSubmit(e) { e.preventDefault(); const url = React.findDOMNode(this.refs.urlinput).value; const cleanedURL = Utils.cleanUpUrlable(url); if (cleanedURL !== url || url.length < 2 || url.indexOf('__') > -1) { this.setState({urlError: this.getURLError(url)}); return; } this.setState({urlError: '', userEdit: false}); this.props.onModalSubmit(url); } doCancel() { this.setState({urlError: '', userEdit: false}); this.props.onModalDismissed(); } render() { let urlClass = 'input-group input-group--limit'; let urlError = null; let serverError = null; if (this.state.urlError) { urlClass += ' has-error'; urlError = (

{this.state.urlError}

); } if (this.props.serverError) { serverError =

{this.props.serverError}

; } const fullTeamUrl = Utils.getTeamURLFromAddressBar(); const teamURL = Utils.getShortenedTeamURL(); return ( {this.props.title}
{this.props.description}
{teamURL}
{urlError} {serverError}
); } } ChangeUrlModal.defaultProps = { show: false, title: 'Change URL', desciption: '', urlLabel: 'URL', submitButtonText: 'Submit', 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 };