<commit_before>import * as React from "react";
import { withRouter } from "react-router-dom";
import {TextField, Typography, withStyles, createStyles, Paper, Button} from "@material-ui/core";
import ApiService from "../../common/ApiService";
import Majava from "../../common/Majava";

const styles = createStyles({
    root: {
        display: "flex",
        height: "100vh",
        justifyContent: "center",
        alignItems: "center",
    },
    loginContainer: {
        width: 500,
        padding: 25,
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center",
    },
    facebookButton: {
        backgroundColor: "#3B5998",
        color: "#fff",
    },
    divider: {
        border: "1px solid rgba(0,0,0,.1)",
        width: "100%",
        margin: "25px 0",
    },
    button: {
        margin: "10px 0",
    },
})

class LoginView extends React.Component<any, any> {
  private submitField: any = React.createRef();

  constructor(props: any) {
        super(props);
        this.state = { }
    }

    public render() {
        const { classes } = this.props
        return (
            <div className={classes.root}>
                <Paper
                  className={classes.loginContainer}
                  onKeyPress={this.handleEnterKey}
                >
                    <Majava />
                    <Typography color="error">{this.state.error}</Typography>
                    <TextField
                        autoFocus
                        id="email"
                        label="Email"
                        margin="normal"
                        onChange={this.handleInputChange}
                    />
                    <TextField
                        id="password"
                        label="Password"
                        type="password"
                        margin="normal"
                        onChange={this.handleInputChange}
                        inputRef={this.submitField}
                    />

                    <Button
                        variant="raised"
                        color="primary"
                        className={classes.button}
                        onClick={this.handleSubmit}
                    >
                        <Typography color="inherit">Sign in</Typography>
                    </Button>

                    <Typography variant="subheading">or</Typography>

                    <Button
                        variant="raised"
                        color="primary"
                        className={classes.button}
                        href="/signup"
                    >
                        <Typography color="inherit">Register</Typography>
                    </Button>

                    <hr className={classes.divider} />

                    <Button variant="raised" className={classes.facebookButton} href="/authFacebook">
                        Sign in with Facebook
                    </Button>
                </Paper>
            </div>
        );
    }

    private handleEnterKey = (event: any) => {
      if (!(event.target instanceof HTMLInputElement) || event.key !== "Enter") return;
      return (event.target.id === this.submitField.current.id) ? this.handleSubmit() : this.submitField.current.focus();
    }

    private handleInputChange = event => {
        const target = event.target;
        const value = target.type === "checkbox" ? target.checked : target.value;
        const id = target.id;

        this.setState({
          [id]: value,
        });
    }

    private handleSubmit = async () => {
        try {
            await ApiService.write.login({email: this.state.email, password: <PASSWORD>.password} as global.IUserContract);
            this.props.history.push("/");
        } catch (error) {
            this.setState({ error: error.message })
        }
    }
}

export default withStyles(styles)(withRouter(LoginView));<commit_msg>add validation to login form too<commit_after>import * as React from "react";
import { withRouter } from "react-router-dom";
import {TextField, Typography, withStyles, createStyles, Paper, Button} from "@material-ui/core";
import ApiService from "../../common/ApiService";
import Majava from "../../common/Majava";

const styles = createStyles({
    root: {
        display: "flex",
        height: "100vh",
        justifyContent: "center",
        alignItems: "center",
    },
    loginContainer: {
        width: 500,
        padding: 25,
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center",
    },
    facebookButton: {
        backgroundColor: "#3B5998",
        color: "#fff",
    },
    divider: {
        border: "1px solid rgba(0,0,0,.1)",
        width: "100%",
        margin: "25px 0",
    },
    button: {
        margin: "10px 0",
    },
})

class LoginView extends React.Component<any, any> {
  private submitField: any = React.createRef();

  constructor(props: any) {
        super(props);
        this.state = { }
    }

    public render() {
        const { classes } = this.props
        return (
            <form className={classes.root} onSubmit={this.handleSubmit}>
                <Paper
                  className={classes.loginContainer}
                  onKeyPress={this.handleEnterKey}
                >
                    <Majava />
                    <Typography color="error">{this.state.error}</Typography>
                    <TextField
                        autoFocus
                        id="email"
                        label="Email"
                        type="email"
                        margin="normal"
                        required
                        onChange={this.handleInputChange}
                    />
                    <TextField
                        id="password"
                        label="Password"
                        type="password"
                        margin="normal"
                        required
                        onChange={this.handleInputChange}
                        inputRef={this.submitField}
                    />

                    <Button
                        variant="raised"
                        color="primary"
                        className={classes.button}
                        type="submit"
                    >
                        <Typography color="inherit">Sign in</Typography>
                    </Button>

                    <Typography variant="subheading">or</Typography>

                    <Button
                        variant="raised"
                        color="primary"
                        className={classes.button}
                        href="/signup"
                    >
                        <Typography color="inherit">Register</Typography>
                    </Button>

                    <hr className={classes.divider} />

                    <Button variant="raised" className={classes.facebookButton} href="/authFacebook">
                        Sign in with Facebook
                    </Button>
                </Paper>
            </form>
        );
    }

    private handleEnterKey = (event: React.KeyboardEvent) => {
      if (!(event.target instanceof HTMLInputElement) || event.key !== "Enter") return;
      if (event.target.id !== this.submitField.current.id) {
        this.submitField.current.focus();
      }
    }

    private handleInputChange = event => {
        const target = event.target;
        const value = target.type === "checkbox" ? target.checked : target.value;
        const id = target.id;

        this.setState({
          [id]: value,
        });
    }

    private handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        try {
            await ApiService.write.login({email: this.state.email, password: <PASSWORD>.state.password} as global.IUserContract);
            this.props.history.push("/");
        } catch (error) {
            this.setState({ error: error.message })
        }
    }
}

export default withStyles(styles)(withRouter(LoginView));
{'fraction_non_alphanumeric': 0.11566294615478964, 'fraction_numerical': 0.006623328836011284, 'mean_word_length': 1.3485023041474655, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4610446', 'n_tokens_mistral': 2045, 'n_tokens_neox': 1916, 'n_words': 402}