Improve sign-up process for new users

website/public/500.json

@@ -0,0 +1,3 @@
+{
+  "message": "The service is unavailable"
+}

website/src/Auth/ConfirmEmail.js

@@ -1,56 +1,76 @@
-import React from 'react'
-import { api } from 'src/API'
-import PropTypes from 'prop-types'
-import { MessageModal, WaitModal } from '../Modal'
-import autobind from 'autobind-decorator'
+import React from "react"
+import { api } from "src/API"
+import PropTypes from "prop-types"
+import { MessageModal, WaitModal } from "../Modal"
+import autobind from "autobind-decorator"
 
 export class ConfirmEmail extends React.Component {
   static propTypes = {
-    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   }
 
   constructor() {
     super()
     this.state = {
       waitModal: null,
-      messageModal: null
+      messageModal: null,
     }
   }
 
   componentDidMount(props) {
-    const emailToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('email-token')
+    const emailToken = new URLSearchParams(
+      decodeURIComponent(window.location.search)
+    ).get("email-token")
+
+    this.setState({ waitModal: { message: "Validating Email..." } })
 
-    this.setState({ waitModal: { message: 'Validating Email...' } })
     if (emailToken) {
-      api.logout().then(() => {
-        return api.confirmEmail(emailToken)
-      }).then((response) => {
-        this.setState({ waitModal: null })
-        if (response && response.passwordToken) {
-          // API will send a password reset token if this is the first time loggin on
-          this.props.history.replace(`/reset-password?password-token=${response.passwordToken}`)
-        } else {
-          this.props.history.replace('/login')
-        }
-      }).catch((err) => {
-        this.setState({
-          waitModal: null,
-          messageModal: {
-            icon: 'hand',
-            message: `Please contact ${process.env.REACT_APP_SUPPORT_EMAIL} to request another confirmation email.`,
-            detail: err.message
+      api
+        .logout()
+        .then(() => {
+          return api.confirmEmail(emailToken)
+        })
+        .then((response) => {
+          this.setState({ waitModal: null })
+          if (response && response.passwordToken) {
+            this.setState({
+              waitModal: null,
+              messageModal: {
+                icon: "thumb",
+                message: `Your email is confirmed. You will be redirected to set your password.`,
+                // API will send a password reset token if this is the first time loggin on
+                redirect: `/reset-password?password-token=${
+                  response.passwordToken
+                }`,
+              },
+            })
+          } else {
+            this.props.history.replace("/login")
           }
         })
-      })
+        .catch((err) => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: `Please contact ${
+                process.env.REACT_APP_SUPPORT_EMAIL
+              } to request another confirmation email.`,
+              detail: err.message,
+            },
+          })
+        })
     } else {
-      this.props.history.replace('/')
+      this.props.history.replace("/")
     }
   }
 
   @autobind
   handleMessageModalDismiss() {
+    const { redirect } = this.state.messageModal
+
     this.setState({ messageModal: null })
-    this.props.history.replace('/login')
+    this.props.history.replace(redirect || "/login")
   }
 
   render() {
@@ -60,14 +80,16 @@ export class ConfirmEmail extends React.Component {
       <div>
         <WaitModal
           active={!!waitModal}
-          message={waitModal ? waitModal.message : ''} />
+          message={waitModal ? waitModal.message : ""}
+        />
 
         <MessageModal
           open={!!messageModal}
-          icon={messageModal ? messageModal.icon : ''}
-          message={messageModal ? messageModal.message : ''}
-          detail={messageModal ? messageModal.title : ''}
-          onDismiss={this.handleMessageModalDismiss} />
+          icon={messageModal ? messageModal.icon : ""}
+          message={messageModal ? messageModal.message : ""}
+          detail={messageModal ? messageModal.title : ""}
+          onDismiss={this.handleMessageModalDismiss}
+        />
       </div>
     )
   }

website/src/Auth/ResetPassword.js

@@ -1,30 +1,30 @@
-import React, { Component, Fragment } from 'react'
-import PropTypes from 'prop-types'
-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'
+import React, { Component, Fragment } from "react"
+import PropTypes from "prop-types"
+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 Component {
   static propTypes = {
-    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   }
 
   static bindings = {
     newPassword: {
       alwaysGet: true,
-      isValid: (r, v) => (v.length >= 6)
+      isValid: (r, v) => v.length >= 6,
     },
     reenteredNewPassword: {
-      isValid: (r, v) => (v !== '' && v === r.getFieldValue('newPassword'))
+      isValid: (r, v) => v !== "" && v === r.getFieldValue("newPassword"),
     },
     submit: {
       noValue: true,
-      isDisabled: (r) => (!r.anyModified || !r.allValid)
-    }
+      isDisabled: (r) => !r.anyModified || !r.allValid,
+    },
   }
 
   constructor(props) {
@@ -38,30 +38,33 @@ export class ResetPassword extends Component {
   }
 
   componentDidMount(props) {
-    if (this.state.tokenConfirmed) {
-      return
-    }
+    const passwordToken = new URLSearchParams(
+      decodeURIComponent(window.location.search)
+    ).get("password-token")
 
-    const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')
+    this.setState({ waitModal: { message: "Confirming password reset..." } })
 
-    this.setState({ waitModal: { message: 'Confirming password reset...' } })
     if (passwordToken) {
-      api.logout().then(() => {
-        return api.confirmResetPassword(passwordToken)
-      }).then((response) => {
-        this.setState({ waitModal: null, tokenConfirmed: true })
-      }).catch((err) => {
-        this.setState({
-          waitModal: null,
-          messageModal: {
-            icon: 'hand',
-            message: `We were unable to confirm you requested a password reset. Please request another reset email.`,
-            detail: err.message
-          }
+      api
+        .logout()
+        .then(() => {
+          return api.confirmResetPassword(passwordToken)
+        })
+        .then((response) => {
+          this.setState({ waitModal: null })
+        })
+        .catch((err) => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: `We were unable to confirm you requested a password reset. Please request another reset.`,
+              detail: err.message,
+            },
+          })
         })
-      })
     } else {
-      this.props.history.replace('/')
+      this.props.history.replace("/")
     }
   }
 
