- Breaking up the profile

2019-08-17 02:45:57 -04:00
parent c146884636
commit cc8442b0b2
12 changed files with 557 additions and 192 deletions
--- a/app/components/Profile/CreateProfile.js
+++ b/app/components/Profile/CreateProfile.js
@@ -0,0 +1,225 @@
+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 './ProfileInputs/EditNomDeBid.js';
+import EmailInput from './ProfileInputs/EmailInput.js';
+import PasswordInput from './ProfileInputs/PasswordInput.js';
+import PhoneListInput from './ProfileInputs/PhoneListInput.js';
+
+import styles from './Profile.styles.js';
+
+const STRINGS = {
+    BUTTONS: {
+        CANCEL: 'Cancel',
+        SUBMIT: 'Register',
+    },
+    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: {
+        AVATAR: 'Want to add a picture?',
+        EMAIL: 'Email (this will be your username)',
+        NOM: 'and a Nom de Bid - your bidding alias!',
+        PASSWORD: 'For security, let\'s choose a password',
+        PERSONAL: 'Great! And now a bit about you...',
+    },
+};
+
+export default class CreateProfile extends Component {
+    static get propTypes() {
+        return {
+            cancelEditAction: PropTypes.func.isRequired,
+            saveProfileAction: PropTypes.func.isRequired,
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            addresses: new List(),
+            avatar: null,
+            email: null,
+            firstName: null,
+            lastName: null,
+            invalidEmail: null,
+            nomDeBid: null,
+            password: null,
+            passwordMatch: false,
+            phones: new List(),
+        };
+
+        this.handleCancel = this.handleCancel.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+        this._handleValidPasswordEntry = this._handleValidPasswordEntry.bind(this);
+    }
+
+    _handleComponentStateUpdate(key, value) {
+        this.setState({ [key]: value });
+    }
+
+    _handleValidPasswordEntry(password) {
+        if (!password) {
+            this.setState({ passwordMatch: false });
+            return;
+        }
+
+        this.setState({ password, passwordMatch: true });
+    }
+
+    _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(STRINGS.DEV.FORM_INCOMPLETE_SUBMIT);
+            alert(STRINGS.ERRORS.FORM_SUBMIT_ERRORS);
+            return;
+        }
+
+        this.props.saveProfileAction(this.getProfileFromState());
+    }
+
+    isFormComplete() {
+        return (
+            !!this.state.email &&
+            !!this.state.firstName &&
+            !!this.state.lastName &&
+            !!this.state.email &&
+            !!this.state.nomDeBid &&
+            !!this.state.phones.size &&
+            this.state.passwordMatch && !!this.state.password
+        );
+    }
+
+    render() {
+        const {
+            addresses,
+            avatar,
+            email,
+            firstName,
+            lastName,
+            nomDeBid,
+            password,
+            passwordMatch,
+            phones
+        } = this.state;
+
+        return (
+            <ScrollView style={styles.profileFormWrap}>
+                <View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
+                    <Text style={styles.groupHeading}>{STRINGS.HEADINGS.EMAIL}</Text>
+                    <EmailInput
+                        handleValidEmailEntry={(email) => this.setState({ email })}
+                        isRequired
+                        showContinueButton
+                    />
+                    {email !== false && (
+                        <Text style={{ color:'green', textAlign: 'center' }}>
+                            {`Great, lets add a bit more detail...`}
+                        </Text>
+                    )}
+                </View>
+                {email !== null && (
+                    <View style={[styles.sectionWrap, styles.nameWrap]}>
+                        <Text style={styles.groupHeading}>{STRINGS.HEADINGS.PERSONAL}</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>
+                )}
+                {firstName !== null && lastName !== null && (
+                    <View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
+                        <Text style={styles.groupHeading}>{STRINGS.HEADINGS.PASSWORD}</Text>
+                        <PasswordInput handleValidPasswordEntry={this._handleValidPasswordEntry} />
+                    </View>
+                )}
+                {passwordMatch && (
+                    <View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
+                        <Text style={styles.groupHeading}>{STRINGS.HEADINGS.NOM}</Text>
+                        <EditNomDeBid
+                            isStandalone
+                            nomDeBid={this.state.nomDeBid}
+                            updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
+                        />
+                    </View>
+                )}
+                {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]}>
+                            {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>
+                )}
+                {phones.size > 0 && (
+                    <View style={styles.register}>
+                        <Button title={STRINGS.BUTTONS.SUBMIT} onPress={this.handleSubmit} />
+                    </View>
+                )}
+                <View style={styles.cancelWrap}>
+                    <Button title={STRINGS.BUTTONS.CANCEL} onPress={this.handleCancel} />
+                </View>
+            </ScrollView>
+        );
+    }
+}
--- a/app/components/Profile/EditProfile.js
+++ b/app/components/Profile/EditProfile.js
@@ -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>
        );
