Add ConnectForm.

package.json

@@ -23,7 +23,8 @@
     "react": "0.14.7",
     "react-dom": "0.14.7",
     "react-redux": "4.4.0",
-    "redux": "3.3.1"
+    "redux": "3.3.1",
+    "redux-form": "~4.2.0"
   },
   "devDependencies": {
     "babel-cli": "6.5.1",

src/components/ConnectForm.js

@@ -0,0 +1,33 @@
+import React, {PropTypes} from "react";
+import {reduxForm} from "redux-form";
+
+import { STATE_CLOSED } from "../constants/socket";
+
+
+const ConnectForm = (props) => {
+    const { fields: { url }, handleSubmit, socket, socketActions } = props;
+    const submit = (values, dispatch) => {
+        dispatch(socketActions.open(values.url));
+    };
+    return (
+        <form onSubmit={handleSubmit(submit)}>
+            <input type="url" defaultValue="ws://localhost:2244" {...url}
+                required pattern="wss?://.+"/>
+            <button type="submit" disabled={socket.state !== STATE_CLOSED}>
+                Connect
+            </button>
+        </form>
+    );
+};
+
+ConnectForm.propTypes = {
+    fields: PropTypes.object.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    socket: PropTypes.object.isRequired,
+    socketActions: PropTypes.object.isRequired
+};
+
+export default reduxForm({
+    form: "connect",
+    fields: ["url"]
+})(ConnectForm);

src/components/SolsticeApp.js

@@ -1,21 +1,27 @@
-import React, {PropTypes} from 'react';
+import React, {PropTypes} from "react";
 
-const App = (props) => {
-    const { onClick, socket } = props;
+import ConnectForm from  "../components/ConnectForm";
+import { STATE_OPEN } from "../constants/socket";
+
+const SolsticeApp = (props) => {
+    const { socket, actions } = props;
+    if (socket.state !== STATE_OPEN ) {
+        return (
+            <ConnectForm socket={socket}
+                socketActions={actions.socketActions}/>
+        );
+    }
     return (
         <div>
             <h1>Solstice web UI</h1>
-            <div>Socket state: {socket.state}</div>
-            <button onClick={onClick}>
-                Connect
-            </button>
+            <div>Socket open</div>
         </div>
     );
 };
 
-App.propTypes = {
-    onClick: PropTypes.func.isRequired,
-    socket: PropTypes.object.isRequired
+SolsticeApp.propTypes = {
+    socket: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired
 };
 
-export default App;
+export default SolsticeApp;

src/constants/socket.js

@@ -0,0 +1,4 @@
+export const STATE_OPENING = 0;
+export const STATE_OPEN = 1;
+export const STATE_CLOSING = 2;
+export const STATE_CLOSED = 3;

src/containers/App.js

@@ -9,15 +9,7 @@ import socketActionsFactory from "../actions/socketActionsFactory";
 import socketHandlerActions from "../actions/socketHandlerActions";
 import SocketClient from "../utils/SocketClient";
 
-const App = (props) => {
-    const onClick = (event) => {
-        const url = "ws://localhost:2244";
-        props.actions.socketActions.open(url);
-    };
-    return (
-        <SolsticeApp socket={props.socket} onClick={onClick} />
-    );
-};
+const App = (props) => (<SolsticeApp {...props} />);
 
 App.propTypes = {
     actions: PropTypes.object.isRequired,

src/reducers/index.js

@@ -1,8 +1,11 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
+import { reducer as form } from "redux-form";
+
 import socket from "./socket";
 
 const rootReducer = combineReducers({
-    socket
+    socket,
+    form
 });
 
 export default rootReducer;

src/reducers/socket.js

@@ -1,11 +1,9 @@
 import objectAssign from "object-assign";
 
 import * as types from "../constants/ActionTypes";
-
-const STATE_OPENING = 0;
-const STATE_OPEN = 1;
-const STATE_CLOSING = 2;
-const STATE_CLOSED = 3;
+import {
+    STATE_OPENING, STATE_OPEN, STATE_CLOSING, STATE_CLOSED
+} from "../constants/socket.js";
 
 const initialState = {
     state: STATE_CLOSED,