From 379b1f0831772dc9c6e7ba5539eccf5eaa90b82c Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Wed, 4 Nov 2015 12:59:29 +1030
Subject: [PATCH] Expand reason descriptions and add configurable link to
 community guidelines

---
 .../src/components/FlagsSettingsModal.js      | 20 +++++++++++++++++++
 extensions/flags/js/admin/src/main.js         |  4 ++++
 .../js/forum/src/components/FlagPostModal.js  | 20 ++++++++++++-------
 extensions/flags/less/forum/extension.less    | 14 +++++++++++++
 extensions/flags/src/Listener/AddFlagsApi.php | 16 +++++++++++++++
 5 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 extensions/flags/js/admin/src/components/FlagsSettingsModal.js

diff --git a/extensions/flags/js/admin/src/components/FlagsSettingsModal.js b/extensions/flags/js/admin/src/components/FlagsSettingsModal.js
new file mode 100644
index 000000000..16e457dc4
--- /dev/null
+++ b/extensions/flags/js/admin/src/components/FlagsSettingsModal.js
@@ -0,0 +1,20 @@
+import SettingsModal from 'flarum/components/SettingsModal';
+
+export default class FlagsSettingsModal extends SettingsModal {
+  className() {
+    return 'FlagsSettingsModal Modal--small';
+  }
+
+  title() {
+    return app.translator.trans('flarum-flags.admin.settings.title');
+  }
+
+  form() {
+    return [
+      <div className="Form-group">
+        <label>{app.translator.trans('flarum-flags.admin.settings.guidelines_url_label')}</label>
+        <input className="FormControl" bidi={this.setting('flarum-flags.guidelines_url')}/>
+      </div>
+    ];
+  }
+}
diff --git a/extensions/flags/js/admin/src/main.js b/extensions/flags/js/admin/src/main.js
index 7a87b4cb4..d7a9ea202 100644
--- a/extensions/flags/js/admin/src/main.js
+++ b/extensions/flags/js/admin/src/main.js
@@ -2,7 +2,11 @@ import { extend } from 'flarum/extend';
 import app from 'flarum/app';
 import PermissionGrid from 'flarum/components/PermissionGrid';
 
+import FlagsSettingsModal from 'flarum/flags/components/FlagsSettingsModal';
+
 app.initializers.add('flarum-flags', () => {
+  app.extensionSettings['flarum-flags'] = () => app.modal.show(new FlagsSettingsModal());
+
   extend(PermissionGrid.prototype, 'moderateItems', items => {
     items.add('viewFlags', {
       icon: 'flag',
diff --git a/extensions/flags/js/forum/src/components/FlagPostModal.js b/extensions/flags/js/forum/src/components/FlagPostModal.js
index 5e8ddf457..4478ebd6a 100644
--- a/extensions/flags/js/forum/src/components/FlagPostModal.js
+++ b/extensions/flags/js/forum/src/components/FlagPostModal.js
@@ -18,30 +18,36 @@ export default class FlagPostModal extends Modal {
   }
 
   content() {
+    const guidelinesUrl = app.forum.attribute('guidelinesUrl');
+
     return (
       <div className="Modal-body">
-        <div className="Form">
+        <div className="Form Form--centered">
           <div className="Form-group">
-            <label>{app.translator.trans('flarum-flags.forum.flag_post.reason_heading')}</label>
             <div>
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'off_topic'} value="off_topic" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_label')}</strong>
+                {app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_text')}
               </label>
 
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'inappropriate'} value="inappropriate" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_label')}</strong>
+                {app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_text', {
+                  a: guidelinesUrl ? <a href={guidelinesUrl} target="_blank"/> : undefined
+                })}
               </label>
 
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'spam'} value="spam" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_spam_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_spam_label')}</strong>
+                {app.translator.trans('flarum-flags.forum.flag_post.reason_spam_text')}
               </label>
 
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'other'} value="other" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_other_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_other_label')}</strong>
                 {this.reason() === 'other' ? (
                   <textarea className="FormControl" value={this.reasonDetail()} oninput={m.withAttr('value', this.reasonDetail)}></textarea>
                 ) : ''}
@@ -51,7 +57,7 @@ export default class FlagPostModal extends Modal {
 
           <div className="Form-group">
             <Button
-              className="Button Button--primary"
+              className="Button Button--primary Button--block"
               type="submit"
               loading={this.loading}
               disabled={!this.reason()}>
diff --git a/extensions/flags/less/forum/extension.less b/extensions/flags/less/forum/extension.less
index c5afee076..173c58787 100644
--- a/extensions/flags/less/forum/extension.less
+++ b/extensions/flags/less/forum/extension.less
@@ -56,3 +56,17 @@
     display: none;
   }
 }
+
+.FlagPostModal {
+  .Form-group {
+    margin-bottom: 20px;
+  }
+  .checkbox {
+    margin-bottom: 12px;
+
+    strong {
+      display: block;
+      color: @text-color;
+    }
+  }
+}
diff --git a/extensions/flags/src/Listener/AddFlagsApi.php b/extensions/flags/src/Listener/AddFlagsApi.php
index 0d9d29239..8b95a93ee 100755
--- a/extensions/flags/src/Listener/AddFlagsApi.php
+++ b/extensions/flags/src/Listener/AddFlagsApi.php
@@ -19,10 +19,24 @@ use Flarum\Event\ConfigureModelDates;
 use Flarum\Event\PrepareApiAttributes;
 use Flarum\Flags\Api\Controller;
 use Flarum\Flags\Flag;
+use Flarum\Settings\SettingsRepositoryInterface;
 use Illuminate\Contracts\Events\Dispatcher;
 
 class AddFlagsApi
 {
+    /**
+     * @var SettingsRepositoryInterface
+     */
+    protected $settings;
+
+    /**
+     * @param SettingsRepositoryInterface $settings
+     */
+    public function __construct(SettingsRepositoryInterface $settings)
+    {
+        $this->settings = $settings;
+    }
+
     /**
      * @param Dispatcher $events
      */
@@ -54,6 +68,8 @@ class AddFlagsApi
             if ($event->attributes['canViewFlags']) {
                 $event->attributes['flagsCount'] = (int) $this->getFlagsCount($event->actor);
             }
+
+            $event->attributes['guidelinesUrl'] = $this->settings->get('flarum-flags.guidelines_url');
         }
 
         if ($event->isSerializer(CurrentUserSerializer::class)) {