Update existing forms on the site to use formsy

Or not in the case of the search form

src/components/languagechooser/languagechooser.jsx

@@ -4,6 +4,7 @@ var React = require('react');
 var Api = require('../../mixins/api.jsx');
 var jar  = require('../../lib/jar.js');
 var languages = require('../../../languages.json');
+var Form = require('../forms/form.jsx');
 var Select = require('../forms/select.jsx');
 
 /**
@@ -20,9 +21,8 @@ var LanguageChooser = React.createClass({
             locale: window._locale
         };
     },
-    onSetLanguage: function (e) {
+    onSetLanguage: function (name, value) {
-        e.preventDefault();
+        jar.set('scratchlanguage', value);
-        jar.set('scratchlanguage', e.target.value);
         window.location.reload();
     },
     render: function () {
@@ -30,17 +30,16 @@ var LanguageChooser = React.createClass({
             'language-chooser',
             this.props.className
         );
-
+        var languageOptions = Object.keys(this.props.languages).map(function (value) {
+            return {value: value, label: this.props.languages[value]};
+        }.bind(this));
         return (
-            <div className={classes}>
+            <Form className={classes}>
-                <Select name="language" defaultValue={this.props.locale} onChange={this.onSetLanguage}>
+                <Select name="language"
-                    {Object.keys(this.props.languages).map(function (value) {
+                        options={languageOptions}
-                        return <option value={value} key={value}>
+                        defaultValue={this.props.locale}
-                                    {this.props.languages[value]}
+                        onChange={this.onSetLanguage} />
-                                </option>;
+            </Form>
-                    }.bind(this))}
-                </Select>
-            </div>
         );
     }
 });

src/components/login/login.jsx

@@ -1,9 +1,9 @@
 var React = require('react');
-var ReactDOM = require('react-dom');
 var FormattedMessage = require('react-intl').FormattedMessage;
 
 var log = require('../../lib/log.js');
 
+var Form = require('../forms/form.jsx');
 var Input = require('../forms/input.jsx');
 var Button = require('../forms/button.jsx');
 var Spinner = require('../spinner/spinner.jsx');
@@ -21,13 +21,9 @@ var Login = React.createClass({
             waiting: false
         };
     },
-    handleSubmit: function (event) {
+    handleSubmit: function (formData) {
-        event.preventDefault();
         this.setState({waiting: true});
-        this.props.onLogIn({
+        this.props.onLogIn(formData, function (err) {
-            'username': ReactDOM.findDOMNode(this.refs.username).value,
-            'password': ReactDOM.findDOMNode(this.refs.password).value
-        }, function (err) {
             if (err) log.error(err);
             this.setState({waiting: false});
         }.bind(this));
@@ -39,7 +35,7 @@ var Login = React.createClass({
         }
         return (
             <div className="login">
-                <form onSubmit={this.handleSubmit}>
+                <Form onSubmit={this.handleSubmit}>
                     <label htmlFor="username" key="usernameLabel">
                         <FormattedMessage
                             id='general.username'
@@ -69,7 +65,7 @@ var Login = React.createClass({
                             defaultMessage={'Forgot Password?'} />
                     </a>
                     {error}
-                </form>
+                </Form>
             </div>
         );
     }

src/components/navigation/www/navigation.jsx

@@ -11,6 +11,7 @@ var Api = require('../../../mixins/api.jsx');
 var Avatar = require('../../avatar/avatar.jsx');
 var Button = require('../../forms/button.jsx');
 var Dropdown = require('../../dropdown/dropdown.jsx');
+var Form = require('../../forms/form.jsx');
 var Input = require('../../forms/input.jsx');
 var log = require('../../../lib/log.js');
 var Login = require('../../login/login.jsx');
@@ -220,7 +221,8 @@ var Navigation = React.createClass({
                             <Input type="text"
                                    aria-label={formatMessage({id: 'general.search'})}
                                    placeholder={formatMessage({id: 'general.search'})}
-                                   name="q" />
+                                   name="q"
+                                   noformsy />
                         </form>
                     </li>
                     {this.props.session.status === sessionActions.Status.FETCHED ? (