<commit_before>import React from 'react';
import axios from 'axios';
import { autobind } from 'core-decorators';
import { connect } from 'react-redux';
import { Link, Redirect } from 'react-router-dom';
import { ProgressBar, Intent, Icon } from '@blueprintjs/core';
import API from '../../../../API';
import Form1 from './Form1';
import Form2 from './Form2';
import Form3 from './Form3';
import Form4 from './Form4';


const MutationRegisterUser = 
`mutation Register($firstname:String!, $lastname:String!, $username:String!, $email:String!, $mobileNumber:String!, $password:String!, $confirmPassword:String!, $university:String!, $studentID:String!, $PTProficiency: Int!, $hasSmartphone:Boolean!, $friends:String) {
  registerUser(firstname:$firstname, lastname:$lastname, username:$username, email:$email, mobileNumber:$mobileNumber, password: <PASSWORD>, confirmPassword:$<PASSWORD>, university:$university, studentID:$studentID, PTProficiency:$PTProficiency, hasSmartphone:$hasSmartphone, friends:$friends){
    firstname
    lastname
    username
    email
  }
}`;


const mapStateToProps = (state, ownProps) => {
	return { 
		authenticated: state.auth.login.authenticated
	}
}


@connect(mapStateToProps)
@autobind
class RegisterForm extends React.Component {
	state = {
		firstname: '',
		lastname: '',
		university: 'Monash University',
		email: '',
		mobileNumber: '',
		username: '',
		password: '',
		confirmPassword: '',
		studentID: '',
		PTProficiency: '2',
		hasSmartphone: 'yes',
		friends: '',
		currentStage: 1,
		loading: false,
		error: false,
		complete: false
	}

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

	changeStage(nextId) {
		return () => {
			this.setState({ currentStage: nextId });
		}
	}

	async submitForm() {
		this.setState({
			loading: true,
			error: false,
			currentStage: 5
		});
	
		let options = {
			method: 'POST',
			url: API.api,
			data: {
				query: MutationRegisterUser,
				variables: {
					firstname: this.state.firstname, 
					lastname: this.state.lastname, 
					username: this.state.username,
					email: this.state.email, 
					mobileNumber: this.state.mobileNumber, 
					password: <PASSWORD>, 
					confirmPassword: <PASSWORD>,
					university: this.state.university, 
					studentID: this.state.studentID, 
					PTProficiency: this.state.PTProficiency, 
					hasSmartphone: this.state.hasSmartphone, 
					friends: this.state.friends
				}
			}
		}

		try {
			let result = await axios(options);
			if (result.data.data.registerUser.email === this.state.email) {
				this.setState({ complete: true, loading: false });
			}
			else {
				this.setState({ error: 'Registration unsuccessful (server error)', loading: false });
			}
		}
		catch (e) {
			this.setState({ error: e, loading: false });
		}
	}

	render() {
		if (this.props.authenticated) {
			return (
				<div className='info'>
					<div className='fail title'>
						You are already registered.
					</div>
					<p>
						Hey! You're logged in at the moment which means already have an account.
						If someone else is registering, please log out first. 
					</p>
				</div>
			);
		}
		else if (!this.state.complete) {
			let form = null;
			switch (this.state.currentStage) {
				case 1: form = <Form1 onChange={this.handleInputChange} state={this.state} next={this.changeStage(2)}/>; break;
				case 2: form = <Form2 onChange={this.handleInputChange} state={this.state} next={this.changeStage(3)} back={this.changeStage(1)}/>; break;<commit_msg>[ADD] Add logout button on register page<commit_after>import React from 'react';
import axios from 'axios';
import { autobind } from 'core-decorators';
import { connect } from 'react-redux';
import { Link, Redirect } from 'react-router-dom';
import { ProgressBar, Intent, Icon } from '@blueprintjs/core';
import { logout } from '../../../../actions/authActions';
import API from '../../../../API';
import Form1 from './Form1';
import Form2 from './Form2';
import Form3 from './Form3';
import Form4 from './Form4';


const MutationRegisterUser = 
`mutation Register($firstname:String!, $lastname:String!, $username:String!, $email:String!, $mobileNumber:String!, $password:String!, $confirmPassword:String!, $university:String!, $studentID:String!, $PTProficiency: Int!, $hasSmartphone:Boolean!, $friends:String) {
  registerUser(firstname:$firstname, lastname:$lastname, username:$username, email:$email, mobileNumber:$mobileNumber, password: <PASSWORD>, confirmPassword:$<PASSWORD>, university:$university, studentID:$studentID, PTProficiency:$PTProficiency, hasSmartphone:$hasSmartphone, friends:$friends){
    firstname
    lastname
    username
    email
  }
}`;


const mapStateToProps = (state, ownProps) => {
	return { 
		authenticated: state.auth.login.authenticated
	}
}


@connect(mapStateToProps)
@autobind
class RegisterForm extends React.Component {
	state = {
		firstname: '',
		lastname: '',
		university: 'Monash University',
		email: '',
		mobileNumber: '',
		username: '',
		password: '',
		confirmPassword: '',
		studentID: '',
		PTProficiency: '2',
		hasSmartphone: 'yes',
		friends: '',
		currentStage: 1,
		loading: false,
		error: false,
		complete: false
	}

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

	changeStage(nextId) {
		return () => {
			this.setState({ currentStage: nextId });
		}
	}

	async submitForm() {
		this.setState({
			loading: true,
			error: false,
			currentStage: 5
		});
	
		let options = {
			method: 'POST',
			url: API.api,
			data: {
				query: MutationRegisterUser,
				variables: {
					firstname: this.state.firstname, 
					lastname: this.state.lastname, 
					username: this.state.username,
					email: this.state.email, 
					mobileNumber: this.state.mobileNumber, 
					password: <PASSWORD>, 
					confirmPassword: <PASSWORD>,
					university: this.state.university, 
					studentID: this.state.studentID, 
					PTProficiency: this.state.PTProficiency, 
					hasSmartphone: this.state.hasSmartphone, 
					friends: this.state.friends
				}
			}
		}

		try {
			let result = await axios(options);
			if (result.data.data.registerUser.email === this.state.email) {
				this.setState({ complete: true, loading: false });
			}
			else {
				this.setState({ error: 'Registration unsuccessful (server error)', loading: false });
			}
		}
		catch (e) {
			this.setState({ error: e, loading: false });
		}
	}

	logout() {
		this.props.dispatch(logout(new Date()));
	}

	render() {
		if (this.props.authenticated) {
			return (
				<div className='info'>
					<div className='fail title'>
						You are already registered.
					</div>
					<p>
						Hey! You're logged in at the moment which means already have an account.
						If someone else is trying to registering, please&nbsp;
						<a style={{color: 'yellow'}}onClick={this.logout}>log out</a> first. 
					</p>
				</div>
			);
		}
		else if (!this.state.complete) {
			let form = null;
			switch (this.state.currentStage) {
				case 1: form = <Form1 onChange={this.handleInputChange} state={this.state} next={this.changeStage(2)}/>; break;
				case 2: form = <Form2 onChange={this.handleInputChange} state={this.state} next={this.changeStage(3)} back={this.changeStage(1)}/>; break;
{'fraction_non_alphanumeric': 0.1494602823138666, 'fraction_numerical': 0.00498200941046222, 'mean_word_length': 3.7797619047619047, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, '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': '825572', 'n_tokens_mistral': 2743, 'n_tokens_neox': 2284, 'n_words': 544}