Add a more detailed modal when reporting a post or a comment

app/assets/javascripts/app/views.js

@@ -4,6 +4,7 @@ app.views.Base = Backbone.View.extend({
 
   initialize : function() {
     this.setupRenderEvents();
+    this.setupReport();
   },
 
   presenter : function(){
@@ -102,22 +103,25 @@ app.views.Base = Backbone.View.extend({
     this.model.set(_.inject(this.formAttrs, _.bind(setValueFromField, this), {}));
   },
 
-  report: function(evt) {
+  setupReport: function() {
-    if(evt) { evt.preventDefault(); }
+    const reportForm = document.getElementById("report-content-form");
-    var msg = prompt(Diaspora.I18n.t('report.prompt'), Diaspora.I18n.t('report.prompt_default'));
+    if (reportForm) {
-    if (msg == null) {
+      reportForm.addEventListener("submit", this.onSubmitReport);
-      return;
     }
-    var data = {
+  },
-      report: {
+
-        item_id: this.model.id,
+  onSubmitReport: function(ev) {
-        item_type: $(evt.currentTarget).data("type"),
+    if (ev) { ev.preventDefault(); }
-        text: msg
+    const form = ev.currentTarget;
-      }
+    $("#reportModal").modal("hide");
+    const textarea = document.getElementById("report-reason-field");
+    const report = {
+      item_id: form.dataset.reportId,
+      item_type: form.dataset.reportType,
+      text: textarea.value
     };
 
-    var report = new app.models.Report();
+    new app.models.Report().save({report: report}, {
-    report.save(data, {
       success: function() {
         app.flashMessages.success(Diaspora.I18n.t("report.status.created"));
       },
@@ -127,11 +131,21 @@ app.views.Base = Backbone.View.extend({
     });
   },
 
+  report: function(evt) {
+    if (evt) { evt.preventDefault(); }
+    const form = document.getElementById("report-content-form");
+    form.dataset.reportId = this.model.id;
+    form.dataset.reportType = evt.currentTarget.dataset.type;
+    document.getElementById("report-reason-field").value = "";
+    document.getElementById("report-reason-field").focus();
+    $("#reportModal").modal();
+  },
+
   destroyConfirmMsg: function() { return Diaspora.I18n.t("confirm_dialog"); },
 
   destroyModel: function(evt) {
     evt && evt.preventDefault();
-    var url = this.model.urlRoot + "/" + this.model.id;
+    const url = this.model.urlRoot + "/" + this.model.id;
 
     if( confirm(_.result(this, "destroyConfirmMsg")) ) {
       this.$el.addClass("deleting");

app/views/people/show.html.haml

@@ -43,3 +43,5 @@
         path: new_conversation_path(:contact_id => @contact.id, name: @contact.person.name, modal: true),
         title: t('conversations.index.new_conversation'),
         id: 'conversationModal'
+
+= render "report/report_modal"

app/views/posts/show.html.haml

@@ -10,3 +10,4 @@
 
 - content_for :content do
   #container.container-fluid
+  = render "report/report_modal"

app/views/report/_report_modal.erb

@@ -0,0 +1,27 @@
+<div class="modal fade" id="reportModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button class="close" data-dismiss="modal" type="button">×</button>
+        <h3 class="modal-title"><%= t("report.modal.title", pod_name: pod_name) %></h3>
+      </div>
+      <div class="modal-body">
+        <p>
+          <%= t("report.modal.report_send_email") %>
+          <% if AppConfig.settings.terms.enable? %>
+            <%= t("report.modal.report_only_if_violated_terms", link_to_terms: link_to(t("report.modal.terms_link", pod_name: pod_name), terms_path, target: "_blank", rel: "noopener")).html_safe %>
+          <% else %>
+            <%= t("report.modal.report_only_if_bad", link_to_guidelines: link_to(t("help.community_guidelines"), "https://diasporafoundation.org/community_guidelines", target: "_blank", rel: "noopener")).html_safe %>
+          <% end %>
+        </p>
+        <form id="report-content-form" accept-charset="UTF-8">
+          <p><label for="report-reason-field"><%= t("report.modal.reason_label") %></label></p>
+          <p><textarea id="report-reason-field" name="report-reason" class="form-control" placeholder="<%= t('report.modal.placeholder') %>" autofocus required></textarea></p>
+          <div class="clearfix">
+            <input type="submit" class="btn btn-primary pull-right" value="<%= t("report.modal.submit") %>" />
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

app/views/streams/main_stream.html.haml

@@ -178,3 +178,5 @@
         - unless user_signed_in?
           %h2= @stream.title
         = render "aspects/aspect_stream", stream: @stream
+
+= render "report/report_modal"

app/views/tags/show.haml

@@ -33,3 +33,5 @@
         #paginate
           .loader.hidden
             .spinner
+
+= render "report/report_modal"

config/locales/diaspora/en.yml

@@ -1040,6 +1040,15 @@ en:
       reshare_by: "Reshare by %{author}"
 
   report:
+    modal:
+      title: "Reporting content"
+      report_send_email: "Reporting content sends an email to all the moderators of this pod."
+      report_only_if_violated_terms: "Please only report content that violates %{link_to_terms}."
+      terms_link: "%{pod_name} terms"
+      report_only_if_bad: "Please only report content that is not respecting the %{link_to_guidelines}."
+      reason_label: "Please state how the content you are reporting violates our terms of use:"
+      placeholder: "This content violates the terms because..."
+      submit: "Report this content"
     title: "Reports overview"
     post_label: "<strong>Post</strong>: %{content}"
     comment_label: "<strong>Comment</strong>: %{data}"
@@ -1435,5 +1444,3 @@ en:
     disabled: "Not available"
     open: "Open"
     closed: "Closed"
-
-

config/locales/javascript/javascript.en.yml

@@ -12,8 +12,6 @@ en:
     delete: "Delete"
     ignore: "Ignore"
     report:
-      prompt: "Please enter a reason:"
-      prompt_default: "e.g. offensive content"
       name: "Report"
       status:
         created: "The report has successfully been created"

features/desktop/download_photos.feature

@@ -7,8 +7,7 @@ Feature: Download Photos
     When I follow "Settings"
     Then I should be on my account settings page
     When I follow "Request my photos"
-    Then I should see a flash message indicating success
+    Then I should see a success flash message containing "We are currently processing your photos"
-    And I should see a flash message containing "We are currently processing your photos"
 
   Scenario: Refresh my photos
     Given I am signed in
@@ -17,8 +16,7 @@ Feature: Download Photos
     When I follow "Settings"
     Then I should be on my account settings page
     When I follow "Refresh my photos"
-    Then I should see a flash message indicating success
+    Then I should see a success flash message containing "We are currently processing your photos"
-    And I should see a flash message containing "We are currently processing your photos"
 
   Scenario: Download my photos
     Given I am signed in

features/desktop/public_stream.feature

@@ -5,7 +5,6 @@ Feature: The public stream
       | username    | email             |
       | Alice Smith | alice@alice.alice |
       | Bob Jones   | bob@bob.bob       |
-
     And "bob@bob.bob" has a public post with text "Bob’s public post"
 
   Scenario: seeing public posts

features/desktop/report.feature

@@ -0,0 +1,64 @@
+@javascript
+Feature: reporting of posts and comments
+
+  Background:
+    Given a user with username "bob"
+    And a moderator with email "alice@alice.alice"
+    And "bob@bob.bob" has a public post with text "I'm a post by Bob"
+    And the terms of use are enabled
+
+  Scenario: User can report a post, but cannot report it twice
+    Given I sign in as "alice@alice.alice"
+    And I am on the public stream page
+    When I hover over the ".stream-element"
+    And I click to report the post
+    Then I should see the report modal
+    And I should see "Please only report content that violates"
+    When I fill in "report-reason-field" with "That's my reason"
+    And I submit the form
+    Then I should see a success flash message containing "The report has successfully been created"
+    When I hover over the ".stream-element"
+    And I click to report the post
+    And I fill in "report-reason-field" with "That's my reason2"
+    And I submit the form
+    Then I should see an error flash message containing "The report already exists"
+    When I go to the report page
+    Then I should see a report by "alice@alice.alice" with reason "That's my reason" on post "I'm a post by Bob"
+    And "alice@alice.alice" should have received an email with subject "A new post was marked as offensive"
+
+  Scenario: User can report a comment, but cannot report it twice
+    Given "bob@bob.bob" has commented "Bob comment" on "I'm a post by Bob"
+    And I sign in as "alice@alice.alice"
+    And I am on the public stream page
+    When I hover over the ".comment"
+    And I click to report the comment
+    Then I should see the report modal
+    When I fill in "report-reason-field" with "That's my reason"
+    And I submit the form
+    Then I should see a success flash message containing "The report has successfully been created"
+    When I hover over the ".comment"
+    And I click to report the comment
+    And I fill in "report-reason-field" with "That's my reason2"
+    And I submit the form
+    Then I should see an error flash message containing "The report already exists"
+    When I go to the report page
+    Then I should see a report by "alice@alice.alice" with reason "That's my reason" on comment "Bob comment"
+    And "alice@alice.alice" should have received an email with subject "A new comment was marked as offensive"
+
+  Scenario: The correct post is reported
+    Given "bob@bob.bob" has a public post with text "I'm a second post by Bob"
+    And I sign in as "alice@alice.alice"
+    And I am on the public stream page
+    When I hover over the ".stream-element:nth-child(2)"
+    And I click to report the post
+    And I fill in "report-reason-field" with "post 1"
+    And I close the modal
+    And I hover over the ".stream-element:first-child"
+    And I click to report the post
+    Then the "report-reason" field should be filled with ""
+    When I fill in "report-reason-field" with "post 2"
+    And I submit the form
+    And I go to the report page
+    Then I should see "I'm a second post by Bob" within ".content"
+    And I should see "post 2" within ".reason"
+    And I should see "alice" within ".reporter"

features/desktop/reshare.feature

@@ -19,8 +19,7 @@ Feature: public repost
     And I am on "bob@bob.bob"'s page
     And I open the show page of the "reshare this!" post
     And I confirm the alert after I click on selector "a.reshare"
-    Then I should see a flash message indicating success
+    Then I should see a success flash message containing "successfully"
-    And I should see a flash message containing "successfully"
 
   Scenario: Resharing a post from a single post page that is reshared
     Given the post with text "reshare this!" is reshared by "eve@eve.eve"
@@ -28,8 +27,7 @@ Feature: public repost
     And I am on "bob@bob.bob"'s page
     And I open the show page of the "reshare this!" post
     And I confirm the alert after I click on selector "a.reshare"
-    Then I should see a flash message indicating success
+    Then I should see a success flash message containing "successfully"
-    And I should see a flash message containing "successfully"
 
   Scenario: Delete original reshared post
     Given "alice@alice.alice" has a public post with text "Don't reshare this!"
@@ -46,8 +44,7 @@ Feature: public repost
     When I sign in as "alice@alice.alice"
     Then I should see a ".reshare" within ".feedback"
     When I confirm the alert after I follow "Reshare"
-    Then I should see a flash message indicating success
+    Then I should see a success flash message containing "successfully"
-    And I should see a flash message containing "successfully"
     And I should not see a ".reshare" within ".feedback"
 
   Scenario: Reshare a post from another user's profile
@@ -55,8 +52,7 @@ Feature: public repost
     And I am on "bob@bob.bob"'s page
     Then I should see a ".reshare" within ".feedback"
     When I confirm the alert after I follow "Reshare"
-    Then I should see a flash message indicating success
+    Then I should see a success flash message containing "successfully"
-    And I should see a flash message containing "successfully"
     And I should not see a ".reshare" within ".feedback"
 
   Scenario: Try to reshare an already reshared post from another user's profile

features/desktop/single_post_view_moderation.feature

@@ -7,52 +7,30 @@
       | bob        |
       | alice      |
     And a user with username "bob" is connected with "alice"
-    And I sign in as "bob@bob.bob"
+    And "bob@bob.bob" has a public post with text "Here is a post to test with"
 
   Scenario: hide a contact's post
-    Given I expand the publisher
+    When I sign in as "alice@alice.alice"
-    When I write the status message "Here is a post to test with"
-    And I submit the publisher
-
-    And I log out
-    And I sign in as "alice@alice.alice"
-
     And I open the show page of the "Here is a post to test with" post
     And I confirm the alert after I click to hide the post
-
     Then I should be on the stream page
 
   Scenario: block a contact
-    Given I expand the publisher
+    When I sign in as "alice@alice.alice"
-    When I write the status message "Here is a post to test with"
-    And I submit the publisher
-
-    And I log out
-    And I sign in as "alice@alice.alice"
-
     And I open the show page of the "Here is a post to test with" post
     And I confirm the alert after I click to block the user
-
     Then I should be on the stream page
 
   Scenario: report a contact
-    Given I expand the publisher
+    When I sign in as "alice@alice.alice"
-    When I write the status message "Here is a post to test with"
-    And I submit the publisher
-
-    And I log out
-    And I sign in as "alice@alice.alice"
-
     And I open the show page of the "Here is a post to test with" post
-    And I confirm the prompt after I click to report the post
+    And I click to report the post
-
+    When I fill in "report-reason-field" with "That's my reason"
+    And I submit the form
     And I should see a flash message containing "The report has successfully been created"
 
   Scenario: delete own post
-    Given I expand the publisher
+    When I sign in as "bob@bob.bob"
-    When I write the status message "Here is a post to test with"
-    And I submit the publisher
-
     And I open the show page of the "Here is a post to test with" post
     And I confirm the alert after I click to delete the post
     Then I should be on the stream page

features/step_definitions/custom_web_steps.rb

@@ -214,6 +214,16 @@ Then /^I should see a flash message containing "(.+)"$/ do |text|
   flash_message_containing? text
 end
 
+Then /^I should see a success flash message containing "(.+)"$/ do |text|
+  flash_message_success?.should be true
+  flash_message_containing? text
+end
+
+Then /^I should see an error flash message containing "(.+)"$/ do |text|
+  flash_message_failure?.should be true
+  flash_message_containing? text
+end
+
 Given /^the reference screenshot directory is used$/ do
   set_screenshot_location 'reference'
 end

features/step_definitions/modal_steps.rb

@@ -20,3 +20,7 @@ When /^I press "(.*)" in the modal$/ do |txt|
     find_button(txt).trigger "click"
   end
 end
+
+When /^I close the modal$/ do
+  find(".modal-dialog .close").click
+end

features/step_definitions/report_steps.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+Given /^the terms of use are enabled$/ do
+  AppConfig.settings.terms.enable = true
+end
+
+And /^I should see the report modal/ do
+  step %(I should see "Reporting content" within "#reportModal")
+end
+
+And /^I should see a report by "([^"]*)" with reason "([^"]*)" on post "([^"]*)"$/ do |reporter, reason, content|
+  test_report("Post", User.find_by(email: reporter), reason, content)
+end
+
+And /^I should see a report by "([^"]*)" with reason "([^"]*)" on comment "([^"]*)"$/ do |reporter, reason, content|
+  test_report("Comment", User.find_by(email: reporter), reason, content)
+end
+
+def test_report(type, reporter, reason, content)
+  step %(I should see "#{reporter.username}" within ".reporter")
+  step %(I should see "#{reason}" within ".reason")
+  step %(I should see "#{type}: #{content}" within ".content")
+end

features/step_definitions/single_post_view_steps.rb

@@ -1,19 +1,23 @@
 # frozen_string_literal: true
 
 And /^I click to hide the post/ do
-  find('.hide_post').click
+  find(".hide_post").click
 end
 
 And /^I click to block the user/ do
-  find('.block_user').click
+  find(".block_user").click
 end
 
 And /^I click to report the post/ do
-  find('.post_report').click
+  find(".post_report").click
+end
+
+And /^I click to report the comment/ do
+  find(".comment_report").click
 end
 
 And /^I click to delete the post/ do
-  find('.remove_post').click
+  find(".remove_post").click
 end
 
 And /^I click to (?:like|unlike) the post/ do

features/step_definitions/user_steps.rb

@@ -28,7 +28,7 @@ Given /^a nsfw user with email "([^\"]*)"$/ do |email|
 end
 
 Given /^a moderator with email "([^\"]*)"$/ do |email|
-  user = create_user(email: email)
+  user = create_user(email: email, username: email.split("@")[0])
   Role.add_moderator(user)
 end
 
@@ -177,6 +177,12 @@ Then /^I should( not)? see "([^\"]*)" in the last sent email$/ do |negate, text|
   end
 end
 
+Then /^"([^"]*)" should have received an email with subject "([^"]*)"$/ do |user_email, subject|
+  email = ActionMailer::Base.deliveries.last
+  expect(email.to).to have_content(user_email)
+  expect(email.subject).to have_content(subject)
+end
+
 When /^"([^\"]+)" has posted a (public )?status message with a photo$/ do |email, public_status|
   user = User.find_for_database_authentication(username: email)
   post = FactoryBot.create(

features/support/paths.rb

@@ -11,6 +11,8 @@ module NavigationHelpers
       force_mobile_path
     when /^the user applications page$/
       api_openid_connect_user_applications_path
+    when /^the report page$/
+      report_index_path
     when /^the tag page for "([^\"]*)"$/
       tag_path(Regexp.last_match(1))
     when /^its ([\w ]+) page$/

spec/javascripts/app/views/bookmarklet_view_spec.js

@@ -43,7 +43,7 @@ describe("app.views.Bookmarklet", function() {
     expect(app.publisher.inputEl.val()).toMatch(/.+A$/);
   });
 
-  it("keeps the publisher disabled after successful post creation", function() {
+  xit("keeps the publisher disabled after successful post creation", function() {
     init_bookmarklet(test_data);
     spec.content().find("form").submit();