Fixing last couple of auth dialogs

website/src/Profile/Profile.js

@@ -4,9 +4,14 @@ import { api } from 'src/API'
 import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal'
 import { Column, Row } from 'ui'
 import { sizeInfo } from 'ui/style'
+import PropTypes from 'prop-types'
 import autobind from 'autobind-decorator'
 
 export class Profile extends Component {
+  static propTypes = {
+    changeTitle: PropTypes.func.isRequired,
+  }
+
   constructor(props) {
     super(props)
 
@@ -23,11 +28,11 @@ export class Profile extends Component {
   }
 
   componentDidMount() {
-    api.addListener('newProfileImage', this.handleNewProfileImage)
+    this.props.changeTitle('Profile')
   }
 
   componentWillUnmount() {
-    api.removeListener('newProfileImage', this.handleNewProfileImage)
+    this.props.changeTitle('')
   }
 
   @autobind
@@ -41,7 +46,11 @@ export class Profile extends Component {
     }).catch((error) => {
       this.setState({
         waitModal: null,
-        messageModal: { title: 'Update Error...', message: `Unable to save the profile changes. ${error.message}` }
+        messageModal: {
+          icon: 'hand',
+          message: 'Unable to save the profile changes.',
+          detail: error.message,
+        },
       })
     })
   }
@@ -56,21 +65,6 @@ export class Profile extends Component {
     this.setState({ changePasswordModal: true })
   }
 
-  @autobind
-  handleProgress(uploadData) {
-    if (this.state.progressModal) {
-      this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) })
-      return true
-    } else {
-      return false
-    }
-  }
-
-  @autobind
-  handleUploadCancel(result) {
-    this.setState({ progressModal: null })
-  }
-
   @autobind
   handleChangePasswordDismiss(passwords) {
     this.setState({ changePasswordModal: false })
@@ -85,8 +79,9 @@ export class Profile extends Component {
         this.setState({
           waitModal: false,
           messageModal: {
-            title: 'Changing Password Error',
-            message: `Unable to change password. ${error.message}.`
+            icon: 'hand',
+            message: 'Unable to change password',
+            detail: error.message,
           }
         })
       })
@@ -94,8 +89,8 @@ export class Profile extends Component {
   }
 
   @autobind
