Forgot password and reset password

server/config/templates/accountDeleted.txt

@@ -1,6 +1,6 @@
 Hello {{recipientFullName}}.
 
-This email is for your records to indicated that your account for the Deighton AR system has been deleted.
+Your account for the Deighton AR system has been deleted.
 
 Please contact {{supportEmail}} if you have any questions.
 

server/config/templates/changeEmailNew.txt

@@ -1,8 +1,8 @@
 Hello {{recipientFullName}},
 
-This message allows you to complete the process of changing your email.  If you did not make this request please do not worry.  Just ignore this email and your account will remain unchanged.
+This message allows you to complete the process of changing your email on the Deighton AR system.  If you did not make this request please do not worry, but we would request that you change your password immediately just to be safe.  If you ignore this email your account will remain unchanged.
 
-If you did make this request, please click on the following link to confirm your new email:
+If you _did_ make this request, please click on the following link to confirm your new email:
 
 {{confirmEmailLink}}
 
@@ -10,4 +10,4 @@ If you have any questions, please contact us at {{supportEmail}}.
 
 Regards,
 
-Deighton
+{{senderFullName}}

server/config/templates/changeEmailOld.txt

@@ -1,6 +1,6 @@
 Hello {{recipientFullName}},
 
-This message is to inform you that a request was made to change your email to {{recipientNewEmail}}.  If you did not make this request please do not worry.  Just ignore this email and your account will remain unchanged.
+This message is to inform you that a request was made to change your email to {{recipientNewEmail}}.    If you did not make this request please do not worry, but we would request that you change your password immediately just to be safe.
 
 If you did make this request, please see the message sent to your new email account for further instructions.
 
@@ -8,4 +8,4 @@ If you have any questions, please contact us at {{supportEmail}}.
 
 Regards,
 
-Deighton
+{{senderFullName}}

server/config/templates/forgotPassword.txt

@@ -1,6 +1,6 @@
 Hello {{recipientFullName}},
 
-The following link will allow you to reset your password.  Please paste it into your browser and you will be redirected to the Deighton AR site to set your new password:
+The following link will allow you to reset your password.  Please click on it or paste it into your browser and you will be redirected to the Deighton AR site to set your new password:
 
 {{resetPasswordLink}}
 
@@ -8,4 +8,4 @@ Please contact {{supportEmail}} if you have any questions or problems.
 
 Regards,
 
-Deighton
+{{senderFullName}}

server/src/api/routes/AuthRoutes.js

@@ -317,59 +317,60 @@ export class AuthRoutes {
     })
   }
 
