FEATURE: Add a checkbox for users to confirm before flagging as illegal (#25762)

The Digital Services Act requires a checkbox for any user who's flagging a post as illegal to confirm that they are flagging in good faith. This PR adds that.

app/assets/javascripts/discourse/app/components/flag-action-type.hbs

@@ -69,6 +69,16 @@
           {{/if}}
         </div>
       </label>
+      {{#if this.showConfirmation}}
+        <label class="checkbox-label flag-confirmation">
+          <Input
+            name="confirmation"
+            @type="checkbox"
+            @checked={{this.isConfirmed}}
+          />
+          <span>{{i18n "flagging.confirmation_illegal"}}</span>
+        </label>
+      {{/if}}
     </div>
   {{/if}}
 </div>

app/assets/javascripts/discourse/app/components/flag-action-type.js

@@ -32,6 +32,7 @@ export default Component.extend({
   },
 
   showMessageInput: and("flag.is_custom_flag", "selected"),
+  showConfirmation: and("flag.isIllegal", "selected"),
   showDescription: not("showMessageInput"),
   isNotifyUser: equal("flag.name_key", "notify_user"),
 

app/assets/javascripts/discourse/app/components/modal/flag.hbs

@@ -16,6 +16,7 @@
         <FlagActionType
           @flag={{f}}
           @message={{this.message}}
+          @isConfirmed={{this.isConfirmed}}
           @isWarning={{this.isWarning}}
           @selectedFlag={{this.selected}}
           @username={{@model.flagModel.username}}

app/assets/javascripts/discourse/app/components/modal/flag.js

@@ -19,6 +19,7 @@ export default class Flag extends Component {
   @tracked userDetails;
   @tracked selected;
   @tracked message;
+  @tracked isConfirmed = false;
   @tracked isWarning = false;
   @tracked spammerDetails;
 
@@ -100,6 +101,10 @@ export default class Flag extends Component {
       return true;
     }
 
+    if (this.selected.isIllegal && !this.isConfirmed) {
+      return false;
+    }
+
     const len = this.message?.length || 0;
     return (
       len >= this.siteSettings.min_personal_message_post_length &&

app/assets/javascripts/discourse/app/models/post-action-type.js

@@ -1,8 +1,9 @@
-import { not } from "@ember/object/computed";
+import { equal, not } from "@ember/object/computed";
 import RestModel from "discourse/models/rest";
 
 export const MAX_MESSAGE_LENGTH = 500;
 
 export default class PostActionType extends RestModel {
   @not("is_custom_flag") notCustomFlag;
+  @equal("name_key", "illegal") isIllegal;
 }

app/assets/stylesheets/common/base/modal.scss

@@ -623,6 +623,10 @@
     // max-width: 500px;
     line-height: var(--line-height-large);
   }
+  .flag-confirmation {
+    margin-top: 0.5em;
+    padding-left: 1.125em;
+  }
 }
 
 .flag-message {

config/locales/client.en.yml

@@ -3950,6 +3950,7 @@ en:
       custom_placeholder_notify_moderators: "Let us know specifically what you are concerned about, and provide relevant links and examples where possible."
       notify_moderators_textarea_label: "Message for the moderators"
       custom_placeholder_illegal: "Let us know specifically why you believe this content is illegal, and provide relevant links and examples where possible."
+      confirmation_illegal: "What I’ve written above is accurate and complete."
       custom_message:
         at_least:
           one: "enter at least %{count} character"

spec/system/flagging_post_spec.rb

@@ -32,4 +32,22 @@ describe "Flagging post", type: :system do
       expect(page).to have_css(".reviewable-meta-data .status .approved")
     end
   end
+
+  describe "As Illegal" do
+    it do
+      topic_page.visit_topic(post_to_flag.topic)
+      topic_page.expand_post_actions(post_to_flag)
+      topic_page.click_post_action_button(post_to_flag, :flag)
+      flag_modal.choose_type(:illegal)
+
+      expect(flag_modal).to have_css(".flag-confirmation")
+
+      flag_modal.fill_message("This looks totally illegal to me.")
+      flag_modal.check_confirmation
+
+      flag_modal.confirm_flag
+
+      expect(page).to have_content(I18n.t("js.post.actions.by_you.illegal"))
+    end
+  end
 end

spec/system/page_objects/modals/flag.rb

@@ -20,6 +20,14 @@ module PageObjects
         select_kit.expand
         select_kit.select_row_by_value(action)
       end
+
+      def fill_message(message)
+        body.fill_in("message", with: message)
+      end
+
+      def check_confirmation
+        body.check("confirmation")
+      end
     end
   end
 end