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>