133 lines
4.0 KiB
JavaScript
133 lines
4.0 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Text, View } from 'react-native';
|
|
|
|
import styles from './Register.styles.js';
|
|
|
|
const STRINGS = {
|
|
NOM_EXPLANATION: 'Selecting a nom de bid allows you to bid anonymously - or not. By default, we\'ll use your first initial and last name.',
|
|
SUBMIT_REGISTRATION: 'Register',
|
|
};
|
|
|
|
export default class Register extends Component {
|
|
static get propTypes() {
|
|
return {
|
|
checkEmail: PropTypes.func.isRequired,
|
|
checkNomDeBid: PropTypes.func.isRequired,
|
|
doRegistration: PropTypes.func.isRequired,
|
|
// invalidEmail: PropTypes.bool.isRequired,
|
|
// invalidNomDeBid: PropTypes.bool.isRequired,
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super(props);
|
|
|
|
this.state = {
|
|
addresses: [],
|
|
avatar: null,
|
|
email: null,
|
|
firstName: null,
|
|
lastName: null,
|
|
nomDeBid: null,
|
|
invalidEmail: false,
|
|
invalidNomDeBid: false,
|
|
password: null,
|
|
phones: [],
|
|
};
|
|
|
|
this._doRegistration = this._doRegistration.bind(this);
|
|
}
|
|
|
|
_doRegistration() {
|
|
if (!this.isFormComplete()) {
|
|
console.error('Incomplete form... how did the button become enabled?');
|
|
alert('Please complete all of the required fields. They have bold labels.');
|
|
return;
|
|
}
|
|
|
|
this.props.doRegistration(this.getUserRegistration());
|
|
}
|
|
|
|
_validateEmail() {
|
|
this.props.checkEmail(this.state.email, (valid) => this.setState('invalidEmail', valid));
|
|
}
|
|
|
|
_validateNomDeBid() {
|
|
this.props.checkNomDeBid(this.state.nomDeBid, (valid) =>
|
|
this.setState('invalidNomDeBid', valid),
|
|
);
|
|
}
|
|
|
|
getUserRegistration() {
|
|
return {
|
|
addresses: this.state.addresses,
|
|
avatar: this.state.avatar,
|
|
email: this.state.email,
|
|
firstName: this.state.firstName,
|
|
lastName: this.state.lastName,
|
|
nomDeBid: this.state.nomDeBid,
|
|
password: this.state.password,
|
|
phones: this.state.phones,
|
|
};
|
|
}
|
|
|
|
isFormComplete() {
|
|
return (
|
|
!this.state.invalidEmail &&
|
|
!this.state.invalidNomDeBid &&
|
|
!!this.state.firstName &&
|
|
!!this.state.lastName &&
|
|
!!this.state.email &&
|
|
!!this.state.nomDeBid &&
|
|
!!this.state.phones.length &&
|
|
!!this.state.password
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>Register</Text>
|
|
<View style={styles.nameWrap}>
|
|
<TextInput
|
|
onChange={(text) => this.setState({ firstName: text })}
|
|
placeholder="first name"
|
|
style={styles.textInput}
|
|
value={this.state.firstName}
|
|
/>
|
|
<TextInput
|
|
onChange={(text) => this.setState({ lastName: text })}
|
|
placeholder="last name"
|
|
style={styles.textInput}
|
|
value={this.state.lastName}
|
|
/>
|
|
</View>
|
|
<View style={styles.emailWrap}>
|
|
<TextInput
|
|
keyboardType="email-address"
|
|
onChangeText={(text) => _updateState('username', text)}
|
|
onEndEditing={(text) => this._validateEmail(text)}
|
|
placeholder="email address"
|
|
style={styles.textInput}
|
|
value={this.state.email}
|
|
/>
|
|
</View>
|
|
<View style={styles.nomWrap}>
|
|
<Text style={styles.hintText}>{STRINGS.NOM_EXPLANATION}</Text>
|
|
<TextInput
|
|
keyboardType="email-address"
|
|
onChangeText={(text) => _updateState('username', text)}
|
|
onEndEditing={(text) => this._validateEmail(text)}
|
|
placeholder="email address"
|
|
style={styles.textInput}
|
|
value={this.state.email}
|
|
/>
|
|
</View>
|
|
<View style={styles.register}>
|
|
<Button title={STRINGS.SUBMIT_REGISTRATION} onPress={this._doRegistration} />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|