john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix DAR-85

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-14 14:44:26 -07:00
parent 84e43b0573
commit 56db130612
7 changed files with 424 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
design/Deighton AR Design.sketch
View File

Binary file not shown.

3
mobile/src/ui/Icon.js
View File

@@ -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 {

BIN
mobile/src/ui/images/clipboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 937 B

BIN
mobile/src/ui/images/hardhat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
mobile/src/ui/images/question.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

351
website/src/Teams/Teams.js
View File

@@ -1,13 +1,18 @@
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'
import { TeamList } from './TeamList'
import { TeamForm } from './TeamForm'
import { TeamFormPlaceholder } from './TeamFormPlaceholder'
import { api } from 'src/API'
import { Row, Column, Box } from 'ui'
import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
import { sizeInfo, colorInfo } from 'ui/style'
import React, { Component, Fragment } from "react"
import PropTypes from "prop-types"
import autobind from "autobind-decorator"
import { TeamList } from "./TeamList"
import { TeamForm } from "./TeamForm"
import { TeamFormPlaceholder } from "./TeamFormPlaceholder"
import { api } from "src/API"
import { Row, Column, Box } from "ui"
import {
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) => {
list.items.sort((teamA, teamB) => (teamA.name.localeCompare(teamB.name)))
this.setState({ teams: list.items })
}).catch((error) => {
this.setState({
messageModal: {
icon: 'hand',
message: 'Unable to get the list of teams.',
detail: error.message,
}
api
.listTeams()
.then((list) => {
list.items.sort((teamA, teamB) => teamA.name.localeCompare(teamB.name))
this.setState({ teams: list.items })
})
.catch((error) => {
this.setState({
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?',
onDismiss: this.handleModifiedModalDismiss
}
question:
"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' } })
api.updateTeam(team).then((updatedTeam) => {
this.setState({
waitModal: null,
teams: this.state.teams.map((team) => (team._id === updatedTeam._id ? updatedTeam : team)),
modified: false,
selectedTeam: updatedTeam
this.setState({ waitModal: { message: "Updating Team" } })
api
.updateTeam(team)
.then((updatedTeam) => {
this.setState({
waitModal: null,
teams: this.state.teams.map(
(team) => (team._id === updatedTeam._id ? updatedTeam : team)
),
modified: false,
selectedTeam: updatedTeam,
})
})
}).catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to save the team changes',
detail: error.message,
}
.catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
message: "Unable to save the team changes",
detail: error.message,
},
})
})
})
} else {
this.setState({ waitModal: { message: 'Creating Team' } })
api.createTeam(team).then((createdTeam) => {
this.setState({
waitModal: false,
teams: this.state.teams.map((team) => (!team._id ? createdTeam : team)).sort((a, b) => (
a.name < b.name ? -1 : a.name > b.name ? 1 : 0
)),
modified: false,
selectedTeam: createdTeam
this.setState({ waitModal: { message: "Creating Team" } })
api
.createTeam(team)
.then((createdTeam) => {
this.setState({
waitModal: false,
teams: this.state.teams
.map((team) => (!team._id ? createdTeam : team))
.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0)),
modified: false,
selectedTeam: createdTeam,
})
})
}).catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to create the team.',
detail: error.message,
}
.catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
message: "Unable to create the team.",
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(() => {
this.setState({
waitModal: null,
messageModal: {
icon: 'thumb',
message: `An email has been sent to '${this.state.selectedTeam.email}' with further instructions.`
}
api
.sendConfirmEmail({ existingEmail: this.state.selectedTeam.email })
.then(() => {
this.setState({
waitModal: null,
messageModal: {
icon: "thumb",
message: `An email has been sent to '${
this.state.selectedTeam.email
}' with further instructions.`,
},
})
})
}).catch((error) => {
this.setState({
error: true,
waitModal: null,
messageModal: {
icon: 'hand',
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,
},
})
})
})
}
@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(() => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: `An email has been sent to '${newEmail}' to confirm this email.`
}
api
.sendConfirmEmail({
existingEmail: this.state.selectedTeam.email,
newEmail,
})
}).catch((error) => {
this.setState({
error: true,
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to request email change.',
detail: error.message,
}
.then(() => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
message: `An email has been sent to '${newEmail}' to confirm this email.`,
},
})
})
.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.',
onDismiss: this.handleRemoveModalDismiss
}
question:
"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' } })
api.deleteTeam(selectedTeamId).then(() => {
this.setState({
waitModal: null,
teams: [...this.state.teams.slice(0, selectedIndex), ...this.state.teams.slice(selectedIndex + 1)],
selectedTeam: null
this.setState({ waitModal: { message: "Removing Team" } })
api
.deleteTeam(selectedTeamId)
.then(() => {
this.setState({
waitModal: null,
teams: [
...this.state.teams.slice(0, selectedIndex),
...this.state.teams.slice(selectedIndex + 1),
],
selectedTeam: null,
})
})
}).catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to remove the team.',
detail: error.message,
}
.catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
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,9 +291,13 @@ export class Teams extends Component {
@autobind
handleAddNewTeam() {
let newTeam = {}
let newTeams = [newTeam].concat(this.state.teams)
this.setState({ teams: newTeams, selectedTeam: newTeam })
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() {
@@ -266,43 +309,65 @@ export class Teams extends Component {
<Column.Item grow>
<Row fillParent>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item width='25vw'>
<TeamList teams={this.state.teams} selectedTeam={this.state.selectedTeam}
selectionModified={this.state.modified} onTeamListClick={this.handleTeamListClick}
onAddNewTeam={this.handleAddNewTeam} />
<Row.Item width="25vw">
<TeamList
teams={this.state.teams}
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}>
{
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
border={{
width: sizeInfo.headerBorderWidth,
color: colorInfo.headerBorder,
}}
radius={sizeInfo.formBoxRadius}>
{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}
question={yesNoModal ? yesNoModal.question : ''}
onDismiss={yesNoModal && yesNoModal.onDismiss} />
<YesNoMessageModal
open={!!yesNoModal}
question={yesNoModal ? yesNoModal.question : ""}
onDismiss={yesNoModal && yesNoModal.onDismiss}
/>
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
message={messageModal ? messageModal.message : ''}
icon={messageModal ? messageModal.icon : ""}
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>
)

356
website/src/Users/Users.js
View File

@@ -1,13 +1,18 @@
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'
import { UserList } from './UserList'
import { UserForm } from './UserForm'
import { UserFormPlaceholder } from './UserFormPlaceholder'
import { api } from 'src/API'
import { Row, Column, Box } from 'ui'
import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
import { sizeInfo, colorInfo } from 'ui/style'
import React, { Component, Fragment } from "react"
import PropTypes from "prop-types"
import autobind from "autobind-decorator"
import { UserList } from "./UserList"
import { UserForm } from "./UserForm"
import { UserFormPlaceholder } from "./UserFormPlaceholder"
import { api } from "src/API"
import { Row, Column, Box } from "ui"
import {
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) => {
list.items.sort((userA, userB) => (userA.lastName.localeCompare(userB.lastName)))
this.setState({ users: list.items })
}).catch((error) => {
this.setState({
messageModal: {
icon: 'hand',
message: 'Unable to get the list of users.',
detail: error.message,
}
api
.listUsers()
.then((list) => {
list.items.sort((userA, userB) =>
userA.lastName.localeCompare(userB.lastName)
)
this.setState({ users: list.items })
})
.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?',
onDismiss: this.handleModifiedModalDismiss
}
question:
"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' } })
api.updateUser(user).then((updatedUser) => {
this.setState({
waitModal: null,
users: this.state.users.map((user) => (user._id === updatedUser._id ? updatedUser : user)),
modified: false,
selectedUser: updatedUser
this.setState({ waitModal: { message: "Updating User" } })
api
.updateUser(user)
.then((updatedUser) => {
this.setState({
waitModal: null,
users: this.state.users.map(
(user) => (user._id === updatedUser._id ? updatedUser : user)
),
modified: false,
selectedUser: updatedUser,
})
})
}).catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to save the user changes',
detail: error.message,
}
.catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
message: "Unable to save the user changes",
detail: error.message,
},
})
})
})
} else {
this.setState({ waitModal: { message: 'Creating User' } })
api.createUser(user).then((createdUser) => {
this.setState({
waitModal: false,
users: this.state.users.map((user) => (!user._id ? createdUser : user)).sort((a, b) => (
a.lastName < b.lastName ? -1 : a.lastName > b.lastName : 0
)),
modified: false,
selectedUser: createdUser
this.setState({ waitModal: { message: "Creating User" } })
api
.createUser(user)
.then((createdUser) => {
this.setState({
waitModal: false,
users: this.state.users
.map((user) => (!user._id ? createdUser : user))
.sort(
(a, b) =>
((a.lastName < b.lastName ? -1 : a.lastName > b.lastName): 0)
),
modified: false,
selectedUser: createdUser,
})
})
}).catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to create the user.',
detail: error.message,
}
.catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
message: "Unable to create the user.",
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(() => {
this.setState({
waitModal: null,
messageModal: {
icon: 'thumb',
message: `An email has been sent to '${this.state.selectedUser.email}' with further instructions.`
}
api
.sendConfirmEmail({ existingEmail: this.state.selectedUser.email })
.then(() => {
this.setState({
waitModal: null,
messageModal: {
icon: "thumb",
message: `An email has been sent to '${
this.state.selectedUser.email
}' with further instructions.`,
},
})
})
}).catch((error) => {
this.setState({
error: true,
waitModal: null,
messageModal: {
icon: 'hand',
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,
},
})
})
})
}
@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(() => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: `An email has been sent to '${newEmail}' to confirm this email.`
}
api
.sendConfirmEmail({
existingEmail: this.state.selectedUser.email,
newEmail,
})
}).catch((error) => {
this.setState({
error: true,
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to request email change.',
detail: error.message,
}
.then(() => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
message: `An email has been sent to '${newEmail}' to confirm this email.`,
},
})
})
.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.',
onDismiss: this.handleRemoveModalDismiss
}
question:
"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' } })
api.deleteUser(selectedUserId).then(() => {
this.setState({
waitModal: null,
users: [...this.state.users.slice(0, selectedIndex), ...this.state.users.slice(selectedIndex + 1)],
selectedUser: null
this.setState({ waitModal: { message: "Removing User" } })
api
.deleteUser(selectedUserId)
.then(() => {
this.setState({
waitModal: null,
users: [
...this.state.users.slice(0, selectedIndex),
...this.state.users.slice(selectedIndex + 1),
],
selectedUser: null,
})
})
}).catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to remove the user.',
detail: error.message,
}
.catch((error) => {
this.setState({
waitModal: null,
messageModal: {
icon: "hand",
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,9 +296,13 @@ export class Users extends Component {
@autobind
handleAddNewUser() {
let newUser = {}
let newUsers = [newUser].concat(this.state.users)
this.setState({ users: newUsers, selectedUser: newUser })
let users = this.state.users
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'>
<UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} />
<Row.Item width="25vw">
<UserList
users={this.state.users}
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}>
{
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
border={{
width: sizeInfo.headerBorderWidth,
color: colorInfo.headerBorder,
}}
radius={sizeInfo.formBoxRadius}>
{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}
question={yesNoModal ? yesNoModal.question : ''}
onDismiss={yesNoModal && yesNoModal.onDismiss} />
<YesNoMessageModal
open={!!yesNoModal}
question={yesNoModal ? yesNoModal.question : ""}
onDismiss={yesNoModal && yesNoModal.onDismiss}
/>
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
message={messageModal ? messageModal.message : ''}
icon={messageModal ? messageModal.icon : ""}
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>
)