Implementation of "invite a new user" modal

Closes #3079
- new controller and template for invite-new-user-modal
- actually triggers email invite via POST /ghost/api/v0.1/users/
- setting default language value (on the client) when creating a user
- only available role is "Author" - pending 3196
- updates to UsersIndexController to allow dynamic property calculation and template rending

Author: morficus

core/client/controllers/modals/invite-new-user.js

@@ -0,0 +1,52 @@
+var InviteNewUserController = Ember.Controller.extend({
+
+    confirm: {
+        accept: {
+            text: 'send invitation now'
+        },
+        reject: {
+            buttonClass: 'hidden'
+        }
+    },
+
+    // @TODO: replace with roles from server - see issue #3196
+    roles: [
+        {
+            id: 3,
+            name: 'Author'
+        }
+    ],
+
+    actions: {
+        confirmAccept: function () {
+            var email = this.get('email'),
+                role_id = this.get('role'),
+                self = this,
+                newUser;
+
+            newUser = this.store.createRecord('user', {
+                'email': email,
+                'role': role_id
+            });
+
+            newUser.save().then(function () {
+                var notificationText = 'Invitation sent! (' + email + ')';
+
+                self.notifications.showSuccess(notificationText, false);
+            }).fail(function (error) {
+                self.notifications.closePassive();
+                self.notifications.showAPIError(error);
+            });
+
+            this.set('email', null);
+            this.set('role', null);
+
+        },
+
+        confirmReject: function () {
+            return false;
+        }
+    }
+});
+
+export default InviteNewUserController;

core/client/controllers/settings/users/index.js

@@ -1,18 +1,9 @@
-/*global alert */
 var UsersIndexController = Ember.ArrayController.extend({
-    activeUsers: function () {
-        return this.content.filterBy('status', 'active');
-    }.property('model'),
+    users: Ember.computed.alias('model'),
 
-    invitedUsers: function () {
-        return this.content.filterBy('status', 'invited');
-    }.property('model'),
+    activeUsers: Ember.computed.filterBy('users', 'status', 'active'),
 
-    actions: {
-        addUser: function () {
-            alert('@TODO: needs to show the "add user" modal - see issue #3079 on GitHub');
-        }
-    }
+    invitedUsers: Ember.computed.filterBy('users', 'status', 'invited')
 });
 
 export default UsersIndexController;

core/client/models/user.js

@@ -11,7 +11,7 @@ var User = DS.Model.extend({
     location: DS.attr('string'),
     accessibility: DS.attr('string'),
     status: DS.attr('string'),
-    language: DS.attr('string'),
+    language: DS.attr('string', {defaultValue: 'en_US'}),
     meta_title: DS.attr('string'),
     meta_description: DS.attr('string'),
     last_login: DS.attr('moment-date'),

core/client/templates/components/gh-modal-dialog.hbs

@@ -1,5 +1,5 @@
 <div id="modal-container" {{action bubbles=false preventDefault=false}}>
-    <article {{bind-attr class="klass :js-modal"}}>
+    <article {{bind-attr class="klass  :js-modal"}}>
         <section class="modal-content">
             {{#if title}}<header class="modal-header"><h1>{{title}}</h1></header>{{/if}}
             {{#if showClose}}<a class="close" href="" title="Close" {{action "closeModal"}}><span class="hidden">Close</span></a>{{/if}}

core/client/templates/modals/invite-new-user.hbs

@@ -0,0 +1,17 @@
+{{#gh-modal-dialog action="closeModal" showClose=true type="action" animation="fade"
+    title="Invite a New User" confirm=confirm class="invite-new-user" }}
+
+        <fieldset>
+            <div class="form-group">
+                <label for="new-user-email"">Email Address</label>
+                {{input class="email" id="new-user-email" type="email" placeholder="Email Address" name="email" autofocus="autofocus"
+                autocapitalize="off" autocorrect="off" value=email }}
+            </div>
+            <div class="form-group">
+                <label for="new-user-role">Role</label>
+                {{view Ember.Select content=roles id="new-user-role" optionValuePath="content.id" optionLabelPath="content.name" name="role"
+                value=role}}
+            </div>
+        </fieldset>
+
+{{/gh-modal-dialog}}

core/client/templates/settings/users/index.hbs

@@ -2,7 +2,7 @@
     <button class="button-back">Back</button>
     <h2 class="title">Users</h2>
     <section class="page-actions">
-        <a class="button-add" href="#" {{action "addUser"}} >New&nbsp;User</a>
+        <a class="button-add" href="" {{action "openModal" "invite-new-user" this}} >New&nbsp;User</a>
     </section>
 </header>