<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import { Button, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';
import axios from 'axios';
import { Route, Redirect } from 'react-router'

class SignUp extends React.Component {
  constructor() {
    super();
    this.state = {
      redirect: false,
      errorMessage: ''
    };
    
    this.handleSubmit = (event) => {
      event.preventDefault();
      event.stopPropagation();
      this.setState({ errorMessage: '' });
      
      const username = ReactDOM.findDOMNode(this.refs.username).value.trim();
      const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
      const creds = { username: username, password: password };
      //this.props.onLoginClick(creds)
      console.log('SIGN UP with creds', creds);

      axios.post('http://localhost:3000/users/register', creds)
      .then(response => {
        console.log('[Signup] Success Response', response);
        ReactDOM.findDOMNode(this.refs.username).value = '';
        ReactDOM.findDOMNode(this.refs.password).value = '';
        this.setState({ errorMessage: '' });
        this.setState({ errorMessage: response.data.msg });
        this.setState({ redirect: true});
      })
      .catch(error => {
        console.log('[Signup] ERROR:', error);
        this.setState({ errorMessage: error.response.data.msg });
      });
    };
  }
  
  render() {
    if (this.state.redirect) {
      return <Redirect to='/login'/>;
    };
    return (
      <div>
        <h1>Create a New Account</h1>
        <Form inline onSubmit={this.handleSubmit}>
            <FormGroup controlId="formHorizontalEmail">
                <ControlLabel>Username </ControlLabel>
                <FormControl required type="username" ref="username" onChange={this.handleChange} placeholder="username" />
            </FormGroup>
            <FormGroup controlId="formHorizontalPassword">
                <ControlLabel>Password </ControlLabel>
                <FormControl required type="password" ref="password" onChange={this.handleChange} placeholder="password" />
            </FormGroup>
            <Button type="submit" onClick={this.handleSubmit}>Sign Up</Button>
            {this.state.errorMessage &&
              <p style={{color:'red'}}>{this.state.errorMessage}</p>
            }
        </Form>
      </div>
    )
  }
}

export default SignUp;<commit_msg>now auto logs user in upon successful signup<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import { Button, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';
import axios from 'axios';
import { Route, Redirect } from 'react-router'

class SignUp extends React.Component {
  constructor() {
    super();
    this.state = {
      redirect: false,
      errorMessage: ''
    };
    
    this.handleSubmit = (event) => {
      event.preventDefault();
      event.stopPropagation();
      this.setState({ errorMessage: '' });
      
      const username = ReactDOM.findDOMNode(this.refs.username).value.trim();
      const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
      const creds = { username: username, password: password };
      //this.props.onLoginClick(creds)
      console.log('SIGN UP with creds', creds);

      axios.post('http://localhost:3000/users/register', creds)
      .then(response => {
        console.log('[Signup] Success Response', response);
        ReactDOM.findDOMNode(this.refs.username).value = '';
        ReactDOM.findDOMNode(this.refs.password).value = '';
        this.setState({ errorMessage: '' });
        this.setState({ errorMessage: response.data.msg });
        
        axios.post('http://localhost:3000/users/login', creds)
        .then(response => {
          localStorage.clear();
          localStorage.setItem('token', response.data.token);
          localStorage.setItem('username', response.data.username);
          localStorage.setItem('user_id', response.data.user_id);
          this.setState({ errorMessage: response.data.msg });
          this.setState({ redirect: true});
        })
        .catch(error => {
          console.log('[Login] ERROR:', error);
          this.setState({ errorMessage: error.response.data.msg });
        });
      })
      .catch(error => {
        console.log('[Signup] ERROR:', error);
        this.setState({ errorMessage: error.response.data.msg });
      });
    };
  }
  
  render() {
    if (this.state.redirect) {
      return <Redirect to='/home'/>;
    };
    return (
      <div>
        <h1>Create a New Account</h1>
        <Form inline onSubmit={this.handleSubmit}>
            <FormGroup controlId="formHorizontalEmail">
                <ControlLabel>Username </ControlLabel>
                <FormControl required type="username" ref="username" onChange={this.handleChange} placeholder="username" />
            </FormGroup>
            <FormGroup controlId="formHorizontalPassword">
                <ControlLabel>Password </ControlLabel>
                <FormControl required type="password" ref="password" onChange={this.handleChange} placeholder="password" />
            </FormGroup>
            <Button type="submit" onClick={this.handleSubmit}>Sign Up</Button>
            {this.state.errorMessage &&
              <p style={{color:'red'}}>{this.state.errorMessage}</p>
            }
        </Form>
      </div>
    )
  }
}

export default SignUp;
{'fraction_non_alphanumeric': 0.14505776636713735, 'fraction_numerical': 0.0029341646799926646, 'mean_word_length': 2.578740157480315, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 53, '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': '6068999', 'n_tokens_mistral': 1513, 'n_tokens_neox': 1512, 'n_words': 290}