Update edit user form to use base-form and update date-selector to emit changes

js/components/date_selector.js

@@ -62,18 +62,23 @@ export default {
 
     isMonthValid: function() {
       var _month = parseInt(this.month)
-
+      var valid = _month >= 0 && _month <= 12
-      return _month >= 0 && _month <= 12
+      this._emitChange('month', this.month, valid)
+      return valid
     },
 
     isDayValid: function() {
       var _day = parseInt(this.day)
-
+      var valid = _day >= 0 && _day <= this.daysMaxCalculation
-      return _day >= 0 && _day <= this.daysMaxCalculation
+      this._emitChange('day', this.day, valid)
+      return valid
     },
 
     isYearValid: function() {
-      return parseInt(this.year) >= 1
+      // Emit a change event
+      var valid = parseInt(this.year) >= 1
+      this._emitChange('year', this.year, valid)
+      return valid
     },
 
     isWithinDateRange: function() {
@@ -128,6 +133,12 @@ export default {
     },
   },
 
+  methods: {
+    _emitChange: function(name, value, valid) {
+      this.$root.$emit('field-change', { value, valid, name })
+    },
+  },
+
   render: function(createElement) {
     return createElement('p', 'Please implement inline-template')
   },

templates/fragments/edit_user_form.html

@@ -4,6 +4,7 @@
 {% from "components/phone_input.html" import PhoneInput %}
 {% from "components/date_picker.html" import DatePicker %}
 
+<base-form inline-template>
   <form method="POST" action='{{ form_action }}'>
     {{ form.csrf_token }}
     <div class='panel'>
@@ -33,8 +34,11 @@
     </div>
 
     <div class='action-group'>
-    <button class='usa-button usa-button-big' type='submit'>
+      <savebutton
-      {{ "fragments.edit_user_form.save_details_button" | translate }}
+        text='{{ "fragments.edit_user_form.save_details_button" | translate }}'
-    </button>
+        classes="usa-button-big"
+        :disabled="disabled">
+      </savebutton>
     </div>
   </form>
+</base-form>