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()
+      .then((list) => {
+        list.items.sort((teamA, teamB) => teamA.name.localeCompare(teamB.name))
         this.setState({ teams: list.items })
-    }).catch((error) => {
+      })
+      .catch((error) => {
         this.setState({
           messageModal: {
-          icon: 'hand',
+            icon: "hand",
-          message: 'Unable to get the list of teams.',
+            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,43 +86,51 @@ 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
+        .updateTeam(team)
+        .then((updatedTeam) => {
           this.setState({
             waitModal: null,
-          teams: this.state.teams.map((team) => (team._id === updatedTeam._id ? updatedTeam : team)),
+            teams: this.state.teams.map(
+              (team) => (team._id === updatedTeam._id ? updatedTeam : team)
+            ),
             modified: false,
-          selectedTeam: updatedTeam
+            selectedTeam: updatedTeam,
           })
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.setState({
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to save the team changes',
+              message: "Unable to save the team changes",
               detail: error.message,
-          }
+            },
           })
         })
     } else {
-      this.setState({ waitModal: { message: 'Creating Team' } })
+      this.setState({ waitModal: { message: "Creating Team" } })
-      api.createTeam(team).then((createdTeam) => {
+      api
+        .createTeam(team)
+        .then((createdTeam) => {
           this.setState({
             waitModal: false,
-          teams: this.state.teams.map((team) => (!team._id ? createdTeam : team)).sort((a, b) => (
+            teams: this.state.teams
-            a.name < b.name ? -1 : a.name > b.name ? 1 : 0
+              .map((team) => (!team._id ? createdTeam : team))
-          )),
+              .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0)),
             modified: false,
-          selectedTeam: createdTeam
+            selectedTeam: createdTeam,
           })
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.setState({
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to create the team.',
+              message: "Unable to create the team.",
               detail: error.message,
-          }
+            },
           })
         })
     }
@@ -121,31 +138,38 @@ export class Teams extends Component {
 
   @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
+      .sendConfirmEmail({ existingEmail: this.state.selectedTeam.email })
+      .then(() => {
         this.setState({
           waitModal: null,
           messageModal: {
-          icon: 'thumb',
+            icon: "thumb",
-          message: `An email has been sent to '${this.state.selectedTeam.email}' with further instructions.`
+            message: `An email has been sent to '${
-        }
+              this.state.selectedTeam.email
+            }' with further instructions.`,
+          },
         })
-    }).catch((error) => {
+      })
+      .catch((error) => {
         this.setState({
           error: true,
           waitModal: null,
           messageModal: {
-          icon: 'hand',
+            icon: "hand",
-          message: 'Unable to request email change.',
+            message: "Unable to request email change.",
             detail: error.message,
-        }
+          },
         })
       })
   }
