fix: Show errors. Add Password maxLength. Fix classes lib. Fix styles. (#335)

* Account change password

* Small cleanups

* Props, State to Component

* fix: Allow change account immediately after create account without refresh page

* fix: Add missing label prop to allow overriding default label

* feat: Add maxLength of 32 to Password component and pass prop to Input

* fix: Restricted spacebar key in Password using onKeyDown

* fix: Add missing classes library to Password component Input

* fix: Add className to ChangePass modal component using classes library

* fix: Reorder props alphabetically

* fix: Add missing  namespace to className of AddressSummary in ChangePass

* fix: Show submission errors in ChangePass modal using Semantic Message component

* fix: Add side padding to error component in ChangePass modal

* fix: Removed unused variable to fix TS lint error

* revert showing error messages

* fix: Revert restriction so allow spacebar key in Password using onKeyDown

* fix: Add className to outer Modal component

packages/app-accounts/src/ChangePass.tsx

@@ -43,9 +43,10 @@ class ChangePass extends React.PureComponent<Props, State> {
   render () {
     return (
       <Modal
-        size='tiny'
+        className='accounts--ChangePass-Modal'
         dimmer='inverted'
         open
+        size='tiny'
       >
         {this.renderContent()}
         {this.renderButtons()}

packages/app-accounts/src/Forgetting.tsx

@@ -21,9 +21,10 @@ class Forgetting extends React.PureComponent<Props> {
   render () {
     return (
       <Modal
-        size='tiny'
+        className='accounts--Forgetting-Modal'
         dimmer='inverted'
         open
+        size='tiny'
       >
         {this.renderContent()}
         {this.renderButtons()}

packages/ui-app/src/Input.tsx

@@ -106,8 +106,8 @@ export default class Input extends React.PureComponent<Props, State> {
           error={isError}
           hidden={isHidden}
           max={max}
-          min={min}
           maxLength={maxLength}
+          min={min}
           name={name || this.state.name}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}

packages/ui-app/src/Password.tsx

@@ -6,6 +6,7 @@ import { BareProps } from './types';
 
 import React from 'react';
 
+import classes from './util/classes';
 import Button from './Button';
 import Input from './Input';
 
@@ -40,12 +41,13 @@ export default class Password extends React.PureComponent<Props, State> {
     return (
       <Input
         autoFocus={autoFocus}
-        className={className}
+        className={classes('ui--Password', className)}
         defaultValue={defaultValue}
         isAction
         isDisabled={isDisabled}
         isError={isError}
         label={label}
+        maxLength={32}
         name={name}
         onChange={onChange}
         onKeyDown={onKeyDown}
@@ -73,7 +75,7 @@ export default class Password extends React.PureComponent<Props, State> {
     );
   }
 
-  onToggleVisible = (): void => {
+  private onToggleVisible = (): void => {
     this.setState({
       isVisible: !this.state.isVisible
     });

packages/ui-keyring/src/account/save.ts

@@ -12,5 +12,6 @@ export default function saveAccount (state: State, pair: KeyringPair, password?:
     json.meta.whenCreated = Date.now();
   }
 
+  state.keyring.addFromJson(json);
   state.accounts.add(json.address, json);
 }

packages/ui-signer/src/Unlock.tsx

@@ -15,6 +15,7 @@ import translate from './translate';
 type Props = I18nProps & {
   autoFocus?: boolean,
   error?: string,
+  label?: string,
   onChange: (password: string) => void,
   onKeyDown?: (event: React.KeyboardEvent<Element>) => void,
   password: string,
@@ -43,7 +44,7 @@ class Unlock extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { autoFocus, onChange, onKeyDown, password, t, tabIndex } = this.props;
+    const { autoFocus, label, onChange, onKeyDown, password, t, tabIndex } = this.props;
     const { isError, isLocked } = this.state;
 
     if (!isLocked) {
@@ -57,7 +58,7 @@ class Unlock extends React.PureComponent<Props, State> {
             autoFocus={autoFocus}
             className='medium'
             isError={isError}
-            label={t('unlock.password', {
+            label={label || t('unlock.password', {
               defaultValue: 'unlock account using'
             })}
             onChange={onChange}