-  changePassword(req, res, next) {
+  async changePassword(req, res, next) {
     let User = this.db.User
     let cr = credential()
-    User.findById({ _id: req.user._id }).then((user) => {
+
+    try {
+      const user = await User.findById({ _id: req.user._id })
+
       if (!user) {
-        return next(createError.NotFound(`User ${req.user._id} not found`))
+        throw createError.NotFound(`User ${req.user._id} not found`)
-      }
-      return Promise.all([
-        Promise.resolve(user),
-        cr.verify(JSON.stringify(user.passwordHash), req.body.oldPassword)
-      ])
-    }).then((arr) => {
-      const [user, ok] = arr
-      return Promise.all([Promise.resolve(user), cr.hash(req.body.newPassword)])
-    }).then((arr) => {
-      const [user, obj] = arr
-      user.passwordHash = JSON.parse(obj)
-      return user.save()
-    }).then((savedUser) => {
-      res.json({})
-    }).catch((err) => {
-      return next(createError.InternalServerError(err.message))
-    })
       }
 
-  sendPasswordResetEmail(req, res, next){
+      const ok = await cr.verify(JSON.stringify(user.passwordHash), req.body.oldPassword)
+      const obj = await cr.hash(req.body.newPassword)
+
+      user.passwordHash = JSON.parse(obj)
+      await user.save()
+      res.json({})
+    } catch(err) {
+      if (err instanceof createError.HttpError) {
+        next(err)
+      } else {
+        next(createError.InternalServerError(err.message))
+      }
+    }
+  }
+
+  async sendPasswordResetEmail(req, res, next){
     const email = req.body.email
     let User = this.db.User
 
+    try {
       if (!email) {
-      return next(createError.BadRequest('Invalid request parameters'))
+        throw createError.BadRequest('Invalid request parameters')
       }
 
-    User.findOne({ email }).then((user) => {
+      const user = await User.findOne({ email })
-      // User must exist their email must be confirmed
+
+      // User must exist and their email must be confirmed
       if (!user || user.emailToken) {
         // Don't give away any information about why we rejected the request
-        return Promise.reject(createError.BadRequest('Not a valid request'))
+        throw createError.BadRequest('Not a valid request')
-      } else if (user.passwordToken && (new Date() - user.emailToken.created) < this.sendEmailDelayInSeconds) {
+      } else if (user.passwordToken && user.passwordToken.created &&
-        return Promise.reject(createError.BadRequest('Cannot request password reset so soon'))
+          (new Date() - user.passwordToken.created) < this.sendEmailDelayInSeconds) {
+        throw createError.BadRequest('Cannot request password reset so soon')
       }
 
-      return Promise.all([Promise.resolve(user), util.promisify(crypto.randomBytes)(32)])
+      const buf = await util.promisify(crypto.randomBytes)(32)
-    }).then((arr) => {
-      let [ user, buf ] = arr
 
       user.passwordToken = {
         value: urlSafeBase64.encode(buf),
         created: new Date()
       }
 
-      return user.save()
+      const savedUser = await user.save()
-    }).then((savedUser) => {
       const userFullName = `${savedUser.firstName} ${savedUser.lastName}`
       const siteUrl = url.parse(req.headers.referer)
       const msg = {
@@ -381,15 +382,17 @@ export class AuthRoutes {
           supportEmail: this.supportEmail
         }
       }
-      return this.sendEmail ? this.mq.request('dar-email', 'sendEmail', msg) : Promise.resolve()
+      if (this.sendEmail) {
-    }).then(() => {
+        await this.mq.request('dar-email', 'sendEmail', msg)
+      }
+
       res.json({})
-    }).catch((err) => {
+    } catch(err) {
       if (err instanceof createError.HttpError) {
         next(err)
       } else {
         next(createError.InternalServerError(`Unable to send password reset email. ${err.message}`))
       }
-    })
+    }
   }
 }

website/config/webpack.config.dev.js

@@ -153,6 +153,7 @@ module.exports = {
               // It enables caching results in ./node_modules/.cache/babel-loader/
               // directory for faster rebuilds.
               cacheDirectory: true,
+              plugins: [ 'transform-decorators-legacy' ]
             },
           },
           // "postcss" loader applies autoprefixer to our CSS.

website/config/webpack.config.prod.js

@@ -157,6 +157,7 @@ module.exports = {
             options: {
               compact: true,
             },
+            plugins: [ 'transform-decorators-legacy' ]
           },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.

website/package-lock.json

@@ -375,6 +375,11 @@
       "resolved": "https://registry.npmjs.org/auto-bind2/-/auto-bind2-1.0.3.tgz",
       "integrity": "sha512-+br9nya9M8ayHjai7m9rdpRxuEr8xcYRDrIp7HybNe0ixUHbc1kDiWXKMb0ldsfWb9Zi+SqJ9JfjW8nTkYD0QQ=="
     },
+    "autobind-decorator": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.1.0.tgz",
+      "integrity": "sha512-bgyxeRi1R2Q8kWpHsb1c+lXCulbIAHsyZRddaS+agAUX3hFUVZMociwvRgeZi1zWvfqEEjybSv4zxWvFV8ydQQ=="
+    },
     "autoprefixer": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.0.tgz",
