From 45703e67ee5aaac58e6b0ef43d064d80aa9182d3 Mon Sep 17 00:00:00 2001
From: Matthew Dillon <mrdillon@alaska.edu>
Date: Fri, 6 Nov 2015 11:56:38 -0700
Subject: [PATCH] refactor user password change

---
 .../users/changepassword/controller.js        | 31 +++++------
 .../changepassword/password-form/component.js | 52 +++++++++++++++++++
 .../changepassword/password-form/template.hbs | 29 +++++++++++
 .../protected/users/changepassword/route.js   | 11 ++--
 .../users/changepassword/template.hbs         | 29 ++---------
 5 files changed, 107 insertions(+), 45 deletions(-)
 create mode 100644 app/pods/protected/users/changepassword/password-form/component.js
 create mode 100644 app/pods/protected/users/changepassword/password-form/template.hbs

diff --git a/app/pods/protected/users/changepassword/controller.js b/app/pods/protected/users/changepassword/controller.js
index b8d100e..3aed813 100644
--- a/app/pods/protected/users/changepassword/controller.js
+++ b/app/pods/protected/users/changepassword/controller.js
@@ -1,33 +1,30 @@
 import Ember from 'ember';
 import ajaxRequest from '../../../../utils/ajax-request';
 
-export default Ember.Controller.extend({
-  session: Ember.inject.service('session'),
-  currentUser: Ember.inject.service('session-account'),
+const { Controller, inject: { service } } = Ember;
 
-  passwordConfirm: null,
+export default Controller.extend({
+  session: service(),
+  currentUser: service('session-account'),
 
   actions: {
-    save: function() {
-      if (this.get('password') !== this.get('passwordConfirm')) {
-        this.get('flashMessages').clearMessages();
-        this.get('flashMessages').error("Password fields don't match");
-        return;
-      }
-
-      let url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/users/password`;
-      let options = {
+    save: function(password) {
+      const url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/users/password`;
+      const id = this.get('currentUser.account.id');
+      const options = {
         method: 'POST',
         data: {
-          id: this.get('currentUser.account.id'),
-          password: this.get('password'),
+          id: id,
+          password: password,
         },
       };
       ajaxRequest(url, options, this.get('session'));
-      this.transitionToRoute('protected.users.index');
+      this.transitionToRoute('protected.users.show', id);
       this.get('flashMessages').information('Your password has been changed.');
     },
 
+    cancel: function() {
+      this.transitionToRoute('protected.users.show', this.get('currentUser.account.id'));
+    },
   },
-
 });
diff --git a/app/pods/protected/users/changepassword/password-form/component.js b/app/pods/protected/users/changepassword/password-form/component.js
new file mode 100644
index 0000000..494885e
--- /dev/null
+++ b/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);
+    },
+  },
+});
diff --git a/app/pods/protected/users/changepassword/password-form/template.hbs b/app/pods/protected/users/changepassword/password-form/template.hbs
new file mode 100644
index 0000000..5d30c35
--- /dev/null
+++ b/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>
diff --git a/app/pods/protected/users/changepassword/route.js b/app/pods/protected/users/changepassword/route.js
index ce869dd..f6da398 100644
--- a/app/pods/protected/users/changepassword/route.js
+++ b/app/pods/protected/users/changepassword/route.js
@@ -1,16 +1,19 @@
 import Ember from 'ember';
 
-export default Ember.Route.extend({
-  currentUser: Ember.inject.service('session-account'),
+const { Route, inject: { service } } = Ember;
+
+export default Route.extend({
+  currentUser: service('session-account'),
 
   beforeModel: function(transition) {
     this._super(transition);
 
-    let user_id = transition.params['protected.users.changepassword'].user_id;
+    // Only the logged in user can change their password
+    const user_id = transition.params['protected.users.changepassword'].user_id;
 
     this.get('currentUser.account').then((user) => {
       if (user.get('id') !== user_id) {
-        this.transitionTo('protected.users.index');
+        this.transitionTo('protected.users.show', user.get('id'));
       }
     });
   }
diff --git a/app/pods/protected/users/changepassword/template.hbs b/app/pods/protected/users/changepassword/template.hbs
index b22db6c..b7509c1 100644
--- a/app/pods/protected/users/changepassword/template.hbs
+++ b/app/pods/protected/users/changepassword/template.hbs
@@ -1,24 +1,5 @@
-<div class="grid-1">
-  <div class="span-1">
-    <fieldset>
-      <legend>Change password</legend>
-      <form {{action 'save' on='submit'}}>
-        <ul>
-          <li>
-            <label>New Password</label>
-            {{input type="password" value=password}}
-          </li>
-          <li>
-            <label>New Password (confirm)</label>
-            {{input type="password" value=passwordConfirm}}
-          </li>
-          <li>
-            <button type="submit" class="button-green smaller">
-              Submit
-            </button>
-          </li>
-        </ul>
-      </form>
-    </fieldset>
-  </div>
-</div>
+{{
+  protected/users/changepassword/password-form
+  on-save=(action "save")
+  on-cancel=(action "cancel")
+}}