bitshares#1997 Replace old components to style-guide. Keep error repo…

…rting consistent (display error on input instead of notification)
gibbsfromncis · Dec 12, 2018 · c1e7731 · c1e7731
1 parent d148cb9
commit c1e7731
Showing 1 changed file with 54 additions and 34 deletions.
diff --git a/app/components/Login/DecryptBackup.jsx b/app/components/Login/DecryptBackup.jsx
@@ -1,8 +1,6 @@
 import React, {Component} from "react";
-import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import {connect} from "alt-react";
-import Translate from "react-translate-component";
 import {PrivateKey} from "bitsharesjs/es";
 import WalletManagerStore from "stores/WalletManagerStore";
 import BackupStore from "stores/BackupStore";
@@ -11,10 +9,9 @@ import WalletActions from "actions/WalletActions";
 import WalletDb from "stores/WalletDb";
 import WalletUnlockActions from "actions/WalletUnlockActions";
 import BackupActions, {restore} from "actions/BackupActions";
-import notify from "actions/NotificationActions";
 import SettingsActions from "actions/SettingsActions";
 import Icon from "../Icon/Icon";
-import {Button, Input} from "bitshares-ui-style-guide";
+import {Button, Form, Input, Notification} from "bitshares-ui-style-guide";
 import counterpart from "counterpart";
 
 class DecryptBackup extends Component {
@@ -36,7 +33,8 @@ class DecryptBackup extends Component {
     constructor() {
         super();
         this.state = {
-            backupPassword: ""
+            backupPassword: "",
+            formError: ""
         };
 
         this.onPassword = this.onPassword.bind(this);
@@ -45,11 +43,7 @@ class DecryptBackup extends Component {
 
     componentDidUpdate(prevProps) {
         if (this.props.active) {
-            let node = ReactDOM.findDOMNode(this.refs.passwordInput);
-
-            if (node && node.focus) {
-                node.focus();
-            }
+            this.refs.passwordInput.focus();
         }
         if (!prevProps.currentAccount && this.props.currentAccount) {
             this.props.history.push("/");
@@ -85,9 +79,15 @@ class DecryptBackup extends Component {
                     error.stack
                 );
                 if (error === "invalid_decryption_key") {
-                    notify.error("Invalid Password");
+                    this.setState({
+                        formError: counterpart.translate(
+                            "notifications.invalid_password"
+                        )
+                    });
                 } else {
-                    notify.error(`${error}`);
+                    this.setState({
+                        formError: error
+                    });
                 }
                 this.setState({passwordError: true});
             });
@@ -96,7 +96,10 @@ class DecryptBackup extends Component {
     formChange(event) {
         const state = {};
         state[event.target.id] = event.target.value;
-        this.setState(state);
+        this.setState({
+            ...state,
+            formError: ""
+        });
     }
 
     renderButtons() {
@@ -116,34 +119,51 @@ class DecryptBackup extends Component {
     }
 
     render() {
+        const getPasswordInputValidateStatus = () => {
+            return this.state.formError ? "error" : "";
+        };
+
+        const getPasswordInputHelp = () => {
+            return this.state.formError ? this.state.formError : "";
+        };
+
         return (
             <form onSubmit={this.onPassword}>
                 <div
                     className={`${
                         !this.props.active ? "display-none" : ""
                     } password-block`}
                 >
-                    <label
-                        className="text-left left-label"
-                        htmlFor="backupPassword"
-                    >
-                        <Translate content="settings.password" />
-                    </label>
-                    <Input
-                        className={`${
-                            this.state.passwordError
-                                ? "input-warning"
-                                : this.state.backupPassword
-                                    ? "input-success"
-                                    : ""
-                        } input create-account-input`}
-                        type={!this.state.passwordVisible ? "password" : "text"}
-                        id="backupPassword"
-                        onChange={this.formChange}
-                        value={this.state.backupPassword}
-                        ref="passwordInput"
-                        autoFocus={true}
-                    />
+                    <Form layout="vertical" style={{textAlign: "left"}}>
+                        <Form.Item
+                            label={counterpart.translate("settings.password")}
+                            validateStatus={getPasswordInputValidateStatus()}
+                            help={getPasswordInputHelp()}
+                        >
+                            <Input
+                                className={`${
+                                    this.state.passwordError
+                                        ? "input-warning"
+                                        : this.state.backupPassword
+                                            ? "input-success"
+                                            : ""
+                                } input create-account-input`}
+                                type={
+                                    !this.state.passwordVisible
+                                        ? "password"
+                                        : "text"
+                                }
+                                placeholder={counterpart.translate(
+                                    "wallet.enter_password"
+                                )}
+                                id="backupPassword"
+                                onChange={this.formChange}
+                                value={this.state.backupPassword}
+                                ref="passwordInput"
+                                autoFocus={true}
+                            />
+                        </Form.Item>
+                    </Form>
                     {!this.state.passwordVisible ? (
                         <span
                             className="no-width eye-block"