Refactor new user creation

app/pods/users/new/controller.js

@@ -1,30 +1,29 @@
 import Ember from 'ember';
 import ajaxError from '../../../utils/ajax-error';
 
-export default Ember.Controller.extend({
-  passwordConfirm: null,
+const { Controller } = Ember;
+
+export default Controller.extend({
+  isLoading: false,
 
   actions: {
-    save: function() {
-      let user = this.get('user');
-
-      // All validation is server-side, except for password verification matching
-      if (user.get('password') !== this.get('passwordConfirm')) {
-        this.get('flashMessages').clearMessages();
-        this.get('flashMessages').error("Password fields don't match");
-        return;
-      }
+    save: function(properties) {
+      const user = this.get('model');
+      user.setProperties(properties);
 
       if (user.get('hasDirtyAttributes')) {
+        this.set('isLoading', true);
         user.save().then(() => {
-          this.transitionTo('login').then(() => {
+          this.transitionToRoute('login').then(() => {
             this.get('flashMessages').information(`You have successfully signed up.
               Please check your email for further instructions.`);
           });
         }, () => {
+          this.set('isLoading', false);
           ajaxError(user.get('errors'), this.get('flashMessages'));
         });
       }
     },
+
   },
 });

app/pods/users/new/new-user-form/component.js

@@ -0,0 +1,66 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  // Read-only attributes
+  user: null,
+  isLoading: null,
+
+  // Actions
+  "on-save": null,
+  "on-cancel": null,
+
+  // Property mapping
+  propertiesList: ['name', 'email', 'password', 'passwordConfirm'],
+  name: null,
+  email: null,
+  password: null,
+  passwordConfirm: null,
+
+  resetOnInit: Ember.on('init', function() {
+    this.get('propertiesList').forEach((field) => {
+      const valueInUser = this.get('user').get(field);
+      this.set(field, valueInUser);
+    });
+  }),
+
+  updateField: function(property, value) {
+    this.set(property, value);
+    // Manually compare against passed in value
+    if (this.get('user').get(property) !== value) {
+      this.set('isDirty', true);
+    } else {
+      this.set('isDirty', false);
+    }
+  },
+
+  actions: {
+    save: function() {
+      // All validation is server-side, except for password verification matching
+      if (this.get('password') !== this.get('passwordConfirm')) {
+        this.get('flashMessages').clearMessages();
+        this.get('flashMessages').error("Password fields don't match");
+        return;
+      }
+
+      return this.attrs['on-save'](this.getProperties(this.get('propertiesList')));
+    },
+
+    nameDidChange: function(value) {
+      this.updateField('name', value);
+    },
+
+    emailDidChange: function(value) {
+      this.updateField('email', value);
+    },
+
+    passwordDidChange: function(value) {
+      this.updateField('password', value);
+    },
+
+    passwordConfirmDidChange: function(value) {
+      this.updateField('passwordConfirm', value);
+    }
+  }
+});

app/pods/users/new/new-user-form/template.hbs

@@ -0,0 +1,36 @@
+{{#if isLoading}}
+  {{loading-panel}}
+{{else}}
+  <div class="grid-1">
+    <div class="span-1">
+      <fieldset>
+        <legend>New User Signup</legend>
+        <form {{action 'save' on='submit'}}>
+          <ul>
+            <li>
+              <label>Name</label>
+              {{one-way-input type="text" class="user-name" value=name update=(action "nameDidChange")}}
+            </li>
+            <li>
+              <label>Email</label>
+              {{one-way-input type="text" class="email" value=email update=(action "emailDidChange")}}
+            </li>
+            <li>
+              <label>Password</label>
+              {{one-way-input type="password" class="password" value=password update=(action "passwordDidChange")}}
+            </li>
+            <li>
+              <label>Password (confirm)</label>
+              {{one-way-input type="password" class="password-verify" value=passwordConfirm update=(action "passwordConfirmDidChange")}}
+            </li>
+            <li>
+              <button type="submit" class="button-green smaller save-user">
+                Submit
+              </button>
+            </li>
+          </ul>
+        </form>
+      </fieldset>
+    </div>
+  </div>
+{{/if}}

app/pods/users/new/route.js

@@ -1,15 +1,10 @@
 import Ember from 'ember';
 import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
 
-export default Ember.Route.extend(UnauthenticatedRouteMixin, {
+const { Route } = Ember;
+
+export default Route.extend(UnauthenticatedRouteMixin, {
   model: function() {
-    return Ember.RSVP.hash({
-      user: this.store.createRecord('user'),
-    });
+    return this.store.createRecord('user');
   },
-
-  setupController: function(controller, model) {
-    controller.setProperties(model);
-  },
-
 });

app/pods/users/new/template.hbs

@@ -1,32 +1,6 @@
-<div class="grid-1">
-  <div class="span-1">
-    <fieldset>
-      <legend>New User Signup</legend>
-      <form {{action 'save' on='submit'}}>
-        <ul>
-          <li>
-            <label>Name</label>
-            {{input value=user.name class="user-name"}}
-          </li>
-          <li>
-            <label>Email</label>
-            {{input value=user.email class="email"}}
-          </li>
-          <li>
-            <label>Password</label>
-            {{input type="password" value=user.password class="password"}}
-          </li>
-          <li>
-            <label>Password (confirm)</label>
-            {{input type="password" value=passwordConfirm class="password-verify"}}
-          </li>
-          <li>
-            <button type="submit" class="button-green smaller save-user">
-              Submit
-            </button>
-          </li>
-        </ul>
-      </form>
-    </fieldset>
-  </div>
-</div>
+{{
+  users/new/new-user-form
+  user=model
+  isLoading=isLoading
+  on-save=(action "save")
+}}

app/pods/users/new/verify/route.js

@@ -1,31 +1,26 @@
 import Ember from 'ember';
 import ajaxRequest from '../../../../utils/ajax-request';
 
-export default Ember.Route.extend({
-  session: Ember.inject.service('session'),
+const { Route, inject: { service } } = Ember;
 
-  apiURL: function() {
-    return this.get('globals.apiURL');
-  }.property(),
-
-  genus: function() {
-    return this.get('globals.genus');
-  }.property(),
+export default Route.extend({
+  session: service(),
+  globals: service(),
 
   model: function(params) {
-    let url = `${this.get('apiURL')}/api/${this.get('genus')}/users/verify/${params.nonce}`;
+    const url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/users/verify/${params.nonce}`;
     return ajaxRequest(url, {}, this.get('session'));
   },
 
 
   afterModel: function(model/*, transition*/) {
-    this.get('flashMessages').success(model.msg);
+    this.get('flashMessages').success(model.get('msg'));
     this.transitionTo('login');
   },
 
   actions: {
     error: function(error/*, transition*/) {
-      let err = Ember.$.parseJSON(error.responseText);
+      const err = Ember.$.parseJSON(error.responseText);
       this.get('flashMessages').error(err.error);
       this.transitionTo('login');
     }

app/pods/users/new/verify/template.hbs

@@ -1 +0,0 @@
-{{outlet}}