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`)) return Promise.reject(createError.NotFound(`User with email '${existingEmail}' was not found`))
} else if (conflictingUser) { } else if (conflictingUser) {
return Promise.reject(createError.BadRequest(`A user with '${newEmail}' already exists`)) 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')) 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> <Text>The email address of an existing user to send the password reset link to.</Text>
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<BoundButton className='submit' name='submit' content='Submit' <BoundButton name='submit' content='Submit'
primary submit binder={this.state.binder}>Submit</BoundButton> primary submit binder={this.state.binder}>Submit</BoundButton>
</Column.Item> </Column.Item>
</Column> </Column>

View File

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

View File

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

View File

@@ -91,7 +91,7 @@ export class ProfileForm extends React.Component {
render() { render() {
return ( return (
<form className='profile-form' onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit} id='profileForm'>
<Column stackable> <Column stackable>
<Column.Item> <Column.Item>
<BoundInput label='First Name' name='firstName' width={8} <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
? this.state.users.map((user, index) => ? 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}> active={user === this.props.selectedUser}>
<List.Icon name={user.administrator ? 'admin' : 'profile'} size={25} /> <List.Icon name={user.administrator ? 'admin' : 'profile'} size={25} />
<List.Text> <List.Text>
@@ -50,7 +50,7 @@ export class UserList extends React.Component {
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={20} />
<Column.Item height={sizeInfo.buttonHeight}> <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.Item>
</Column> </Column>
) )

View File

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