- Breaking up the profile
This commit is contained in:
Mike Fitzpatrick
@@ -6,18 +6,27 @@ 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 EditNomDeBid from './ProfileInputs/EditNomDeBid.js';
|
||||
import PasswordInput from './ProfileInputs/PasswordInput.js';
|
||||
import PhoneListInput from './ProfileInputs/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',
|
||||
BUTTONS: {
|
||||
CANCEL: 'Cancel',
|
||||
SUBMIT: 'Save changes',
|
||||
},
|
||||
DEV: {
|
||||
FORM_INCOMPLETE_SUBMIT: 'Incomplete form... how did the button become enabled?',
|
||||
},
|
||||
ERRORS: {
|
||||
FORM_SUBMIT_ERRORS: 'Please complete all of the required fields. They have bold labels.',
|
||||
},
|
||||
HEADINGS: {
|
||||
NOM: 'Nom de Bid',
|
||||
PASSWORD: 'Password',
|
||||
},
|
||||
};
|
||||
|
||||
export default class EditProfile extends Component {
|
||||
@@ -28,15 +37,13 @@ export default class EditProfile extends Component {
|
||||
cancelEditAction: PropTypes.func.isRequired,
|
||||
email: PropTypes.string,
|
||||
firstName: PropTypes.string,
|
||||
hasLocalAccount: PropTypes.bool,
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -47,28 +54,16 @@ export default class EditProfile extends Component {
|
||||
avatar: null,
|
||||
email: null,
|
||||
firstName: null,
|
||||
hasLocalAccount: false,
|
||||
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);
|
||||
|
||||
@@ -81,7 +76,7 @@ export default class EditProfile extends Component {
|
||||
invalidEmail: null,
|
||||
nomDeBid: this.props.nomDeBid,
|
||||
password: this.props.password,
|
||||
passwordCheck: null,
|
||||
passwordMatch: false,
|
||||
phones: this.props.phones,
|
||||
};
|
||||
|
||||
@@ -89,6 +84,15 @@ export default class EditProfile extends Component {
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
_handleValidPasswordEntry(password) {
|
||||
if (!password) {
|
||||
this.setState({ passwordMatch: false });
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ password, passwordMatch: true });
|
||||
}
|
||||
|
||||
_validateEmail() {
|
||||
getEmailAvailability(this.state.email)
|
||||
.then((result) => {
|
||||
@@ -97,6 +101,7 @@ export default class EditProfile extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
getProfileFromState() {
|
||||
return {
|
||||
addresses: this.state.addresses.toArray(),
|
||||
@@ -116,8 +121,8 @@ export default class EditProfile extends Component {
|
||||
|
||||
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.');
|
||||
console.error(STRINGS.DEV.FORM_INCOMPLETE_SUBMIT);
|
||||
alert(STRINGS.ERRORS.FORM_SUBMIT_ERRORS);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -141,15 +146,19 @@ export default class EditProfile extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isGeneratedNomDeBid, isGuided, isRegsiteredAccount, showPasswordEntry } = this.props;
|
||||
const { hasLocalAccount, isGeneratedNomDeBid, 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.emailWrap, styles.requiredWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.EMAIL_HEADING}</Text>
|
||||
<TextInput
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
@@ -169,98 +178,55 @@ export default class EditProfile extends Component {
|
||||
<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 style={[styles.sectionWrap, styles.nameWrap]}>
|
||||
<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 && (
|
||||
<View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.HEADINGS.PASSWORD}</Text>
|
||||
<PasswordInput handleValidPasswordEntry={this._handleValidPasswordEntry} />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.cancelWrap}>
|
||||
<Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
|
||||
{(isGeneratedNomDeBid || !hasLocalAccount) && (
|
||||
<View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.HEADINGS.NOM}</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]}>
|
||||
{addresses !== null && addresses.size > 0 && (
|
||||
/* LIST ADDRESSES */
|
||||
<View />
|
||||
)}
|
||||
<Button title="Add address" onPress={() => false} />
|
||||
</View>
|
||||
<View style={styles.register}>
|
||||
<Button title={STRINGS.BUTTONS.SUBMIT} onPress={this.handleSubmit} />
|
||||
<Button title={STRINGS.BUTTONS.CANCEL} onPress={this.handleCancel} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user