Add support for suspension message

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">

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;
 

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;
+  }
+
+}

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"
 

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);
   });