added organization and hooked up the feedback.

public/css/main.css

@@ -119,7 +119,7 @@ Feedback field
     position: relative;
     text-align: center;
     top:200px;
-    background:rgba(0, 0, 0, 0.4);
+    background:rgba(0, 0, 0, 0.4); 
     width: 550px;
     height: 225px;
     color: white;

src/actions/index.js

@@ -38,11 +38,19 @@ export const GET_KUBAM_IP = 'GET_KUBAM_IP';
 export const RECEIVED_KUBAM_IP = 'RECEIVED_KUBAM_IP';
 export const GET_PROXY = 'GET_PROXY';
 export const RECEIVED_PROXY = 'RECEIVED_PROXY';
+
+export const GET_ORG = 'GET_ORG';
+export const RECEIVED_ORG = 'RECEIVED_ORG';
+
 export const UPDATE_SETTINGS = 'UPDATE_SETTINGS';
 export const DID_UPDATE_SETTINGS = 'DID_UPDATE_SETTINGS';
 export const DEPLOY = 'DEPLOY';
 export const DESTROY = 'DESTROY';
 export const DID_DEPLOY = 'DID_DEPLOY';
+/* Feedback */
+export const POST_FEEDBACK = 'POST_FEEDBACK';
+export const POSTED_FEEDBACK = 'POSTED_FEEDBACK';
+
 
 export const selectTab = (selected) => ({
   type: SELECTED_TAB,
@@ -183,17 +191,28 @@ export const receivedProxy = (proxy) => ({
   proxy,
 })
 
+export const getOrg = () => ({
+  type: GET_ORG,
+})
+
+export const receivedOrg = (org) => ({
+  type: RECEIVED_ORG,
+  org,
+})
+
+
 export const receivedKeys = (keys) => ({
   type: RECEIVED_KEYS,
   keys,
 })
 
 // update settings
-export const updateSettings = (kubam_ip, keys, proxy) =>  ({
+export const updateSettings = (kubam_ip, keys, proxy, org) =>  ({
   type: UPDATE_SETTINGS,
   kubam_ip,
   keys,
   proxy,
+  org,
 })
 
 
@@ -223,3 +242,15 @@ export const receivedCatalog = (catalog) => ({
   type: RECEIVED_CATALOG,
   catalog,
 })
+
+export const postFeedback = (feedback) =>  ({
+  type: POST_FEEDBACK,
+  feedback,
+})
+
+export const postedFeedback = (response) =>  ({
+  type: POSTED_FEEDBACK,
+  response,
+})
+
+

src/components/Feedbackfield.js

@@ -1,51 +1,76 @@
-import React from 'react'
+import React, {Component } from 'react'
+import { connect } from 'react-redux'
+import {postFeedback} from '../actions'
 //import PropTypes from 'prop-types'
 
-var Feedbackfield = ({selected, onClick}) => (
-    <div >
-
-        <div id="feedback">
-            <a onClick={activateLasers}>
-                      Tell us something...
-            </a>
-        </div>
-
-        <div id="feedbackoverlay">
-            <div id="feedbackform">
-                <div id="closeform">
-                    <a onClick={deactivateLasers} id="closeform">X</a>
-                 </div>
-                    <form>
-                       Tell us something...
-                                <br></br>
-                                <textarea
-                                  rows="4" cols="50">
-                            </textarea>
-                            <br></br>
-                            <input type="submit" value="Submit">
-                            </input>
-                    </form>
-            </div>
-        </div>
-     </div>
-);
-
-Feedbackfield.propTypes = {
- // onClick: PropTypes.func.isRequired,
-}
-
-export default Feedbackfield
-
-function activateLasers(){
+class Feedbackfield extends Component {
+  activateLasers = () => {
     var feedbackoverlay=document.getElementById("feedbackoverlay");
     feedbackoverlay.style.display = 'inline';
     return;
-}
+  }
 
-function deactivateLasers(){
+  deactivateLasers = () => {
     var feedbackoverlay=document.getElementById("feedbackoverlay");
     feedbackoverlay.style.display = 'none';
     return;
+  }
+
+  submitFeedback = (e) =>  {
+    e.preventDefault();
+    var m = document.getElementById("message")
+    this.props.postFeedback(m.value)
+    m.value = ""
+    this.deactivateLasers()
+  }
+
+  render() {
+    return (
+    <div >
+      <div id="feedback">
+        <a onClick={this.activateLasers}>
+                  Tell us something...
+        </a>
+      </div>
+
+      <div id="feedbackoverlay">
+        <div id="feedbackform">
+          <div id="closeform">
+              <a onClick={this.deactivateLasers} id="closeform"><span>&times;</span></a>
+          </div>
+          <form className="form">
+            Tell us something...
+            <br></br>
+            <textarea id="message" rows="4" cols="50"/>
+            <br/>
+            <button onClick={(e) => this.submitFeedback(e)} className="btn btn-primary" >Submit</button>
+            <br/>
+            <div>
+              <br />
+              <small>Your feedback will be sent to our private <a href="https://ciscospark.com">spark</a> room.  
+              <br/>
+              Please include contact information if you want us to respond to you.</small>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )}
 }
 
+const mapStateToProps = (state, ownProps) => ({
+  feedback: state.kubam.feedback,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  postFeedback: (feedback) => dispatch(postFeedback(feedback))
+})
+
+
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps)(Feedbackfield)
+
+
 

src/components/panels/settings/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-var SettingsPanel = ({working, keys, kubam_ip, proxy, onChange, updateSettingsFunc}) => (
+var SettingsPanel = ({working, keys, kubam_ip, proxy, org, onChange, updateSettingsFunc}) => (
 
   <div className="card-body">
     <div className="row">
@@ -28,6 +28,21 @@ var SettingsPanel = ({working, keys, kubam_ip, proxy, onChange, updateSettingsFu
         </form>
       </div>
     </div>
+    <div className="row">
+      <div className="col">
+        <p className="small text-muted">
+          KUBAM will create resources inside UCS.  By default all resources will be created under the kubam org.  You can, however, put any org you want.  No spaces or tricky names.  UCS doesn't like that.
+        </p>
+        <form className="form">
+          <div className="form-group row">
+            <label htmlFor="org" className="col-sm-2 col-form-label">UCS Organization</label>
+            <div className="col-sm-6">
+              <input type="text" onChange={onChange} className="form-control" id="org" value={org} placeholder="kubam" />
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
     <div className="row">
       <div className="col">
         <p className="small text-muted">Please enter a public key so you can log into the servers after they are installed. </p>

src/containers/Deploy.js

@@ -48,7 +48,8 @@ class Deploy extends Component {
   }
 
   destroyFunc = (event) => {
-    this.props.destroy()
+    this.props.destroy();
+    document.getElementById('destroyoverlay').style.display = 'none';
   }
 
   render() {

src/containers/Settings.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { getKUBAMIP, getKeys, getProxy, updateSettings } from '../actions'
+import { getKUBAMIP, getKeys, getProxy, getOrg, updateSettings } from '../actions'
 import SettingsPanel from '../components/panels/settings/'
 import Error from '../components/Error'
 
@@ -10,6 +10,7 @@ class Settings extends Component {
     this.state = {
       keys: this.props.keys ,
       kubam_ip: this.props.kubam_ip,
+      org: this.props.org,
       proxy: this.props.proxy, 
       working: this.props.working,
     }
@@ -21,13 +22,15 @@ class Settings extends Component {
     this.props.getKUBAMIP()
     this.props.getKeys()
     this.props.getProxy()
+    this.props.getOrg()
   }
 
   componentWillReceiveProps(nextProps) {
     this.setState({
       keys: Array.isArray(nextProps.keys) ? nextProps.keys[0] : "",
       kubam_ip: nextProps.kubam_ip,
       proxy: nextProps.proxy, 
+      org: nextProps.org,
       working: nextProps.working,
     })
   }
@@ -44,6 +47,9 @@ class Settings extends Component {
       case "proxy":
         s.proxy = event.target.value;
         break;
+      case "org":
+        s.org = event.target.value;
+        break;
       default:
 
     }
@@ -53,14 +59,14 @@ class Settings extends Component {
   updateFunc = (event) => {
     // get the ip and the key. 
     // the keys should be in an array.  Right now the interface only allows for one key. 
-    this.props.updateSettings(this.state.kubam_ip, [this.state.keys], this.state.proxy);
+    this.props.updateSettings(this.state.kubam_ip, [this.state.keys], this.state.proxy, this.state.org);
   }
 
   render() {
     return (
       <div>
         <Error error={this.props.error} />
-        <SettingsPanel working={this.state.working} keys={this.state.keys} proxy={this.state.proxy} kubam_ip={this.state.kubam_ip} onChange={this.handleChange} updateSettingsFunc={this.updateFunc} />
+        <SettingsPanel working={this.state.working} keys={this.state.keys} org={this.state.org} proxy={this.state.proxy} kubam_ip={this.state.kubam_ip} onChange={this.handleChange} updateSettingsFunc={this.updateFunc} />
       </div>
     )
   }
@@ -70,6 +76,7 @@ const mapStateToProps = (state, ownProps) => ({
   keys: state.settings.keys,
   kubam_ip: state.settings.kubam_ip,
   proxy: state.settings.proxy, 
+  org: state.settings.org, 
   working: state.settings.fetching,
   error: state.settings.error, 
 })
@@ -78,7 +85,8 @@ const mapDispatchToProps = (dispatch)  => ({
   getKUBAMIP: () => dispatch(getKUBAMIP()),
   getKeys: () => dispatch(getKeys()),
   getProxy: () => dispatch(getProxy()),
-  updateSettings: (kubam_ip, keys, proxy) => dispatch(updateSettings(kubam_ip, keys, proxy)),
+  getOrg: () => dispatch(getOrg()),
+  updateSettings: (kubam_ip, keys, proxy, org) => dispatch(updateSettings(kubam_ip, keys, proxy, org)),
 })
 
 export default connect(

src/reducers/index.js

@@ -7,6 +7,7 @@ import server from './server'
 import os from './os'
 import settings from './settings'
 import deploy from './deploy'
+import kubam from './kubam'
 
 const kubamApp = combineReducers({
   tabs,
@@ -17,6 +18,7 @@ const kubamApp = combineReducers({
   os, 
   settings,
   deploy,
+  kubam,
 })
 
 export default kubamApp

src/reducers/kubam.js

@@ -0,0 +1,22 @@
+import {
+  POST_FEEDBACK,
+  POSTED_FEEDBACK,
+} from '../actions'
+
+const kubam = (state = {
+  feedback: "",
+  }, action) => {
+  switch (action.type) {
+    case POST_FEEDBACK:
+      return Object.assign({}, state, {
+        feedback: action.feedback,
+      })
+    case POSTED_FEEDBACK:
+      return Object.assign({}, state, {
+        feedback: "",
+      })
+    default:
+      return state
+  }
+}
+export default kubam

src/reducers/settings.js

@@ -2,6 +2,7 @@ import {
   RECEIVED_KEYS,
   RECEIVED_KUBAM_IP, 
   RECEIVED_PROXY,
+  RECEIVED_ORG,
   KUBAM_ERROR,
   UPDATE_SETTINGS,
   DID_UPDATE_SETTINGS,
@@ -12,6 +13,7 @@ const settings = (state = {
   kubam_ip: "",
   fetching: false, 
   proxy: "", 
+  org: "",
   msg: "", 
   error: "", 
   }, action) => {
@@ -34,6 +36,12 @@ const settings = (state = {
         fetching: false,
         error: "",
       })
+    case RECEIVED_ORG:
+      return Object.assign({}, state, {
+        org: action.org,
+        fetching: false,
+        error: "",
+      })
     case KUBAM_ERROR: 
       return Object.assign({}, state, {
         fetching: false,
@@ -44,6 +52,7 @@ const settings = (state = {
         keys: action.keys,
         kubam_ip: action.kubam_ip,
         proxy: action.proxy,
+        org: action.org, 
         fetching: true,
         error: "",
       })