<commit_before>import React from 'react';
import { Link } from 'react-router';
import { Grid, Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

import { handleLogin, handleFacebookLogin, handleGoogleLogin, handleIVLELogin } from '../../../modules/login';

export default class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      errors: {},
    };
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  componentDidUpdate(prevProps, prevState) {
    const self = this;

    // Necessary because the real DOM hasn't been updated at this point, only the virtual DOM. lol....
    if (prevProps.open != this.props.open)
      setTimeout(() => {
        self.setState({ errors: {} });

        handleLogin({
          component: self,
          clearErrors() {
            self.setState({ errors: {} });
          },
          setError(er, text) {
            let errorsObject = {};
            errorsObject[er] = text;
            errorsObject = $.extend({}, self.state.errors, errorsObject);
            self.setState({ errors: errorsObject });
          },
          afterLogin() {
            self.props.closeLogin();
          },
        });
      });
  }

  socialLoginHandler(handler) {
    const self = this;

    return (event) => handler({
        afterLogin() {
          self.props.closeLogin();
        }
      });
  }

  render() {
    return (
      <Dialog
        open={ this.props.open }
        onRequestClose={ this.props.closeLogin }
        contentStyle={{ maxWidth: 550 }}>
        <form ref="login" className="login" onSubmit={ this.handleSubmit }>
          <Grid fluid={true}>
            <Row>
              <Col>
                <h3 style={{ textAlign: 'center' }}>Login to Free4All</h3>
              </Col>
            </Row>
            <Row className="openid" style={{ marginBottom: 20 }}>
              <Col xs={12} sm={4}>
                <FlatButton
                  style={{ width: "100%", backgroundColor: "#ff8c00" }}
                  labelColor="#ffffff"
                  label="NUS OpenID"
                  onTouchTap={ this.socialLoginHandler(handleIVLELogin) } />
              </Col>
              <Col xs={12} sm={4}>
                <FlatButton
                  style={{ width: "100%", backgroundColor: "#395697" }} l
                  abelColor="#ffffff"
                  label="Facebook"
                  icon={ <i className="fa fa-facebook-f"></i> }
                  onTouchTap={ this.socialLoginHandler(handleFacebookLogin) } />
              </Col>
              <Col xs={12} sm={4}>
                <FlatButton
                  style={{ width: "100%", backgroundColor: "#e0492f" }}
                  labelColor="#ffffff"
                  label="Google"
                  icon={ <i className="fa fa-google"></i> }
                  onTouchTap={ this.socialLoginHandler(handleGoogleLogin) } />
              </Col>
            </Row>
            <Row>
              <Col xs={12}>
                <div className="divider-with-text">
                  <hr />
                  <span>OR</span>
                </div>
              </Col>
            </Row>
            <Row>
              <Col xs={ 6 }>
                <TextField
                  type="email"
                  ref="emailAddress"
                  name="emailAddress"
                  hintText="Email Address"
                  errorText={ this.state.errors.emailAddress }
                />
              </Col>
              <Col xs={ 6 }>
                <p style={{ fontSize: 13, lineHeight: "48px", textAlign: 'right' }}>Not yet a member? <Link to="/signup">Sign up</Link></p>
              </Col>
            </Row>
            <Row>
              <Col xs={ 6 }>
                <TextField
                  type="password"
                  ref="password"
                  name="password"
                  hintText="Password"
                  errorText={ this.state.errors.password }
                />
              </Col>
              <Col xs={ 6 }>
                <p style={{ fontSize: 13, lineHeight: "48px", textAlign: 'right' }}><Link to="/recover-password">Forgot Password?</Link></p>
              </Col>
            </Row>
            <Row>
              <Col xs={ 12 }>
              </Col>
            </Row>
            <Row>
              <Col xs={6}>
                <RaisedButton type="submit" fullWidth={true} primary={true} label="Login" />
              </Col>
            </Row><commit_msg>Make login dialog mobile friendly<commit_after>import React from 'react';
import { Link } from 'react-router';
import { Grid, Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

import { handleLogin, handleFacebookLogin, handleGoogleLogin, handleIVLELogin } from '../../../modules/login';

export default class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      errors: {},
    };
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  componentDidUpdate(prevProps, prevState) {
    const self = this;

    // Necessary because the real DOM hasn't been updated at this point, only the virtual DOM. lol....
    if (prevProps.open != this.props.open)
      setTimeout(() => {
        self.setState({ errors: {} });

        handleLogin({
          component: self,
          clearErrors() {
            self.setState({ errors: {} });
          },
          setError(er, text) {
            let errorsObject = {};
            errorsObject[er] = text;
            errorsObject = $.extend({}, self.state.errors, errorsObject);
            self.setState({ errors: errorsObject });
          },
          afterLogin() {
            self.props.closeLogin();
          },
        });
      });
  }

  socialLoginHandler(handler) {
    const self = this;

    return (event) => handler({
        afterLogin() {
          self.props.closeLogin();
        }
      });
  }

  render() {
    return (
      <Dialog
        open={ this.props.open }
        onRequestClose={ this.props.closeLogin }
        contentStyle={{ maxWidth: 550 }}
        autoScrollBodyContent={true}>
        <form ref="login" className="login" onSubmit={ this.handleSubmit }>
          <Grid fluid={true}>
            <Row>
              <Col>
                <h3 style={{ textAlign: 'center' }}>Login to Free4All</h3>
              </Col>
            </Row>
            <Row className="openid" style={{ marginBottom: 10 }}>
              <Col xs={12} sm={4} smOffset={0}>
                <FlatButton
                  style={{ width: "100%", backgroundColor: "#ff8c00", marginBottom: 10 }}
                  labelColor="#ffffff"
                  label="NUS OpenID"
                  onTouchTap={ this.socialLoginHandler(handleIVLELogin) } />
              </Col>
              <Col xs={12} sm={4} smOffset={0}>
                <FlatButton
                  style={{ width: "100%", backgroundColor: "#395697", marginBottom: 10 }}
                  labelColor="#ffffff"
                  label="Facebook"
                  icon={ <i className="fa fa-facebook-f"></i> }
                  onTouchTap={ this.socialLoginHandler(handleFacebookLogin) } />
              </Col>
              <Col xs={12} sm={4} smOffset={0}>
                <FlatButton
                  style={{ width: "100%", backgroundColor: "#e0492f", marginBottom: 10 }}
                  labelColor="#ffffff"
                  label="Google"
                  icon={ <i className="fa fa-google"></i> }
                  onTouchTap={ this.socialLoginHandler(handleGoogleLogin) } />
              </Col>
            </Row>
            <Row>
              <Col xs={12}>
                <div className="divider-with-text">
                  <hr />
                  <span>OR</span>
                </div>
              </Col>
            </Row>
            <Row>
              <Col xs={12} sm={6}>
                <TextField
                  type="email"
                  ref="emailAddress"
                  name="emailAddress"
                  hintText="Email Address"
                  errorText={ this.state.errors.emailAddress }
                  fullWidth={true}
                />
                <TextField
                  type="password"
                  ref="password"
                  name="password"
                  hintText="Password"
                  errorText={ this.state.errors.password }
                  fullWidth={true}
                />
              </Col>
              <Col xs={12} sm={6}>
                <p style={{ fontSize: 13, textAlign: 'right', marginTop: 20 }}>Not yet a member? <Link to="/signup">Sign up</Link></p>
                <p style={{ fontSize: 13, textAlign: 'right' }}><Link to="/recover-password">Forgot Password?</Link></p>
              </Col>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <Col xs={6} xsOffset={3} sm={3} smOffset={9}>
                <RaisedButton type="submit" style={{ width: "100%" }} primary={true} label="Login" />
              </Col>
            </Row>
{'fraction_non_alphanumeric': 0.13942459690167563, 'fraction_numerical': 0.013383918221098114, 'mean_word_length': 1.5039577836411608, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 125, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3086289', 'n_tokens_mistral': 2664, 'n_tokens_neox': 2475, 'n_words': 570}