@@ -157,26 +181,32 @@ 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
+        .sendConfirmEmail({
+          existingEmail: this.state.selectedTeam.email,
+          newEmail,
+        })
+        .then(() => {
           this.setState({
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: `An email has been sent to '${newEmail}' to confirm this email.`
+              message: `An email has been sent to '${newEmail}' to confirm this email.`,
-          }
+            },
           })
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.setState({
             error: true,
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to request email change.',
+              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
+          .deleteTeam(selectedTeamId)
+          .then(() => {
             this.setState({
               waitModal: null,
-            teams: [...this.state.teams.slice(0, selectedIndex), ...this.state.teams.slice(selectedIndex + 1)],
+              teams: [
-            selectedTeam: null
+                ...this.state.teams.slice(0, selectedIndex),
+                ...this.state.teams.slice(selectedIndex + 1),
+              ],
+              selectedTeam: null,
             })
-        }).catch((error) => {
+          })
+          .catch((error) => {
             this.setState({
               waitModal: null,
               messageModal: {
-              icon: 'hand',
+                icon: "hand",
-              message: 'Unable to remove the team.',
+                message: "Unable to remove the team.",
                 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,10 +291,14 @@ export class Teams extends Component {
 
   @autobind
   handleAddNewTeam() {
+    let teams = this.state.teams
+
+    if (teams.length > 0 && !!teams[0]._id) {
       let newTeam = {}
       let newTeams = [newTeam].concat(this.state.teams)
       this.setState({ teams: newTeams, selectedTeam: newTeam })
     }
+  }
 
   render() {
     const { messageModal, yesNoModal, changeEmailModal } = this.state
@@ -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()
+      .then((list) => {
+        list.items.sort((userA, userB) =>
+          userA.lastName.localeCompare(userB.lastName)
+        )
         this.setState({ users: list.items })
-    }).catch((error) => {
+      })
+      .catch((error) => {
         this.setState({
           messageModal: {
-          icon: 'hand',
+            icon: "hand",
-          message: 'Unable to get the list of users.',
+            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,43 +88,54 @@ 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
+        .updateUser(user)
+        .then((updatedUser) => {
           this.setState({
             waitModal: null,
-          users: this.state.users.map((user) => (user._id === updatedUser._id ? updatedUser : user)),
+            users: this.state.users.map(
+              (user) => (user._id === updatedUser._id ? updatedUser : user)
+            ),
             modified: false,
-          selectedUser: updatedUser
+            selectedUser: updatedUser,
           })
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.setState({
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to save the user changes',
+              message: "Unable to save the user changes",
               detail: error.message,
-          }
+            },
           })
         })
     } else {
-      this.setState({ waitModal: { message: 'Creating User' } })
+      this.setState({ waitModal: { message: "Creating User" } })
-      api.createUser(user).then((createdUser) => {
+      api
+        .createUser(user)
+        .then((createdUser) => {
           this.setState({
             waitModal: false,
-          users: this.state.users.map((user) => (!user._id ? createdUser : user)).sort((a, b) => (
+            users: this.state.users
-            a.lastName < b.lastName ? -1 : a.lastName > b.lastName : 0
+              .map((user) => (!user._id ? createdUser : user))
-          )),
+              .sort(
+                (a, b) =>
+                  ((a.lastName < b.lastName ? -1 : a.lastName > b.lastName): 0)
+              ),
             modified: false,
-          selectedUser: createdUser
+            selectedUser: createdUser,
           })
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.setState({
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to create the user.',
+              message: "Unable to create the user.",
               detail: error.message,
-          }
+            },
           })
         })
     }
@@ -121,31 +143,38 @@ export class Users extends Component {
 
   @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
+      .sendConfirmEmail({ existingEmail: this.state.selectedUser.email })
+      .then(() => {
         this.setState({
           waitModal: null,
           messageModal: {
-          icon: 'thumb',
+            icon: "thumb",
-          message: `An email has been sent to '${this.state.selectedUser.email}' with further instructions.`
+            message: `An email has been sent to '${
-        }
+              this.state.selectedUser.email
+            }' with further instructions.`,
+          },
         })
-    }).catch((error) => {
+      })
+      .catch((error) => {
         this.setState({
           error: true,
           waitModal: null,
           messageModal: {
-          icon: 'hand',
+            icon: "hand",
-          message: 'Unable to request email change.',
+            message: "Unable to request email change.",
             detail: error.message,
-        }
+          },
         })
       })
   }
@@ -157,26 +186,32 @@ 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
+        .sendConfirmEmail({
+          existingEmail: this.state.selectedUser.email,
+          newEmail,
+        })
+        .then(() => {
           this.setState({
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: `An email has been sent to '${newEmail}' to confirm this email.`
+              message: `An email has been sent to '${newEmail}' to confirm this email.`,
-          }
+            },
           })
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.setState({
             error: true,
             waitModal: null,
             messageModal: {
-            icon: 'hand',
+              icon: "hand",
-            message: 'Unable to request email change.',
+              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
+          .deleteUser(selectedUserId)
+          .then(() => {
             this.setState({
               waitModal: null,
-            users: [...this.state.users.slice(0, selectedIndex), ...this.state.users.slice(selectedIndex + 1)],
+              users: [
-            selectedUser: null
+                ...this.state.users.slice(0, selectedIndex),
+                ...this.state.users.slice(selectedIndex + 1),
+              ],
+              selectedUser: null,
             })
-        }).catch((error) => {
+          })
+          .catch((error) => {
             this.setState({
               waitModal: null,
               messageModal: {
-              icon: 'hand',
+                icon: "hand",
-              message: 'Unable to remove the user.',
+                message: "Unable to remove the user.",
                 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,10 +296,14 @@ export class Users extends Component {
 
   @autobind
   handleAddNewUser() {
+    let users = this.state.users
+
+    if (users.length > 0 && !!users[0]._id) {
       let newUser = {}
-    let newUsers = [newUser].concat(this.state.users)
+      let newUsers = [newUser].concat(users)
       this.setState({ users: newUsers, selectedUser: newUser })
     }
+  }
 
   render() {
     const { messageModal, yesNoModal, changeEmailModal } = this.state
@@ -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>
     )