refactor user password change

app/pods/protected/users/changepassword/password-form/component.js

@@ -0,0 +1,52 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  password: null,
+  passwordConfirm: null,
+  matches: false,
+
+  // Actions
+  "on-save": null,
+  "on-cancel": null,
+
+  updateField: function(property, value) {
+    this.set(property, value);
+    this.verifyPassword(this.get('password'), this.get('passwordConfirm'));
+  },
+
+  verifyPassword: function(password, passwordConfirm) {
+    if (password && passwordConfirm) {
+      if (password !== passwordConfirm) {
+        this.get('flashMessages').clearMessages();
+        this.get('flashMessages').error("Password fields don't match");
+        this.set('matches', false);
+      } else {
+        this.get('flashMessages').clearMessages();
+        this.set('matches', true);
+      }
+    }
+  },
+
+  actions: {
+    save: function() {
+      this.verifyPassword(this.get('password'), this.get('passwordConfirm'));
+      if (this.get('matches')) {
+        return this.attrs['on-save'](this.get('password'));
+      }
+    },
+
+    cancel: function() {
+      return this.attrs['on-cancel']();
+    },
+
+    passwordDidChange: function(value) {
+      this.updateField('password', value);
+    },
+
+    passwordConfirmDidChange: function(value) {
+      this.updateField('passwordConfirm', value);
+    },
+  },
+});

app/pods/protected/users/changepassword/password-form/template.hbs

@@ -0,0 +1,29 @@
+<div class="grid-1">
+  <div class="span-1">
+    <fieldset>
+      <legend>Change password</legend>
+      <form {{action 'save' on='submit'}}>
+        <ul>
+          <li>
+            <label>New Password</label>
+            {{one-way-input type="password" class="password" value=password update=(action "passwordDidChange")}}
+          </li>
+          <li>
+            <label>New Password (confirm)</label>
+            {{one-way-input type="password" class="password-confirm" value=passwordConfirm update=(action "passwordConfirmDidChange")}}
+          </li>
+          <li>
+            <a class="button-red smaller" {{action 'cancel'}}>
+              Cancel
+            </a>
+            {{#if matches}}
+              <button type="submit" class="button-green smaller submit-password">
+                Submit
+              </button>
+            {{/if}}
+          </li>
+        </ul>
+      </form>
+    </fieldset>
+  </div>
+</div>