From 9a33e05d54a829b47339f6ef0b271ea34c91a9c0 Mon Sep 17 00:00:00 2001
From: Luke Schoen <ltfschoen@users.noreply.github.com>
Date: Sun, 30 Sep 2018 21:29:08 +1000
Subject: [PATCH] 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 | 3 ++-
 packages/app-accounts/src/Forgetting.tsx | 3 ++-
 packages/ui-app/src/Input.tsx            | 2 +-
 packages/ui-app/src/Password.tsx         | 6 ++++--
 packages/ui-keyring/src/account/save.ts  | 1 +
 packages/ui-signer/src/Unlock.tsx        | 5 +++--
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/app-accounts/src/ChangePass.tsx b/packages/app-accounts/src/ChangePass.tsx
index 546f6cbdd6..e8cad23892 100644
--- a/packages/app-accounts/src/ChangePass.tsx
+++ b/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()}
diff --git a/packages/app-accounts/src/Forgetting.tsx b/packages/app-accounts/src/Forgetting.tsx
index 38dc62f159..fac011ca87 100644
--- a/packages/app-accounts/src/Forgetting.tsx
+++ b/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()}
diff --git a/packages/ui-app/src/Input.tsx b/packages/ui-app/src/Input.tsx
index 2e2aef84e5..f325c40fa6 100644
--- a/packages/ui-app/src/Input.tsx
+++ b/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}
diff --git a/packages/ui-app/src/Password.tsx b/packages/ui-app/src/Password.tsx
index fcadd63e61..ffa41a6c00 100644
--- a/packages/ui-app/src/Password.tsx
+++ b/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
     });
diff --git a/packages/ui-keyring/src/account/save.ts b/packages/ui-keyring/src/account/save.ts
index f9b036ea3e..76b5afaa1e 100644
--- a/packages/ui-keyring/src/account/save.ts
+++ b/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);
 }
diff --git a/packages/ui-signer/src/Unlock.tsx b/packages/ui-signer/src/Unlock.tsx
index 1064ad7a96..02f04792eb 100644
--- a/packages/ui-signer/src/Unlock.tsx
+++ b/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}