<commit_before>import React from 'react';
import firebase from 'firebase';
import {Link} from 'react-router';

class SignUpPage extends React.Component {
	constructor() {
		super();
		this.state = {
		  userName: '',
		  email: '',
		  password: '',
		  photoURL: '',
		  avatarList: ['../assets/avatars/noun_709544_cc.svg', 
									 '../assets/avatars/noun_709545_cc.svg', 
									 '../assets/avatars/noun_709549_cc.svg', 
									 '../assets/avatars/noun_709555_cc.svg', 
									 '../assets/avatars/noun_709576_cc.svg', 
									 '../assets/avatars/noun_709580_cc.svg', 
									 '../assets/avatars/noun_734104_cc.svg'],
		  error: null,
		  signupSuccess: false
		};

		this.signup = this.signup.bind(this);
		this.selectAvatar = this.selectAvatar.bind(this);
	}

	render() {
    return (
      <div className="sign-up-container splash">
          <h3>Sign up now for Nerdia!</h3>
          <input required
          			 type='text'
                 placeholder="<NAME>"
                 onChange={ (evt) => this.setState({ userName: evt.target.value }) }/>
          <input required
          			 type='text'
                 placeholder="Email"
                 onChange={ (evt) => this.setState({ email: evt.target.value }) }/>
          <input required
          			 type='password'
                 placeholder="Password"
                 onChange={ (evt) => this.setState({ password: evt.target.value }) }/>
          <div className="avatar-list">
          	<h4>Pick a Nerdia avatar!</h4>
          	{ this.state.avatarList.map((avatarURL, index) => {
          		// display a list of avatar and whenever one of them is being clicked on
          		// display selected class & update this.state.photoURL
          		return <img className={ this.state.photoURL === avatarURL ? "avatar-img avatar-selected" : "avatar-img" }
          								src={ avatarURL }
          								key={ index } 
          								onClick={ () => this.selectAvatar(avatarURL) }/>
          	}) }
          </div>
    
          <button onClick={ (evt) => this.signup() }>Sign Up</button>
          <Link to={ "/login-up/" + (this.props.params.topic) }>Already have an account? Sign up!</Link>
          { this.state.error && <div className="error-message">Hey! It looks like: { this.state.error }</div> }
      </div>
    )
  }

  selectAvatar(avatarURL) {
  	this.setState({ photoURL: avatarURL });
  }

  signup() {
  	// make sure user selects avatar photo
  	if (this.state.photoURL.length < 1) {
  		alert("please select an avatar by clicking on an image");
  		return;<commit_msg>chore: fix wording on signup Page<commit_after>import React from 'react';
import firebase from 'firebase';
import {Link} from 'react-router';

class SignUpPage extends React.Component {
	constructor() {
		super();
		this.state = {
		  userName: '',
		  email: '',
		  password: '',
		  photoURL: '',
		  avatarList: ['../assets/avatars/noun_709544_cc.svg', 
									 '../assets/avatars/noun_709545_cc.svg', 
									 '../assets/avatars/noun_709549_cc.svg', 
									 '../assets/avatars/noun_709555_cc.svg', 
									 '../assets/avatars/noun_709576_cc.svg', 
									 '../assets/avatars/noun_709580_cc.svg', 
									 '../assets/avatars/noun_734104_cc.svg'],
		  error: null,
		  signupSuccess: false
		};

		this.signup = this.signup.bind(this);
		this.selectAvatar = this.selectAvatar.bind(this);
	}

	render() {
    return (
      <div className="sign-up-container splash">
          <h3>Sign up now for Nerdia!</h3>
          <input required
          			 type='text'
                 placeholder="<NAME>"
                 onChange={ (evt) => this.setState({ userName: evt.target.value }) }/>
          <input required
          			 type='text'
                 placeholder="Email"
                 onChange={ (evt) => this.setState({ email: evt.target.value }) }/>
          <input required
          			 type='password'
                 placeholder="Password"
                 onChange={ (evt) => this.setState({ password: evt.target.value }) }/>
          <div className="avatar-list">
          	<h4>Pick a Nerdia avatar!</h4>
          	{ this.state.avatarList.map((avatarURL, index) => {
          		// display a list of avatar and whenever one of them is being clicked on
          		// display selected class & update this.state.photoURL
          		return <img className={ this.state.photoURL === avatarURL ? "avatar-img avatar-selected" : "avatar-img" }
          								src={ avatarURL }
          								key={ index } 
          								onClick={ () => this.selectAvatar(avatarURL) }/>
          	}) }
          </div>
    
          <button onClick={ (evt) => this.signup() }>Sign Up</button>
          <Link to={ "/login-up/" + (this.props.params.topic) }>Already have an account? Login!</Link>
          { this.state.error && <div className="error-message">Hey! It looks like: { this.state.error }</div> }
      </div>
    )
  }

  selectAvatar(avatarURL) {
  	this.setState({ photoURL: avatarURL });
  }

  signup() {
  	// make sure user selects avatar photo
  	if (this.state.photoURL.length < 1) {
  		alert("please select an avatar by clicking on an image");
  		return;
{'fraction_non_alphanumeric': 0.14756944444444445, 'fraction_numerical': 0.018132716049382717, 'mean_word_length': 2.048206937095826, 'pattern_counts': {'":': 0, '<': 43, '<?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': '7351420', 'n_tokens_mistral': 1879, 'n_tokens_neox': 1622, 'n_words': 337}