--- a/app/components/Profile/PhoneInput/PhoneListItem.js
+++ b/app/components/Profile/PhoneInput/PhoneListItem.js
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Button, Text, View } from 'react-native';
-
-import styles from '../Profile.styles.js';
-
-export default function PhoneListItem({ index, label, number, handleDelete, handleEdit, handleEditStart }) {
-    return (
-        <View style={styles.listItem}>
-            <View style={styles.listValue}>
-                <Text style={styles.value}>{number}</Text>
-                <Text style={styles.label}>{label}</Text>
-            </View>
-            <View style={styles.listActions}>
-                {handleEdit !== null && <Button title={`Edit`} onPress={() => handleEditStart(index)} />}
-                <Button title={`X`} onPress={() => handleDelete(index)} />
-            </View>
-        </View>
-    );
-}
-
-PhoneListItem.propTypes = {
-    index: PropTypes.number.isRequired,
-    label: PropTypes.string.isRequired,
-    number: PropTypes.string.isRequired,
-    handleDelete: PropTypes.func.isRequired,
-    handleEdit: PropTypes.func,
-    handleEditStart: PropTypes.func.isRequired,
-};
-
-PhoneListItem.defaultProps = {
-    handleEdit: null,
-};
-
-
-
--- a/app/components/Profile/Profile.js
+++ b/app/components/Profile/Profile.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';

+import CreateProfile from './CreateProfile.js';
 import EditProfile from './EditProfile.container.js';
 import ViewProfile from './ViewProfile.container.js';