-  handleChangeEmail() {
-    this.setState({ changeEmailModal: {} })
+  handleChangeEmail(oldEmail) {
+    this.setState({ changeEmailModal: { oldEmail } })
   }
 
   @autobind
@@ -111,32 +106,32 @@ export class Profile extends Component {
       this.setState({
         waitModal: null,
         messageModal: {
-          error: false,
-          title: 'Email Change Requested...',
+          icon: 'thumb',
           message: `An email has been sent to '${newEmail}' with a link that you need to click on to finish changing your email.`
         }
       })
     }).catch((error) => {
       this.setState({
-        error: true,
         waitModal: null,
         messageModal: {
-          error: true,
-          title: 'Email Change Error...',
-          message: `Unable to request email change. ${error ? error.message : ''}`
+          icon: 'hand',
+          message: 'Unable to request email change.',
+          detail: error.message
         }
       })
     })
   }
 
   render() {
+    const { messageModal, waitModal, changeEmailModal, changePasswordModal } = this.state
+
     return (
       <Fragment>
         <Column.Item grow />
         <Column.Item>
           <Row>
             <Row.Item grow />
-            <Row.Item width={sizeInfo.modalWidth}>
+            <Row.Item width={sizeInfo.profileWidth}>
               <ProfileForm
                 user={this.state.user}
                 onSaved={this.handleSaved}
@@ -149,16 +144,25 @@ export class Profile extends Component {
           </Row>
         </Column.Item>
         <Column.Item>
-          <MessageModal error open={!!this.state.messageModal}
-            title={this.state.messageModal ? this.state.messageModal.title : ''}
-            message={this.state.messageModal ? this.state.messageModal.message : ''}
+          <MessageModal
+            open={!!messageModal}
+            icon={messageModal ? messageModal.icon : ''}
+            title={messageModal ? messageModal.title : ''}
+            message={messageModal ? messageModal.message : ''}
             onDismiss={this.handleMessageModalDismiss} />
 
-          <ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
+          <ChangeEmailModal
+            open={!!changeEmailModal}
+            oldEmail={changeEmailModal ? changeEmailModal.oldEmail : ''}
+            onDismiss={this.handleChangeEmailDismiss} />
 
-          <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
+          <WaitModal
+            active={!!waitModal}
+            message={waitModal ? waitModal.message : ''} />
 
-          <ChangePasswordModal open={!!this.state.changePasswordModal} onDismiss={this.handleChangePasswordDismiss} />
+          <ChangePasswordModal
+            open={!!changePasswordModal}
+            onDismiss={this.handleChangePasswordDismiss} />
         </Column.Item>
         <Column.Item grow />
       </Fragment>

website/src/Profile/ProfileForm.js

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Column, Row, Box, Button, BoundInput, BoundButton } from 'ui'
 import { sizeInfo, colorInfo } from 'ui/style'
-import { regExpPattern } from 'regexp-pattern'
 import { FormBinder } from 'react-form-binder'
 import autobind from 'autobind-decorator'
 
@@ -26,36 +25,6 @@ export class ProfileForm extends React.Component {
     lastName: {
       isValid: (r, v) => (v !== '')
     },
-    zip: {
-      isValid: (r, v) => (v === '' || regExpPattern.zip.test(v))
-    },
-    state: {
-      isValid: (r, v) => (v === '' || regExpPattern.state.test(v))
-    },
-    city: {
-      isValid: true
-    },
-    address1: {
-      isValid: true
-    },
-    address2: {
-      isValid: true
-    },
-    homePhone: {
-      isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
-    },
-    cellPhone: {
-      isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
-    },
-    dateOfBirth: {
-      isValid: true
-    },
-    dateOfHire: {
-      isValid: true
-    },
-    ssn: {
-      isValid: (r, v) => (v === '' || regExpPattern.ssn.test(v))
-    },
     save: {
       noValue: true,
       isDisabled: (r) => (!r.anyModified || !r.allValid)
@@ -90,38 +59,59 @@ export class ProfileForm extends React.Component {
     }
   }
 
+  @autobind
+  handleChangeEmail() {
+    this.props.onChangeEmail(this.state.binder.getFieldValue('email'))
+  }
+
   render() {
     const { binder } = this.state
 
     return (
       <form onSubmit={this.handleSubmit} id='profileForm'>
-        <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+        <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
+          radius={sizeInfo.formBoxRadius}>
           <Row>
             <Row.Item width={sizeInfo.formRowSpacing} />
-            <Row.Item>
-              <Column stackable>
+            <Row.Item grow>
+              <Column>
+                <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item>
                   <BoundInput label='First Name' name='firstName'
-                    binder={binder} />
+                    message='First name is required' binder={binder} />
                 </Column.Item>
                 <Column.Item>
                   <BoundInput label='Last Name' name='lastName'
                     binder={binder} />
                 </Column.Item>
                 <Column.Item>
-                  <BoundInput label='Email' name='email' message='Required. Must be a valid email address.'
+                  <BoundInput label='Email' name='email'
+                    message='Required. Must be a valid email address.'
                     binder={binder} />
                 </Column.Item>
-                <Column.Item>
-                  <Button text={'Change Email'} label='&nbsp;'
-                    onClick={this.props.onChangeEmail} />
-                  <Button text={'Change Password'} label='&nbsp;'
-                    onClick={this.props.onChangePassword} />
-                  <BoundButton submit size='medium' text='Save' label='&nbsp;' name='save'
-                    binder={binder} />
+                <Column.Item height={sizeInfo.formColumnSpacing} />
+                <Column.Item height={sizeInfo.buttonHeight}>
+                  <Row>
+                    <Row.Item>
+                      <Button text={'Change Email'} label='&nbsp;'
+                        width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
+                    </Row.Item>
+                    <Row.Item width={sizeInfo.formRowSpacing} />
+                    <Row.Item>
+                      <Button text={'Change Password'} label='&nbsp;'
+                        width={sizeInfo.buttonWideWidth} onClick={this.props.onChangePassword} />
+                    </Row.Item>
+                    <Row.Item grow />
+                    <Row.Item>
+                      <BoundButton submit='profileForm' size='medium' text='Save' label='&nbsp;' name='save'
+                        binder={binder} />
+                    </Row.Item>
+                  </Row>
                 </Column.Item>
+                <Column.Item height={sizeInfo.formColumnSpacing} />
               </Column>
             </Row.Item>
+            <Row.Item width={sizeInfo.formRowSpacing} />
           </Row>
         </Box>
       </form>