Update keystore visual indicator (#1355)

* update keystore visual indicator

* Update Keystore.tsx

* visual indication using filename

* updated for visual indication using filename

common/components/WalletDecrypt/WalletDecrypt.scss

@@ -97,6 +97,14 @@ $speed: 500ms;
       max-width: 360px;
       margin: 0 auto;
     }
+    &-label{
+      opacity: 0.8;
+      font-weight: 300;
+      white-space: nowrap;
+      width: 60%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 }
 

common/components/WalletDecrypt/components/Keystore.tsx

@@ -8,6 +8,7 @@ import { Input } from 'components/ui';
 export interface KeystoreValue {
   file: string;
   password: string;
+  filename: string;
   valid: boolean;
 }
 
@@ -37,7 +38,7 @@ export class KeystoreDecrypt extends PureComponent {
   };
 
   public render() {
-    const { isWalletPending, value: { file, password } } = this.props;
+    const { isWalletPending, value: { file, password, filename } } = this.props;
     const passReq = isPassRequired(file);
     const unlockDisabled = !file || (passReq && !password);
 
@@ -55,11 +56,17 @@ export class KeystoreDecrypt extends PureComponent {
               {translate('ADD_RADIO_2_SHORT')}
             </a>
           </label>
+
+          <label className="WalletDecrypt-decrypt-label" hidden={!file}>
+            <span>{filename}</span>
+          </label>
+
           {isWalletPending ? <Spinner /> : ''}
           <Input
             className={`${password.length > 0 ? 'is-valid' : 'is-invalid'} ${
               file.length && isWalletPending ? 'hidden' : ''
             }`}
+            disabled={!file}
             value={password}
             onChange={this.onPasswordChange}
             onKeyDown={this.onKeyDown}
@@ -100,6 +107,7 @@ export class KeystoreDecrypt extends PureComponent {
     const fileReader = new FileReader();
     const target = e.target;
     const inputFile = target.files[0];
+    const fileName = inputFile.name;
 
     fileReader.onload = () => {
       const keystore = fileReader.result;
@@ -109,7 +117,8 @@ export class KeystoreDecrypt extends PureComponent {
         ...this.props.value,
         file: keystore,
         valid: keystore.length && !passReq,
-        password: ''
+        password: '',
+        filename: fileName
       });
       this.props.onUnlock();
     };