<commit_before>import React from "react/addons";
import {Input, Button, Alert, Glyphicon} from "react-bootstrap";
import Mixins from "../util/Mixins";
import SubscribeMixin from "../flux/SubscribeMixin";
import AuthActions from "../auth/AuthActions";
import LaddaButton from "react-ladda";

/**
 * Form for logging in with username and password.
 */
export default class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
            invalidLogin: false,
            loading: false
        };

        this.subscribe(this.props.userStore.onInvalidLogin(this.onInvalidLogin.bind(this)));
    }

    isValidInput() {
        return this.state.username.length > 0 && this.state.password.length > 0;
    }

    onInvalidLogin() {
        this.setState({invalidLogin: true, loading: false});
    }

    onSubmit(e) {
        e.preventDefault();
        if (!this.isValidInput()) {
            return;
        }
        this.setState({invalidLogin: false, loading: true});
        AuthActions.login(this.state.username, this.state.password);
    }

    render() {
        return (
            <form role="form" onSubmit={this.onSubmit.bind(this)}>
                <Input type="text" label="Username" valueLink={this.linkState("username")} placeholder="Username" autoComplete="username" autoFocus/>
                <Input type="password" label="Password" valueLink={this.linkState("password")} placeholder="Password" autoComplete="current-password"/>
                {this.state.invalidLogin &&
                    <Alert bsStyle="warning">
                        <Glyphicon glyph="warning-sign"/> Email or password incorrect.
                    </Alert>
                }
                <span style={{float: "right"}}><a href="#resetpassword">Forgot your password?</a></span>
                <LaddaButton active={this.state.loading} buttonStyle="zoom-out">
                    <Button bsStyle="primary" type="submit" >
                        <span className="ladda-label">Log in</span>
                    </Button>
                </LaddaButton>
            </form>
        );
    }
}

Mixins.add(LoginForm.prototype, [React.addons.LinkedStateMixin, SubscribeMixin]);

LoginForm.propTypes = {
    userStore: React.PropTypes.any.isRequired
};<commit_msg>Fixed Ladda button usage<commit_after>import React from "react/addons";
import {Input, Alert, Glyphicon} from "react-bootstrap";
import Mixins from "../util/Mixins";
import SubscribeMixin from "../flux/SubscribeMixin";
import AuthActions from "../auth/AuthActions";
import LaddaButton from "react-ladda";

/**
 * Form for logging in with username and password.
 */
export default class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
            invalidLogin: false,
            loading: false
        };

        this.subscribe(this.props.userStore.onInvalidLogin(this.onInvalidLogin.bind(this)));
    }

    isValidInput() {
        return this.state.username.length > 0 && this.state.password.length > 0;
    }

    onInvalidLogin() {
        this.setState({invalidLogin: true, loading: false});
    }

    onSubmit(e) {
        e.preventDefault();
        if (!this.isValidInput()) {
            return;
        }
        this.setState({invalidLogin: false, loading: true});
        AuthActions.login(this.state.username, this.state.password);
    }

    render() {
        return (
            <form role="form" onSubmit={this.onSubmit.bind(this)}>
                <Input type="text" label="Username" valueLink={this.linkState("username")} placeholder="Username" autoComplete="username" autoFocus/>
                <Input type="password" label="Password" valueLink={this.linkState("password")} placeholder="Password" autoComplete="current-password"/>
                {this.state.invalidLogin &&
                    <Alert bsStyle="warning">
                        <Glyphicon glyph="warning-sign"/> Email or password incorrect.
                    </Alert>
                }
                <span style={{float: "right"}}><a href="#resetpassword">Forgot your password?</a></span>
                <LaddaButton loading={this.state.loading} buttonStyle="zoom-out" className="btn btn-primary" type="submit">
                    Log in
                </LaddaButton>
            </form>
        );
    }
}

Mixins.add(LoginForm.prototype, [React.addons.LinkedStateMixin, SubscribeMixin]);

LoginForm.propTypes = {
    userStore: React.PropTypes.any.isRequired
};
{'fraction_non_alphanumeric': 0.13431224357590155, 'fraction_numerical': 0.0008637443316778234, 'mean_word_length': 2.366279069767442, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, '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': '6921229', 'n_tokens_mistral': 1270, 'n_tokens_neox': 1224, 'n_words': 250}