@@ -71,33 +74,42 @@ export class ResetPassword extends Component {
     e.stopPropagation()
 
     const obj = this.state.binder.getModifiedFieldValues()
-    const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')
+    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((err) => {
-      this.setState({
-        binder: new FormBinder({}, ResetPassword.bindings), // Reset to avoid accidental rapid retries
-        waitModal: null,
-        messageModal: {
-          icon: 'hand',
-          message: 'There was a problem changing your password. Please request another reset email.',
-          detail: err.message,
-          noRetry: true,
-        }
+    this.setState({ waitModal: { message: "Setting Password..." } })
+    api
+      .resetPassword({ newPassword: obj.newPassword, passwordToken })
+      .then(() => {
+        this.setState({
+          waitModal: null,
+          messageModal: {
+            icon: "thumb",
+            message: `Your password has been reset. You can now login to the system with your new password.`,
+          },
+        })
+      })
+      .catch((err) => {
+        this.setState({
+          binder: new FormBinder({}, ResetPassword.bindings), // Reset to avoid accidental rapid retries
+          waitModal: null,
+          messageModal: {
+            icon: "hand",
+            message:
+              "There was a problem changing your password. Please request another reset email.",
+            detail: err.message,
+          },
+        })
       })
-    })
   }
 
   @autobind
   handleMessageModalDismiss() {
-    if (this.state.messageModal.noRetry) {
-      this.props.history.replace('/login')
-    } else {
-      this.setState({ messageModal: null })
-    }
+    const { redirect } = this.state.messageModal
+
+    this.setState({ messageModal: null })
+    this.props.history.replace(redirect || "/login")
   }
 
   render() {
@@ -111,8 +123,13 @@ export class ResetPassword extends Component {
             <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}>
+              <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>
@@ -122,32 +139,48 @@ export class ResetPassword extends Component {
                           <Row>
                             <Row.Item grow />
                             <Row.Item>
-                              <Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
+                              <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>
+                          <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={binder} />
+                          <BoundInput
+                            label="New Password"
+                            password
+                            name="newPassword"
+                            message="A new password, cannot be blank or the same as your old password"
+                            binder={binder}
+                          />
                         </Column.Item>
                         <Column.Item>
-                          <BoundInput label='Re-enter New Password' password name='reenteredNewPassword'
-                            message='The new password again, must match and cannot be blank'
-                            binder={binder} />
+                          <BoundInput
+                            label="Re-enter New Password"
+                            password
+                            name="reenteredNewPassword"
+                            message="The new password again, must match and cannot be blank"
+                            binder={binder}
+                          />
                         </Column.Item>
                         <Column.Item height={sizeInfo.formColumnSpacing} />
                         <Column.Item minHeight={sizeInfo.buttonHeight}>
                           <Row>
                             <Row.Item grow />
                             <Row.Item>
-                              <BoundButton text='Submit' name='submit' submit='resetPasswordForm' binder={binder} />
+                              <BoundButton
+                                text="Submit"
+                                name="submit"
+                                submit="resetPasswordForm"
+                                binder={binder}
+                              />
                             </Row.Item>
                           </Row>
                         </Column.Item>
@@ -165,13 +198,16 @@ export class ResetPassword extends Component {
         <Column.Item grow>
           <MessageModal
             open={!!messageModal}
-            icon={messageModal ? messageModal.icon : ''}
-            message={messageModal ? messageModal.message : ''}
-            detail={messageModal ? messageModal.title : ''}
-            onDismiss={this.handleMessageModalDismiss} />
+            icon={messageModal ? messageModal.icon : ""}
+            message={messageModal ? messageModal.message : ""}
+            detail={messageModal ? messageModal.title : ""}
+            onDismiss={this.handleMessageModalDismiss}
+          />
 
-          <WaitModal active={!!waitModal}
-            message={waitModal ? waitModal.message : ''} />
+          <WaitModal
+            active={!!waitModal}
+            message={waitModal ? waitModal.message : ""}
+          />
         </Column.Item>
       </Fragment>
     )