84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { autoBind } from 'auto-bind2'
|
|
import { Modal, Button, Icon, Column, Text } from 'ui'
|
|
import { ValidatedInput, ValidatedButton, Validator } from '../Validated'
|
|
import { regExpPattern } from 'regexp-pattern'
|
|
|
|
export class ChangeEmailDialog extends React.Component {
|
|
static propTypes = {
|
|
open: PropTypes.bool,
|
|
onDismiss: PropTypes.func
|
|
}
|
|
|
|
static validations = {
|
|
newEmail: {
|
|
isValid: (r, v) => (v !== '' && regExpPattern.email.test(v))
|
|
},
|
|
submit: {
|
|
isDisabled: (r) => (!r.allValid),
|
|
nonValue: true
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
autoBind(this, (name) => (name.startsWith('handle')))
|
|
this.state = {
|
|
validator: new Validator({}, ChangeEmailDialog.validations)
|
|
}
|
|
}
|
|
|
|
close(newEmail) {
|
|
this.state.validator = new Validator({}, ChangeEmailDialog.validations)
|
|
this.props.onDismiss(newEmail)
|
|
}
|
|
|
|
handleClose() {
|
|
this.close(null)
|
|
}
|
|
|
|
handleSubmit(e) {
|
|
e.preventDefault()
|
|
let newEmail = null
|
|
|
|
if (this.state.validator.anyModified && this.state.validator.allValid) {
|
|
newEmail = this.state.validator.getField('newEmail').value
|
|
}
|
|
|
|
this.close(newEmail)
|
|
}
|
|
|
|
handleClick(e) {
|
|
this.close(null)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose}
|
|
closeOnDimmerClick={false}>
|
|
<form className='user-form' id='emailForm' onSubmit={this.handleSubmit}>
|
|
<Column>
|
|
<Column.Item>
|
|
<Text>Change Email</Text>
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<ValidatedInput label='New Email' name='newEmail' width={16}
|
|
message='Your new email address, e.g. xyz@abc.com, cannot be blank'
|
|
validator={this.state.validator} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<ValidatedButton primary submit form='emailForm' name='submit' validator={this.state.validator}>
|
|
<Icon name='checkmark' /> OK
|
|
</ValidatedButton>
|
|
<Button color='red' onClick={this.handleClick}>
|
|
<Icon name='close' /> Cancel
|
|
</Button>
|
|
</Column.Item>
|
|
</Column>
|
|
</form>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|