@@ -10,7 +11,6 @@ export default function Profile({
    isGuidedRegistration,
    isInEditMode,
    saveProfileAction,
-    saveProfileLabel,
 }) {
    const [editMode, setEditMode] = useState(isInEditMode);

@@ -26,15 +26,20 @@ export default function Profile({

    return (
        <View>
-            {editMode ? (
+            {!editMode && (
+                <ViewProfile editProfileAction={() => setEditMode(true)} />
+            )}
+            {editMode && isGuidedRegistration && (
+                <CreateProfile
+                    cancelEditAction={_cancelEditAction}
+                    saveProfileAction={_saveProfileAction}
+                />
+            )}
+            {editMode && !isGuidedRegistration && (
                <EditProfile
                    cancelEditAction={_cancelEditAction}
-                    isGuided={isGuidedRegistration}
                    saveProfileAction={_saveProfileAction}
-                    saveProfileLabel={saveProfileLabel}
                />
-            ) : (
-                <ViewProfile editProfileAction={() => setEditMode(true)} />
            )}
        </View>
    );
@@ -45,7 +50,6 @@ Profile.propTypes = {
    isGuidedRegistration: PropTypes.bool,
    isInEditMode: PropTypes.bool,
    saveProfileAction: PropTypes.func.isRequired,
-    saveProfileLabel: PropTypes.string,
 };

 Profile.defaultProps = {
--- a/app/components/Profile/ProfileInputs/EditNomDeBid.container.js
+++ b/app/components/Profile/ProfileInputs/EditNomDeBid.container.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';

-import { setNomDeBid } from '../../actions/profile.js';
-import { getNomDeBid, isGeneratedNomDeBid } from '../../selectors/profile.js';
+import { setNomDeBid } from '../../../actions/profile.js';
+import { getNomDeBid, isGeneratedNomDeBid } from '../../../selectors/profile.js';

 import EditNomDeBid from './EditNomDeBid.js';

--- a/app/components/Profile/ProfileInputs/EditNomDeBid.js
+++ b/app/components/Profile/ProfileInputs/EditNomDeBid.js
@@ -3,15 +3,17 @@ import PropTypes from 'prop-types';
 import { Button, Text, TextInput, View } from 'react-native';
 import { Avatar } from 'react-native-elements';

-import { getNomAvailaibility } from '../../api/profile.js';
-import styles from './Profile.styles.js';
+import { getNomAvailaibility } from '../../../api/profile.js';
+import styles from '../Profile.styles.js';

 const STRINGS = {
    ABOUT_GENERATED_NOM:
        'You currently have a generated Nom De Bid - the alias other bidders will know you as - why not personalize it?',
+    CHECK_AVAILABILITY: 'check availability',
    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.",
    ONLY_SET_ONCE: 'This can only be set once!',
+    PLACEHOLDER: 'nom de bid',
    SUBMIT_NOM: 'Set Nom De Bid',
 };

@@ -24,22 +26,16 @@ export default function EditNomDeBid({
    const [newNom, setNomDeBid] = useState(isGeneratedNomDeBid || !nomDeBid ? '' : nomDeBid);
    const [isNomValid, setValidNom] = useState(null);

-    const _handleEndEditing = () => {
+    const _handleEndEditing = (updateOnValid = false) => () => {
        getNomAvailaibility(newNom).then((result) => {
            setValidNom(result.available);

-            if (isStandalone) {
+            if (updateOnValid && result.available) {
                updateNomDeBid(newNom);
            }
        });
    };

-    const _handleSubmitNom = () => {
-        if (isNomValid) {
-            updateNomDeBid(newNom);
-        }
-    };
-
    const explanationString = isGeneratedNomDeBid
        ? `${STRINGS.ABOUT_GENERATED_NOM} ${STRINGS.ONLY_SET_ONCE}`
        : `${STRINGS.NOM_EXPLANATION} ${STRINGS.ONLY_SET_ONCE}`;
@@ -50,8 +46,8 @@ export default function EditNomDeBid({
            <TextInput
                autoCapitalize="none"
                onChangeText={(text) => setNomDeBid(text)}
-                onEndEditing={() => _handleEndEditing()}
-                placeholder="nom de bid"
+                onEndEditing={!isStandalone && _handleEndEditing(false)}
+                placeholder={STRINGS.PLACEHOLDER}
                style={[styles.textInput, styles.requiredInput]}
                value={newNom}
            />
@@ -61,13 +57,10 @@ export default function EditNomDeBid({
            {isNomValid === true && (
                <Text style={{color:'green'}}>Nom De Bid is available!</Text>
            )}
-            {!isStandalone && (
-                <Button
-                    title={STRINGS.SUBMIT_NOM}
-                    onPress={_handleSubmitNom}
-                    disabled={!isNomValid}
-                />
-            )}
+            <Button
+                title={isStandalone ? STRINGS.CHECK_AVAILABILITY : STRINGS.SUBMIT_NOM}
+                onPress={_handleEndEditing(true)}
+            />
        </View>
    );
 }
--- a/app/components/Profile/ProfileInputs/EmailInput.js
+++ b/app/components/Profile/ProfileInputs/EmailInput.js
@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Text, TextInput, View } from 'react-native';
+
+import { getEmailAvailability } from '../../../api/profile.js';
+
+import styles from '../Profile.styles.js';
+
+const STRINGS = {
+    CONTINUE: 'continue',
+    PLACEHOLDER: 'email address',
+    REGISTERED: `You've already registered!`,
+    RESET_PASSWORD: 'reset password',
+};
+
+export default function EmailInput({ email, handleValidEmailEntry, isRequired, showContinueButton }) {
+    const [emailValue, setEmail] = useState(email);
+    const [isEmailAvailable, setEmailAvailable] = useState(null);
+
+    const _handleContinueButtonPress = () => {
+
+    };
+
+    const _handleEndEditing = () => {
+        if (!emailValue.match(/.+\@.+\..+/)) {
+            Alert.alert(
+                'Invalid Email',
+                `Hmmm... You entered '${emailValue}' and something doesn't look quite right...`,
+            );
+
+            return;
+        }
+
+        getEmailAvailability(emailValue)
+            .then((result) => {
+                const { available } = result;
+
+                console.log(`EmailInput._validateEmail => getEmailAvailability(${emailValue}):`, result);
+
+                if (available) {
+                    handleValidEmailEntry(emailValue);
+                }
+
+                setEmailAvailable(available);
+            });
+    };
+
+    return (
+        <View style={[styles.sectionWrap, styles.password, isRequired && styles.requiredWrap]}>
+            <TextInput
+                autoCapitalize="none"
+                keyboardType="email-address"
+                onChangeText={setEmail}
+                onEndEditing={showContinueButton ? null : _handleEndEditing}
+                placeholder={STRINGS.PLACEHOLDER}
+                style={[styles.textInput, isRequired && styles.requiredInput]}
+                value={emailValue || ''}
+            />
+            {isEmailAvailable === false && (
+                <View style={styles.emailTaken}>
+                    <Text style={{color:'red'}}>{STRINGS.REGISTERED}</Text>
+                    <Button title={STRINGS.RESET_PASSWORD} onPress={() => {}} />
+                </View>
+            )}
+            {showContinueButton && !isEmailAvailable && (
+                <Button
+                    onPress={_handleEndEditing}
+                    title={STRINGS.CONTINUE}
+                />
+            )}
+        </View>
+    );
+}
+
+EmailInput.propTypes = {
+    email: PropTypes.string,
+    handleValidEmailEntry: PropTypes.func.isRequired,
+    isRequired: PropTypes.bool,
+    showContinueButton: PropTypes.bool,
+};
+
+EmailInput.defaultProps = {
+    email: null,
+    isRequired: false,
+    showContinueButton: false,
+}
--- a/app/components/Profile/ProfileInputs/PasswordInput.js
+++ b/app/components/Profile/ProfileInputs/PasswordInput.js
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Text, TextInput, View } from 'react-native';
+
+import styles from '../Profile.styles.js';
+
+const STRINGS = {
+    HINT: `Password must be at least 8 characters and contain a minimum of one lowercase and one uppercase letter, a number, and a symbol. Spaces are allowed. Be memorable and secure!`,
+    MATCH: `That's a match!`,
+    NO_MATCH: `Well that's not a match...`,
+    PLACEHOLDER_PASSWORD: 'password',
+    PLACEHOLDER_VERIFY: 're-enter password',
+};
+
+export default function PasswordInput({ handleValidPasswordEntry }) {
+    const [password, setPassword] = useState(null);
+    const [doPasswordsMatch, setPasswordMatch] = useState(null);
+
+    const _doesVerificationPasswordMatch = (text) => {
+        if (!password || password.length < text.length) {
+            setPasswordMatch(null);
+            return;
+        }
+
+        const result = password === text;
+        handleValidPasswordEntry(result && password);
+        setPasswordMatch(result);
+    };
+
+    return (
+        <View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
+            <Text style={styles.hintText}>{STRINGS.HINT}</Text>
+            <TextInput
+                onChangeText={setPassword}
+                placeholder={STRINGS.PLACEHOLDER_PASSWORD}
+                secureTextEntry
+                style={[styles.textInput, styles.requiredInput]}
+            />
+            <TextInput
+                onChangeText={_doesVerificationPasswordMatch}
+                placeholder={STRINGS.PLACEHOLDER_VERIFY}
+                secureTextEntry
+                style={[styles.textInput, styles.requiredInput]}
+            />
+            {doPasswordsMatch === true && <Text style={{ color: 'green' }}>{STRINGS.MATCH}</Text>}
+            {doPasswordsMatch === false && <Text style={{ color: 'red' }}>{STRINGS.NO_MATCH}</Text>}
+        </View>
+    );
+}
+
+PasswordInput.propTypes = {
+    handleValidPasswordEntry: PropTypes.func.isRequired,
+};
--- a/app/components/Profile/ProfileInputs/PhoneListInput.js
+++ b/app/components/Profile/ProfileInputs/PhoneListInput.js
@@ -82,6 +82,7 @@ export default class PhoneListInput extends Component {
                    <View style={styles.phoneList}>
                        {phones.map((phone, index) =>
                            <PhoneListItem
+                                hideDelete={phones.size < 2}
                                index={index}
                                label={phone.label}
                                number={phone.number}
--- a/app/components/Profile/ProfileInputs/PhoneListItem.js
+++ b/app/components/Profile/ProfileInputs/PhoneListItem.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from 'react-native-elements';
+import { Alert, Text, View } from 'react-native';
+
+import styles from '../Profile.styles.js';
+
+export default function PhoneListItem({
+    hideDelete,
+    index,
+    label,
+    number,
+    handleDelete,
+    handleEdit,
+    handleEditStart,
+}) {
+
+    const _onLongPressDelete = () => {
+        handleDelete(index);
+    };
+
+    const _onPressDelete = (isLongPress = false) => () => {
+        if (isLongPress) {
+            handleDelete(index);
+            return;
+        }
+
+        Alert.alert(
+            'Delete this number?',
+            'Are you sure you want to delete this number?',
+            [
+                { text: 'Cancel', style: 'cancel' },
+                { text: 'OK', onPress: () => handleDelete(index) },
+            ],
+            { cancelable: true },
+        );
+    };
+
+    return (
+        <View style={styles.listItem}>
+            <View style={styles.listValue}>
+                <Text style={styles.value}>{number}</Text>
+                <Text style={styles.label}>{label}</Text>
+            </View>
+            <View style={styles.listActions}>
+                {handleEdit !== null && <Button accessibilityLabel={`Edit`} onPress={() => handleEditStart()} />}
+                {!hideDelete && (
+                    <Button
+                        accessibilityLabel={`Delete`}
+                        onLongPress={_onPressDelete(true)}
+                        onPress={_onPressDelete()}
+                    />
+                )}
+            </View>
+        </View>
+    );
+}
+
+PhoneListItem.propTypes = {
+    hideDelete: PropTypes.bool,
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string.isRequired,
+    number: PropTypes.string.isRequired,
+    handleDelete: PropTypes.func.isRequired,
+    handleEdit: PropTypes.func,
+    handleEditStart: PropTypes.func.isRequired,
+};
+
+PhoneListItem.defaultProps = {
+    hideDelete: false,
+    handleEdit: null,
+};
+
+
+
--- a/app/components/Profile/ViewProfile.js
+++ b/app/components/Profile/ViewProfile.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Button, ScrollView, Text, TextInput, View } from 'react-native';
 import { Avatar } from 'react-native-elements';

-import EditNomDeBid from './EditNomDeBid.container.js';
+import EditNomDeBid from './ProfileInputs/EditNomDeBid.container.js';

 import styles from './Profile.styles.js';