blob: bc5e02360ecd3ec8d5ef86c89f6141883458a427 (
plain)
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
|
//
// 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> </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
|
