summaryrefslogtreecommitdiff
path: root/www/app/components/wizard/add_provider_modal.js
diff options
context:
space:
mode:
authorKali Kaneko (leap communications) <kali@leap.se>2016-09-01 01:44:34 -0400
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-01 01:44:34 -0400
commit4728855b40d2d37da8e035c5081fab5819b07fd0 (patch)
treec8a7c727521fe06a2c4fe9221cb77d30e8f0c3b9 /www/app/components/wizard/add_provider_modal.js
parent4613e74ce4e2c8b125a6a61585a4aec5f5151969 (diff)
[refactor] move js to top-level folder
Diffstat (limited to 'www/app/components/wizard/add_provider_modal.js')
-rw-r--r--www/app/components/wizard/add_provider_modal.js94
1 files changed, 94 insertions, 0 deletions
diff --git a/www/app/components/wizard/add_provider_modal.js b/www/app/components/wizard/add_provider_modal.js
new file mode 100644
index 00000000..bc5e0236
--- /dev/null
+++ b/www/app/components/wizard/add_provider_modal.js
@@ -0,0 +1,94 @@
+//
+// A modal popup to add a new provider.
+//
+
+import React from 'react'
+import { FormGroup, ControlLabel, FormControl, HelpBlock, Button, Modal } from 'react-bootstrap'
+import Spinner from '../spinner'
+import Validate from '../../lib/validate'
+import App from '../../app'
+
+class AddProviderModal extends React.Component {
+
+ static get defaultProps() {return{
+ title: 'Add a provider',
+ onClose: null
+ }}
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ validationState: null,
+ errorMsg: null,
+ domain: ""
+ }
+ this.accept = this.accept.bind(this)
+ this.cancel = this.cancel.bind(this)
+ this.changed = this.changed.bind(this)
+ }
+
+ accept() {
+ if (this.state.domain) {
+ App.providers.add(this.state.domain)
+ }
+ this.props.onClose()
+ }
+
+ cancel() {
+ this.props.onClose()
+ }
+
+ changed(e) {
+ let domain = e.target.value
+ let newState = null
+ let newMsg = null
+
+ if (domain.length > 0) {
+ let error = Validate.domain(domain)
+ newState = error ? 'error' : 'success'
+ newMsg = error
+ }
+ this.setState({
+ domain: domain,
+ validationState: newState,
+ errorMsg: newMsg
+ })
+ }
+
+ render() {
+ let help = null
+ if (this.state.errorMsg) {
+ help = <HelpBlock>{this.state.errorMsg}</HelpBlock>
+ } else {
+ help = <HelpBlock>&nbsp;</HelpBlock>
+ }
+ let form = <form onSubmit={this.accept} autoComplete="off">
+ <FormGroup controlId="addprovider" validationState={this.state.validationState}>
+ <ControlLabel>Domain</ControlLabel>
+ <FormControl
+ type="text"
+ ref="domain"
+ autoFocus
+ value={this.state.domain}
+ onChange={this.changed}
+ onBlur={this.changed} />
+ <FormControl.Feedback/>
+ {help}
+ </FormGroup>
+ <Button onClick={this.accept}>Add</Button>
+ </form>
+
+ return(
+ <Modal show={true} onHide={this.cancel}>
+ <Modal.Header closeButton>
+ <Modal.Title>{this.props.title}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {form}
+ </Modal.Body>
+ </Modal>
+ )
+ }
+}
+
+export default AddProviderModal \ No newline at end of file