269 lines
12 KiB
JavaScript
269 lines
12 KiB
JavaScript
import { List } from 'immutable';
|
|
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Button, Picker, ScrollView, Text, TextInput, View } from 'react-native';
|
|
import { Avatar } from 'react-native-elements';
|
|
|
|
import { getEmailAvailability, getNomAvailability } from '../../api/profile.js';
|
|
|
|
import EditNomDeBid from './EditNomDeBid.js';
|
|
import PhoneListInput from './PhoneInput/PhoneListInput.js';
|
|
import styles from './Profile.styles.js';
|
|
|
|
const STRINGS = {
|
|
AVATAR_HEADING: 'Want to add a picture?',
|
|
CANCEL: 'Cancel',
|
|
EMAIL_HEADING: 'Email (this will be your username)',
|
|
NOM_HEADING: 'and a Nom de Bid - your bidding alias!',
|
|
PASSWORD_HEADING: 'For security, let\'s choose a password',
|
|
PERSONAL_HEADING: 'Great! And now a bit about you...',
|
|
SAVE_PROFILE: 'Save profile',
|
|
};
|
|
|
|
export default class EditProfile extends Component {
|
|
static get propTypes() {
|
|
return {
|
|
addresses: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
|
|
avatar: PropTypes.string,
|
|
cancelEditAction: PropTypes.func.isRequired,
|
|
email: PropTypes.string,
|
|
firstName: PropTypes.string,
|
|
initials: PropTypes.string,
|
|
isGeneratedNomDeBid: PropTypes.bool,
|
|
isGuided: PropTypes.bool,
|
|
isRegsiteredAccount: PropTypes.bool,
|
|
lastName: PropTypes.string,
|
|
nomDeBid: PropTypes.string,
|
|
phones: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
|
|
saveProfileAction: PropTypes.func.isRequired,
|
|
saveProfileLabel: PropTypes.string,
|
|
showPasswordEntry: PropTypes.bool,
|
|
};
|
|
}
|
|
|
|
static get defaultProps() {
|
|
return {
|
|
addresses: new List(),
|
|
avatar: null,
|
|
email: null,
|
|
firstName: null,
|
|
initials: null,
|
|
isGeneratedNomDeBid: false,
|
|
isGuided: false,
|
|
isRegsiteredAccount: false,
|
|
lastName: null,
|
|
nomDeBid: null,
|
|
phones: new List(),
|
|
saveProfileLabel: STRINGS.SAVE_PROFILE,
|
|
showPasswordEntry: false,
|
|
};
|
|
}
|
|
|
|
static validatePasswordMatch(password, passwordCheck) {
|
|
if ((!password || !passwordCheck) ||
|
|
(password || passwordCheck && password.length === passwordCheck.length)
|
|
){
|
|
return null;
|
|
}
|
|
|
|
return password === passwordCheck;
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
addresses: this.props.addresses,
|
|
avatar: this.props.avatar,
|
|
email: this.props.email,
|
|
firstName: this.props.firstName,
|
|
lastName: this.props.lastName,
|
|
invalidEmail: null,
|
|
nomDeBid: this.props.nomDeBid,
|
|
password: this.props.password,
|
|
passwordCheck: null,
|
|
phones: this.props.phones,
|
|
};
|
|
|
|
this.handleCancel = this.handleCancel.bind(this);
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
}
|
|
|
|
_validateEmail() {
|
|
getEmailAvailability(this.state.email)
|
|
.then((result) => {
|
|
console.log(`_validateEmail => getEmailAvailability(${this.state.email}):`, result);
|
|
this.setState({ invalidEmail: !result.available });
|
|
});
|
|
}
|
|
|
|
getProfileFromState() {
|
|
return {
|
|
addresses: this.state.addresses.toArray(),
|
|
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.toArray(),
|
|
};
|
|
}
|
|
|
|
handleCancel() {
|
|
this.props.cancelEditAction();
|
|
}
|
|
|
|
handleSubmit() {
|
|
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.saveProfileAction(this.getProfileFromState());
|
|
}
|
|
|
|
isFormComplete() {
|
|
const { showPasswordEntry } = this.props;
|
|
const { password, passwordCheck } = this.state;
|
|
|
|
return (
|
|
!this.state.invalidEmail &&
|
|
!this.state.invalidNomDeBid &&
|
|
!!this.state.firstName &&
|
|
!!this.state.lastName &&
|
|
!!this.state.email &&
|
|
!!this.state.nomDeBid &&
|
|
!!this.state.phones.size &&
|
|
((showPasswordEntry && EditProfile.validatePasswordMatch(password, passwordCheck)) || !showPasswordEntry)
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { isGeneratedNomDeBid, isGuided, isRegsiteredAccount, showPasswordEntry } = this.props;
|
|
const { addresses, avatar, firstName, invalidEmail, lastName, password, passwordCheck, phones } = this.state;
|
|
const addressesTitle = 'Addresses';
|
|
const numbersTitle = 'Numbers';
|
|
|
|
return (
|
|
<ScrollView style={styles.profileFormWrap}>
|
|
<View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
|
|
<Text style={styles.groupHeading}>{STRINGS.EMAIL_HEADING}</Text>
|
|
<TextInput
|
|
autoCapitalize="none"
|
|
keyboardType="email-address"
|
|
onChangeText={(text) => this.setState({ email: text })}
|
|
onEndEditing={(text) => this._validateEmail(text)}
|
|
placeholder="email address"
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
value={this.state.email || ''}
|
|
/>
|
|
{invalidEmail === true && (
|
|
<View style={styles.emailTaken}>
|
|
<Text style={{color:'red'}}>{`You've already registered!`}</Text>
|
|
<Button title="Forgot Password" onPress={() => {}} />
|
|
</View>
|
|
)}
|
|
{invalidEmail === false && (
|
|
<Text style={{color:'green'}}>{`Great, lets add a bit more detail...`}</Text>
|
|
)}
|
|
</View>
|
|
{(!isGuided || (isGuided && invalidEmail === false)) && (
|
|
<View style={styles.rollDownPanel}>
|
|
<View style={[styles.sectionWrap, styles.nameWrap]}>
|
|
<Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</Text>
|
|
<TextInput
|
|
onChange={(text) => this.setState({ firstName: text })}
|
|
placeholder="first name"
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
value={this.state.firstName || ''}
|
|
/>
|
|
<TextInput
|
|
onChange={(text) => this.setState({ lastName: text })}
|
|
placeholder="last name"
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
value={this.state.lastName || ''}
|
|
/>
|
|
</View>
|
|
{showPasswordEntry &&
|
|
(!isGuided || (isGuided && firstName !== null && lastName !== null)) &&
|
|
(
|
|
<View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
|
|
<Text style={styles.groupHeading}>{STRINGS.PASSWORD_HEADING}</Text>
|
|
<TextInput
|
|
onChangeText={(text) => this.setState({ password: text })}
|
|
placeholder="password"
|
|
secureTextEntry
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
/>
|
|
<TextInput
|
|
onChangeText={(text) => this.setState({ passwordCheck: text })}
|
|
placeholder="re-enter password"
|
|
secureTextEntry
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
/>
|
|
{EditProfile.validatePasswordMatch(password, passwordCheck) === true && (
|
|
<Text style={{ color: 'green' }}>{`That's a match!`}</Text>
|
|
)}
|
|
{EditProfile.validatePasswordMatch(password, passwordCheck) === false && (
|
|
<Text style={{ color: 'red' }}>{`Well that's not a match...`}</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
{(isGeneratedNomDeBid || !isRegsiteredAccount) &&
|
|
(!isGuided || (isGuided && EditProfile.validatePasswordMatch(password, passwordCheck) === true)) &&
|
|
(
|
|
<View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
|
|
<Text style={styles.groupHeading}>{STRINGS.NOM_HEADING}</Text>
|
|
<EditNomDeBid
|
|
isGeneratedNomDeBid={isGeneratedNomDeBid}
|
|
isStandalone
|
|
nomDeBid={this.state.nomDeBid}
|
|
updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
|
|
/>
|
|
</View>
|
|
)}
|
|
{(!isGuided || (isGuided && this.state.nomDeBid !== null)) && (
|
|
<View style={styles.rollDownPanel}>
|
|
<View style={[styles.sectionWrap, styles.phonesWrap]}>
|
|
<PhoneListInput
|
|
handleAdd={(phones) => this.setState({ phones })}
|
|
handleDelete={(phones) => this.setState({ phones })}
|
|
handleEdit={(phones) => this.setState({ phones })}
|
|
phones={phones}
|
|
/>
|
|
</View>
|
|
<View style={[styles.sectionWrap, styles.addressesWrap]}>
|
|
<Text style={styles.groupHeading}>{addressesTitle}</Text>
|
|
{addresses !== null && addresses.size > 0 && (
|
|
/* LIST ADDRESSES */
|
|
<View />
|
|
)}
|
|
<Button title="Add address" onPress={() => false} />
|
|
</View>
|
|
<View style={[styles.sectionWrap, styles.avatarWrap]}>
|
|
<Text style={styles.groupHeading}>{STRINGS.AVATAR_HEADING}</Text>
|
|
{avatar !== null ? (
|
|
<Avatar source={{ uri: this.state.avatar }} showEditButton />
|
|
) : (
|
|
<Avatar title={this.props.initials} showEditButton />
|
|
)}
|
|
</View>
|
|
</View>
|
|
)}
|
|
{(!isGuided || (isGuided && phones !== null && phones.size > 0)) && (
|
|
<View style={styles.register}>
|
|
<Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
<View style={styles.cancelWrap}>
|
|
<Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
}
|