From 4020409bbf82d73842419b2f53495389c67b3ec0 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 13 Sep 2017 13:06:41 -0400
Subject: [PATCH] Add support for suspension message

---
 .../templates/modal/admin-suspend-user.hbs    | 47 ++++++++++++++-----
 .../stylesheets/common/admin/admin_base.scss  |  1 +
 .../stylesheets/common/admin/suspend.scss     | 21 +++++++++
 config/locales/client.en.yml                  |  3 ++
 .../acceptance/admin-suspend-user-test.js.es6 |  1 +
 5 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/stylesheets/common/admin/suspend.scss

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 065820c8601..6b51faf46d4 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
@@ -1,18 +1,39 @@
 {{#d-modal-body title="admin.user.suspend_modal_title"}}
-  <form>
-    {{i18n 'admin.user.suspend_duration'}}
-    {{text-field value=duration maxlength="5" autofocus="autofocus" class="suspend-duration"}}
-    {{i18n 'admin.user.suspend_duration_units'}}<br/>
-    <br/>
-    {{#if siteSettings.hide_suspension_reasons}}
-      {{{i18n 'admin.user.suspend_reason_hidden_label'}}}<br/>
-    {{else}}
-      {{{i18n 'admin.user.suspend_reason_label'}}}<br/>
-    {{/if}}
+  <div class='duration-controls'>
+    <label>
+      {{i18n 'admin.user.suspend_duration'}}
+      {{text-field value=duration maxlength="5" autofocus="autofocus" class="suspend-duration"}}
+      {{i18n 'admin.user.suspend_duration_units'}}
+    </label>
+  </div>
+
+  <div class='reason-controls'>
+    <label>
+      <div class='suspend-reason-label'>
+        {{#if siteSettings.hide_suspension_reasons}}
+          {{{i18n 'admin.user.suspend_reason_hidden_label'}}}
+        {{else}}
+          {{{i18n 'admin.user.suspend_reason_label'}}}
+        {{/if}}
+      </div>
+
+      {{text-field
+        value=reason
+        class="suspend-reason"
+        placeholderKey="admin.user.suspend_reason_placeholder"}}
+    </label>
+  </div>
+
+  <label>
+    <div class='suspend-message-label'>
+      {{i18n "admin.user.suspend_message"}}
+    </div>
+    {{textarea
+      value=message
+      class="suspend-message"
+      placeholder=(i18n "admin.user.suspend_message_placeholder")}}
+  </label>
 
-    <br/>
-    {{text-field value=reason class="suspend-reason"}}
-  </form>
 {{/d-modal-body}}
 
 <div class="modal-footer">
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index e54c11cc491..63f4f97fbcf 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -5,6 +5,7 @@
 
 @import "common/admin/customize";
 @import "common/admin/flagging";
+@import "common/admin/suspend";
 
 $mobile-breakpoint: 700px;
 
diff --git a/app/assets/stylesheets/common/admin/suspend.scss b/app/assets/stylesheets/common/admin/suspend.scss
new file mode 100644
index 00000000000..5f6da525a3a
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/suspend.scss
@@ -0,0 +1,21 @@
+.suspend-user-modal {
+  font-size: 1.1em;
+
+  .duration-controls {
+    margin-bottom: 1em;
+  }
+
+  .suspend-reason {
+    width: 100%;
+  }
+
+  .suspend-reason-label, .suspend-message-label {
+    margin-bottom: 0.5em;
+  }
+
+  .textarea, input[type=text] {
+    box-sizing: border-box;
+    height: 2.5em;
+  }
+
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 19f3108f0f4..6a13aeeba00 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3268,6 +3268,9 @@ en:
         suspend_reason_label: "Why are you suspending? This text <b>will be visible to everyone</b> on this user's profile page, and will be shown to the user when they try to log in. Keep it short."
         suspend_reason_hidden_label: "Why are you suspending? This text will be shown to the user when they try to log in. Keep it short."
         suspend_reason: "Reason"
+        suspend_reason_placeholder: "Suspension Reason"
+        suspend_message: "Email Message"
+        suspend_message_placeholder: "Optionally, provide more information about the suspension and it will be emailed to the user."
         suspended_by: "Suspended by"
         delete_all_posts: "Delete all posts"
 
diff --git a/test/javascripts/acceptance/admin-suspend-user-test.js.es6 b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
index cd80ffd5073..277b9f1bb70 100644
--- a/test/javascripts/acceptance/admin-suspend-user-test.js.es6
+++ b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
@@ -25,6 +25,7 @@ QUnit.test("suspend a user", assert => {
   });
   fillIn('.suspend-duration', 12);
   fillIn('.suspend-reason', "for breaking the rules");
+  fillIn('.suspend-message', "this is an email reason why");
   andThen(() => {
     assert.equal(find('.perform-suspend[disabled]').length, 0);
   });