Fix DAR-85

mobile/src/ui/Icon.js

@@ -16,6 +16,9 @@ const images = {
   done: require("./images/done.png"),
   target: require("./images/target.png"),
   pin: require("./images/pin.png"),
+  hardhat: require("./images/hardhat.png"),
+  clipboard: require("./images/clipboard.png"),
+  question: require("./images/question.png"),
 }
 
 export class Icon extends Component {

website/src/Teams/Teams.js

@@ -1,13 +1,18 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component, Fragment } from "react"
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
-import autobind from 'autobind-decorator'
+import autobind from "autobind-decorator"
-import { TeamList } from './TeamList'
+import { TeamList } from "./TeamList"
-import { TeamForm } from './TeamForm'
+import { TeamForm } from "./TeamForm"
-import { TeamFormPlaceholder } from './TeamFormPlaceholder'
+import { TeamFormPlaceholder } from "./TeamFormPlaceholder"
-import { api } from 'src/API'
+import { api } from "src/API"
-import { Row, Column, Box } from 'ui'
+import { Row, Column, Box } from "ui"
-import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
+import {
-import { sizeInfo, colorInfo } from 'ui/style'
+  YesNoMessageModal,
+  MessageModal,
+  ChangeEmailModal,
+  WaitModal,
+} from "../Modal"
+import { sizeInfo, colorInfo } from "ui/style"
 
 export class Teams extends Component {
   static propTypes = {
@@ -28,24 +33,27 @@ export class Teams extends Component {
   }
 
   componentDidMount() {
-    this.props.changeTitle('Teams')
+    this.props.changeTitle("Teams")
 
-    api.listTeams().then((list) => {
+    api
-      list.items.sort((teamA, teamB) => (teamA.name.localeCompare(teamB.name)))
+      .listTeams()
-      this.setState({ teams: list.items })
+      .then((list) => {
-    }).catch((error) => {
+        list.items.sort((teamA, teamB) => teamA.name.localeCompare(teamB.name))
-      this.setState({
+        this.setState({ teams: list.items })
-        messageModal: {
+      })
-          icon: 'hand',
+      .catch((error) => {
-          message: 'Unable to get the list of teams.',
+        this.setState({
-          detail: error.message,
+          messageModal: {
-        }
+            icon: "hand",
+            message: "Unable to get the list of teams.",
+            detail: error.message,
+          },
+        })
       })
-    })
   }
 
   componentWillUnmount() {
-    this.props.changeTitle('')
+    this.props.changeTitle("")
   }
 
   removeUnfinishedNewTeam() {
@@ -64,9 +72,10 @@ export class Teams extends Component {
       this.nextSelectedTeam = team
       this.setState({
         yesNoModal: {
-          question: 'This team has been modified. Are you sure you would like to navigate away?',
+          question:
-          onDismiss: this.handleModifiedModalDismiss
+            "This team has been modified. Are you sure you would like to navigate away?",
-        }
+          onDismiss: this.handleModifiedModalDismiss,
+        },
       })
     } else {
       this.setState({ selectedTeam: team })
@@ -77,77 +86,92 @@ export class Teams extends Component {
   @autobind
   handleSave(team) {
     if (team._id) {
-      this.setState({ waitModal: { message: 'Updating Team' } })
+      this.setState({ waitModal: { message: "Updating Team" } })
-      api.updateTeam(team).then((updatedTeam) => {
+      api
-        this.setState({
+        .updateTeam(team)
-          waitModal: null,
+        .then((updatedTeam) => {
-          teams: this.state.teams.map((team) => (team._id === updatedTeam._id ? updatedTeam : team)),
+          this.setState({
-          modified: false,
+            waitModal: null,
-          selectedTeam: updatedTeam
+            teams: this.state.teams.map(
+              (team) => (team._id === updatedTeam._id ? updatedTeam : team)
+            ),
+            modified: false,
+            selectedTeam: updatedTeam,
+          })
         })
-      }).catch((error) => {
+        .catch((error) => {
-        this.setState({
+          this.setState({
-          waitModal: null,
+            waitModal: null,
-          messageModal: {
+            messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to save the team changes',
+              message: "Unable to save the team changes",
-            detail: error.message,
+              detail: error.message,
-          }
+            },
+          })
         })
-      })
     } else {
-      this.setState({ waitModal: { message: 'Creating Team' } })
+      this.setState({ waitModal: { message: "Creating Team" } })
-      api.createTeam(team).then((createdTeam) => {
+      api
-        this.setState({
+        .createTeam(team)
-          waitModal: false,
+        .then((createdTeam) => {
-          teams: this.state.teams.map((team) => (!team._id ? createdTeam : team)).sort((a, b) => (
+          this.setState({
-            a.name < b.name ? -1 : a.name > b.name ? 1 : 0
+            waitModal: false,
-          )),
+            teams: this.state.teams
-          modified: false,
+              .map((team) => (!team._id ? createdTeam : team))
-          selectedTeam: createdTeam
+              .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0)),
+            modified: false,
+            selectedTeam: createdTeam,
+          })
         })
-      }).catch((error) => {
+        .catch((error) => {
-        this.setState({
+          this.setState({
-          waitModal: null,
+            waitModal: null,
-          messageModal: {
+            messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to create the team.',
+              message: "Unable to create the team.",
-            detail: error.message,
+              detail: error.message,
-          }
+            },
+          })
         })
-      })
     }
   }
 
   @autobind
   handleChangeEmail() {
-    this.setState({ changeEmailModal: { oldEmail: this.state.selectedTeam.email } })
+    this.setState({
+      changeEmailModal: { oldEmail: this.state.selectedTeam.email },
+    })
   }
 
   @autobind
   handleResendEmail() {
     this.setState({
-      waitModal: { message: 'Resending Email...' }
+      waitModal: { message: "Resending Email..." },
     })
-    api.sendConfirmEmail({ existingEmail: this.state.selectedTeam.email }).then(() => {
+    api
-      this.setState({
+      .sendConfirmEmail({ existingEmail: this.state.selectedTeam.email })
-        waitModal: null,
+      .then(() => {
-        messageModal: {
+        this.setState({
-          icon: 'thumb',
+          waitModal: null,
-          message: `An email has been sent to '${this.state.selectedTeam.email}' with further instructions.`
+          messageModal: {
-        }
+            icon: "thumb",
+            message: `An email has been sent to '${
+              this.state.selectedTeam.email
+            }' with further instructions.`,
+          },
+        })
       })
-    }).catch((error) => {
+      .catch((error) => {
-      this.setState({
+        this.setState({
-        error: true,
+          error: true,
-        waitModal: null,
+          waitModal: null,
-        messageModal: {
+          messageModal: {
-          icon: 'hand',
+            icon: "hand",
-          message: 'Unable to request email change.',
+            message: "Unable to request email change.",
-          detail: error.message,
+            detail: error.message,
-        }
+          },
+        })
       })
-    })
   }
 
   @autobind
@@ -157,28 +181,34 @@ export class Teams extends Component {
       return
     }
     this.setState({
-      waitModal: { message: 'Requesting Email Change...' }
+      waitModal: { message: "Requesting Email Change..." },
     })
     if (this.state.selectedTeam) {
-      api.sendConfirmEmail({ existingEmail: this.state.selectedTeam.email, newEmail }).then(() => {
+      api
-        this.setState({
+        .sendConfirmEmail({
-          waitModal: null,
+          existingEmail: this.state.selectedTeam.email,
-          messageModal: {
+          newEmail,
-            icon: 'hand',
-            message: `An email has been sent to '${newEmail}' to confirm this email.`
-          }
         })
-      }).catch((error) => {
+        .then(() => {
-        this.setState({
+          this.setState({
-          error: true,
+            waitModal: null,
-          waitModal: null,
+            messageModal: {
-          messageModal: {
+              icon: "hand",
-            icon: 'hand',
+              message: `An email has been sent to '${newEmail}' to confirm this email.`,
-            message: 'Unable to request email change.',
+            },
-            detail: error.message,
+          })
-          }
+        })
+        .catch((error) => {
+          this.setState({
+            error: true,
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: "Unable to request email change.",
+              detail: error.message,
+            },
+          })
         })
-      })
     }
   }
 
@@ -186,9 +216,10 @@ export class Teams extends Component {
   handleRemove() {
     this.setState({
       yesNoModal: {
-        question: 'Are you sure you want to remove this team? This will also remove them from any teams they belong to.',
+        question:
-        onDismiss: this.handleRemoveModalDismiss
+          "Are you sure you want to remove this team? This will also remove them from any teams they belong to.",
-      }
+        onDismiss: this.handleRemoveModalDismiss,
+      },
     })
   }
 
@@ -196,31 +227,39 @@ export class Teams extends Component {
   handleRemoveModalDismiss(yes) {
     if (yes) {
       const selectedTeamId = this.state.selectedTeam._id
-      const selectedIndex = this.state.teams.findIndex((team) => (team._id === selectedTeamId))
+      const selectedIndex = this.state.teams.findIndex(
+        (team) => team._id === selectedTeamId
+      )
 
       if (selectedIndex >= 0) {
-        this.setState({ waitModal: { message: 'Removing Team' } })
+        this.setState({ waitModal: { message: "Removing Team" } })
-        api.deleteTeam(selectedTeamId).then(() => {
+        api
-          this.setState({
+          .deleteTeam(selectedTeamId)
-            waitModal: null,
+          .then(() => {
-            teams: [...this.state.teams.slice(0, selectedIndex), ...this.state.teams.slice(selectedIndex + 1)],
+            this.setState({
-            selectedTeam: null
+              waitModal: null,
+              teams: [
+                ...this.state.teams.slice(0, selectedIndex),
+                ...this.state.teams.slice(selectedIndex + 1),
+              ],
+              selectedTeam: null,
+            })
           })
-        }).catch((error) => {
+          .catch((error) => {
-          this.setState({
+            this.setState({
-            waitModal: null,
+              waitModal: null,
-            messageModal: {
+              messageModal: {
-              icon: 'hand',
+                icon: "hand",
-              message: 'Unable to remove the team.',
+                message: "Unable to remove the team.",
-              detail: error.message,
+                detail: error.message,
-            }
+              },
+            })
           })
-        })
       }
     }
 
     this.setState({
-      yesNoModal: null
+      yesNoModal: null,
     })
   }
 
@@ -229,14 +268,14 @@ export class Teams extends Component {
     if (yes) {
       this.setState({
         selectedTeam: this.nextSelectedTeam,
-        modified: false
+        modified: false,
       })
       this.removeUnfinishedNewTeam()
       delete this.nextSelectedTeam
     }
 
     this.setState({
-      yesNoModal: null
+      yesNoModal: null,
     })
   }
 
@@ -252,9 +291,13 @@ export class Teams extends Component {
 
   @autobind
   handleAddNewTeam() {
-    let newTeam = {}
+    let teams = this.state.teams
-    let newTeams = [newTeam].concat(this.state.teams)
+
-    this.setState({ teams: newTeams, selectedTeam: newTeam })
+    if (teams.length > 0 && !!teams[0]._id) {
+      let newTeam = {}
+      let newTeams = [newTeam].concat(this.state.teams)
+      this.setState({ teams: newTeams, selectedTeam: newTeam })
+    }
   }
 
   render() {
@@ -266,43 +309,65 @@ export class Teams extends Component {
         <Column.Item grow>
           <Row fillParent>
             <Row.Item width={sizeInfo.formRowSpacing} />
-            <Row.Item width='25vw'>
+            <Row.Item width="25vw">
-              <TeamList teams={this.state.teams} selectedTeam={this.state.selectedTeam}
+              <TeamList
-                selectionModified={this.state.modified} onTeamListClick={this.handleTeamListClick}
+                teams={this.state.teams}
-                onAddNewTeam={this.handleAddNewTeam} />
+                selectedTeam={this.state.selectedTeam}
+                selectionModified={this.state.modified}
+                onTeamListClick={this.handleTeamListClick}
+                onAddNewTeam={this.handleAddNewTeam}
+              />
             </Row.Item>
             <Row.Item width={sizeInfo.formRowSpacing} />
             <Row.Item grow>
-              <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+              <Box
-                {
+                border={{
-                  this.state.selectedTeam
+                  width: sizeInfo.headerBorderWidth,
-                    ? <TeamForm team={this.state.selectedTeam} onSave={this.handleSave}
+                  color: colorInfo.headerBorder,
-                      onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
+                }}
-                      onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
+                radius={sizeInfo.formBoxRadius}>
-                    : <TeamFormPlaceholder />
+                {this.state.selectedTeam ? (
-                }
+                  <TeamForm
+                    team={this.state.selectedTeam}
+                    onSave={this.handleSave}
+                    onRemove={this.handleRemove}
+                    onModifiedChanged={this.handleModifiedChanged}
+                    onChangeEmail={this.handleChangeEmail}
+                    onResendEmail={this.handleResendEmail}
+                  />
+                ) : (
+                  <TeamFormPlaceholder />
+                )}
               </Box>
             </Row.Item>
             <Row.Item width={sizeInfo.formRowSpacing} />
           </Row>
         </Column.Item>
         <Column.Item height={sizeInfo.formColumnSpacing}>
-          <ChangeEmailModal open={!!changeEmailModal}
+          <ChangeEmailModal
+            open={!!changeEmailModal}
             oldEmail={changeEmailModal && changeEmailModal.oldEmail}
-            onDismiss={this.handleChangeEmailDismiss} />
+            onDismiss={this.handleChangeEmailDismiss}
+          />
 
-          <YesNoMessageModal open={!!yesNoModal}
+          <YesNoMessageModal
-            question={yesNoModal ? yesNoModal.question : ''}
+            open={!!yesNoModal}
-            onDismiss={yesNoModal && yesNoModal.onDismiss} />
+            question={yesNoModal ? yesNoModal.question : ""}
+            onDismiss={yesNoModal && yesNoModal.onDismiss}
+          />
 
           <MessageModal
             open={!!messageModal}
-            icon={messageModal ? messageModal.icon : ''}
+            icon={messageModal ? messageModal.icon : ""}
-            message={messageModal ? messageModal.message : ''}
+            message={messageModal ? messageModal.message : ""}
             detail={messageModal && messageModal.detail}
-            onDismiss={this.handleMessageModalDismiss} />
+            onDismiss={this.handleMessageModalDismiss}
+          />
 
-          <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
+          <WaitModal
+            active={!!this.state.waitModal}
+            message={this.state.waitModal ? this.state.waitModal.message : ""}
+          />
         </Column.Item>
       </Fragment>
     )

website/src/Users/Users.js

@@ -1,13 +1,18 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component, Fragment } from "react"
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
-import autobind from 'autobind-decorator'
+import autobind from "autobind-decorator"
-import { UserList } from './UserList'
+import { UserList } from "./UserList"
-import { UserForm } from './UserForm'
+import { UserForm } from "./UserForm"
-import { UserFormPlaceholder } from './UserFormPlaceholder'
+import { UserFormPlaceholder } from "./UserFormPlaceholder"
-import { api } from 'src/API'
+import { api } from "src/API"
-import { Row, Column, Box } from 'ui'
+import { Row, Column, Box } from "ui"
-import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
+import {
-import { sizeInfo, colorInfo } from 'ui/style'
+  YesNoMessageModal,
+  MessageModal,
+  ChangeEmailModal,
+  WaitModal,
+} from "../Modal"
+import { sizeInfo, colorInfo } from "ui/style"
 
 export class Users extends Component {
   static propTypes = {
@@ -28,24 +33,29 @@ export class Users extends Component {
   }
 
   componentDidMount() {
-    this.props.changeTitle('Users')
+    this.props.changeTitle("Users")
 
-    api.listUsers().then((list) => {
+    api
-      list.items.sort((userA, userB) => (userA.lastName.localeCompare(userB.lastName)))
+      .listUsers()
-      this.setState({ users: list.items })
+      .then((list) => {
-    }).catch((error) => {
+        list.items.sort((userA, userB) =>
-      this.setState({
+          userA.lastName.localeCompare(userB.lastName)
-        messageModal: {
+        )
-          icon: 'hand',
+        this.setState({ users: list.items })
-          message: 'Unable to get the list of users.',
+      })
-          detail: error.message,
+      .catch((error) => {
-        }
+        this.setState({
+          messageModal: {
+            icon: "hand",
+            message: "Unable to get the list of users.",
+            detail: error.message,
+          },
+        })
       })
-    })
   }
 
   componentWillUnmount() {
-    this.props.changeTitle('')
+    this.props.changeTitle("")
   }
 
   removeUnfinishedNewUser() {
@@ -64,9 +74,10 @@ export class Users extends Component {
       this.nextSelectedUser = user
       this.setState({
         yesNoModal: {
-          question: 'This user has been modified. Are you sure you would like to navigate away?',
+          question:
-          onDismiss: this.handleModifiedModalDismiss
+            "This user has been modified. Are you sure you would like to navigate away?",
-        }
+          onDismiss: this.handleModifiedModalDismiss,
+        },
       })
     } else {
       this.setState({ selectedUser: user })
@@ -77,77 +88,95 @@ export class Users extends Component {
   @autobind
   handleSave(user) {
     if (user._id) {
-      this.setState({ waitModal: { message: 'Updating User' } })
+      this.setState({ waitModal: { message: "Updating User" } })
-      api.updateUser(user).then((updatedUser) => {
+      api
-        this.setState({
+        .updateUser(user)
-          waitModal: null,
+        .then((updatedUser) => {
-          users: this.state.users.map((user) => (user._id === updatedUser._id ? updatedUser : user)),
+          this.setState({
-          modified: false,
+            waitModal: null,
-          selectedUser: updatedUser
+            users: this.state.users.map(
+              (user) => (user._id === updatedUser._id ? updatedUser : user)
+            ),
+            modified: false,
+            selectedUser: updatedUser,
+          })
         })
-      }).catch((error) => {
+        .catch((error) => {
-        this.setState({
+          this.setState({
-          waitModal: null,
+            waitModal: null,
-          messageModal: {
+            messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to save the user changes',
+              message: "Unable to save the user changes",
-            detail: error.message,
+              detail: error.message,
-          }
+            },
+          })
         })
-      })
     } else {
-      this.setState({ waitModal: { message: 'Creating User' } })
+      this.setState({ waitModal: { message: "Creating User" } })
-      api.createUser(user).then((createdUser) => {
+      api
-        this.setState({
+        .createUser(user)
-          waitModal: false,
+        .then((createdUser) => {
-          users: this.state.users.map((user) => (!user._id ? createdUser : user)).sort((a, b) => (
+          this.setState({
-            a.lastName < b.lastName ? -1 : a.lastName > b.lastName : 0
+            waitModal: false,
-          )),
+            users: this.state.users
-          modified: false,
+              .map((user) => (!user._id ? createdUser : user))
-          selectedUser: createdUser
+              .sort(
+                (a, b) =>
+                  ((a.lastName < b.lastName ? -1 : a.lastName > b.lastName): 0)
+              ),
+            modified: false,
+            selectedUser: createdUser,
+          })
         })
-      }).catch((error) => {
+        .catch((error) => {
-        this.setState({
+          this.setState({
-          waitModal: null,
+            waitModal: null,
-          messageModal: {
+            messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to create the user.',
+              message: "Unable to create the user.",
-            detail: error.message,
+              detail: error.message,
-          }
+            },
+          })
         })
-      })
     }
   }
 
   @autobind
   handleChangeEmail() {
-    this.setState({ changeEmailModal: { oldEmail: this.state.selectedUser.email } })
+    this.setState({
+      changeEmailModal: { oldEmail: this.state.selectedUser.email },
+    })
   }
 
   @autobind
   handleResendEmail() {
     this.setState({
-      waitModal: { message: 'Resending Email...' }
+      waitModal: { message: "Resending Email..." },
     })
-    api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email }).then(() => {
+    api
-      this.setState({
+      .sendConfirmEmail({ existingEmail: this.state.selectedUser.email })
-        waitModal: null,
+      .then(() => {
-        messageModal: {
+        this.setState({
-          icon: 'thumb',
+          waitModal: null,
-          message: `An email has been sent to '${this.state.selectedUser.email}' with further instructions.`
+          messageModal: {
-        }
+            icon: "thumb",
+            message: `An email has been sent to '${
+              this.state.selectedUser.email
+            }' with further instructions.`,
+          },
+        })
       })
-    }).catch((error) => {
+      .catch((error) => {
-      this.setState({
+        this.setState({
-        error: true,
+          error: true,
-        waitModal: null,
+          waitModal: null,
-        messageModal: {
+          messageModal: {
-          icon: 'hand',
+            icon: "hand",
-          message: 'Unable to request email change.',
+            message: "Unable to request email change.",
-          detail: error.message,
+            detail: error.message,
-        }
+          },
+        })
       })
-    })
   }
 
   @autobind
@@ -157,28 +186,34 @@ export class Users extends Component {
       return
     }
     this.setState({
-      waitModal: { message: 'Requesting Email Change...' }
+      waitModal: { message: "Requesting Email Change..." },
     })
     if (this.state.selectedUser) {
-      api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email, newEmail }).then(() => {
+      api
-        this.setState({
+        .sendConfirmEmail({
-          waitModal: null,
+          existingEmail: this.state.selectedUser.email,
-          messageModal: {
+          newEmail,
-            icon: 'hand',
-            message: `An email has been sent to '${newEmail}' to confirm this email.`
-          }
         })
-      }).catch((error) => {
+        .then(() => {
-        this.setState({
+          this.setState({
-          error: true,
+            waitModal: null,
-          waitModal: null,
+            messageModal: {
-          messageModal: {
+              icon: "hand",
-            icon: 'hand',
+              message: `An email has been sent to '${newEmail}' to confirm this email.`,
-            message: 'Unable to request email change.',
+            },
-            detail: error.message,
+          })
-          }
+        })
+        .catch((error) => {
+          this.setState({
+            error: true,
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: "Unable to request email change.",
+              detail: error.message,
+            },
+          })
         })
-      })
     }
   }
 
@@ -186,9 +221,10 @@ export class Users extends Component {
   handleRemove() {
     this.setState({
       yesNoModal: {
-        question: 'Are you sure you want to remove this user? This will also remove them from any teams they belong to.',
+        question:
-        onDismiss: this.handleRemoveModalDismiss
+          "Are you sure you want to remove this user? This will also remove them from any teams they belong to.",
-      }
+        onDismiss: this.handleRemoveModalDismiss,
+      },
     })
   }
 
@@ -196,31 +232,39 @@ export class Users extends Component {
   handleRemoveModalDismiss(yes) {
     if (yes) {
       const selectedUserId = this.state.selectedUser._id
-      const selectedIndex = this.state.users.findIndex((user) => (user._id === selectedUserId))
+      const selectedIndex = this.state.users.findIndex(
+        (user) => user._id === selectedUserId
+      )
 
       if (selectedIndex >= 0) {
-        this.setState({ waitModal: { message: 'Removing User' } })
+        this.setState({ waitModal: { message: "Removing User" } })
-        api.deleteUser(selectedUserId).then(() => {
+        api
-          this.setState({
+          .deleteUser(selectedUserId)
-            waitModal: null,
+          .then(() => {
-            users: [...this.state.users.slice(0, selectedIndex), ...this.state.users.slice(selectedIndex + 1)],
+            this.setState({
-            selectedUser: null
+              waitModal: null,
+              users: [
+                ...this.state.users.slice(0, selectedIndex),
+                ...this.state.users.slice(selectedIndex + 1),
+              ],
+              selectedUser: null,
+            })
           })
-        }).catch((error) => {
+          .catch((error) => {
-          this.setState({
+            this.setState({
-            waitModal: null,
+              waitModal: null,
-            messageModal: {
+              messageModal: {
-              icon: 'hand',
+                icon: "hand",
-              message: 'Unable to remove the user.',
+                message: "Unable to remove the user.",
-              detail: error.message,
+                detail: error.message,
-            }
+              },
+            })
           })
-        })
       }
     }
 
     this.setState({
-      yesNoModal: null
+      yesNoModal: null,
     })
   }
 
@@ -229,14 +273,14 @@ export class Users extends Component {
     if (yes) {
       this.setState({
         selectedUser: this.nextSelectedUser,
-        modified: false
+        modified: false,
       })
       this.removeUnfinishedNewUser()
       delete this.nextSelectedUser
     }
 
     this.setState({
-      yesNoModal: null
+      yesNoModal: null,
     })
   }
 
@@ -252,9 +296,13 @@ export class Users extends Component {
 
   @autobind
   handleAddNewUser() {
-    let newUser = {}
+    let users = this.state.users
-    let newUsers = [newUser].concat(this.state.users)
+
-    this.setState({ users: newUsers, selectedUser: newUser })
+    if (users.length > 0 && !!users[0]._id) {
+      let newUser = {}
+      let newUsers = [newUser].concat(users)
+      this.setState({ users: newUsers, selectedUser: newUser })
+    }
   }
 
   render() {
@@ -266,43 +314,65 @@ export class Users extends Component {
         <Column.Item grow>
           <Row fillParent>
             <Row.Item width={sizeInfo.formRowSpacing} />
-            <Row.Item width='25vw'>
+            <Row.Item width="25vw">
-              <UserList users={this.state.users} selectedUser={this.state.selectedUser}
+              <UserList
-                selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
+                users={this.state.users}
-                onAddNewUser={this.handleAddNewUser} />
+                selectedUser={this.state.selectedUser}
+                selectionModified={this.state.modified}
+                onUserListClick={this.handleUserListClick}
+                onAddNewUser={this.handleAddNewUser}
+              />
             </Row.Item>
             <Row.Item width={sizeInfo.formRowSpacing} />
             <Row.Item grow>
-              <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+              <Box
-                {
+                border={{
-                  this.state.selectedUser
+                  width: sizeInfo.headerBorderWidth,
-                    ? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
+                  color: colorInfo.headerBorder,
-                      onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
+                }}
-                      onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
+                radius={sizeInfo.formBoxRadius}>
-                    : <UserFormPlaceholder />
+                {this.state.selectedUser ? (
-                }
+                  <UserForm
+                    user={this.state.selectedUser}
+                    onSave={this.handleSave}
+                    onRemove={this.handleRemove}
+                    onModifiedChanged={this.handleModifiedChanged}
+                    onChangeEmail={this.handleChangeEmail}
+                    onResendEmail={this.handleResendEmail}
+                  />
+                ) : (
+                  <UserFormPlaceholder />
+                )}
               </Box>
             </Row.Item>
             <Row.Item width={sizeInfo.formRowSpacing} />
           </Row>
         </Column.Item>
         <Column.Item height={sizeInfo.formColumnSpacing}>
-          <ChangeEmailModal open={!!changeEmailModal}
+          <ChangeEmailModal
+            open={!!changeEmailModal}
             oldEmail={changeEmailModal && changeEmailModal.oldEmail}
-            onDismiss={this.handleChangeEmailDismiss} />
+            onDismiss={this.handleChangeEmailDismiss}
+          />
 
-          <YesNoMessageModal open={!!yesNoModal}
+          <YesNoMessageModal
-            question={yesNoModal ? yesNoModal.question : ''}
+            open={!!yesNoModal}
-            onDismiss={yesNoModal && yesNoModal.onDismiss} />
+            question={yesNoModal ? yesNoModal.question : ""}
+            onDismiss={yesNoModal && yesNoModal.onDismiss}
+          />
 
           <MessageModal
             open={!!messageModal}
-            icon={messageModal ? messageModal.icon : ''}
+            icon={messageModal ? messageModal.icon : ""}
-            message={messageModal ? messageModal.message : ''}
+            message={messageModal ? messageModal.message : ""}
             detail={messageModal && messageModal.detail}
-            onDismiss={this.handleMessageModalDismiss} />
+            onDismiss={this.handleMessageModalDismiss}
+          />
 
-          <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
+          <WaitModal
+            active={!!this.state.waitModal}
+            message={this.state.waitModal ? this.state.waitModal.message : ""}
+          />
         </Column.Item>
       </Fragment>
     )