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

Basic UI elements in place

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-27 12:16:27 -08:00
parent 5faa4600f5
commit 73b5cf6caa
49 changed files with 525 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
website/src/Profile/Profile.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import { ProfileForm } from './ProfileForm'
import { Constants, api } from '../helpers'
import { WaitDialog, MessageDialog, ChangePasswordDialog, ChangeEmailDialog } from '../Dialog'
import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal'
import { autoBind } from 'auto-bind2'
export class Profile extends React.Component {
@@ -11,11 +11,11 @@ export class Profile extends React.Component {
const user = api.loggedInUser
this.state = {
messageDialog: null,
waitDialog: null,
changePasswordDialog: null,
changeEmailDialog: null,
progressDialog: null,
messageModal: null,
waitModal: null,
changePasswordModal: null,
changeEmailModal: null,
progressModal: null,
uploadPercent: 0,
user,
userImageUrl: api.makeImageUrl(user.imageId, Constants.bigUserImageSize)
@@ -35,32 +35,32 @@ export class Profile extends React.Component {
}
handleSaved(user) {
this.setState({ waitDialog: { message: 'Updating Profile' } })
this.setState({ waitModal: { message: 'Updating Profile' } })
api.updateUser(user).then((updatedUser) => {
this.setState({
waitDialog: null,
waitModal: null,
user: updatedUser
})
}).catch((error) => {
this.setState({
waitDialog: null,
messageDialog: { title: 'Update Error...', message: `Unable to save the profile changes. ${error.message}` }
waitModal: null,
messageModal: { title: 'Update Error...', message: `Unable to save the profile changes. ${error.message}` }
})
})
}
handleMessageDialogDismiss() {
this.setState({ messageDialog: null })
handleMessageModalDismiss() {
this.setState({ messageModal: null })
}
handleChangePassword() {
this.setState({ changePasswordDialog: true })
this.setState({ changePasswordModal: true })
}
handleSelectImage(file) {
this.setState({ progressDialog: { message: `Uploading image '${file.name}'...`, file }, uploadPercent: 0 })
this.setState({ progressModal: { message: `Uploading image '${file.name}'...`, file }, uploadPercent: 0 })
api.upload(file, this.handleProgress).then((uploadData) => {
this.setState({ progressDialog: null })
this.setState({ progressModal: null })
return api.setUserImage({
_id: api.loggedInUser._id,
imageId: uploadData.assetId,
@@ -70,14 +70,14 @@ export class Profile extends React.Component {
}).catch((error) => {
// TODO: if the upload succeeds but the setUserImage fails, delete the uploaded image
this.setState({
progressDialog: null,
messageDialog: { title: 'Upload Error...', message: `Unable to upload the file. ${error.message}` }
progressModal: null,
messageModal: { title: 'Upload Error...', message: `Unable to upload the file. ${error.message}` }
})
})
}
handleProgress(uploadData) {
if (this.state.progressDialog) {
if (this.state.progressModal) {
this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) })
return true
} else {
@@ -86,22 +86,22 @@ export class Profile extends React.Component {
}
handleUploadCancel(result) {
this.setState({ progressDialog: null })
this.setState({ progressModal: null })
}
handleChangePasswordDismiss(passwords) {
this.setState({ changePasswordDialog: false })
this.setState({ changePasswordModal: false })
if (passwords) {
this.setState({
waitDialog: { message: 'Changing Password' }
waitModal: { message: 'Changing Password' }
})
api.changePassword(passwords).then(() => {
this.setState({ waitDialog: false })
this.setState({ waitModal: false })
}).catch((error) => {
this.setState({
waitDialog: false,
messageDialog: {
waitModal: false,
messageModal: {
title: 'Changing Password Error',
message: `Unable to change password. ${error.message}.`
}
@@ -111,21 +111,21 @@ export class Profile extends React.Component {
}
handleChangeEmail() {
this.setState({ changeEmailDialog: {} })
this.setState({ changeEmailModal: {} })
}
handleChangeEmailDismiss(newEmail) {
this.setState({ changeEmailDialog: null })
this.setState({ changeEmailModal: null })
if (!newEmail) {
return
}
this.setState({
waitDialog: { message: 'Requesting Email Change...' }
waitModal: { message: 'Requesting Email Change...' }
})
api.sendConfirmEmail({ newEmail }).then(() => {
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: false,
title: 'Email Change Requested...',
message: `An email has been sent to '${newEmail}' with a link that you need to click on to finish changing your email.`
@@ -134,8 +134,8 @@ export class Profile extends React.Component {
}).catch((error) => {
this.setState({
error: true,
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: true,
title: 'Email Change Error...',
message: `Unable to request email change. ${error ? error.message : ''}`
@@ -155,16 +155,16 @@ export class Profile extends React.Component {
onChangeEmail={this.handleChangeEmail}
userImageUrl={this.state.userImageUrl} />
<MessageDialog error open={!!this.state.messageDialog}
title={this.state.messageDialog ? this.state.messageDialog.title : ''}
message={this.state.messageDialog ? this.state.messageDialog.message : ''}
onDismiss={this.handleMessageDialogDismiss} />
<MessageModal error open={!!this.state.messageModal}
title={this.state.messageModal ? this.state.messageModal.title : ''}
message={this.state.messageModal ? this.state.messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
<ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />
<ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
<WaitDialog active={!!this.state.waitDialog} message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
<WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
<ChangePasswordDialog open={!!this.state.changePasswordDialog} onDismiss={this.handleChangePasswordDismiss} />
<ChangePasswordModal open={!!this.state.changePasswordModal} onDismiss={this.handleChangePasswordDismiss} />
</div>
)
}

32
website/src/Profile/ProfileForm.js
View File

@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Column, Button } from 'ui'
import { Column, Button, BoundInput, BoundButton } from 'ui'
import { regExpPattern } from 'regexp-pattern'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { FormBinder } from 'react-form-binder'
export class ProfileForm extends React.Component {
static propTypes = {
@@ -13,7 +13,7 @@ export class ProfileForm extends React.Component {
onChangeEmail: PropTypes.func
}
static validations = {
static bindings = {
email: {
isValid: (r, v) => (v !== ''),
isDisabled: (r) => (!!r._id)
@@ -68,16 +68,16 @@ export class ProfileForm extends React.Component {
this.handleSubmit = this.handleSubmit.bind(this)
this.state = {
validator: new Validator(
this.props.user, ProfileForm.validations, this.props.onModifiedChanged)
binder: new FormBinder(
this.props.user, ProfileForm.bindings, this.props.onModifiedChanged)
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.user !== this.props.user) {
this.setState({
validator: new Validator(
nextProps.user, ProfileForm.validations, nextProps.onModifiedChanged)
binder: new FormBinder(
nextProps.user, ProfileForm.bindings, nextProps.onModifiedChanged)
})
}
}
@@ -85,7 +85,7 @@ export class ProfileForm extends React.Component {
handleSubmit(e) {
e.preventDefault()
let obj = this.state.validator.getValues()
let obj = this.state.binder.getValues()
if (obj && this.props.onSaved) {
this.props.onSaved(obj)
@@ -97,16 +97,16 @@ export class ProfileForm extends React.Component {
<form className='profile-form' onSubmit={this.handleSubmit}>
<Column stackable>
<Column.Item>
<ValidatedInput label='First Name' name='firstName' width={8}
validator={this.state.validator} />
<BoundInput label='First Name' name='firstName' width={8}
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<ValidatedInput label='Last Name' name='lastName' width={8}
validator={this.state.validator} />
<BoundInput label='Last Name' name='lastName' width={8}
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
validator={this.state.validator} />
<BoundInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<Button fluid content={'Change Email'} label='&nbsp;'
@@ -115,8 +115,8 @@ export class ProfileForm extends React.Component {
width={4} onClick={this.props.onChangePassword} />
</Column.Item>
<Column.Item>
<ValidatedButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
validator={this.state.validator} />
<BoundButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
binder={this.state.binder} />
</Column.Item>
</Column>
</form>