Basic UI elements in place

website/src/Auth/ResetPassword.js

@@ -1,16 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Text, Column } from 'ui'
-import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
-import { MessageDialog, WaitDialog } from '../Dialog'
+import { Text, Column, BoundInput, BoundButton } from 'ui'
+import { MessageModal, WaitModal } from '../Modal'
 import { api } from '../helpers'
+import { FormBinder } from 'react-form-binder'
 
 export class ResetPassword extends React.Component {
   static propTypes = {
     history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
   }
 
-  static validations = {
+  static bindings = {
     newPassword: {
       alwaysGet: true,
       isValid: (r, v) => (v.length >= 6)
@@ -27,27 +27,27 @@ export class ResetPassword extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      validator: new Validator({}, ResetPassword.validations),
-      messageDialog: null,
-      waitDialog: null
+      binder: new FormBinder({}, ResetPassword.bindings),
+      messageModal: null,
+      waitModal: null
     }
     this.handleSubmit = this.handleSubmit.bind(this)
-    this.handleMessageDialogDismiss = this.handleMessageDialogDismiss.bind(this)
+    this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
   }
 
   handleSubmit() {
-    const obj = this.state.validator.getValues()
+    const obj = this.state.binder.getValues()
     const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')
 
-    this.setState({ waitDialog: { message: 'Setting Password...' } })
+    this.setState({ waitModal: { message: 'Setting Password...' } })
     api.resetPassword({ newPassword: obj.newPassword, passwordToken }).then(() => {
-      this.setState({ waitDialog: null })
+      this.setState({ waitModal: null })
       this.props.history.replace('/login')
     }).catch((error) => {
       this.setState({
-        validator: new Validator({}, ResetPassword.validations), // Reset to avoid accidental rapid retries
-        waitDialog: null,
-        messageDialog: {
+        binder: new FormBinder({}, ResetPassword.bindings), // Reset to avoid accidental rapid retries
+        waitModal: null,
+        messageModal: {
           title: 'We had a problem changing your password',
           message: error.message
         }
@@ -55,8 +55,8 @@ export class ResetPassword extends React.Component {
     })
   }
 
-  handleMessageDialogDismiss() {
-    this.setState({ messageDialog: null })
+  handleMessageModalDismiss() {
+    this.setState({ messageModal: null })
   }
 
   render() {
@@ -68,14 +68,14 @@ export class ResetPassword extends React.Component {
               <Text size='large'>Reset Password</Text>
             </Column.Item>
             <Column.Item>
-              <ValidatedInput label='New Password' password name='newPassword'
+              <BoundInput label='New Password' password name='newPassword'
                 message='A new password, cannot be blank or the same as your old password'
-                width={16} validator={this.state.validator} />
+                width={16} binder={this.state.binder} />
             </Column.Item>
             <Column.Item>
-              <ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword'
+              <BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
                 message='The new password again, must match and cannot be blank'
-                width={16} validator={this.state.validator} />
+                width={16} binder={this.state.binder} />
             </Column.Item>
             <Column.Item>
               <Text>
@@ -85,19 +85,19 @@ export class ResetPassword extends React.Component {
               </Text>
             </Column.Item>
             <Column.Item>
-              <ValidatedButton className='submit' name='submit' content='Submit'
-                submit validator={this.state.validator} />
+              <BoundButton className='submit' name='submit' content='Submit'
+                submit binder={this.state.binder} />
             </Column.Item>
           </Column>
         </form>
 
-        <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} />
 
-        <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 : ''} />
       </div>
     )
   }