summaryrefslogtreecommitdiff
path: root/ui/app/components/wizard/add_provider_modal.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/wizard/add_provider_modal.js')
-rw-r--r--ui/app/components/wizard/add_provider_modal.js61
1 files changed, 44 insertions, 17 deletions
diff --git a/ui/app/components/wizard/add_provider_modal.js b/ui/app/components/wizard/add_provider_modal.js
index bc5e023..d54ec08 100644
--- a/ui/app/components/wizard/add_provider_modal.js
+++ b/ui/app/components/wizard/add_provider_modal.js
@@ -3,12 +3,13 @@
//
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'
+import { FormGroup, ControlLabel, FormControl, HelpBlock, Button, ButtonToolbar, Modal } from 'react-bootstrap'
-class AddProviderModal extends React.Component {
+import Spinner from 'components/spinner'
+import Validate from 'lib/validate'
+import Provider from 'models/provider'
+
+export default class AddProviderModal extends React.Component {
static get defaultProps() {return{
title: 'Add a provider',
@@ -18,20 +19,36 @@ class AddProviderModal extends React.Component {
constructor(props) {
super(props)
this.state = {
- validationState: null,
+ validationState: null, // one of 'success', 'error', 'warning'
errorMsg: null,
- domain: ""
+ domain: "",
+ working: false, // true if waiting for something
}
this.accept = this.accept.bind(this)
this.cancel = this.cancel.bind(this)
this.changed = this.changed.bind(this)
}
- accept() {
+ accept(e=null) {
+ if (e) {
+ e.preventDefault() // don't reload the page please!
+ }
if (this.state.domain) {
- App.providers.add(this.state.domain)
+ this.setState({working: true})
+ Provider.setup(this.state.domain).then(
+ provider => {
+ this.props.onClose(provider)
+ // this.setState({working: false})
+ },
+ error => {
+ this.setState({
+ validationState: 'warning',
+ errorMsg: error,
+ working: false
+ })
+ }
+ )
}
- this.props.onClose()
}
cancel() {
@@ -44,9 +61,9 @@ class AddProviderModal extends React.Component {
let newMsg = null
if (domain.length > 0) {
- let error = Validate.domain(domain)
- newState = error ? 'error' : 'success'
- newMsg = error
+ let msg = Validate.domain(domain)
+ newState = msg ? 'error' : 'success'
+ newMsg = msg
}
this.setState({
domain: domain,
@@ -57,11 +74,21 @@ class AddProviderModal extends React.Component {
render() {
let help = null
+ let addButton = null
if (this.state.errorMsg) {
help = <HelpBlock>{this.state.errorMsg}</HelpBlock>
} else {
help = <HelpBlock>&nbsp;</HelpBlock>
}
+ if (this.state.working) {
+ addButton = <Button><Spinner /></Button>
+ } else if (this.state.validationState == 'warning') {
+ addButton = <Button onClick={this.accept}>Retry</Button>
+ } else if (this.state.validationState == 'error') {
+ addButton = <Button disabled={true}>Add</Button>
+ } else {
+ addButton = <Button onClick={this.accept}>Add</Button>
+ }
let form = <form onSubmit={this.accept} autoComplete="off">
<FormGroup controlId="addprovider" validationState={this.state.validationState}>
<ControlLabel>Domain</ControlLabel>
@@ -72,10 +99,12 @@ class AddProviderModal extends React.Component {
value={this.state.domain}
onChange={this.changed}
onBlur={this.changed} />
- <FormControl.Feedback/>
{help}
</FormGroup>
- <Button onClick={this.accept}>Add</Button>
+ <ButtonToolbar>
+ {addButton}
+ <Button onClick={this.cancel}>Cancel</Button>
+ </ButtonToolbar>
</form>
return(
@@ -90,5 +119,3 @@ class AddProviderModal extends React.Component {
)
}
}
-
-export default AddProviderModal \ No newline at end of file