- Wiring up nom and phone registration bits
- Added guided registration
This commit is contained in:
Mike Fitzpatrick
@@ -11,10 +11,12 @@ import PhoneListInput from './PhoneInput/PhoneListInput.js';
|
||||
import styles from './Profile.styles.js';
|
||||
|
||||
const STRINGS = {
|
||||
AVATAR_HEADING: 'Want to add a picture?',
|
||||
CANCEL: 'Cancel',
|
||||
NOM_HEADING: 'Nom de Bid',
|
||||
PASSWORD_HEADING: 'Password',
|
||||
PERSONAL_HEADING: 'A bit about you...',
|
||||
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',
|
||||
};
|
||||
|
||||
@@ -28,6 +30,7 @@ export default class EditProfile extends Component {
|
||||
firstName: PropTypes.string,
|
||||
initials: PropTypes.string,
|
||||
isGeneratedNomDeBid: PropTypes.bool,
|
||||
isGuided: PropTypes.bool,
|
||||
isRegsiteredAccount: PropTypes.bool,
|
||||
lastName: PropTypes.string,
|
||||
nomDeBid: PropTypes.string,
|
||||
@@ -46,6 +49,7 @@ export default class EditProfile extends Component {
|
||||
firstName: null,
|
||||
initials: null,
|
||||
isGeneratedNomDeBid: false,
|
||||
isGuided: false,
|
||||
isRegsiteredAccount: false,
|
||||
lastName: null,
|
||||
nomDeBid: null,
|
||||
@@ -55,6 +59,16 @@ export default class EditProfile extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
static validatePasswordMatch(password, passwordCheck) {
|
||||
if ((!password || !passwordCheck) ||
|
||||
(password || passwordCheck && password.length === passwordCheck.length)
|
||||
){
|
||||
return null;
|
||||
}
|
||||
|
||||
return password === passwordCheck;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@@ -64,11 +78,10 @@ export default class EditProfile extends Component {
|
||||
email: this.props.email,
|
||||
firstName: this.props.firstName,
|
||||
lastName: this.props.lastName,
|
||||
invalidEmail: false,
|
||||
invalidNomDeBid: false,
|
||||
invalidEmail: null,
|
||||
nomDeBid: this.props.nomDeBid,
|
||||
password: this.props.password,
|
||||
passwordsMismatch: false,
|
||||
passwordCheck: null,
|
||||
phones: this.props.phones,
|
||||
};
|
||||
|
||||
@@ -78,32 +91,22 @@ export default class EditProfile extends Component {
|
||||
|
||||
_validateEmail() {
|
||||
getEmailAvailability(this.state.email)
|
||||
.then(({ available = false }) =>
|
||||
this.setState('invalidEmail', !available),
|
||||
);
|
||||
}
|
||||
|
||||
_validateNomDeBid() {
|
||||
getNomAvailability(this.state.nomDeBid)
|
||||
.then(({ available = false }) =>
|
||||
this.setState('invalidNomDeBid', !available),
|
||||
);
|
||||
}
|
||||
|
||||
_validatePasswordMatch(password) {
|
||||
this.setState({ passwordsMismatch: this.state.password !== password });
|
||||
.then((result) => {
|
||||
console.log(`_validateEmail => getEmailAvailability(${this.state.email}):`, result);
|
||||
this.setState({ invalidEmail: !result.available });
|
||||
});
|
||||
}
|
||||
|
||||
getProfileFromState() {
|
||||
return {
|
||||
addresses: this.state.addresses,
|
||||
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,
|
||||
phones: this.state.phones.toArray(),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -123,7 +126,7 @@ export default class EditProfile extends Component {
|
||||
|
||||
isFormComplete() {
|
||||
const { showPasswordEntry } = this.props;
|
||||
const { password } = this.state;
|
||||
const { password, passwordCheck } = this.state;
|
||||
|
||||
return (
|
||||
!this.state.invalidEmail &&
|
||||
@@ -133,96 +136,130 @@ export default class EditProfile extends Component {
|
||||
!!this.state.email &&
|
||||
!!this.state.nomDeBid &&
|
||||
!!this.state.phones.size &&
|
||||
((showPasswordEntry && !!password) || !showPasswordEntry)
|
||||
((showPasswordEntry && EditProfile.validatePasswordMatch(password, passwordCheck)) || !showPasswordEntry)
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isGeneratedNomDeBid, isRegsiteredAccount, showPasswordEntry } = this.props;
|
||||
const { addresses, avatar, firstName, lastName, phones } = this.state;
|
||||
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.avatarWrap]}>
|
||||
{avatar !== null ? (
|
||||
<Avatar source={{ uri: this.state.avatar }} showEditButton />
|
||||
) : (
|
||||
<Avatar title={this.props.initials} showEditButton />
|
||||
)}
|
||||
</View>
|
||||
<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>
|
||||
<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}
|
||||
value={this.state.email || ''}
|
||||
/>
|
||||
</View>
|
||||
{showPasswordEntry && (
|
||||
<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
|
||||
onEndEditing={(text) => this._validatePasswordMatch(text)}
|
||||
placeholder="re-enter password"
|
||||
secureTextEntry
|
||||
style={[styles.textInput, styles.requiredInput]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{(isGeneratedNomDeBid || !isRegsiteredAccount) && (
|
||||
<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>
|
||||
)}
|
||||
<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 />
|
||||
{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>
|
||||
)}
|
||||
<Button title="Add address" onPress={() => false} />
|
||||
</View>
|
||||
<View style={styles.register}>
|
||||
<Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
|
||||
{(!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>
|
||||
|
||||
Reference in New Issue
Block a user