<commit_before>import React, {Component} from "react";
import Translate from "react-translate-component";
import Immutable from "immutable";
import cname from "classnames";
import PropTypes from "prop-types";

export default class PasswordConfirm extends Component {
    static propTypes = {
        // Called everytime a valid password is provided and matches a confirmed password
        onValid: PropTypes.func.isRequired
    };

    constructor() {
        super();
        this.state = {
            password: "",
            confirm: "",
            errors: Immutable.Map(),
            // An empty form has no errors but is still invaid
            valid: false
        };
    }

    componentDidMount() {
        if (this.refs.firstPassword) {
            this.refs.firstPassword.focus();
        }
    }

    formChange(event) {
        let key =
            event.target.id === "current-password" ? "password" : "confirm";
        let state = {};
        state[key] = event.target.value;
        this.setState(state, this.validate);
    }

    validate(state = this.state) {
        let {password, confirm} = state;
        confirm = confirm.trim();
        password = password.trim();

        let errors = Immutable.Map();
        // Don't report until typing begins
        if (password.length !== 0 && password.length < 8)
            errors = errors.set(
                "password_length",
                "Password must be 8 characters or more"
            );

        // Don't report it until the confirm is populated
        if (password !== "" && confirm !== "" && password !== confirm)
            errors = errors.set("password_match", "Passwords do not match");

        let valid = password.length >= 8 && password === confirm;
        this.setState({errors, valid});
        this.props.onValid(valid ? password : null);
    }

    render() {
        const {password, confirm, errors} = this.state;
        let {newPassword} = this.props;
        let tabIndex = 1;

        return (
            <div className={cname({"has-error": errors.size})}>
                <Translate
                    component="label"
                    content={
                        newPassword ? "wallet.new_password" : "wallet.password"
                    }
                />
                <section>
                    <input
                        type="password"
                        id="current-password"
                        autoComplete="current-password"
                        ref="firstPassword"
                        onChange={this.formChange.bind(this)}
                        value={password}
                        tabIndex={tabIndex++}
                    />
                </section>

                <Translate
                    component="label"
                    content={
                        newPassword ? "wallet.new_confirm" : "wallet.confirm"
                    }
                />
                <section>
                    <input
                        type="password"
                        id="new-password"
                        autoComplete="new-password"
                        onChange={this.formChange.bind(this)}
                        value={confirm}
                        tabIndex={tabIndex++}
                    />
                </section>

                <div style={{paddingBottom: 10}}>
                    {errors.get("password_match") ||
                        errors.get("password_length")}
                </div>

                {this.props.children}
                <br />
            </div>
        );
    }
}<commit_msg>#1964 Replace old components with ant component. Didn't replace old inputs with ant, cause PasswordConfirm component is used not only in settings page and it could cause an unexpected results<commit_after>import React, {Component} from "react";
import Translate from "react-translate-component";
import Immutable from "immutable";
import cname from "classnames";
import PropTypes from "prop-types";
import counterpart from "counterpart";
import {Form} from "bitshares-ui-style-guide";

const FormItem = Form.Item;

export default class PasswordConfirm extends Component {
    static propTypes = {
        // Called everytime a valid password is provided and matches a confirmed password
        onValid: PropTypes.func.isRequired
    };

    constructor() {
        super();
        this.state = {
            password: "",
            confirm: "",
            errors: Immutable.Map(),
            // An empty form has no errors but is still invaid
            valid: false
        };
    }

    componentDidMount() {
        if (this.refs.firstPassword) {
            this.refs.firstPassword.focus();
        }
    }

    formChange(event) {
        let key =
            event.target.id === "current-password" ? "password" : "confirm";
        let state = {};
        state[key] = event.target.value;
        this.setState(state, this.validate);
    }

    validate(state = this.state) {
        let {password, confirm} = state;
        confirm = confirm.trim();
        password = password.trim();

        let errors = Immutable.Map();
        // Don't report until typing begins
        if (password.length !== 0 && password.length < 8)
            errors = errors.set(
                "password_length",
                "Password must be 8 characters or more"
            );

        // Don't report it until the confirm is populated
        if (password !== "" && confirm !== "" && password !== confirm)
            errors = errors.set("password_match", "Passwords do not match");

        let valid = password.length >= 8 && password === confirm;
        this.setState({errors, valid});
        this.props.onValid(valid ? password : null);
    }

    render() {
        const {password, confirm, errors} = this.state;
        let {newPassword} = this.props;
        let tabIndex = 1;

        return (
            <div className={cname({"has-error": errors.size})}>
                <FormItem
                    label={counterpart.translate(
                        newPassword ? "wallet.new_password" : "wallet.password"
                    )}
                >
                    <section>
                        <input
                            type="password"
                            id="current-password"
                            autoComplete="current-password"
                            ref="firstPassword"
                            onChange={this.formChange.bind(this)}
                            value={password}
                            tabIndex={tabIndex++}
                        />
                    </section>
                </FormItem>

                <FormItem
                    label={counterpart.translate(
                        newPassword ? "wallet.new_confirm" : "wallet.confirm"
                    )}
                >
                    <section>
                        <input
                            type="password"
                            id="new-password"
                            autoComplete="new-password"
                            onChange={this.formChange.bind(this)}
                            value={confirm}
                            tabIndex={tabIndex++}
                        />
                    </section>
                </FormItem>

                <div style={{paddingBottom: 10}}>
                    {errors.get("password_match") ||
                        errors.get("password_length")}
                </div>

                {this.props.children}
                <br />
            </div>
        );
    }
}
{'fraction_non_alphanumeric': 0.10646387832699619, 'fraction_numerical': 0.0023600367116821818, 'mean_word_length': 1.3101150817686251, 'pattern_counts': {'":': 2, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4613910', 'n_tokens_mistral': 1846, 'n_tokens_neox': 1737, 'n_words': 436}