From 0b22306da87396c0a7388150862c04b182ae3d40 Mon Sep 17 00:00:00 2001
From: Offir Golan <offirgolan@yahoo-inc.com>
Date: Wed, 16 Dec 2015 15:37:43 -0800
Subject: [PATCH] Reset/Clear form

---
 app/components/validated-input.js | 13 +++++++++++++
 app/controllers/index.js          | 18 ++++++++++++++++++
 app/templates/index.hbs           |  1 +
 3 files changed, 32 insertions(+)

diff --git a/app/components/validated-input.js b/app/components/validated-input.js
index 88c1512..71bcf3e 100644
--- a/app/components/validated-input.js
+++ b/app/components/validated-input.js
@@ -41,6 +41,19 @@ export default Ember.Component.extend({
     run.debounce(this, this.setValue, 500, false);
   }),
 
+  /**
+   * When we reset the form, we manually set `value` so we have to make sure to propogate that change
+   * to the input field
+   */
+  syncRawInputValue: observer('value', function() {
+    let value = this.get('value');
+    let rawInputValue = this.get('rawInputValue');
+
+    if(value !== rawInputValue) {
+      this.set('rawInputValue', value);
+    }
+  }),
+
   showMessage: computed('attributeValidation.isDirty', 'isInvalid', 'didValidate', function() {
     return (this.get('attributeValidation.isDirty') || this.get('didValidate')) && this.get('isInvalid');
   }),
diff --git a/app/controllers/index.js b/app/controllers/index.js
index c2c9f8b..fe5be0c 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -5,6 +5,10 @@
 
 import Ember from 'ember';
 
+const {
+  get
+} = Ember;
+
 export default Ember.Controller.extend({
   showAlert: false,
   isRegistered: false,
@@ -38,6 +42,20 @@ export default Ember.Controller.extend({
 
       dismissAlert() {
         this.set('showAlert', false);
+      },
+
+      reset() {
+        let model = this.get('model');
+        let details = model.get('details');
+        get(model.constructor, 'attributes').forEach((value, attr) => {
+          model.set(attr, null);
+        });
+        get(details.constructor, 'attributes').forEach((value, attr) => {
+          details.set(attr, null);
+        });
+        model.set('emailConfirmation', null); // Dummy attribute used to confirm the email address so it's not defined in the constructor
+        this.set('didValidate', false);
+        this.send('dismissAlert');
       }
   }
 });
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 27d045f..e09de98 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -44,6 +44,7 @@
                   On submit, a manual validation is run which will validate both the <strong>User</strong> and  <strong>User Details</strong> models. If both are valid, then the user can continue to the next screen.
               </div>
               <button id="signup" {{action 'submit'}}>Sign Up</button>
+              <button id="reset" style="background: #A0A0A0" {{action 'reset'}}>Reset</button>
             </div>
         </form>
       </div>