Fix titles and tab colors for actors

This commit is contained in:
John Lyon-Smith
2018-03-07 09:21:43 -08:00
parent 69e3057e10
commit c06669873f
8 changed files with 73 additions and 51 deletions

View File

@@ -149,7 +149,7 @@ export class AuthRoutes {
return Promise.reject(createError.NotFound(`User with email '${existingEmail}' was not found`))
} else if (conflictingUser) {
return Promise.reject(createError.BadRequest(`A user with '${newEmail}' already exists`))
} else if (!isAdminOrExec && user.emailToken && (new Date() - user.emailToken.created) < this.sendEmailDelayInSeconds) {
} else if (!isAdmin && user.emailToken && (new Date() - user.emailToken.created) < this.sendEmailDelayInSeconds) {
return Promise.reject(createError.BadRequest('Cannot request email confirmation again so soon'))
}

View File

@@ -81,7 +81,7 @@ export class ForgotPassword extends React.Component {
<Text>The email address of an existing user to send the password reset link to.</Text>
</Column.Item>
<Column.Item>
<BoundButton className='submit' name='submit' content='Submit'
<BoundButton name='submit' content='Submit'
primary submit binder={this.state.binder}>Submit</BoundButton>
</Column.Item>
</Column>

View File

@@ -62,7 +62,7 @@ export class ResetPassword extends React.Component {
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<form onSubmit={this.handleSubmit} id='resetPassword'>
<Column>
<Column.Item>
<Text size='large'>Reset Password</Text>
@@ -85,8 +85,7 @@ export class ResetPassword extends React.Component {
</Text>
</Column.Item>
<Column.Item>
<BoundButton className='submit' name='submit' content='Submit'
submit binder={this.state.binder} />
<BoundButton name='submit' text='Submit' submit='resetPassword' binder={this.state.binder} />
</Column.Item>
</Column>
</form>

View File

@@ -1,13 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import { autoBind } from 'auto-bind2'
import { Modal, Button, Icon, Column, Text, BoundInput, BoundButton } from 'ui'
import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from 'ui'
import { regExpPattern } from 'regexp-pattern'
import { FormBinder } from 'react-form-binder'
export class ChangeEmailModal extends React.Component {
static propTypes = {
open: PropTypes.bool,
oldEmail: PropTypes.string,
onDismiss: PropTypes.func
}
@@ -43,7 +44,7 @@ export class ChangeEmailModal extends React.Component {
let newEmail = null
if (this.state.binder.anyModified && this.state.binder.allValid) {
newEmail = this.state.binder.getField('newEmail').value
newEmail = this.state.binder.getFieldValue('newEmail')
}
this.close(newEmail)
@@ -57,24 +58,42 @@ export class ChangeEmailModal extends React.Component {
return (
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose}
closeOnDimmerClick={false}>
<form className='user-form' id='emailForm' onSubmit={this.handleSubmit}>
<form id='emailForm' onSubmit={this.handleSubmit}>
<Column>
<Column.Item height={20} />
<Column.Item>
<Text>Change Email</Text>
</Column.Item>
<Column.Item>
<BoundInput label='New Email' name='newEmail' width={16}
message='Your new email address, e.g. xyz@abc.com, cannot be blank'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundButton primary submit='emailForm' name='submit' binder={this.state.binder}>
<Icon name='checkmark' /> OK
</BoundButton>
<Button color='red' onClick={this.handleClick}>
<Icon name='close' /> Cancel
</Button>
<Row>
<Row.Item width={20} />
<Row.Item grow>
<Column>
<Column.Item>
<Text>{this.props.oldEmail}</Text>
</Column.Item>
<Column.Item height={20} />
<Column.Item>
<BoundInput label='New Email' name='newEmail'
message='Your new email address, e.g. xyz@abc.com, cannot be blank'
binder={this.state.binder} />
</Column.Item>
<Column.Item height={20} />
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<Button onClick={this.handleClick} text='Cancel' />
</Row.Item>
<Row.Item width={20} />
<Row.Item>
<BoundButton submit='emailForm' name='submit' binder={this.state.binder} text='OK' />
</Row.Item>
</Row>
</Column.Item>
</Column>
</Row.Item>
<Row.Item width={20} />
</Row>
</Column.Item>
<Column.Item height={20} />
</Column>
</form>
</Modal>

View File

@@ -91,7 +91,7 @@ export class ProfileForm extends React.Component {
render() {
return (
<form className='profile-form' onSubmit={this.handleSubmit}>
<form onSubmit={this.handleSubmit} id='profileForm'>
<Column stackable>
<Column.Item>
<BoundInput label='First Name' name='firstName' width={8}

View File

@@ -35,7 +35,7 @@ export class UserList extends React.Component {
{
this.state.users
? this.state.users.map((user, index) =>
(<List.Item className='user-list-item' key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
(<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
active={user === this.props.selectedUser}>
<List.Icon name={user.administrator ? 'admin' : 'profile'} size={25} />
<List.Text>
@@ -50,7 +50,7 @@ export class UserList extends React.Component {
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.buttonHeight}>
<Button className='add-new-user' width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' />
<Button width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' />
</Column.Item>
</Column>
)

View File

@@ -24,7 +24,7 @@ export class Users extends Component {
yesNoModal: null,
messageModal: null,
waitModal: null,
changeEmailModal: null
changeEmailModal: null,
}
}
@@ -45,7 +45,7 @@ export class Users extends Component {
})
}
componentDidUnmount() {
componentWillUnmount() {
this.props.onChangeTitle('')
}
@@ -119,7 +119,7 @@ export class Users extends Component {
}
handleChangeEmail() {
this.setState({ changeEmailModal: {} })
this.setState({ changeEmailModal: { oldEmail: this.state.selectedUser.email } })
}
handleResendEmail() {
@@ -139,7 +139,7 @@ export class Users extends Component {
error: true,
waitModal: null,
messageModal: {
error: 'hand',
icon: 'hand',
message: 'Unable to request email change.',
detail: error.message,
}
@@ -155,25 +155,27 @@ export class Users extends Component {
this.setState({
waitModal: { message: 'Requesting Email Change...' }
})
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.`
}
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.`
}
})
}).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,
}
})
})
}
}
handleRemove() {
@@ -247,7 +249,7 @@ export class Users extends Component {
}
render() {
const { messageModal, yesNoModal } = this.state
const { messageModal, yesNoModal, changeEmailModal } = this.state
return (
<Fragment>
@@ -276,17 +278,19 @@ export class Users extends Component {
</Row>
</Column.Item>
<Column.Item height={20}>
<ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
<ChangeEmailModal open={!!changeEmailModal}
oldEmail={changeEmailModal && changeEmailModal.oldEmail}
onDismiss={this.handleChangeEmailDismiss} />
<YesNoMessageModal open={!!yesNoModal}
question={yesNoModal ? yesNoModal.question : ''}
onDismiss={yesNoModal ? yesNoModal.onDismiss : null} />
onDismiss={yesNoModal && yesNoModal.onDismiss} />
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
message={messageModal ? messageModal.message : ''}
detail={messageModal ? messageModal.detail : null}
detail={messageModal && messageModal.detail}
onDismiss={this.handleMessageModalDismiss} />
<WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />