Strategies should also have description #34

lib/strategyApi.js

@@ -1,9 +1,13 @@
 var strategies = [
-    {name: "default"},
     {
-        name: "activeForUsers",
+        name: "default",
+        description: "Default on or off Strategy."
+    },
+    {
+        name: "usersWithEmail",
+        description: "Active for users defined  in the comma-separated emails-parameter.",
         parametersTemplate: {
-            userNames: "String"
+            emails: "String"
         }
     }
 ];

public/js/components/form/TextInput.jsx

@@ -0,0 +1,45 @@
+var React          = require('react');
+
+var TextInput = React.createClass({
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        label: React.PropTypes.string.isRequired,
+        id: React.PropTypes.string.isRequired,
+        placeholder: React.PropTypes.string,
+        value: React.PropTypes.string,
+        required: React.PropTypes.bool
+    },
+
+    getDefaultProps: function() {
+        return {
+            required: false
+        };
+    },
+
+    getInitialState: function() {
+        return {};
+    },
+
+    getValue: function() {
+        return this.refs.input.getDOMNode().value.trim();
+    },
+
+
+    render: function() {
+        return (
+            <div className="formelement">
+                <label htmlFor="strategy_name" className="t4">{this.props.label}</label>
+                <div className="input">
+                    <input type="text"
+                        id={this.props.id}
+                        name={this.props.name}
+                        defaultValue={this.props.value}
+                        placeholder={this.props.placeholder}
+                        ref="input" />
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = TextInput;

public/js/components/strategy/Strategy.jsx

@@ -8,8 +8,9 @@ var Strategy = React.createClass({
     render: function() {
         return (
             <div className="line mal">
-                <div className="unit r-size1of3">
+                <div className="unit">
-                    {this.props.strategy.name}
+                    <strong>{this.props.strategy.name}</strong><br />
+                    <em>{this.props.strategy.description}</em>
                 </div>
             </div>
         );

public/js/components/strategy/StrategyForm.jsx

@@ -1,4 +1,5 @@
 var React          = require('react');
+var TextInput      = require('../form/TextInput');
 
 var StrategyForm = React.createClass({
 
@@ -18,7 +19,8 @@ var StrategyForm = React.createClass({
         event.preventDefault();
 
         var strategy = {};
-        strategy.name = this.refs.strategy_name.getDOMNode().value.trim();
+        strategy.name = this.refs.name.getValue();
+        strategy.description = this.refs.description.getValue();
         strategy.parametersTemplate = {};
 
         var that = this;
@@ -55,23 +57,24 @@ var StrategyForm = React.createClass({
                     <form onSubmit={this.onSubmit}>
                         <fieldset>
                             <legend>Create strategy</legend>
-                            <div className="formelement">
+
-                                <label htmlFor="strategy_name" className="t4">Name</label>
+                            <TextInput
-                                <div className="input">
+                                id="name"
-                                    <input
-                                        id="trategy_name"
-                                        ref="strategy_name"
-                                        type="text"
                                 name="name"
-                                        placeholder="Strategy name"
+                                label="Name"
-                                    />
+                                ref="name"
-                                </div>
+                                placeholder="Strategy name" />
-                            </div>
+
+                            <TextInput
+                                id="description"
+                                name="description"
+                                label="Description"
+                                ref="description"
+                                placeholder="Please write a short descriptio" />
 
                             {this.renderParameters()}
                             {this.renderRemoveLink()}
 
-
                             <div className="actions">
                                 <input type="submit" value="Save" className="primary mrs" />
                                 <button onClick={this.props.handleCancelNewStrategy} className="mrs">Cancel</button>