1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
//
// A modal popup to add a new provider.
//
import React from 'react'
import { FormGroup, ControlLabel, FormControl, HelpBlock, Button, ButtonToolbar, Modal } from 'react-bootstrap'
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',
onClose: null
}}
constructor(props) {
super(props)
this.state = {
validationState: null, // one of 'success', 'error', 'warning'
errorMsg: null,
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(e=null) {
if (e) {
e.preventDefault() // don't reload the page please!
}
if (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
})
}
)
}
}
cancel() {
this.props.onClose()
}
changed(e) {
let domain = e.target.value
let newState = null
let newMsg = null
if (domain.length > 0) {
let msg = Validate.domain(domain)
newState = msg ? 'error' : 'success'
newMsg = msg
}
this.setState({
domain: domain,
validationState: newState,
errorMsg: newMsg
})
}
render() {
let help = null
let addButton = null
if (this.state.errorMsg) {
help = <HelpBlock>{this.state.errorMsg}</HelpBlock>
} else {
help = <HelpBlock> </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>
<FormControl
type="text"
ref="domain"
autoFocus
value={this.state.domain}
onChange={this.changed}
onBlur={this.changed} />
{help}
</FormGroup>
<ButtonToolbar>
{addButton}
<Button onClick={this.cancel}>Cancel</Button>
</ButtonToolbar>
</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>
)
}
}
|
