2016-12-25 07:44:44 -08:00
|
|
|
const React = require('react');
|
|
|
|
const {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} = require('react-bootstrap');
|
|
|
|
const validUrl = require('valid-url');
|
|
|
|
|
|
|
|
class NewTeamModal extends React.Component {
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
|
|
|
teamName: '',
|
2017-01-30 11:45:47 -08:00
|
|
|
teamUrl: '',
|
|
|
|
saveStarted: false
|
2016-12-25 07:44:44 -08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2017-01-30 12:46:58 -08:00
|
|
|
componentWillMount() {
|
|
|
|
this.state = {
|
|
|
|
teamName: this.props.team ? this.props.team.name : '',
|
|
|
|
teamUrl: this.props.team ? this.props.team.url : '',
|
|
|
|
teamIndex: this.props.team ? this.props.team.index : false,
|
|
|
|
saveStarted: false
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2017-01-30 12:11:46 -08:00
|
|
|
getTeamNameValidationError() {
|
2017-01-30 11:45:47 -08:00
|
|
|
if (!this.state.saveStarted) {
|
2017-01-30 12:11:46 -08:00
|
|
|
return null;
|
2017-01-30 11:45:47 -08:00
|
|
|
}
|
2017-01-30 12:11:46 -08:00
|
|
|
return this.state.teamName.length > 0 ? null : 'Name is required.';
|
|
|
|
}
|
|
|
|
|
|
|
|
getTeamNameValidationState() {
|
|
|
|
return this.getTeamNameValidationError() === null ? null : 'error';
|
2016-12-25 07:44:44 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
handleTeamNameChange(e) {
|
|
|
|
this.setState({
|
|
|
|
teamName: e.target.value
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-01-30 12:11:46 -08:00
|
|
|
getTeamUrlValidationError() {
|
2017-01-30 11:45:47 -08:00
|
|
|
if (!this.state.saveStarted) {
|
2017-01-30 12:11:46 -08:00
|
|
|
return null;
|
2017-01-30 11:45:47 -08:00
|
|
|
}
|
2016-12-25 07:44:44 -08:00
|
|
|
if (this.state.teamUrl.length === 0) {
|
2017-01-30 12:11:46 -08:00
|
|
|
return 'URL is required.';
|
2016-12-25 07:44:44 -08:00
|
|
|
}
|
|
|
|
if (!validUrl.isUri(this.state.teamUrl)) {
|
2017-01-30 12:11:46 -08:00
|
|
|
return 'URL should start with http:// or https://.';
|
2016-12-25 07:44:44 -08:00
|
|
|
}
|
2017-01-30 12:11:46 -08:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
getTeamUrlValidationState() {
|
|
|
|
return this.getTeamUrlValidationError() === null ? null : 'error';
|
2016-12-25 07:44:44 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
handleTeamUrlChange(e) {
|
|
|
|
this.setState({
|
|
|
|
teamUrl: e.target.value
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-01-30 12:11:46 -08:00
|
|
|
getError() {
|
|
|
|
return this.getTeamNameValidationError() || this.getTeamUrlValidationError();
|
|
|
|
}
|
|
|
|
|
2016-12-25 07:44:44 -08:00
|
|
|
validateForm() {
|
2017-01-30 12:11:46 -08:00
|
|
|
return this.getTeamNameValidationState() === null &&
|
|
|
|
this.getTeamUrlValidationState() === null;
|
2016-12-25 07:44:44 -08:00
|
|
|
}
|
|
|
|
|
2017-01-22 06:33:48 -08:00
|
|
|
save() {
|
2017-01-30 11:45:47 -08:00
|
|
|
this.setState({
|
|
|
|
saveStarted: true
|
|
|
|
}, () => {
|
|
|
|
if (this.validateForm()) {
|
|
|
|
this.props.onSave({
|
|
|
|
url: this.state.teamUrl,
|
2017-01-30 12:46:58 -08:00
|
|
|
name: this.state.teamName,
|
|
|
|
index: this.state.teamIndex
|
2017-01-30 11:45:47 -08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2017-01-22 06:33:48 -08:00
|
|
|
}
|
|
|
|
|
2017-01-31 06:26:20 -08:00
|
|
|
getSaveButtonLabel() {
|
|
|
|
if (this.props.editMode) {
|
|
|
|
return 'Save';
|
|
|
|
}
|
|
|
|
return 'Add';
|
|
|
|
}
|
|
|
|
|
|
|
|
getModalTitle() {
|
|
|
|
if (this.props.editMode) {
|
|
|
|
return 'Edit Server';
|
|
|
|
}
|
|
|
|
return 'Add Server';
|
|
|
|
}
|
|
|
|
|
2016-12-25 07:44:44 -08:00
|
|
|
render() {
|
|
|
|
return (
|
2017-01-22 06:33:48 -08:00
|
|
|
<Modal
|
|
|
|
show={true}
|
2017-01-16 14:51:36 -08:00
|
|
|
id='newServerModal'
|
2017-01-22 06:33:48 -08:00
|
|
|
onHide={this.props.onClose}
|
|
|
|
onKeyDown={(e) => {
|
|
|
|
switch (e.key) {
|
|
|
|
case 'Enter':
|
|
|
|
this.save();
|
|
|
|
|
|
|
|
// The add button from behind this might still be focused
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
break;
|
|
|
|
case 'Escape':
|
|
|
|
this.props.onClose();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}}
|
2017-01-16 14:51:36 -08:00
|
|
|
>
|
2016-12-25 07:44:44 -08:00
|
|
|
<Modal.Header>
|
2017-01-31 06:26:20 -08:00
|
|
|
<Modal.Title>{this.getModalTitle()}</Modal.Title>
|
2016-12-25 07:44:44 -08:00
|
|
|
</Modal.Header>
|
|
|
|
|
|
|
|
<Modal.Body>
|
|
|
|
<form>
|
|
|
|
<FormGroup
|
|
|
|
validationState={this.getTeamNameValidationState()}
|
|
|
|
>
|
2017-01-16 14:51:28 -08:00
|
|
|
<ControlLabel>{'Server Display Name'}</ControlLabel>
|
2016-12-25 07:44:44 -08:00
|
|
|
<FormControl
|
2017-01-16 14:51:36 -08:00
|
|
|
id='teamNameInput'
|
2016-12-25 07:44:44 -08:00
|
|
|
type='text'
|
|
|
|
value={this.state.teamName}
|
2017-01-16 14:51:28 -08:00
|
|
|
placeholder='Server Name'
|
2016-12-25 07:44:44 -08:00
|
|
|
onChange={this.handleTeamNameChange.bind(this)}
|
|
|
|
/>
|
|
|
|
<FormControl.Feedback/>
|
2017-01-16 14:51:28 -08:00
|
|
|
<HelpBlock>{'The name of the server displayed on your desktop app tab bar.'}</HelpBlock>
|
2016-12-25 07:44:44 -08:00
|
|
|
</FormGroup>
|
|
|
|
<FormGroup
|
|
|
|
validationState={this.getTeamUrlValidationState()}
|
|
|
|
>
|
2017-02-03 09:41:07 -08:00
|
|
|
<ControlLabel>{'Server URL'}</ControlLabel>
|
2016-12-25 07:44:44 -08:00
|
|
|
<FormControl
|
2017-01-16 14:51:36 -08:00
|
|
|
id='teamUrlInput'
|
2016-12-25 07:44:44 -08:00
|
|
|
type='text'
|
|
|
|
value={this.state.teamUrl}
|
2017-01-22 05:55:32 -08:00
|
|
|
placeholder='https://example.com'
|
2016-12-25 07:44:44 -08:00
|
|
|
onChange={this.handleTeamUrlChange.bind(this)}
|
|
|
|
/>
|
|
|
|
<FormControl.Feedback/>
|
2017-01-16 14:51:28 -08:00
|
|
|
<HelpBlock>{'The URL of your Mattermost server. Must start with http:// or https://.'}</HelpBlock>
|
2016-12-25 07:44:44 -08:00
|
|
|
</FormGroup>
|
|
|
|
</form>
|
|
|
|
</Modal.Body>
|
|
|
|
|
|
|
|
<Modal.Footer>
|
2017-01-30 12:11:46 -08:00
|
|
|
<div
|
2017-01-30 12:19:05 -08:00
|
|
|
className='pull-left modal-error'
|
2017-01-30 12:11:46 -08:00
|
|
|
>
|
|
|
|
{this.getError()}
|
|
|
|
</div>
|
|
|
|
|
2016-12-25 07:44:44 -08:00
|
|
|
<Button
|
2017-01-16 14:51:36 -08:00
|
|
|
id='cancelNewServerModal'
|
2016-12-25 07:44:44 -08:00
|
|
|
onClick={this.props.onClose}
|
|
|
|
>{'Cancel'}</Button>
|
|
|
|
<Button
|
2017-01-16 14:51:36 -08:00
|
|
|
id='saveNewServerModal'
|
2017-01-22 06:33:48 -08:00
|
|
|
onClick={this.save.bind(this)}
|
2016-12-25 07:44:44 -08:00
|
|
|
disabled={!this.validateForm()}
|
|
|
|
bsStyle='primary'
|
2017-01-31 06:26:20 -08:00
|
|
|
>{this.getSaveButtonLabel()}</Button>
|
2016-12-25 07:44:44 -08:00
|
|
|
</Modal.Footer>
|
|
|
|
|
2017-01-22 06:33:48 -08:00
|
|
|
</Modal>
|
2016-12-25 07:44:44 -08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
NewTeamModal.propTypes = {
|
|
|
|
onClose: React.PropTypes.func,
|
2017-01-30 12:46:58 -08:00
|
|
|
onSave: React.PropTypes.func,
|
2017-01-31 06:26:20 -08:00
|
|
|
team: React.PropTypes.object,
|
|
|
|
editMode: React.PropTypes.boolean
|
2016-12-25 07:44:44 -08:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = NewTeamModal;
|