summaryrefslogtreecommitdiff
path: root/www/app/components/wizard/add_provider_modal.js
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>&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