From 21abed7f9a44831b1c5da12b2ad66e210de9c01a Mon Sep 17 00:00:00 2001
From: Matt Enlow <matt@novaugust.net>
Date: Tue, 29 Jul 2014 18:11:02 -0600
Subject: [PATCH] Add User Role Dropdown

Closes #3402, Closes #3428

-------------------

 ### Components
- Added GhostSelectComponent to handle async select creation (h/t @rwjblue)
- Added GhostRolesSelector (extends GhostSelect) for displaying user role options
- Created StoreInjector for surgically inserting the store into things that normally wouldn't have them.

 ### Users Settings
- InviteNewUserModal now uses GhostRolesSelector & defaults to Author
- The role dropdown for user settings has permissions set per 3402

 ### User Model
- Added `role` property as an interface to getting and setting `roles`
- Refactored anything that set `roles` to set `role`
- isAdmin, isAuthor, isOwner and isEditor are all keyed off of `role` now

 ### Tests
- Added functional tests for Settings.Users
- updated settings.users and settings.users.user screens
- fix spacing on screens

 ### Server Fixtures
- Fixed owner fixture's roles
---
 Gruntfile.js                                  |   4 +-
 core/client/components/gh-role-selector.js    |  13 ++
 core/client/components/gh-select.js           |  69 +++++++++++
 .../controllers/modals/invite-new-user.js     |  50 +++-----
 .../client/controllers/settings/users/user.js |  10 +-
 core/client/initializers/store-injector.js    |  10 ++
 core/client/models/user.js                    |  20 +--
 .../templates/components/gh-role-selector.hbs |   5 +
 .../templates/modals/invite-new-user.hbs      |  14 +--
 core/client/templates/settings/users/user.hbs |  23 ++--
 core/client/views/settings/users/user.js      |  13 ++
 core/test/functional/base.js                  | 117 +++++++++---------
 core/test/functional/client/settings_test.js  |  47 ++++++-
 13 files changed, 264 insertions(+), 131 deletions(-)
 create mode 100644 core/client/components/gh-role-selector.js
 create mode 100644 core/client/components/gh-select.js
 create mode 100644 core/client/initializers/store-injector.js
 create mode 100644 core/client/templates/components/gh-role-selector.hbs
 create mode 100644 core/client/views/settings/users/user.js

diff --git a/Gruntfile.js b/Gruntfile.js
index b2f7d28a8cd9..307e7bc3fcf6 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -748,9 +748,9 @@ var path           = require('path'),
         //
         // You can use the `--target` argument to run any individual test file, or the admin or frontend tests:
         //
-        // `grunt test-functional --target=admin/editor_test.js` - run just the editor tests
+        // `grunt test-functional --target=client/editor_test.js` - run just the editor tests
         //
-        // `grunt test-functional --target=admin/` - run all of the tests in the admin directory
+        // `grunt test-functional --target=client/` - run all of the tests in the client directory
         //
         // Functional tests are run with [phantom.js](http://phantomjs.org/) and defined using the testing api from
         // [casper.js](http://docs.casperjs.org/en/latest/testing.html).
