add reset functionality for InputDate and LoanForm

js/components/ascribe_forms/form.js

@@ -41,7 +41,9 @@ let Form = React.createClass({
         // It will make use of the GlobalNotification
         isInline: React.PropTypes.bool,
 
-        autoComplete: React.PropTypes.string
+        autoComplete: React.PropTypes.string,
+
+        onReset: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -61,6 +63,12 @@ let Form = React.createClass({
     },
 
     reset() {
+        // If onReset prop is defined from outside,
+        // notify component that a form reset is happening.
+        if(this.props.onReset && typeof this.props.onReset === 'function') {
+            this.props.onReset();
+        }
+
         for(let ref in this.refs) {
             if (typeof this.refs[ref].reset === 'function'){
                 this.refs[ref].reset();
@@ -184,8 +192,16 @@ let Form = React.createClass({
             buttons = (
                 <div className="row" style={{margin: 0}}>
                     <p className="pull-right">
-                        <Button className="btn btn-default btn-sm ascribe-margin-1px" type="submit">{this.props.buttonSubmitText}</Button>
+                        <Button
-                        <Button className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.reset}>CANCEL</Button>
+                            className="btn btn-default btn-sm ascribe-margin-1px"
+                            type="submit">
+                            {this.props.buttonSubmitText}
+                        </Button>
+                        <Button
+                            className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            type="reset">
+                            CANCEL
+                        </Button>
                     </p>
                 </div>
             );

js/components/ascribe_forms/form_loan.js

@@ -69,10 +69,11 @@ let LoanForm = React.createClass({
     },
 
     handleOnChange(event) {
-        let potentialEmail = event.target.value;
+        // event.target.value is the submitted email of the loanee
-
+        if(event && event.target && event.target.value && event.target.value.match(/.*@.*/)) {
-        if(potentialEmail.match(/.*@.*/)) {
+            LoanContractActions.fetchLoanContract(event.target.value);
-            LoanContractActions.fetchLoanContract(potentialEmail);
+        } else {
+            LoanContractActions.flushLoanContract();
         }
     },
 
@@ -143,6 +144,7 @@ let LoanForm = React.createClass({
                 ref='form'
                 url={this.props.url}
                 getFormData={this.getFormData}
+                onReset={this.handleOnChange}
                 handleSuccess={this.props.handleSuccess}
                 buttons={this.getButtons()}
                 spinner={

js/components/ascribe_forms/form_register_piece.js

@@ -80,19 +80,12 @@ let RegisterPieceForm = React.createClass({
                 url={ApiUrls.pieces_list}
                 handleSuccess={this.props.handleSuccess}
                 buttons={
-                    <span>
                     <button
                         type="submit"
                         className="btn ascribe-btn ascribe-btn-login"
                         disabled={!this.state.isUploadReady || this.props.disabled}>
                         {this.props.submitMessage}
                     </button>
-                        <button
-                            type="reset"
-                            className="btn ascribe-btn ascribe-btn-login">
-                            Reset
-                        </button>
-                    </span>
                 }
                 spinner={
                     <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">

js/components/ascribe_forms/input_date.js

@@ -18,7 +18,8 @@ let InputDate = React.createClass({
 
     getInitialState() {
         return {
-            value: null
+            value: null,
+            value_moment: null
         };
     },
 
@@ -45,6 +46,10 @@ let InputDate = React.createClass({
         });
     },
 
+    reset() {
+        this.setState(this.getInitialState());
+    },
+
     render() {
         return (
             <div>