Refactor UI error effects

And add error effects to the login page to be consistent with the registration page

src/components/views/login/PasswordLogin.js

@@ -14,8 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import {field_input_incorrect} from '../../../UiEffects';
+
 
 /**
  * A pure UI component which displays a username/password form.
@@ -28,6 +31,7 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         initialPassword: React.PropTypes.string,
         onUsernameChanged: React.PropTypes.func,
         onPasswordChanged: React.PropTypes.func,
+        loginIncorrect: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -36,6 +40,7 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
             onPasswordChanged: function() {},
             initialUsername: "",
             initialPassword: "",
+            loginIncorrect: false,
         };
     },
 
@@ -46,6 +51,16 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         };
     },
 
+    componentWillMount: function() {
+        this._passwordField = null;
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        if (!this.props.loginIncorrect && nextProps.loginIncorrect) {
+            field_input_incorrect(this._passwordField);
+        }
+    },
+
     onSubmitForm: function(ev) {
         ev.preventDefault();
         this.props.onSubmit(this.state.username, this.state.password);
@@ -72,14 +87,19 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
             );
         }
 
+        const pwFieldClass = classNames({
+            mx_Login_field: true,
+            error: this.props.loginIncorrect,
+        });
+
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
-                <input className="mx_Login_field" ref="user" type="text"
+                <input className="mx_Login_field" type="text"
                     value={this.state.username} onChange={this.onUsernameChanged}
                     placeholder="Email or user name" autoFocus />
                 <br />
-                <input className="mx_Login_field" ref="pass" type="password"
+                <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
                     value={this.state.password} onChange={this.onPasswordChanged}
                     placeholder="Password" />
                 <br />
@@ -89,4 +109,4 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
             </div>
         );
     }
-});
+});

src/components/views/login/RegistrationForm.js

@@ -17,8 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var Velocity = require('velocity-vector');
-require('velocity-vector/velocity.ui');
+var UiEffects = require('../../../UiEffects');
 var sdk = require('../../../index');
 var Email = require('../../../email');
 var Modal = require("../../../Modal");
@@ -117,7 +116,7 @@ module.exports = React.createClass({
             promise.finally(function() {
                 ev.target.disabled = false;
             });
-        }        
+        }
     },
 
     /**
@@ -196,7 +195,7 @@ module.exports = React.createClass({
         fieldValid[field_id] = val;
         this.setState({fieldValid: fieldValid});
         if (!val) {
-            Velocity(this.fieldElementById(field_id), "callout.shake", 300);
+            UiEffects.field_input_incorrect(this.fieldElementById(field_id));
             this.props.onError(error_code);
         }
     },
@@ -214,12 +213,13 @@ module.exports = React.createClass({
         }
     },
 
-    _styleField: function(field_id, baseStyle) {
-        var style = baseStyle || {};
+    _classForField: function(field_id, baseClass) {
+        let cls = baseClass || '';
         if (this.state.fieldValid[field_id] === false) {
-            style['borderColor'] = 'red';
+            if (cls) cls += ' ';
+            cls += 'error';
         }
-        return style;
+        return cls;
     },
 
     render: function() {
@@ -227,10 +227,10 @@ module.exports = React.createClass({
         var emailSection, registerButton;
         if (this.props.showEmail) {
             emailSection = (
-                <input className="mx_Login_field" type="text" ref="email"
+                <input type="text" ref="email"
                     autoFocus={true} placeholder="Email address (optional)"
                     defaultValue={this.props.defaultEmail}
-                    style={this._styleField(FIELD_EMAIL)}
+                    className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
                     onBlur={function() {self.validateField(FIELD_EMAIL)}} />
             );
         }
@@ -250,22 +250,22 @@ module.exports = React.createClass({
                 <form onSubmit={this.onSubmit}>
                     {emailSection}
                     <br />
-                    <input className="mx_Login_field" type="text" ref="username"
+                    <input type="text" ref="username"
                         placeholder={ placeholderUserName } defaultValue={this.props.defaultUsername}
-                        style={this._styleField(FIELD_USERNAME)}
+                        className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
                         onBlur={function() {self.validateField(FIELD_USERNAME)}} />
                     <br />
                     { this.props.guestUsername ?
                         <div className="mx_Login_fieldLabel">Setting a user name will create a fresh account</div> : null
                     }
-                    <input className="mx_Login_field" type="password" ref="password"
-                        style={this._styleField(FIELD_PASSWORD)}
+                    <input type="password" ref="password"
+                        className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
                         onBlur={function() {self.validateField(FIELD_PASSWORD)}}
                         placeholder="Password" defaultValue={this.props.defaultPassword} />
                     <br />
-                    <input className="mx_Login_field" type="password" ref="passwordConfirm"
+                    <input type="password" ref="passwordConfirm"
                         placeholder="Confirm password"
-                        style={this._styleField(FIELD_PASSWORD_CONFIRM)}
+                        className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
                         onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM)}}
                         defaultValue={this.props.defaultPassword} />
                     <br />