Basic UI elements in place

2018-02-27 12:16:27 -08:00
parent 5faa4600f5
commit 73b5cf6caa
49 changed files with 525 additions and 937 deletions
--- a/website/src/Modal/ChangePasswordModal.js
+++ b/website/src/Modal/ChangePasswordModal.js
@@ -0,0 +1,105 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { autoBind } from 'auto-bind2'
+import { Modal, Button, Icon, Column, Row, Text, BoundInput, BoundButton } from 'ui'
+import { FormBinder } from 'react-form-binder'
+
+export class ChangePasswordModal extends React.Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    onDismiss: PropTypes.func
+  }
+
+  static bindings = {
+    oldPassword: {
+      alwaysGet: true,
+      isValid: (r, v) => (v !== '')
+    },
+    newPassword: {
+      alwaysGet: true,
+      isValid: (r, v) => (v !== '' && v !== r.fields.oldPassword.value)
+    },
+    reenteredNewPassword: {
+      alwaysGet: true,
+      isValid: (r, v) => (v !== '' && v === r.fields.newPassword.value)
+    },
+    submit: {
+      isDisabled: (r) => (!r.allValid),
+      nonValue: true
+    }
+  }
+
+  constructor(props) {
+    super(props)
+    autoBind(this, (name) => (name.startsWith('handle')))
+    this.state = {
+      binder: new FormBinder({}, ChangePasswordModal.bindings)
+    }
+  }
+
+  close(passwords) {
+    this.state.binder = new FormBinder({}, ChangePasswordModal.bindings)
+    this.props.onDismiss(passwords)
+  }
+
+  handleClose() {
+    close(null)
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    let passwords = null
+
+    if (this.state.binder.allValid) {
+      const oldPassword = this.state.binder.getField('oldPassword').value
+      const newPassword = this.state.binder.getField('newPassword').value
+      passwords = { oldPassword, newPassword }
+    }
+    this.close(passwords)
+  }
+
+  handleClick(e) {
+    this.close(null)
+  }
+
+  render() {
+    return (
+      <Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose} closeOnDimmerClick={false}>
+        <form id='passwordForm' onSubmit={this.handleSubmit}>
+          <Column.Item color='black' icon='edit'>
+            <Text size='large'>Change Password</Text>
+          </Column.Item>
+          <Column.Item>
+            <Column>
+              <Column.Item>
+                <BoundInput label='Current Password' password name='oldPassword'
+                  message='Your existing password, cannot be blank'
+                  width={8} binder={this.state.binder} />
+              </Column.Item>
+              <Column.Item>
+                <BoundInput label='New Password' password name='newPassword'
+                  message='A new password, cannot be blank or the same as your old password'
+                  width={8} binder={this.state.binder} />
+              </Column.Item>
+              <Column.Item>
+                <BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
+                  message='The new password again, must match and cannot be blank'
+                  width={8} binder={this.state.binder} />
+              </Column.Item>
+            </Column>
+          </Column.Item>
+          <Column.Item>
+            <Row>
+              <BoundButton primary submit form='passwordForm' name='submit' binder={this.state.binder}>
+                <Icon name='checkmark' /> OK
+              </BoundButton>
+              <Button color='red' onClick={this.handleClick}>
+                <Icon name='close' /> Cancel
+              </Button>
+            </Row>
+          </Column.Item>
+        </form>
+      </Modal>
+    )
+  }
+}