diff --git a/app/assets/javascripts/admin/controllers/admin-user-index.js.es6 b/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
index 834ed3912ba..c594f1db672 100644
--- a/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
@@ -6,6 +6,7 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
 import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend(CanCheckEmails, {
+  adminTools: Ember.inject.service(),
   editingUsername: false,
   editingName: false,
   editingTitle: false,
@@ -64,6 +65,11 @@ export default Ember.Controller.extend(CanCheckEmails, {
     anonymize() { return this.get('model').anonymize(); },
     destroy() { return this.get('model').destroy(); },
 
+    showSuspendModal() {
+      this.get('adminTools').showSuspendModal(this.get('model'));
+    },
+
+
     toggleUsernameEdit() {
       this.set('userUsernameValue', this.get('model.username'));
       this.toggleProperty('editingUsername');
diff --git a/app/assets/javascripts/admin/routes/admin-user-index.js.es6 b/app/assets/javascripts/admin/routes/admin-user-index.js.es6
index 03053efeb9b..36d1d8cedd0 100644
--- a/app/assets/javascripts/admin/routes/admin-user-index.js.es6
+++ b/app/assets/javascripts/admin/routes/admin-user-index.js.es6
@@ -1,4 +1,3 @@
-import showModal from 'discourse/lib/show-modal';
 import Group from 'discourse/models/group';
 
 export default Discourse.Route.extend({
@@ -25,11 +24,6 @@ export default Discourse.Route.extend({
   },
 
   actions: {
-    showSuspendModal(model) {
-      showModal('admin-suspend-user', { model, admin: true });
-      this.controllerFor('modal').set('modalClass', 'suspend-user-modal');
-    },
-
     viewActionLogs(username) {
       const controller = this.controllerFor('adminLogs.staffActionLogs');
       this.transitionTo('adminLogs.staffActionLogs').then(() => {
diff --git a/app/assets/javascripts/admin/services/admin-tools.js.es6 b/app/assets/javascripts/admin/services/admin-tools.js.es6
index 650e078f57d..aa16a67495b 100644
--- a/app/assets/javascripts/admin/services/admin-tools.js.es6
+++ b/app/assets/javascripts/admin/services/admin-tools.js.es6
@@ -5,6 +5,7 @@
 import AdminUser from 'admin/models/admin-user';
 import { iconHTML } from 'discourse-common/lib/icon-library';
 import { ajax } from 'discourse/lib/ajax';
+import showModal from 'discourse/lib/show-modal';
 
 export default Ember.Service.extend({
 
@@ -19,6 +20,14 @@ export default Ember.Service.extend({
     };
   },
 
+  showSuspendModal(user) {
+    showModal('admin-suspend-user', {
+      user,
+      admin: true,
+      modalClass: 'suspend-user-modal'
+    });
+  },
+
   _deleteSpammer(adminUser) {
     return adminUser.checkEmail().then(() => {
 
diff --git a/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs b/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
index e97eb0989ba..065820c8601 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
@@ -1,7 +1,7 @@
 {{#d-modal-body title="admin.user.suspend_modal_title"}}
   <form>
     {{i18n 'admin.user.suspend_duration'}}
-    {{text-field value=duration maxlength="5" autofocus="autofocus"}}
+    {{text-field value=duration maxlength="5" autofocus="autofocus" class="suspend-duration"}}
     {{i18n 'admin.user.suspend_duration_units'}}<br/>
     <br/>
     {{#if siteSettings.hide_suspension_reasons}}
@@ -11,11 +11,16 @@
     {{/if}}
 
     <br/>
-    {{text-field value=reason class="span8"}}
+    {{text-field value=reason class="suspend-reason"}}
   </form>
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  <button class='btn btn-danger' {{action "suspend"}} disabled={{submitDisabled}}>{{d-icon "ban"}}{{i18n 'admin.user.suspend'}}</button>
-  <a {{action "closeModal"}}>{{i18n 'cancel'}}</a>
+  {{d-button
+    class="btn-danger perform-suspend"
+    action="suspend"
+    disabled=submitDisabled
+    icon="ban"
+    label="admin.user.suspend"}}
+  <a {{action "closeModal"}} class="cancel-suspend">{{i18n 'cancel'}}</a>
 </div>
diff --git a/app/assets/javascripts/admin/templates/user-index.hbs b/app/assets/javascripts/admin/templates/user-index.hbs
index e00fbfedf58..1ea3703741c 100644
--- a/app/assets/javascripts/admin/templates/user-index.hbs
+++ b/app/assets/javascripts/admin/templates/user-index.hbs
@@ -306,7 +306,11 @@
       {{i18n 'admin.user.suspended_explanation'}}
     {{else}}
       {{#if model.canSuspend}}
-        {{d-button class="btn-danger" action="showSuspendModal" actionParam=model icon="ban" label="admin.user.suspend"}}
+        {{d-button
+          class="btn-danger suspend-user"
+          action="showSuspendModal"
+          icon="ban"
+          label="admin.user.suspend"}}
         {{i18n 'admin.user.suspended_explanation'}}
       {{/if}}
     {{/if}}
diff --git a/test/javascripts/acceptance/admin-suspend-user-test.js.es6 b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
new file mode 100644
index 00000000000..cd80ffd5073
--- /dev/null
+++ b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
@@ -0,0 +1,35 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance("Admin - Suspend User", { loggedIn: true });
+
+QUnit.test("suspend a user - cancel", assert => {
+  visit("/admin/users/1234/regular");
+  click(".suspend-user");
+
+  andThen(() => {
+    assert.equal(find('.suspend-user-modal:visible').length, 1);
+  });
+
+  click('.cancel-suspend');
+  andThen(() => {
+    assert.equal(find('.suspend-user-modal:visible').length, 0);
+  });
+});
+
+QUnit.test("suspend a user", assert => {
+  visit("/admin/users/1234/regular");
+  click(".suspend-user");
+
+  andThen(() => {
+    assert.equal(find('.perform-suspend[disabled]').length, 1, 'disabled by default');
+  });
+  fillIn('.suspend-duration', 12);
+  fillIn('.suspend-reason', "for breaking the rules");
+  andThen(() => {
+    assert.equal(find('.perform-suspend[disabled]').length, 0);
+  });
+  click('.perform-suspend');
+  andThen(() => {
+    assert.equal(find('.suspend-user-modal:visible').length, 0);
+  });
+});
diff --git a/test/javascripts/admin/models/admin-user-test.js.es6 b/test/javascripts/admin/models/admin-user-test.js.es6
index 161a8be373b..e15a2b904f5 100644
--- a/test/javascripts/admin/models/admin-user-test.js.es6
+++ b/test/javascripts/admin/models/admin-user-test.js.es6
@@ -23,4 +23,4 @@ QUnit.test('revoke key', function(assert) {
   return adminUser.revokeApiKey().then(function() {
     assert.blank(adminUser.get('api_key'), 'it cleared the api_key');
   });
-});
\ No newline at end of file
+});
diff --git a/test/javascripts/helpers/create-pretender.js.es6 b/test/javascripts/helpers/create-pretender.js.es6
index f7e4d8df2be..610dc40c0ea 100644
--- a/test/javascripts/helpers/create-pretender.js.es6
+++ b/test/javascripts/helpers/create-pretender.js.es6
@@ -271,6 +271,10 @@ export default function() {
       return response(200, fixturesByUrl['/groups.json']);
     });
 
+    this.get("groups/search.json", () => {
+      return response(200, []);
+    });
+
     this.get("/groups/discourse/topics.json", () => {
       return response(200, fixturesByUrl['/groups/discourse/posts.json']);
     });
@@ -345,6 +349,14 @@ export default function() {
     });
 
     this.get('/tag_groups', () => response(200, {tag_groups: []}));
+
+    this.get('/admin/users/1234.json', request => {
+      return response(200, {
+        id: 1234,
+        username: 'regular',
+      });
+    });
+
     this.post('/admin/users/:user_id/generate_api_key', success);
     this.delete('/admin/users/:user_id/revoke_api_key', success);
     this.delete('/admin/users/:user_id.json', () => response(200, { deleted: true }));