@@ -795,6 +800,12 @@
       "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=",
       "dev": true
     },
+    "babel-plugin-syntax-decorators": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+      "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
+      "dev": true
+    },
     "babel-plugin-syntax-dynamic-import": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
@@ -854,6 +865,17 @@
         "babel-template": "6.26.0"
       }
     },
+    "babel-plugin-transform-decorators-legacy": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz",
+      "integrity": "sha1-dBtY9sW86eYCfgiC2cmU8E82aSU=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-decorators": "6.13.0",
+        "babel-runtime": "6.23.0",
+        "babel-template": "6.26.0"
+      }
+    },
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",

website/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "animejs": "^2.2.0",
     "auto-bind2": "^1.0.2",
+    "autobind-decorator": "^2.1.0",
     "eventemitter3": "^2.0.3",
     "npm": "^5.7.1",
     "prop-types": "^15.5.10",
@@ -21,6 +22,7 @@
     "babel-core": "6.24.1",
     "babel-eslint": "7.2.3",
     "babel-loader": "7.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-react-app": "^3.0.1",
     "babel-runtime": "6.23.0",
     "case-sensitive-paths-webpack-plugin": "1.1.4",

website/src/Auth/ForgotPassword.js

@@ -1,12 +1,15 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { regExpPattern } from 'regexp-pattern'
-import { Text, Column, BoundInput, BoundButton } from 'ui'
+import { Image, Text, Column, Row, BoundInput, BoundButton, Box } from 'ui'
 import { MessageModal, WaitModal } from '../Modal'
 import { api } from 'src/API'
 import { FormBinder } from 'react-form-binder'
+import headerLogo from 'images/deighton.png'
+import { sizeInfo, colorInfo } from 'ui/style'
+import autobind from 'autobind-decorator'
 
