<commit_before>import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import { Step, Stepper, StepLabel, StepContent } from 'material-ui/Stepper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import CircularProgress from 'material-ui/CircularProgress';
import { blue50, blue500 } from 'material-ui/styles/colors';
import './Login-Signup.css';

class Signup extends Component {
  constructor() {
    super();
    this.state = {
      stepIndex: 0,
      progress: {
        visibility: 'hidden'
      },
      usernameError: 0,
    };
    this.timeout = null;
    this.errors = {
      0: '',
      1: 'Username is already taken',
      3: 'Username is too short',
      4: 'Username is too long',
      5: 'Username is not valid'
    }
  }

  validateUsername = (username) => {
    if (username.length < 6) {
      return 3;
    } else if (username.length > 20) {
      return 4;
    } else {
      const testResult = (/^[a-zA-Z][a-zA-Z0-9_\.]{4,18}[a-zA-Z0-9]$/).test(username);
      if (testResult) {
        return 0;
      } else {
        return 5;
      }
    }
  }

  handleNext = () => {
    const { stepIndex } = this.state;
    this.setState({
      stepIndex: stepIndex + 1,
    });
  };

  handlePrev = () => {
    const { stepIndex } = this.state;
    if (stepIndex > 0) {
      this.setState({
        stepIndex: stepIndex - 1,
      });
    }
  };

  handleUsernameChange = (e) => {
    const username = e.target.value;
    const validationResult = this.validateUsername(username);
    if (validationResult == 0) {
      this.setState({
        progress: {
          visibility: 'visible',
        },
      }, async () => {
        const response = await fetch('http://localhost:8000/api', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            query: `{
              database {
                user {
                  userExists(username: "${username}")
                }
              }
            }`
          }),
        });
        const json = await response.json();
        this.setState({
          progress: {
            visibility: 'hidden',
          },
          usernameError: json.data.database.user.userExists
        });
      });
    } else {
      this.setState({
        usernameError: validationResult,
      });
    }
  }

  renderStepActions(step) {

    const buttonStyle = {
      marginTop: '5vmin',
      marginLeft: '1vmin',
    };
    return (
      <div className="step-actions">
        {step > 0 && (
          <FlatButton
            label="Back"
            disabled={step === 0}
            disableTouchRipple={true}
            disableFocusRipple={true}
            onClick={this.handlePrev}
            style={buttonStyle}
          />
        )}
        <RaisedButton
          label={step === 3 ? 'Sign up' : 'Next'}
          type={step === 3 ? 'submit' : 'button'}
          disableTouchRipple={true}
          disableFocusRipple={true}
          primary={true}
          onClick={this.handleNext}
          style={buttonStyle}
        /><commit_msg>Disable next button if input field is not valid<commit_after>import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import { Step, Stepper, StepLabel, StepContent } from 'material-ui/Stepper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import CircularProgress from 'material-ui/CircularProgress';
import { blue50, blue500 } from 'material-ui/styles/colors';
import './Login-Signup.css';

class Signup extends Component {
  constructor() {
    super();
    this.state = {
      stepIndex: 0,
      progress: {
        visibility: 'hidden'
      },
      usernameError: 0,
      nextDisabled: true,
    };
    this.timeout = null;
    this.errors = {
      0: '',
      1: 'Username is already taken',
      3: 'Username is too short',
      4: 'Username is too long',
      5: 'Username is not valid'
    }
  }

  validateUsername = (username) => {
    if (username.length < 6) {
      return 3;
    } else if (username.length > 20) {
      return 4;
    } else {
      const testResult = (/^[a-zA-Z][a-zA-Z0-9_\.]{4,18}[a-zA-Z0-9]$/).test(username);
      if (testResult) {
        return 0;
      } else {
        return 5;
      }
    }
  }

  handleNext = () => {
    const { stepIndex } = this.state;
    this.setState({
      stepIndex: stepIndex + 1,
    });
  };

  handlePrev = () => {
    const { stepIndex } = this.state;
    if (stepIndex > 0) {
      this.setState({
        stepIndex: stepIndex - 1,
      });
    }
  };

  handleUsernameChange = (e) => {
    const username = e.target.value;
    const validationResult = this.validateUsername(username);
    if (validationResult == 0) {
      this.setState({
        progress: {
          visibility: 'visible',
        },
      }, async () => {
        const response = await fetch('http://localhost:8000/api', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            query: `{
              database {
                user {
                  userExists(username: "${username}")
                }
              }
            }`
          }),
        });
        const json = await response.json();
        this.setState({
          progress: {
            visibility: 'hidden',
          },
          usernameError: json.data.database.user.userExists,
          nextDisabled: json.data.database.user.userExists !== 0,
        });
      });
    } else {
      this.setState({
        usernameError: validationResult,
        nextDisabled: true,
      });
    }
  }

  renderStepActions(step) {

    const buttonStyle = {
      marginTop: '5vmin',
      marginLeft: '1vmin',
    };
    return (
      <div className="step-actions">
        {step > 0 && (
          <FlatButton
            label="Back"
            disabled={step === 0}
            disableTouchRipple={true}
            disableFocusRipple={true}
            onClick={this.handlePrev}
            style={buttonStyle}
          />
        )}
        <RaisedButton
          label={step === 3 ? 'Sign up' : 'Next'}
          type={step === 3 ? 'submit' : 'button'}
          disableTouchRipple={true}
          disableFocusRipple={true}
          primary={true}
          onClick={this.handleNext}
          style={buttonStyle}
          disabled={this.state.nextDisabled}
        />
{'fraction_non_alphanumeric': 0.13671758011380652, 'fraction_numerical': 0.012129380053908356, 'mean_word_length': 1.8015939597315436, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 25, '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': '3835361', 'n_tokens_mistral': 2004, 'n_tokens_neox': 1922, 'n_words': 418}