diff --git a/core/client/components/gh-role-selector.js b/core/client/components/gh-role-selector.js
new file mode 100644
index 000000000000..e08f94213f51
--- /dev/null
+++ b/core/client/components/gh-role-selector.js
@@ -0,0 +1,13 @@
+import GhostSelect from 'ghost/components/gh-select';
+
+var RolesSelector = GhostSelect.extend({
+    roles: Ember.computed.alias('options'),
+    options: Ember.computed(function () {
+        var rolesPromise = this.store.find('role', { permissions: 'assign' });
+
+        return Ember.ArrayProxy.extend(Ember.PromiseProxyMixin)
+            .create({promise: rolesPromise});
+    })
+});
+
+export default RolesSelector;
diff --git a/core/client/components/gh-select.js b/core/client/components/gh-select.js
new file mode 100644
index 000000000000..c085adea8951
--- /dev/null
+++ b/core/client/components/gh-select.js
@@ -0,0 +1,69 @@
+//GhostSelect is a solution to Ember.Select being evil and worthless.
+// (Namely, this solves problems with async data in Ember.Select)
+//Inspired by (that is, totally ripped off from) this JSBin
+//http://emberjs.jsbin.com/rwjblue/40/edit
+
+//Usage:
+//Extend this component and create a template for your component.
+//Your component must define the `options` property.
+//Optionally use `initialValue` to set the object
+//     you want to have selected to start with.
+//Both options and initalValue are promise safe.
+//Set onChange in your template to be the name
+//    of the action you want called in your
+//For an example, see gh-roles-selector
+
+var GhostSelect = Ember.Component.extend({
+    tagName: 'span',
+    classNames: ['gh-select'],
+
+    options: null,
+    initialValue: null,
+
+    resolvedOptions: null,
+    resolvedInitialValue: null,
+
+    //Convert promises to their values
+    init: function () {
+        var self = this;
+        this._super.apply(this, arguments);
+
+        Ember.RSVP.hash({
+            resolvedOptions: this.get('options'),
+            resolvedInitialValue: this.get('initialValue')
+        }).then(function (resolvedHash) {
+            self.setProperties(resolvedHash);
+
+            //Run after render to ensure the <option>s have rendered
+            Ember.run.schedule('afterRender', function () {
+                self.setInitialValue();
+            });
+        });
+    },
+
+    setInitialValue: function () {
+        var initialValue = this.get('resolvedInitialValue'),
+            options = this.get('resolvedOptions'),
+            initialValueIndex = options.indexOf(initialValue);
+        if (initialValueIndex > -1) {
+            this.$('option:eq(' + initialValueIndex + ')').prop('selected', true);
+        }
+    },
+    //Called by DOM events, weee!
+    change: function () {
+        this._changeSelection();
+    },
+    //Send value to specified action
+    _changeSelection: function () {
+        var value = this._selectedValue();
+        Ember.set(this, 'value', value);
+        this.sendAction('onChange', value);
+    },
+    _selectedValue: function () {
+        var selectedIndex = this.$('select')[0].selectedIndex;
+
+        return this.get('options').objectAt(selectedIndex);
+    }
+});
+
+export default GhostSelect;
diff --git a/core/client/controllers/modals/invite-new-user.js b/core/client/controllers/modals/invite-new-user.js
index b4d4f7d45ce0..2c55f6fdcf5c 100644
--- a/core/client/controllers/modals/invite-new-user.js
+++ b/core/client/controllers/modals/invite-new-user.js
@@ -1,5 +1,15 @@
 var InviteNewUserController = Ember.Controller.extend({
-
+    //Used to set the initial value for the dropdown
+    authorRole: Ember.computed(function () {
+        var self = this;
+        return this.store.find('role').then(function (roles) {
+            var authorRole = roles.findBy('name', 'Author');
+            //Initialize role as well.
+            self.set('role', authorRole);
+            return authorRole;
+        });
+    }),
+    
     confirm: {
         accept: {
             text: 'send invitation now'
@@ -8,45 +18,23 @@ var InviteNewUserController = Ember.Controller.extend({
             buttonClass: 'hidden'
         }
     },
-
-    roles: Ember.computed(function () {
-        var roles = {},
-            self = this;
-
-        roles.promise = this.store.find('role', { permissions: 'assign' }).then(function (roles) {
-            return roles.rejectBy('name', 'Owner').sortBy('id');
-        }).then(function (roles) {
-            // After the promise containing the roles has been resolved and the array
-            // has been sorted, explicitly set the selectedRole for the Ember.Select.
-            // The explicit set is needed because the data-select-text attribute is
-            // not being set until a change is made in the dropdown list.
-            // This is only required with Ember.Select when it is bound to async data.
-            self.set('selectedRole', roles.get('firstObject'));
-
-            return roles;
-        });
-
-        return Ember.ArrayProxy.extend(Ember.PromiseProxyMixin).create(roles);
-    }),
-
+        
     actions: {
+        setRole: function (role) {
+            this.set('role', role);
+        },
         confirmAccept: function () {
             var email = this.get('email'),
-                role_id = this.get('role'),
+                role = this.get('role'),
                 self = this,
-                newUser,
-                role;
+                newUser;
 
             newUser = self.store.createRecord('user', {
                 email: email,
-                status: 'invited'
+                status: 'invited',
+                role: role
             });
 
-            // no need to make an API request, the store will already have this role
-            role = self.store.getById('role', role_id);
-
-            newUser.get('roles').pushObject(role);
-
             newUser.save().then(function () {
                 var notificationText = 'Invitation sent! (' + email + ')';
 
diff --git a/core/client/controllers/settings/users/user.js b/core/client/controllers/settings/users/user.js
index 7dd4e421cd36..ce076cbc1d77 100644
--- a/core/client/controllers/settings/users/user.js
+++ b/core/client/controllers/settings/users/user.js
@@ -36,7 +36,6 @@ var SettingsUserController = Ember.ObjectController.extend({
         var lastLogin = this.get('user.last_login');
 
         return lastLogin ? lastLogin.fromNow() : '';
-
     }.property('user.last_login'),
 
     created_at: function () {
@@ -44,12 +43,11 @@ var SettingsUserController = Ember.ObjectController.extend({
 
         return createdAt ? createdAt.fromNow() : '';
     }.property('user.created_at'),
-
-    isAuthor: function () {
-        return this.get('user.isAuthor');
-    }.property('user.isAuthor'),
-
+    
     actions: {
+        changeRole: function (newRole) {
+            this.set('model.role', newRole);
+        },
         revoke: function () {
             var self = this,
                 email = this.get('email');
diff --git a/core/client/initializers/store-injector.js b/core/client/initializers/store-injector.js
new file mode 100644
index 000000000000..957544e3882b
--- /dev/null
+++ b/core/client/initializers/store-injector.js
@@ -0,0 +1,10 @@
+//Used to surgically insert the store into things that wouldn't normally have them.
+var StoreInjector = {
+    name: 'store-injector',
+    after: 'store',
+    initialize: function (container, application) {
+        application.inject('component:gh-role-selector', 'store', 'store:main');
+    }
+};
+
+export default StoreInjector;
diff --git a/core/client/models/user.js b/core/client/models/user.js
index f9f0bc8ed77a..38968d98fa48 100644
--- a/core/client/models/user.js
+++ b/core/client/models/user.js
@@ -26,18 +26,22 @@ var User = DS.Model.extend(NProgressSaveMixin, SelectiveSaveMixin, ValidationEng
     updated_by: DS.attr('number'),
     roles: DS.hasMany('role', { embedded: 'always' }),
 
-
-    // TODO: Once client-side permissions are in place,
-    // remove the hard role check.
-    isAuthor: Ember.computed('roles', function () {
-        return this.get('roles').objectAt(0).get('name').toLowerCase() === 'author';
+    role: Ember.computed('roles', function (name, value) {
+        if (arguments.length > 1) {
+            //Only one role per user, so remove any old data.
+            this.get('roles').clear();
+            this.get('roles').pushObject(value);
+            return value;
+        }
+        return this.get('roles.firstObject');
     }),
 
     // TODO: Once client-side permissions are in place,
     // remove the hard role check.
-    isEditor: Ember.computed('roles', function () {
-        return this.get('roles').objectAt(0).get('name').toLowerCase() === 'editor';
-    }),
+    isAuthor: Ember.computed.equal('role.name', 'Author'),
+    isEditor: Ember.computed.equal('role.name', 'Editor'),
+    isAdmin: Ember.computed.equal('role.name', 'Administrator'),
+    isOwner: Ember.computed.equal('role.name', 'Owner'),
 
     saveNewPassword: function () {
         var url = this.get('ghostPaths.url').api('users', 'password');
diff --git a/core/client/templates/components/gh-role-selector.hbs b/core/client/templates/components/gh-role-selector.hbs
new file mode 100644
index 000000000000..386203c91021
--- /dev/null
+++ b/core/client/templates/components/gh-role-selector.hbs
@@ -0,0 +1,5 @@
+<select {{bind-attr id=selectId name=selectName}}>
+{{#each roles}}
+<option {{bind-attr value=id}}>{{name}}</option>
+{{/each}}
+</select>
diff --git a/core/client/templates/modals/invite-new-user.hbs b/core/client/templates/modals/invite-new-user.hbs
index 8b65c7a6d51e..19a7ac2940f4 100644
--- a/core/client/templates/modals/invite-new-user.hbs
+++ b/core/client/templates/modals/invite-new-user.hbs
@@ -10,16 +10,10 @@
 
             <div class="form-group for-select">
                 <label for="new-user-role">Role</label>
-                <span class="gh-select" {{bind-attr data-select-text=selectedRole.name}}>
-                   {{view Ember.Select
-                        content=roles
-                        id="new-user-role"
-                        optionValuePath="content.id"
-                        optionLabelPath="content.name"
-                        name="role"
-                        value=role
-                        selection=selectedRole}}
-                </span>
+                {{gh-role-selector
+                    initialValue=authorRole
+                    onChange="setRole"
+                    selectId="new-user-role"}}
             </div>
 
         </fieldset>
diff --git a/core/client/templates/settings/users/user.hbs b/core/client/templates/settings/users/user.hbs
index 3869953d4c6c..2fc2cc286978 100644
--- a/core/client/templates/settings/users/user.hbs
+++ b/core/client/templates/settings/users/user.hbs
@@ -67,23 +67,16 @@
                 {{input type="email" value=user.email id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off" autocomplete="off"}}
                 <p>Used for notifications</p>
             </div>
-
-            {{!-- The correct markup for select boxes. Needs changing to the correct data --}}
-            {{!-- <div class="form-group">
+            {{#if view.rolesDropdownIsVisible}}
+            <div class="form-group">
                 <label for="user-role">Role</label>
-                <span class="gh-select">
-                   {{view Ember.Select
-                       id="activeTheme"
-                       name="general[activeTheme]"
-                       content=themes
-                       optionValuePath="content.name"
-                       optionLabelPath="content.label"
-                       value=activeTheme
-                       selection=selectedTheme}}
-               </span>
+                {{gh-role-selector
+                    initialValue=role
+                    onChange="changeRole"
+                    selectId="user-role"}}
                 <p>What permissions should this user have?</p>
-            </div> --}}
-
+            </div>
+            {{/if}}
             <div class="form-group">
                 <label for="user-location">Location</label>
                 {{input type="text" value=user.location id="user-location"}}
diff --git a/core/client/views/settings/users/user.js b/core/client/views/settings/users/user.js
new file mode 100644
index 000000000000..7dc31c351b04
--- /dev/null
+++ b/core/client/views/settings/users/user.js
@@ -0,0 +1,13 @@
+var SettingsUserView = Ember.View.extend({
+    currentUser: Ember.computed.alias('controller.session.user'),
+    
+    isNotOwnProfile: Ember.computed('controller.user.id', 'currentUser.id', function () {
+        return this.get('controller.user.id') !== this.get('currentUser.id');
+    }),
+    
+    canAssignRoles: Ember.computed.or('currentUser.isAdmin', 'currentUser.isOwner'),
+    
+    rolesDropdownIsVisible: Ember.computed.and('isNotOwnProfile', 'canAssignRoles')
+});
+
+export default SettingsUserView;
\ No newline at end of file
diff --git a/core/test/functional/base.js b/core/test/functional/base.js
index aad2e06be30e..cf5ab03769ea 100644
--- a/core/test/functional/base.js
+++ b/core/test/functional/base.js
@@ -55,62 +55,67 @@ var DEBUG = false, // TOGGLE THIS TO GET MORE SCREENSHOTS
     screens;
 
 screens = {
-   'root': {
-       url: 'ghost/',
-       linkSelector: '#main-menu > li.content a',
-       selector: '#main-menu .content.active'
-   },
-   'content': {
-       url: 'ghost/content/',
-       linkSelector: '#main-menu > li.content a',
-       selector: '#main-menu .content.active'
-   },
-   'editor': {
-       url: 'ghost/editor/',
-       linkSelector: '#main-menu > li.editor a',
-       selector: '#entry-title'
-   },
-   'settings': {
-       url: 'ghost/settings/',
-       linkSelector: '#main-menu > li.settings a',
-       selector: '.settings-content'
-   },
-   'settings.general': {
-       url: 'ghost/settings/general',
-       selector: '.settings-content .settings-general'
-   },
-   'settings.user': {
-       url: 'ghost/settings/user',
-       linkSelector: '#user-menu li.usermenu-profile a',
-       selector: '.settings-content .settings-user'
-   },
-   'signin': {
-       url: 'ghost/signin/',
-       selector: '.button-save'
-   },
-   'signin-authenticated': {
-       url: 'ghost/signin/',
-       //signin with authenticated user redirects to posts
-       selector: '#main-menu .content .active'
-   },
-   'signout': {
-       url: 'ghost/signout/',
+    'root': {
+        url: 'ghost/',
+        linkSelector: '#main-menu > li.content a',
+        selector: '#main-menu .content.active'
+    },
+    'content': {
+        url: 'ghost/content/',
+        linkSelector: '#main-menu > li.content a',
+        selector: '#main-menu .content.active'
+    },
+    'editor': {
+        url: 'ghost/editor/',
+        linkSelector: '#main-menu > li.editor a',
+        selector: '#entry-title'
+    },
+    'settings': {
+        url: 'ghost/settings/',
+        linkSelector: '#main-menu > li.settings a',
+        selector: '.settings-content'
+    },
+    'settings.general': {
+        url: 'ghost/settings/general',
+        selector: '.settings-content .settings-general'
+    },
+    'settings.users': {
+        url: 'ghost/settings/users',
+        linkSelector: '.settings-menu li.users a',
+        selector: '.settings-content .settings-users'
+    },
+    'settings.users.user': {
+        url: 'ghost/settings/users/test-user',
+        linkSelector: '#user-menu li.usermenu-profile a',
+        selector: '.settings-content .settings-user'
+    },
+    'signin': {
+        url: 'ghost/signin/',
+        selector: '.button-save'
+    },
+    'signin-authenticated': {
+        url: 'ghost/signin/',
+        //signin with authenticated user redirects to posts
+        selector: '#main-menu .content .active'
+    },
+    'signout': {
+        url: 'ghost/signout/',
        linkSelector: '#usermenu li.usermenu-signout a',
-       // When no user exists we get redirected to setup which has button-add
-       selector: '.button-save, .button-add'
-   },
-   'signup': {
-       url: 'ghost/signup/',
-       selector: '.button-save'
-   },
-   'setup': {
-       url: 'ghost/setup/',
-       selector: '.button-add'
-   },
-   'setup-authenticated': {
-       url: 'ghost/setup/',
-       selector: '#main-menu .content a.active'
-   }
+        // When no user exists we get redirected to setup which has button-add
+        selector: '.button-save, .button-add'
+    },
+    'signup': {
+        url: 'ghost/signup/',
+        selector: '.button-save'
+    },
+    'setup': {
+        url: 'ghost/setup/',
+        selector: '.button-add'
+    },
+    'setup-authenticated': {
+        url: 'ghost/setup/',
+        selector: '#main-menu .content a.active'
+    }
 };
 
 casper.writeContentToCodeMirror = function (content) {
@@ -487,4 +492,4 @@ CasperTest.Routines = (function () {
         togglePermalinks: _createRunner(togglePermalinks)
     };
 
-}());
\ No newline at end of file
+}());
diff --git a/core/test/functional/client/settings_test.js b/core/test/functional/client/settings_test.js
index 16213715d473..76138712b236 100644
--- a/core/test/functional/client/settings_test.js
+++ b/core/test/functional/client/settings_test.js
@@ -169,13 +169,54 @@ CasperTest.begin('General settings validation is correct', 7, function suite(tes
     }, casper.failOnTimeout(test, 'postsPerPage min error did not appear', 2000));
 });
 
+CasperTest.begin('Users screen is correct', 9, function suite(test) {
+    casper.thenOpenAndWaitForPageLoad('settings.general');
+    casper.thenTransitionAndWaitForScreenLoad('settings.users', function canTransition () {
+        test.assert(true, 'Can transition to users screen from settings.general');
+        test.assertUrlMatch(/ghost\/settings\/users\/$/, 'settings.users transitions to correct url');
+    });
+    casper.then(function usersScreenHasContent() {
+        test.assertSelectorHasText('.settings-users .object-list .object-list-title', 'Active users');
+        test.assertExists('.settings-users .object-list .object-list-item', 'Has an active user');
+        test.assertSelectorHasText('.settings-users .object-list-item .name', 'Test User');
+        test.assertExists('.settings-users .object-list-item .role-label.owner', 'First user has owner role displayed');
+
+        test.assertExists('.page-actions .button-add', 'Add user button is on page.');
+    });
+    casper.thenClick('.page-actions .button-add');
+    casper.waitForOpaque('.invite-new-user .modal-content', function then() {
+        test.assertEval(function testOwnerRoleNotAnOption() {
+            var options = document.querySelectorAll('.invite-new-user select#new-user-role option'),
+                i = 0;
+            for (; i < options.length; i++) {
+                if (options[i].text === "Owner") {
+                    return false;
+                }
+            }
+            return true;
+        }, '"Owner" is not a role option for new users');
+    });
+    //role options get loaded asynchronously; give them a chance to come in
+    casper.waitForSelector('.invite-new-user select#new-user-role option', function then() {
+        test.assertEval(function authorIsSelectedByDefault() {
+            var options = document.querySelectorAll('.invite-new-user select#new-user-role option'),
+                i = 0;
+            for (; i < options.length; i++) {
+                if (options[i].selected) {
+                    return options[i].text === "Author"
+                }
+            }
+            return false;
+        }, 'The "Author" role is selected by default when adding a new user');
+    });
+});
 // ### User settings tests
 // Please uncomment and fix these as the functionality is implemented
 
 //CasperTest.begin('Can save settings', 6, function suite(test) {
-//    casper.thenOpenAndWaitForPageLoad('settings.user', function testTitleAndUrl() {
-//        test.assertTitle('Ghost Admin', 'Ghost admin has no title');
-//        test.assertUrlMatch(/ghost\/settings\/user\/$/, 'Landed on the correct URL');
+//    casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
+//        test.assertTitle('Ghost Admin', 'Ghost Admin title is GhostAdmin');
+//        test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'settings.users.user has correct URL');
 //    });
 //
 //    function handleUserRequest(requestData) {