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' />

js/src/ui/IdentityName/identityName.js

@@ -22,6 +22,7 @@ const defaultName = 'UNNAMED';
 
 class IdentityName extends Component {
   static propTypes = {
+    className: PropTypes.string,
     address: PropTypes.string,
     accountsInfo: PropTypes.object,
     tokens: PropTypes.object,
@@ -31,7 +32,7 @@ class IdentityName extends Component {
   }
 
   render () {
-    const { address, accountsInfo, tokens, empty, shorten, unknown } = this.props;
+    const { address, accountsInfo, tokens, empty, shorten, unknown, className } = this.props;
     const account = accountsInfo[address] || tokens[address];
     const hasAccount = account && (!account.meta || !account.meta.deleted);
 
@@ -47,7 +48,9 @@ class IdentityName extends Component {
       : fallback;
 
     return (
-      <span>{ name && name.length ? name : fallback }</span>
+      <span className={ className }>
+        { name && name.length ? name : fallback }
+      </span>
     );
   }