1 files changed, 86 insertions, 0 deletions
diff --git a/ui/app/components/wizard/provider_select_stage.js b/ui/app/components/wizard/provider_select_stage.js
new file mode 100644
index 0000000..20674be
--- /dev/null
+++ b/ui/app/components/wizard/provider_select_stage.js
@@ -0,0 +1,86 @@
+import React from 'react'
+import {Button, ButtonGroup, ButtonToolbar, Glyphicon} from 'react-bootstrap'
+
+import App from 'app'
+import ListEdit from 'components/list_edit'
+import StageLayout from './stage_layout'
+import AddProviderModal from './add_provider_modal'
+
+export default class ProviderSelectStage extends React.Component {
+
+  static get defaultProps() {return{
+    title: "Choose a provider",
+    subtitle: "This doesn't work yet"
+  }}
+
+  constructor(props) {
+    super(props)
+    let domains = this.currentDomains()
+    this.state = {
+      domains: domains,
+      showModal: false
+    }
+    this.add = this.add.bind(this)
+    this.remove = this.remove.bind(this)
+    this.close = this.close.bind(this)
+    this.previous = this.previous.bind(this)
+  }
+
+  currentDomains() {
+    // return(App.providers.domains().slice() || [])
+    return ['domain1', 'domain2', 'domain3']
+  }
+
+  add() {
+    this.setState({showModal: true})
+  }
+
+  remove(provider) {
+    // App.providers.remove(provider)
+    this.setState({domains: this.currentDomains()})
+  }
+
+  close() {
+    let domains = this.currentDomains()
+    if (domains.length != this.state.domains.length) {
+      // this is ugly, but i could not get selection working
+      // by passing it as a property
+      this.refs.list.setSelected(0)
+    }
+    this.setState({
+      domains: domains,
+      showModal: false
+    })
+  }
+
+  previous() {
+    App.start()
+  }
+
+  render() {
+    let modal = null
+    if (this.state.showModal) {
+      modal = <AddProviderModal onClose={this.close} />
+    }
+    let buttons = (
+      <ButtonToolbar className="pull-right">
+        <Button onClick={this.previous}>
+          <Glyphicon glyph="chevron-left" />
+          Previous
+        </Button>
+        <Button>
+          Next
+          <Glyphicon glyph="chevron-right" />
+        </Button>
+      </ButtonToolbar>
+    )
+    let select = <ListEdit ref="list" items={this.state.domains}
+      onRemove={this.remove} onAdd={this.add} />
+    return(
+      <StageLayout title={this.props.title} subtitle={this.props.subtitle} buttons={buttons}>
+        {select}
+        {modal}
+      </StageLayout>
+    )
+  }
+}