<commit_before>import React from "react";
import PropTypes from "prop-types";
import {connect} from "alt-react";
import AccountStore from "stores/AccountStore";
import Translate from "react-translate-component";
import counterpart from "counterpart";
import {ChainStore, key} from "bitsharesjs/es";
import ReactTooltip from "react-tooltip";
import utils from "common/utils";
import SettingsActions from "actions/SettingsActions";
import WalletDb from "stores/WalletDb";
import AccountNameInput from "./../Forms/AccountNameInputStyleGuide";
import AccountSelect from "../Forms/AccountSelect";
import LoadingIndicator from "../LoadingIndicator";
import Icon from "../Icon/Icon";
import CopyButton from "../Utility/CopyButton";
import {Form, Input, Button} from "bitshares-ui-style-guide";

class AccountRegistrationForm extends React.Component {
    static propTypes = {
        continue: PropTypes.func.isRequired
    };

    constructor() {
        super();
        this.state = {
            validAccountName: false,
            accountName: "",
            registrarAccount: null,
            loading: false,
            generatedPassword: `P${key.get_random_key().toWif()}`,
            confirmPassword: ""
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onRegistrarAccountChange = this.onRegistrarAccountChange.bind(
            this
        );
        this.onAccountNameChange = this.onAccountNameChange.bind(this);
        this.onConfirmation = this.onConfirmation.bind(this);
        this.accountNameInput = null;
    }

    componentWillMount() {
        SettingsActions.changeSetting({
            setting: "passwordLogin",
            value: true
        });
    }

    componentDidMount() {
        ReactTooltip.rebuild();
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !utils.are_equal_shallow(nextState, this.state);
    }

    onAccountNameChange(e) {
        const state = {};
        if (e.valid !== undefined) {
            state.validAccountName = e.valid;
        }
        if (e.value !== undefined) {
            state.accountName = e.value;
        }
        this.setState(state);
    }

    onRegistrarAccountChange(registrarAccount) {
        this.setState({registrarAccount});
    }

    onSubmit(e) {
        e.preventDefault();
        if (this.isValid()) {
            this.props.continue({
                accountName: this.state.accountName,
                password: this.state.generatedPassword
            });
        }
    }

    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;
        }
        if (!firstAccount) {
            valid = valid && this.state.registrarAccount;
        }
        return valid;
    }

    renderAccountCreateForm() {
        const {registrarAccount} = this.state;

        const myAccounts = AccountStore.getMyAccounts();
        const firstAccount = myAccounts.length === 0;
        const valid = this.isValid();
        let isLTM = false;
        const registrar = registrarAccount
            ? ChainStore.getAccount(registrarAccount)
            : null;
        if (registrar) {
            if (registrar.get("lifetime_referrer") === registrar.get("id")) {
                isLTM = true;
            }
        }

        const getConfirmationPasswordHelp = () => {
            return this.state.confirmPassword && !this.state.passwordConfirmed
                ? counterpart.translate("wallet.confirm_error")
                : "";
        };

        const getConfirmationPasswordValidateStatus = () => {
            return this.state.confirmPassword && !this.state.passwordConfirmed
                ? "error"
                : "";
        };

        return (
            <div>
                <Form onSubmit={this.onSubmit}>
                    <AccountNameInput
                        cheapNameOnly={firstAccount}
                        onChange={this.onAccountNameChange}
                        accountShouldNotExist
                        placeholder={counterpart.translate("account.name")}
                        label={
                            <span>
                                <span className="vertical-middle">
                                    {counterpart.translate("account.name")}
                                </span>
                                &nbsp;
                                <span
                                    data-tip={counterpart.translate(
                                        "tooltip.registration.accountName"
                                    )}<commit_msg>#1997 Update form type for cloud wallet form<commit_after>import React from "react";
import PropTypes from "prop-types";
import {connect} from "alt-react";
import AccountStore from "stores/AccountStore";
import Translate from "react-translate-component";
import counterpart from "counterpart";
import {ChainStore, key} from "bitsharesjs/es";
import ReactTooltip from "react-tooltip";
import utils from "common/utils";
import SettingsActions from "actions/SettingsActions";
import WalletDb from "stores/WalletDb";
import AccountNameInput from "./../Forms/AccountNameInputStyleGuide";
import AccountSelect from "../Forms/AccountSelect";
import LoadingIndicator from "../LoadingIndicator";
import Icon from "../Icon/Icon";
import CopyButton from "../Utility/CopyButton";
import {Form, Input, Button} from "bitshares-ui-style-guide";

class AccountRegistrationForm extends React.Component {
    static propTypes = {
        continue: PropTypes.func.isRequired
    };

    constructor() {
        super();
        this.state = {
            validAccountName: false,
            accountName: "",
            registrarAccount: null,
            loading: false,
            generatedPassword: `P${key.get_random_key().toWif()}`,
            confirmPassword: ""
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onRegistrarAccountChange = this.onRegistrarAccountChange.bind(
            this
        );
        this.onAccountNameChange = this.onAccountNameChange.bind(this);
        this.onConfirmation = this.onConfirmation.bind(this);
        this.accountNameInput = null;
    }

    componentWillMount() {
        SettingsActions.changeSetting({
            setting: "passwordLogin",
            value: true
        });
    }

    componentDidMount() {
        ReactTooltip.rebuild();
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !utils.are_equal_shallow(nextState, this.state);
    }

    onAccountNameChange(e) {
        const state = {};
        if (e.valid !== undefined) {
            state.validAccountName = e.valid;
        }
        if (e.value !== undefined) {
            state.accountName = e.value;
        }
        this.setState(state);
    }

    onRegistrarAccountChange(registrarAccount) {
        this.setState({registrarAccount});
    }

    onSubmit(e) {
        e.preventDefault();
        if (this.isValid()) {
            this.props.continue({
                accountName: this.state.accountName,
                password: this.<PASSWORD>.generatedPassword
            });
        }
    }

    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;
        }
        if (!firstAccount) {
            valid = valid && this.state.registrarAccount;
        }
        return valid;
    }

    renderAccountCreateForm() {
        const {registrarAccount} = this.state;

        const myAccounts = AccountStore.getMyAccounts();
        const firstAccount = myAccounts.length === 0;
        const valid = this.isValid();
        let isLTM = false;
        const registrar = registrarAccount
            ? ChainStore.getAccount(registrarAccount)
            : null;
        if (registrar) {
            if (registrar.get("lifetime_referrer") === registrar.get("id")) {
                isLTM = true;
            }
        }

        const getConfirmationPasswordHelp = () => {
            return this.state.confirmPassword && !this.state.passwordConfirmed
                ? counterpart.translate("wallet.confirm_error")
                : "";
        };

        const getConfirmationPasswordValidateStatus = () => {
            return this.state.confirmPassword && !this.state.passwordConfirmed
                ? "error"
                : "";
        };

        return (
            <div>
                <Form onSubmit={this.onSubmit} layout={"vertical"}>
                    <AccountNameInput
                        cheapNameOnly={firstAccount}
                        onChange={this.onAccountNameChange}
                        accountShouldNotExist
                        placeholder={counterpart.translate("account.name")}
                        label={
                            <span>
                                <span className="vertical-middle">
                                    {counterpart.translate("account.name")}
                                </span>
                                &nbsp;
                                <span
                                    data-tip={counterpart.translate(
                                        "tooltip.registration.accountName"
                                    )}
{'fraction_non_alphanumeric': 0.10442011354420114, 'fraction_numerical': 0.0008110300081103001, 'mean_word_length': 1.7734045543997752, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1367629', 'n_tokens_mistral': 2485, 'n_tokens_neox': 2443, 'n_words': 468}