-export class ForgotPassword extends React.Component {
+export class ForgotPassword extends Component {
   static propTypes = {
     history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
   }
@@ -29,74 +32,109 @@ export class ForgotPassword extends React.Component {
       messageModal: null,
       waitModal: null
     }
-    this.handleSubmit = this.handleSubmit.bind(this)
-    this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
   }
 
-  handleSubmit() {
+  @autobind
-    const obj = this.state.binder.getValues()
+  handleSubmit(e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const obj = this.state.binder.getModifiedFieldValues()
 
     this.setState({ waitModal: { message: 'Requesting Reset Email' } })
-    api.sendResetPassword(obj.email).then((res) => {
+
-      const email = this.state.binder.getField('email').value
+    const cb = (res) => {
       this.setState({
         waitModal: null,
         messageModal: {
-          error: false,
+          icon: 'thumb',
           title: 'Password Reset Requested',
-          message: `An email will be sent to '${email}' with a reset link. Please click on it to finish resetting the password.`
+          message: `If everything checks out, an email will be sent to '${obj.email}' with a reset link. Please click on it to finish resetting the password.`
         }
       })
-    }).catch((error) => {
-      this.setState({
-        binder: new FormBinder({}, ForgotPassword.bindings), // Reset to avoid rapid retries
-        waitModal: null,
-        messageModal: {
-          error: true,
-          title: 'Password Reset Failed',
-          message: `There was a problem requesting the password reset. ${error ? error.message : ''}`
-        }
-      })
-    })
     }
 
+    api.sendResetPassword(obj.email).then(cb, cb)
+  }
+
+  @autobind
   handleMessageModalDismiss() {
     this.props.history.replace('/')
   }
 
   render() {
+    const { binder, waitModal, messageModal } = this.state
+
     return (
-      <div>
+      <Fragment>
-        <form onSubmit={this.handleSubmit}>
+        <Column.Item grow />
+        <Column.Item>
+          <Row>
+            <Row.Item grow />
+            <Row.Item width={sizeInfo.formRowSpacing} />
+            <Row.Item width={sizeInfo.modalWidth}>
+              <form id='forgotPasswordForm' onSubmit={this.handleSubmit}>
+                <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+                  <Row>
+                    <Row.Item width={sizeInfo.formRowSpacing} />
+                    <Row.Item>
                       <Column>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
+                        <Column.Item>
+                          <Row>
+                            <Row.Item grow />
+                            <Row.Item>
+                              <Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
+                            </Row.Item>
+                            <Row.Item grow />
+                          </Row>
+                        </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item>
                           <Text size='large'>Forgotten Password</Text>
                         </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item>
                           <BoundInput label='Email' name='email'
                             placeholder='example@xyz.com' binder={this.state.binder}
                             message='A valid email address' />
                         </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item>
                           <Text>The email address of an existing user to send the password reset link to.</Text>
                         </Column.Item>
-            <Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
-              <BoundButton name='submit' content='Submit'
+                        <Column.Item minHeight={sizeInfo.buttonHeight}>
-                primary submit binder={this.state.binder}>Submit</BoundButton>
+                          <Row>
+                            <Row.Item grow />
+                            <Row.Item>
+                              <BoundButton text='Submit' name='submit' submit='forgotPasswordForm' binder={binder} />
+                            </Row.Item>
+                          </Row>
                         </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                       </Column>
+                    </Row.Item>
+                    <Row.Item width={sizeInfo.formRowSpacing} />
+                  </Row>
+                </Box>
               </form>
-
+            </Row.Item>
-        <WaitModal active={!!this.state.waitModal}
+            <Row.Item grow />
-          message={this.state.waitModal ? this.state.waitModal.message : ''} />
+          </Row>
+        </Column.Item>
+        <Column.Item grow>
+          <WaitModal active={!!waitModal}
+            message={waitModal ? waitModal.message : ''} />
 
           <MessageModal
-          open={!!this.state.messageModal}
+            open={!!messageModal}
-          error={this.state.messageModal ? this.state.messageModal.error : true}
+            icon={messageModal ? messageModal.icon : ''}
-          title={this.state.messageModal ? this.state.messageModal.title : ''}
+            message={messageModal ? messageModal.message : ''}
-          message={this.state.messageModal ? this.state.messageModal.message : ''}
+            detail={messageModal ? messageModal.detail : ''}
             onDismiss={this.handleMessageModalDismiss} />
-      </div>
+        </Column.Item>
+      </Fragment>
     )
   }
 }

website/src/Auth/Login.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import { regExpPattern } from 'regexp-pattern'
 import { api } from 'src/API'
 import { WaitModal, MessageModal } from '../Modal'
-import { Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton } from 'ui'
+import { Box, Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton } from 'ui'
 import headerLogo from 'images/deighton.png'
 import { versionInfo } from '../version'
 import { FormBinder } from 'react-form-binder'
 import { reactAutoBind } from 'auto-bind2'
-import { sizeInfo } from 'ui/style'
+import { sizeInfo, colorInfo } from 'ui/style'
 
 export class Login extends Component {
   static propTypes = {
@@ -103,7 +103,12 @@ export class Login extends Component {
             <Row.Item grow />
             <Row.Item width={sizeInfo.modalWidth}>
               <form onSubmit={this.handleSubmit} id='loginForm'>
-                <Column minHeight='100%'>
+                <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+                  <Row>
+                    <Row.Item width={sizeInfo.formRowSpacing} />
+                    <Row.Item>
+                      <Column>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item>
                           <Row>
                             <Row.Item grow />
@@ -113,6 +118,11 @@ export class Login extends Component {
                             <Row.Item grow />
                           </Row>
                         </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
+                        <Column.Item>
+                          <Text size='large'>Login</Text>
+                        </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item>
                           <BoundInput label='Email' name='email'
                             placeholder='example@xyz.com' binder={this.state.binder}
@@ -148,7 +158,12 @@ export class Login extends Component {
                             Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
                           </Text>
                         </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                       </Column>
+                    </Row.Item>
+                    <Row.Item width={sizeInfo.formRowSpacing} />
+                  </Row>
+                </Box>
               </form>
             </Row.Item>
             <Row.Item grow />

website/src/Auth/ResetPassword.js

@@ -1,11 +1,14 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Text, Column, BoundInput, BoundButton } from 'ui'
+import { Box, Text, Image, Column, Row, BoundInput, BoundButton } from 'ui'
 import { MessageModal, WaitModal } from '../Modal'
 import { api } from 'src/API'
 import { FormBinder } from 'react-form-binder'
+import { sizeInfo, colorInfo } from 'ui/style'
+import autobind from 'autobind-decorator'
+import headerLogo from 'images/deighton.png'
 
-export class ResetPassword extends React.Component {
+export class ResetPassword extends Component {
   static propTypes = {
     history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
   }
@@ -16,11 +19,11 @@ export class ResetPassword extends React.Component {
       isValid: (r, v) => (v.length >= 6)
     },
     reenteredNewPassword: {
-      isValid: (r, v) => (v !== '' && v === r.getField('newPassword').value)
+      isValid: (r, v) => (v !== '' && v === r.getFieldValue('newPassword'))
     },
     submit: {
       noValue: true,
-      isDisabled: (r) => (!r.anyModified && !r.allValid)
+      isDisabled: (r) => (!r.anyModified || !r.allValid)
     }
   }
 
@@ -31,73 +34,112 @@ export class ResetPassword extends React.Component {
       messageModal: null,
       waitModal: null
     }
-    this.handleSubmit = this.handleSubmit.bind(this)
-    this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
   }
 
-  handleSubmit() {
+  @autobind
-    const obj = this.state.binder.getValues()
+  handleSubmit(e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const obj = this.state.binder.getModifiedFieldValues()
     const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')
 
     this.setState({ waitModal: { message: 'Setting Password...' } })
     api.resetPassword({ newPassword: obj.newPassword, passwordToken }).then(() => {
       this.setState({ waitModal: null })
       this.props.history.replace('/login')
-    }).catch((error) => {
+    }).catch((err) => {
       this.setState({
         binder: new FormBinder({}, ResetPassword.bindings), // Reset to avoid accidental rapid retries
         waitModal: null,
         messageModal: {
-          title: 'We had a problem changing your password',
+          icon: 'hand',
-          message: error.message
+          title: 'There was a problem changing your password',
+          detail: err.message,
         }
       })
     })
   }
 
+  @autobind
   handleMessageModalDismiss() {
     this.setState({ messageModal: null })
   }
 
   render() {
+    const { messageModal, waitModal, binder } = this.state
+
     return (
-      <div>
+      <Fragment>
-        <form onSubmit={this.handleSubmit} id='resetPassword'>
+        <Column.Item grow />
+        <Column.Item>
+          <Row>
+            <Row.Item grow />
+            <Row.Item width={sizeInfo.formRowSpacing} />
+            <Row.Item width={sizeInfo.modalWidth}>
+              <form onSubmit={this.handleSubmit} id='resetPasswordForm'>
+                <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+                  <Row>
+                    <Row.Item width={sizeInfo.formRowSpacing} />
+                    <Row.Item>
                       <Column>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
+                        <Column.Item>
+                          <Row>
+                            <Row.Item grow />
+                            <Row.Item>
+                              <Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
+                            </Row.Item>
+                            <Row.Item grow />
+                          </Row>
+                        </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item>
                           <Text size='large'>Reset Password</Text>
                         </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item>
                           <BoundInput label='New Password' password name='newPassword'
                             message='A new password, cannot be blank or the same as your old password'
-                binder={this.state.binder} />
+                            binder={binder} />
                         </Column.Item>
                         <Column.Item>
-              <BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
+                          <BoundInput label='Re-enter New Password' password name='reenteredNewPassword'
                             message='The new password again, must match and cannot be blank'
-                binder={this.state.binder} />
+                            binder={binder} />
                         </Column.Item>
-            <Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
-              <Text>
+                        <Column.Item minHeight={sizeInfo.buttonHeight}>
-                Passwords can contain special characters and should be unique to this application.
+                          <Row>
-                <br /><br />
+                            <Row.Item grow />
-                Passwords must be at least 6 characters long.
+                            <Row.Item>
-              </Text>
+                              <BoundButton text='Submit' name='submit' submit='resetPasswordForm' binder={binder} />
-            </Column.Item>
+                            </Row.Item>
-            <Column.Item>
+                          </Row>
-              <BoundButton name='submit' text='Submit' submit='resetPassword' binder={this.state.binder} />
                         </Column.Item>
+                        <Column.Item height={sizeInfo.formColumnSpacing} />
                       </Column>
+                    </Row.Item>
+                    <Row.Item width={sizeInfo.formRowSpacing} />
+                  </Row>
+                </Box>
               </form>
-
+            </Row.Item>
-        <MessageModal error open={!!this.state.messageModal}
+            <Row.Item grow />
-          title={this.state.messageModal ? this.state.messageModal.title : ''}
+          </Row>
-          message={this.state.messageModal ? this.state.messageModal.message : ''}
+        </Column.Item>
+        <Column.Item grow>
+          <MessageModal
+            open={!!messageModal}
+            icon={messageModal ? messageModal.icon : ''}
+            title={messageModal ? messageModal.title : ''}
+            message={messageModal ? messageModal.message : ''}
             onDismiss={this.handleMessageModalDismiss} />
 
-        <WaitModal active={!!this.state.waitModal}
+          <WaitModal active={!!waitModal}
-          message={this.state.waitModal ? this.state.waitModal.message : ''} />
+            message={waitModal ? waitModal.message : ''} />
-      </div>
+        </Column.Item>
+      </Fragment>
     )
   }
 }

website/src/Modal/MessageModal.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Modal, Button, Column, Row, Text, Icon } from 'ui'
 import { sizeInfo } from 'ui/style'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
 export class MessageModal extends React.Component {
   static propTypes = {
@@ -13,11 +13,7 @@ export class MessageModal extends React.Component {
     onDismiss: PropTypes.func
   }
 
-  constructor(props) {
+  @autobind
-    super(props)
-    reactAutoBind(this)
-  }
-
   onSubmit(e) {
     e.preventDefault()
     e.stopPropagation()

website/src/ui/HeaderButton.js

@@ -4,7 +4,8 @@ import React, { Component } from 'react'
 import { Icon, Image } from '.'
 import { colorInfo, sizeInfo } from 'ui/style'
 
-class HeaderButton extends Component {
+@Radium
+export class HeaderButton extends Component {
   static propTypes = {
     onClick: PropTypes.func,
     icon: PropTypes.string,
@@ -31,7 +32,7 @@ class HeaderButton extends Component {
     let content = null
 
     if (image) {
-      content = (<Image source={image} width={size} height='100%' margin={sizeInfo.headerButtonMargin} />)
+      content = (<Image source={image} width={size} height={size} margin={sizeInfo.headerButtonMargin} />)
     } else if (icon) {
       content = (<Icon name={icon} size={size} margin={sizeInfo.headerButtonMargin} />)
     }
@@ -43,5 +44,3 @@ class HeaderButton extends Component {
     )
   }
 }
-
-export default Radium(HeaderButton)

website/src/ui/index.js

@@ -1,7 +1,7 @@
 export { default as Anime } from './Anime'
 export { default as Box } from './Box'
 export { default as Button } from './Button'
-export { default as HeaderButton } from './HeaderButton'
+export { HeaderButton } from './HeaderButton'
 export { default as HeaderText } from './HeaderText'
 export { default as PanelButton } from './PanelButton'
 export { default as Checkbox } from './Checkbox'