Signer unlock password indicator (#2190)

* Signer unlock password indicator

* Combine UnlockError in Unlock

packages/app-accounts/src/modals/Transfer.tsx

@@ -109,8 +109,10 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
             type='allPlus'
           />
           <InputBalance
+            autoFocus
             help={t('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')}
             isError={!hasAvailable}
+            isZeroable
             label={t('amount')}
             maxValue={maxBalance}
             onChange={setAmount}

packages/react-components/src/Password.tsx

@@ -18,7 +18,9 @@ interface Props extends BareProps {
   help?: string;
   isDisabled?: boolean;
   isError?: boolean;
+  isFull?: boolean;
   label?: string;
+  labelExtra?: React.ReactNode;
   name?: string;
   onChange: (value: string) => void;
   onEnter?: () => void;
@@ -28,7 +30,7 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-export default function Password ({ autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
+export default function Password ({ autoFocus, children, className, defaultValue, help, isDisabled, isError, isFull, label, labelExtra, name, onChange, onEnter, onEscape, style, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
   const [isVisible, setIsVisible] = useState(false);
 
   const _toggleVisible = (): void => setIsVisible(!isVisible);
@@ -42,7 +44,9 @@ export default function Password ({ autoFocus, children, className, defaultValue
       isAction
       isDisabled={isDisabled}
       isError={isError}
+      isFull={isFull}
       label={label}
+      labelExtra={labelExtra}
       maxLength={MAX_PASS_LEN}
       name={name}
       onChange={onChange}

packages/react-signer/src/Modal.tsx

@@ -25,7 +25,6 @@ import { assert, isFunction } from '@polkadot/util';
 import { format } from '@polkadot/util/logger';
 
 import ledgerSigner from './LedgerSigner';
-import PasswordCheck from './PasswordCheck';
 import Transaction from './Transaction';
 import Qr from './Qr';
 import Unlock from './Unlock';
@@ -320,19 +319,15 @@ class Signer extends React.PureComponent<Props, State> {
     }
 
     return (
-      <>
-        <Unlock
-          autoFocus
-          error={unlockError || undefined}
-          onChange={this.onChangePassword}
-          password={password}
-          value={currentItem.accountId}
-          tabIndex={1}
-        />
-        <PasswordCheck
-          unlockError={unlockError}
-        />
-      </>
+      <Unlock
+        autoFocus
+        error={unlockError || undefined}
+        onChange={this.onChangePassword}
+        onEnter={this.onSend}
+        password={password}
+        value={currentItem.accountId}
+        tabIndex={1}
+      />
     );
   }
 

packages/react-signer/src/PasswordCheck.tsx

@@ -1,26 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-import styled from 'styled-components';
-
-import { useTranslation } from './translate';
-
-interface Props {
-  className?: string;
-  unlockError?: string | null;
-}
-
-function PasswordCheck ({ className, unlockError }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-
-  return unlockError
-    ? <div className={className}>{t('wrong password')}</div>
-    : null;
-}
-
-export default styled(PasswordCheck)`
-  margin-left: 15em;
-  color: #9f3a38;
-`;

packages/react-signer/src/Unlock.tsx

@@ -5,6 +5,7 @@
 import { KeyringPair } from '@polkadot/keyring/types';
 
 import React, { useState } from 'react';
+import styled from 'styled-components';
 import { Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
@@ -12,6 +13,7 @@ import { useTranslation } from './translate';
 
 interface Props {
   autoFocus?: boolean;
+  className?: string;
   error?: string;
   onChange: (password: string) => void;
   onEnter?: () => void;
@@ -28,7 +30,7 @@ function getPair (address?: string | null): KeyringPair | null {
   }
 }
 
-export default function Unlock ({ autoFocus, error, onChange, onEnter, password, tabIndex, value }: Props): React.ReactElement<Props> | null {
+function Unlock ({ autoFocus, className, error, onChange, onEnter, password, tabIndex, value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [pair] = useState<KeyringPair | null>(getPair(value));
 
@@ -37,11 +39,13 @@ export default function Unlock ({ autoFocus, error, onChange, onEnter, password,
   }
 
   return (
-    <div className='ui--signer-Signer-Unlock'>
+    <div className={`ui--signer-Signer-Unlock ${className}`}>
       <Password
         autoFocus={autoFocus}
         isError={!!error}
+        isFull
         label={t('unlock account with password')}
+        labelExtra={error && <div className='errorLabel'>{t('wrong password supplied')}</div>}
         onChange={onChange}
         onEnter={onEnter}
         tabIndex={tabIndex}
@@ -50,3 +54,10 @@ export default function Unlock ({ autoFocus, error, onChange, onEnter, password,
     </div>
   );
 }
+
+export default styled(Unlock)`
+  .errorLabel {
+    margin-right: 2rem;
+    color: #9f3a38 !important;
+  }
+`;