Initial commit

website/src/Dialog/ChangeEmailDialog.js

@@ -0,0 +1,85 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { autoBind } from 'auto-bind2'
+import { Modal, Button, Icon, Header, Grid, Form } from 'semantic-ui-react'
+import { ValidatedInput, ValidatedActionsButton, 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}>
+        <Header color='black' icon='edit' content='Change Email' />
+        <Modal.Content>
+          <Form className='user-form' id='emailForm' onSubmit={this.handleSubmit}>
+            <Grid>
+              <Grid.Column width={16}>
+                <Form.Group>
+                  <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} />
+                </Form.Group>
+              </Grid.Column>
+            </Grid>
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <ValidatedActionsButton primary submit form='emailForm' name='submit' validator={this.state.validator}>
+            <Icon name='checkmark' /> OK
+          </ValidatedActionsButton>
+          <Button color='red' onClick={this.handleClick}>
+            <Icon name='close' /> Cancel
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    )
+  }
+}