Enabling test server and bug fixes
This commit is contained in:
John Lyon-Smith
@@ -1,13 +1,19 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import autobind from 'autobind-decorator'
|
||||
import { regExpPattern } from 'regexp-pattern'
|
||||
import { api } from 'src/API'
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import autobind from "autobind-decorator"
|
||||
import { regExpPattern } from "regexp-pattern"
|
||||
import { api } from "src/API"
|
||||
import {
|
||||
Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon, BoundDropdown,
|
||||
} from 'ui'
|
||||
import { FormBinder } from 'react-form-binder'
|
||||
import { sizeInfo } from 'ui/style'
|
||||
Row,
|
||||
Column,
|
||||
BoundInput,
|
||||
BoundButton,
|
||||
BoundCheckbox,
|
||||
BoundEmailIcon,
|
||||
BoundDropdown,
|
||||
} from "ui"
|
||||
import { FormBinder } from "react-form-binder"
|
||||
import { sizeInfo } from "ui/style"
|
||||
|
||||
export class UserForm extends React.Component {
|
||||
static propTypes = {
|
||||
@@ -16,63 +22,72 @@ export class UserForm extends React.Component {
|
||||
onRemove: PropTypes.func,
|
||||
onModifiedChanged: PropTypes.func,
|
||||
onChangeEmail: PropTypes.func,
|
||||
onResendEmail: PropTypes.func
|
||||
onResendEmail: PropTypes.func,
|
||||
onResetPassword: PropTypes.func,
|
||||
}
|
||||
|
||||
static bindings = {
|
||||
email: {
|
||||
isValid: (r, v) => (regExpPattern.email.test(v)),
|
||||
isDisabled: (r) => (r._id)
|
||||
isValid: (r, v) => regExpPattern.email.test(v),
|
||||
isDisabled: (r) => r._id,
|
||||
},
|
||||
emailValidated: {
|
||||
initValue: false,
|
||||
isDisabled: (r) => (!r._id)
|
||||
isDisabled: (r) => !r._id,
|
||||
},
|
||||
resetPassword: {
|
||||
noValue: true,
|
||||
isDisabled: (r) => !r._id || api.loggedInUser._id === r._id,
|
||||
},
|
||||
changeEmail: {
|
||||
noValue: true,
|
||||
isDisabled: (r) => (!r._id)
|
||||
isDisabled: (r) => !r._id,
|
||||
},
|
||||
resendEmail: {
|
||||
noValue: true,
|
||||
isDisabled: (r) => (!r._id || !!r.getFieldValue('emailValidated'))
|
||||
isDisabled: (r) => !r._id || !!r.getFieldValue("emailValidated"),
|
||||
},
|
||||
firstName: {
|
||||
isValid: (r, v) => (v !== '')
|
||||
isValid: (r, v) => v !== "",
|
||||
},
|
||||
lastName: {
|
||||
isValid: (r, v) => (v !== '')
|
||||
isValid: (r, v) => v !== "",
|
||||
},
|
||||
team: {
|
||||
isValid: true
|
||||
isValid: true,
|
||||
},
|
||||
administrator: {
|
||||
isValid: (r, v) => true,
|
||||
initValue: false,
|
||||
isDisabled: (r) => (api.loggedInUser._id === r._id), // Adding a new user
|
||||
isDisabled: (r) => api.loggedInUser._id === r._id, // Adding a new user
|
||||
alwaysGet: true,
|
||||
},
|
||||
remove: {
|
||||
noValue: true,
|
||||
isVisible: (r) => (r._id),
|
||||
isDisabled: (r) => (api.loggedInUser._id === r._id)
|
||||
isVisible: (r) => r._id,
|
||||
isDisabled: (r) => api.loggedInUser._id === r._id,
|
||||
},
|
||||
reset: {
|
||||
noValue: true,
|
||||
isDisabled: (r) => {
|
||||
return !r.anyModified
|
||||
}
|
||||
},
|
||||
},
|
||||
submit: {
|
||||
noValue: true,
|
||||
isDisabled: (r) => (!r.anyModified || !r.allValid),
|
||||
isDisabled: (r) => !r.anyModified || !r.allValid,
|
||||
},
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
binder: new FormBinder(props.user, UserForm.bindings, props.onModifiedChanged),
|
||||
teams: []
|
||||
binder: new FormBinder(
|
||||
props.user,
|
||||
UserForm.bindings,
|
||||
props.onModifiedChanged
|
||||
),
|
||||
teams: [],
|
||||
}
|
||||
|
||||
this.getTeams()
|
||||
@@ -81,17 +96,28 @@ export class UserForm extends React.Component {
|
||||
// TODO: This is not very efficient. Better to get the teams in User.js and pass them in
|
||||
// This however will always be up-to-date. Need to use the WebSocket to refresh.
|
||||
getTeams() {
|
||||
api.listTeams().then((list) => {
|
||||
this.setState({ teams: list.items.map((item) => ({ value: item._id, text: item.name, icon: 'team' })).sort((a, b) => (a.text.localeCompare(b.text))) })
|
||||
}).catch(() => {
|
||||
this.setState({ teams: [] })
|
||||
})
|
||||
api
|
||||
.listTeams()
|
||||
.then((list) => {
|
||||
this.setState({
|
||||
teams: list.items
|
||||
.map((item) => ({ value: item._id, text: item.name, icon: "team" }))
|
||||
.sort((a, b) => a.text.localeCompare(b.text)),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.setState({ teams: [] })
|
||||
})
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.user !== this.props.user) {
|
||||
this.setState({
|
||||
binder: new FormBinder(nextProps.user, UserForm.bindings, nextProps.onModifiedChanged)
|
||||
binder: new FormBinder(
|
||||
nextProps.user,
|
||||
UserForm.bindings,
|
||||
nextProps.onModifiedChanged
|
||||
),
|
||||
})
|
||||
|
||||
this.getTeams()
|
||||
@@ -113,7 +139,9 @@ export class UserForm extends React.Component {
|
||||
handleReset() {
|
||||
const { user, onModifiedChanged } = this.props
|
||||
|
||||
this.setState({ binder: new FormBinder(user, UserForm.bindings, onModifiedChanged) })
|
||||
this.setState({
|
||||
binder: new FormBinder(user, UserForm.bindings, onModifiedChanged),
|
||||
})
|
||||
|
||||
if (onModifiedChanged) {
|
||||
onModifiedChanged(false)
|
||||
@@ -122,19 +150,37 @@ export class UserForm extends React.Component {
|
||||
|
||||
@autobind
|
||||
handleChangeEmail() {
|
||||
this.props.onChangeEmail()
|
||||
const { onChangeEmail } = this.props
|
||||
|
||||
if (onChangeEmail) {
|
||||
onChangeEmail()
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleResendEmail() {
|
||||
this.props.onResendEmail()
|
||||
const { onResendEmail } = this.props
|
||||
if (onResendEmail) {
|
||||
onResendEmail()
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleResetPassword() {
|
||||
const { onResetPassword } = this.props
|
||||
if (onResetPassword) {
|
||||
onResetPassword()
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { binder, teams } = this.state
|
||||
|
||||
return (
|
||||
<form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}>
|
||||
<form
|
||||
style={{ width: "100%", height: "100%", overflow: "scroll" }}
|
||||
id="userForm"
|
||||
onSubmit={this.handleSubmit}>
|
||||
<Column>
|
||||
<Column.Item height={sizeInfo.formColumnSpacing} />
|
||||
<Row>
|
||||
@@ -145,39 +191,79 @@ export class UserForm extends React.Component {
|
||||
<Column.Item>
|
||||
<Row>
|
||||
<Row.Item grow>
|
||||
<BoundInput label='First Name' name='firstName' message='Must not be empty' binder={binder} />
|
||||
<BoundInput
|
||||
label="First Name"
|
||||
name="firstName"
|
||||
message="Must not be empty"
|
||||
binder={binder}
|
||||
/>
|
||||
</Row.Item>
|
||||
<Row.Item width={sizeInfo.formRowSpacing} />
|
||||
<Row.Item grow>
|
||||
<BoundInput label='Last Name' name='lastName' binder={binder} />
|
||||
<BoundInput
|
||||
label="Last Name"
|
||||
name="lastName"
|
||||
binder={binder}
|
||||
/>
|
||||
</Row.Item>
|
||||
</Row>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<Row>
|
||||
<Row.Item grow>
|
||||
<BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} />
|
||||
<BoundInput
|
||||
label="Email"
|
||||
name="email"
|
||||
message="Must be a valid email address. Required."
|
||||
binder={binder}
|
||||
/>
|
||||
</Row.Item>
|
||||
<Row.Item width={sizeInfo.formRowSpacing} />
|
||||
<Row.Item>
|
||||
<BoundEmailIcon name='emailValidated' binder={binder} />
|
||||
<BoundEmailIcon name="emailValidated" binder={binder} />
|
||||
</Row.Item>
|
||||
</Row>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<BoundDropdown name='team' label='Team' icon='team' items={teams} binder={binder} />
|
||||
<BoundDropdown
|
||||
name="team"
|
||||
label="Team"
|
||||
icon="team"
|
||||
items={teams}
|
||||
binder={binder}
|
||||
/>
|
||||
</Column.Item>
|
||||
<Column.Item height={sizeInfo.formColumnSpacing} />
|
||||
<Column.Item minHeight={sizeInfo.buttonHeight}>
|
||||
<Row>
|
||||
<Row.Item>
|
||||
<BoundButton text='Change Email' name='changeEmail' binder={binder}
|
||||
width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
|
||||
<BoundButton
|
||||
text="Reset Password"
|
||||
name="resetPassword"
|
||||
binder={binder}
|
||||
width={sizeInfo.buttonWideWidth}
|
||||
onClick={this.handleResetPassword}
|
||||
/>
|
||||
</Row.Item>
|
||||
<Row.Item grow />
|
||||
<Row.Item>
|
||||
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder}
|
||||
width={sizeInfo.buttonWideWidth} onClick={this.handleResendEmail} />
|
||||
<BoundButton
|
||||
text="Change Email"
|
||||
name="changeEmail"
|
||||
binder={binder}
|
||||
width={sizeInfo.buttonWideWidth}
|
||||
onClick={this.handleChangeEmail}
|
||||
/>
|
||||
</Row.Item>
|
||||
<Row.Item width={sizeInfo.formRowSpacing} />
|
||||
<Row.Item>
|
||||
<BoundButton
|
||||
text="Resend Confirmation Email"
|
||||
name="resendEmail"
|
||||
binder={binder}
|
||||
width={sizeInfo.buttonWideWidth}
|
||||
onClick={this.handleResendEmail}
|
||||
/>
|
||||
</Row.Item>
|
||||
</Row>
|
||||
</Column.Item>
|
||||
@@ -185,7 +271,11 @@ export class UserForm extends React.Component {
|
||||
<Column.Item>
|
||||
<Row>
|
||||
<Row.Item>
|
||||
<BoundCheckbox label={'Administrator'} name='administrator' binder={this.state.binder} />
|
||||
<BoundCheckbox
|
||||
label={"Administrator"}
|
||||
name="administrator"
|
||||
binder={this.state.binder}
|
||||
/>
|
||||
</Row.Item>
|
||||
<Row.Item grow />
|
||||
</Row>
|
||||
@@ -194,15 +284,30 @@ export class UserForm extends React.Component {
|
||||
<Column.Item minHeight={sizeInfo.buttonHeight}>
|
||||
<Row>
|
||||
<Row.Item>
|
||||
<BoundButton text='Reset' name='reset' binder={binder} onClick={this.handleReset} />
|
||||
<BoundButton
|
||||
text="Reset"
|
||||
name="reset"
|
||||
binder={binder}
|
||||
onClick={this.handleReset}
|
||||
/>
|
||||
</Row.Item>
|
||||
<Row.Item grow />
|
||||
<Row.Item>
|
||||
<BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} />
|
||||
<BoundButton
|
||||
text="Remove"
|
||||
name="remove"
|
||||
binder={binder}
|
||||
onClick={this.props.onRemove}
|
||||
/>
|
||||
</Row.Item>
|
||||
<Row.Item width={sizeInfo.formRowSpacing} />
|
||||
<Row.Item>
|
||||
<BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
|
||||
<BoundButton
|
||||
submit="userForm"
|
||||
text={binder._id ? "Save" : "Add"}
|
||||
name="submit"
|
||||
binder={binder}
|
||||
/>
|
||||
</Row.Item>
|
||||
</Row>
|
||||
</Column.Item>
|
||||
|
||||
@@ -148,6 +148,35 @@ export class Users extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleSendPasswordReset() {
|
||||
this.setState({ waitModal: "Sending Password Reset Email..." })
|
||||
api
|
||||
.sendResetPassword(this.state.selectedUser.email)
|
||||
.then(() => {
|
||||
this.setState({
|
||||
waitModal: null,
|
||||
messageModal: {
|
||||
icon: "thumb",
|
||||
message: `An email has been sent to '${
|
||||
this.state.selectedUser.email
|
||||
}' with instructions on how to reset their password`,
|
||||
},
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({
|
||||
error: true,
|
||||
waitModal: null,
|
||||
messageModal: {
|
||||
icon: "hand",
|
||||
message: "Unable to request password reset.",
|
||||
detail: error.message,
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleResendEmail() {
|
||||
this.setState({
|
||||
@@ -339,6 +368,7 @@ export class Users extends Component {
|
||||
onModifiedChanged={this.handleModifiedChanged}
|
||||
onChangeEmail={this.handleChangeEmail}
|
||||
onResendEmail={this.handleResendEmail}
|
||||
onResetPassword={this.handleSendPasswordReset}
|
||||
/>
|
||||
) : (
|
||||
<UserFormPlaceholder />
|
||||
|
||||
Reference in New Issue
Block a user