Add Check and Change Password for an Account (#2861)

* Added new RPC endpoints to JSAPI (#2389)

* Added modal in Account Page to test & modify password (#2389)

* Modify hint with password change // Better tabs (#2556)

js/src/ui/Form/Input/input.js

@@ -44,13 +44,18 @@ export default class Input extends Component {
     onSubmit: PropTypes.func,
     rows: PropTypes.number,
     type: PropTypes.string,
+    submitOnBlur: PropTypes.bool,
     value: PropTypes.oneOfType([
       PropTypes.number, PropTypes.string
     ])
   }
 
+  static defaultProps = {
+    submitOnBlur: true
+  }
+
   state = {
-    value: this.props.value
+    value: this.props.value || ''
   }
 
   componentWillReceiveProps (newProps) {
@@ -97,8 +102,11 @@ export default class Input extends Component {
 
   onBlur = (event) => {
     const { value } = event.target;
+    const { submitOnBlur } = this.props;
 
-    this.onSubmit(value);
+    if (submitOnBlur) {
+      this.onSubmit(value);
+    }
 
     this.props.onBlur && this.props.onBlur(event);
   }

js/src/ui/Form/form.js

@@ -20,15 +20,23 @@ import styles from './form.css';
 
 export default class Form extends Component {
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    className: PropTypes.string
   }
 
   render () {
+    const { className } = this.props;
+    const classes = [ styles.form ];
+
+    if (className) {
+      classes.push(className);
+    }
+
     // HACK: hidden inputs to disable Chrome's autocomplete
     return (
       <form
         autoComplete='new-password'
-        className={ styles.form }>
+        className={ classes.join(' ') }>
         <div className={ styles.autofill }>
           <input type='text' name='fakeusernameremembered' />
           <input type='password' name='fakepasswordremembered' />