Merge pull request #2133 from MikhailKavalenka/ol-login-fixes

Closes #2025 Closes #1832 Ol login fixes
bitshares · Nov 12, 2018 · ac2db25 · ac2db25
2 parents d164307 + 1893c00
commit ac2db25
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 37 deletions.
diff --git a/app/assets/stylesheets/components/registration/_account-registration.scss b/app/assets/stylesheets/components/registration/_account-registration.scss
@@ -31,6 +31,22 @@ div.registration {
         padding: 0 15px;
         text-align: left;
 
+        span.inline-label {
+            max-width: 30rem;
+
+            &.generated-password-field {
+                margin-bottom: 1.5rem;
+            }
+
+            .button {
+                border-radius: 0;
+            }
+
+            input {
+                padding-right: 0;
+            }
+        }
+
         @include breakpoint(large) {
             .account-name,
             .account-selector {

diff --git a/app/components/Login/DecryptBackup.jsx b/app/components/Login/DecryptBackup.jsx
@@ -40,10 +40,13 @@ class DecryptBackup extends Component {
         this.formChange = this.formChange.bind(this);
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
         if (this.props.active) {
             this.refs.passwordInput.focus();
         }
+        if (!prevProps.currentAccount && this.props.currentAccount) {
+            this.props.history.push("/");
+        }
     }
 
     onRestore() {
@@ -55,7 +58,6 @@ class DecryptBackup extends Component {
             value: false
         });
         BackupActions.reset();
-        this.props.history.push("/");
     }
 
     onPassword(e) {

diff --git a/app/components/Registration/AccountRegistrationConfirm.jsx b/app/components/Registration/AccountRegistrationConfirm.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {connect} from "alt-react";
-import Clipboard from "react-clipboard.js";
 import AccountActions from "actions/AccountActions";
 import AccountStore from "stores/AccountStore";
 import WalletDb from "stores/WalletDb";
@@ -12,6 +11,7 @@ import {FetchChain} from "bitsharesjs/es";
 import WalletUnlockActions from "actions/WalletUnlockActions";
 import Icon from "components/Icon/Icon";
 import {Notification} from "bitshares-ui-style-guide";
+import CopyButton from "../Utility/CopyButton";
 
 class AccountRegistrationConfirm extends React.Component {
     static propTypes = {
@@ -136,24 +136,21 @@ class AccountRegistrationConfirm extends React.Component {
                                 content="registration.copyPassword"
                             />
                         </label>
-                        <div className="input-block">
-                            <input
+                        <span className="inline-label">
+                            <textarea
                                 id="password"
-                                type="text"
+                                className="create-account-input"
+                                rows="2"
+                                readOnly
+                                disabled
                                 defaultValue={this.props.password}
-                                className="input create-account-input"
                             />
-                            <Clipboard
-                                component="button"
-                                className="no-width btn-clipboard"
-                                data-clipboard-text={this.props.password}
-                            >
-                                <Icon
-                                    name="copy"
-                                    className="copy-icon icon-opacity icon-14px"
-                                />
-                            </Clipboard>
-                        </div>
+                            <CopyButton
+                                text={this.state.generatedPassword}
+                                tip="tooltip.copy_password"
+                                dataPlace="top"
+                            />
+                        </span>
                     </div>
 
                     <div>{this.renderWarning()}</div>

diff --git a/app/components/Registration/AccountRegistrationForm.jsx b/app/components/Registration/AccountRegistrationForm.jsx
@@ -8,12 +8,12 @@ import {ChainStore, key} from "bitsharesjs/es";
 import ReactTooltip from "react-tooltip";
 import utils from "common/utils";
 import SettingsActions from "actions/SettingsActions";
-import PasswordInput from "components/Forms/PasswordInput";
 import WalletDb from "stores/WalletDb";
 import AccountNameInput from "./../Forms/AccountNameInput";
 import AccountSelect from "../Forms/AccountSelect";
 import LoadingIndicator from "../LoadingIndicator";
 import Icon from "../Icon/Icon";
+import CopyButton from "../Utility/CopyButton";
 
 class AccountRegistrationForm extends React.Component {
     static propTypes = {
@@ -25,17 +25,17 @@ class AccountRegistrationForm extends React.Component {
         this.state = {
             validAccountName: false,
             accountName: "",
-            validPassword: false,
             registrarAccount: null,
             loading: false,
-            generatedPassword: `P${key.get_random_key().toWif()}`
+            generatedPassword: `P${key.get_random_key().toWif()}`,
+            confirmPassword: ""
         };
         this.onSubmit = this.onSubmit.bind(this);
         this.onRegistrarAccountChange = this.onRegistrarAccountChange.bind(
             this
         );
-        this.onPasswordChange = this.onPasswordChange.bind(this);
         this.onAccountNameChange = this.onAccountNameChange.bind(this);
+        this.onConfirmation = this.onConfirmation.bind(this);
         this.accountNameInput = null;
     }
 
@@ -79,15 +79,19 @@ class AccountRegistrationForm extends React.Component {
         }
     }
 
-    onPasswordChange(e) {
-        this.setState({validPassword: e.valid});
+    onConfirmation(e) {
+        const value = e.currentTarget.value;
+        this.setState({
+            confirmPassword: value,
+            passwordConfirmed: value === this.state.generatedPassword
+        });
     }
 
     isValid() {
         const firstAccount = AccountStore.getMyAccounts().length === 0;
         let valid = this.state.validAccountName;
         if (!WalletDb.getWallet()) {
-            valid = valid && this.state.validPassword;
+            valid = valid;
         }
         if (!firstAccount) {
             valid = valid && this.state.registrarAccount;
@@ -137,17 +141,41 @@ class AccountRegistrationForm extends React.Component {
                         }
                         noLabel
                     />
-
-                    <PasswordInput
-                        value={this.state.generatedPassword}
-                        confirmation
-                        onChange={this.onPasswordChange}
-                        noLabel
-                        placeholder={counterpart.translate("settings.password")}
-                        copy
-                        readonly
-                        visible
-                    />
+                    <label className="left-label" htmlFor="password">
+                        <Translate content="wallet.generated" />
+                    </label>
+                    <span className="inline-label generated-password-field">
+                        <textarea
+                            id="password"
+                            rows="2"
+                            readOnly
+                            disabled
+                            defaultValue={this.state.generatedPassword}
+                        />
+                        <CopyButton
+                            text={this.state.generatedPassword}
+                            tip="tooltip.copy_password"
+                            dataPlace="top"
+                        />
+                    </span>
+                    <label className="left-label" htmlFor="confirmPassword">
+                        <Translate content="wallet.confirm_password" />
+                    </label>
+                    <span className="inline-label">
+                        <input
+                            type="password"
+                            name="password"
+                            id="confirmPassword"
+                            value={this.state.confirmPassword}
+                            onChange={this.onConfirmation}
+                        />
+                    </span>
+                    {this.state.confirmPassword &&
+                    !this.state.passwordConfirmed ? (
+                        <div className="has-error">
+                            <Translate content="wallet.confirm_error" />
+                        </div>
+                    ) : null}
 
                     {firstAccount ? null : (
                         <div className="full-width-content form-group no-overflow">
@@ -174,7 +202,11 @@ class AccountRegistrationForm extends React.Component {
                     ) : (
                         <button
                             className="button-primary"
-                            disabled={!valid || (registrarAccount && !isLTM)}
+                            disabled={
+                                !valid ||
+                                !this.state.passwordConfirmed ||
+                                (registrarAccount && !isLTM)
+                            }
                         >
                             <Translate content="registration.continue" />
                         </button>

diff --git a/app/components/Registration/WalletRegistrationForm.jsx b/app/components/Registration/WalletRegistrationForm.jsx
@@ -215,6 +215,7 @@ class WalletRegistrationForm extends React.Component {
                 confirmation
                 onChange={e => this.onPasswordChange(e)}
                 noLabel
+                checkStrength
                 placeholder={
                     <span>
                         <span className="vertical-middle">