feat(gsoc'24): adding language filter to avoid inappropriate language (…

…#24)

* fix: improved some inconsistent UI

UI changes includes following
- instead of too many boxes i.e borders on the all thread page, with the
  help of just right side border to side panel. it is much more readable
- previously link of the thread was title now, I improved it to have
  thread card as link since there was no other clickable items in the
  card
- in the forum_post template, now meta data of forum post like post
  author and edit, delete action buttons are now visually separated from
  the post using just background color

* added the profanity, hate, violence, sex filter using `language_filter` gem

- these filters are applied on forum_thread's title, forum_posts's body
- error messages are now improves with proper alert message styling
  using bootstrap's alter class

app/assets/stylesheets/simple_discussion.scss

@@ -4,11 +4,8 @@
 @import "simple_discussion_variables";
 
 .community-heading {
-  margin-top: 10px;
-  width: 95%;
   color: #212529;
-  margin-left: 4rem;
-  margin-bottom: 24px;
+  padding-block: 12px;
 }
 
 // Primary button for Forum
@@ -236,32 +233,30 @@
   border: 1px solid #80808029;
   border-radius: 3px;
   padding: 20px;
+
+  &:hover {
+    text-decoration: none;
+    background-color: $forum-thread-filter-btn-link-hover-background;
+
+  }
 }
 
 // Formatting forum post
 .simple_discussion .forum-post {
-  padding: 10px;
   border-radius: $post-body-border-radius;
   margin-bottom: 10px;
   border: 1px solid #80808029;
 
-  &:hover {
-    background-color: #f4f3f3;
-  }
-
   .card-body {
-    padding: 10px;
-
-    p {
-      font-size: 14px;
-    }
+    margin-top: 16px;
   }
 }
 
 // Formatting the listtile for user details
 .simple_discussion .forum-post .forum-post-header,
 .form-user-details {
-  padding: 0 10px;
+  padding: 10px;
+  background-color: $forum-thread-filter-btn-link-hover-background;
 
   p {
     padding: 0;
@@ -295,10 +290,9 @@
 
 .sidebar-sticky {
   position: sticky;
-  top: 120px;
+  top: 60px;
 }
 
 .thread-page-container {
-  border: 1px solid #80808029;
-  padding: 15px;
+  padding: 24px;
 }

app/controllers/simple_discussion/forum_posts_controller.rb

@@ -13,7 +13,7 @@ def create
       SimpleDiscussion::ForumPostNotificationJob.perform_later(@forum_post)
       redirect_to simple_discussion.forum_thread_path(@forum_thread, anchor: "forum_post_#{@forum_post.id}")
     else
-      render template: "simple_discussion/forum_threads/show"
+      render template: "simple_discussion/forum_threads/show", status: :unprocessable_entity
     end
   end
 
@@ -24,7 +24,7 @@ def update
     if @forum_post.update(forum_post_params)
       redirect_to simple_discussion.forum_thread_path(@forum_thread)
     else
-      render action: :edit
+      render action: :edit, status: :unprocessable_entity
     end
   end
 

app/controllers/simple_discussion/forum_threads_controller.rb

@@ -45,7 +45,7 @@ def create
       SimpleDiscussion::ForumThreadNotificationJob.perform_later(@forum_thread)
       redirect_to simple_discussion.forum_thread_path(@forum_thread)
     else
-      render action: :new
+      render action: :new, status: :unprocessable_entity
     end
   end
 
@@ -56,7 +56,7 @@ def update
     if @forum_thread.update(forum_thread_params)
       redirect_to simple_discussion.forum_thread_path(@forum_thread), notice: I18n.t("your_changes_were_saved")
     else
-      render action: :edit
+      render action: :edit, status: :unprocessable_entity
     end
   end
 

app/models/forum_post.rb

@@ -1,13 +1,29 @@
+require "language_filter"
 class ForumPost < ApplicationRecord
   belongs_to :forum_thread, counter_cache: true, touch: true
   belongs_to :user
 
   validates :user_id, :body, presence: true
+  validate :clean_body, if: -> { SimpleDiscussion.profanity_filter }
 
   scope :sorted, -> { order(:created_at) }
 
   after_update :solve_forum_thread, if: :solved?
 
+  def clean_body
+    filters = [:profanity, :sex, :violence, :hate]
+    detected_words = Set.new
+
+    filters.each do |matchlist|
+      filter = LanguageFilter::Filter.new(matchlist: matchlist)
+      detected_words.merge(filter.matched(body)) if filter.match?(body)
+    end
+
+    if detected_words.any?
+      errors.add(:body, I18n.t(".inappropriate_language_error_message", words: detected_words.to_a.join(", ")))
+    end
+  end
+
   def solve_forum_thread
     forum_thread.update(solved: true)
   end

app/models/forum_thread.rb

@@ -1,3 +1,4 @@
+require "language_filter"
 class ForumThread < ApplicationRecord
   extend FriendlyId
   friendly_id :title, use: :slugged
@@ -16,12 +17,29 @@ class ForumThread < ApplicationRecord
   validates :user_id, :title, presence: true
   validates_associated :forum_posts
 
+  validate :clean_title, if: -> { SimpleDiscussion.profanity_filter }
+
   scope :pinned_first, -> { order(pinned: :desc) }
   scope :solved, -> { where(solved: true) }
   scope :sorted, -> { order(updated_at: :desc) }
   scope :unpinned, -> { where.not(pinned: true) }
   scope :unsolved, -> { where.not(solved: true) }
 
+  def clean_title
+    filters = [:profanity, :sex, :violence, :hate]
+
+    detected_words = Set.new
+
+    filters.each do |matchlist|
+      filter = LanguageFilter::Filter.new(matchlist: matchlist)
+      detected_words.merge(filter.matched(title)) if filter.match?(title)
+    end
+
+    if detected_words.any?
+      errors.add(:title, I18n.t(".inappropriate_language_error_message", words: detected_words.to_a.join(", ")))
+    end
+  end
+
   def subscribed_users
     (users + optin_subscribers).uniq - optout_subscribers
   end

app/views/layouts/simple_discussion.html.erb

@@ -1,8 +1,8 @@
 <div>
-  <h1 class="community-heading"><%= t('community') %></h1>
   <div class="row simple_discussion mt-2">
-    <div class="col-md-2 mb-3">
+    <div class="col-lg-2 mb-3 border-right">
       <div class="col sidebar-sticky">
+        <h2 class="community-heading"><%= t('community') %></h2>
         <%= link_to t('ask_a_question'), simple_discussion.new_forum_thread_path, class: "btn forum-primary-btn btn-block mb-4" %>
 
         <div class="forum-thread-filters">
@@ -60,7 +60,7 @@
 
     </div>
 
-    <div class="col-md-10 mb-3 thread-page-container">
+    <div class="col-lg-10 mb-3 thread-page-container">
       <%= yield %>
     </div>
   </div>

app/views/simple_discussion/forum_posts/_form.html.erb

@@ -4,14 +4,10 @@
   html: { data: { behavior: "comment-form" } } do |f| %>
 
   <% if @forum_post.errors.any? %>
-    <div id="error_explanation">
-      <h2><%= pluralize(@forum_post.errors.count, "error") %> <%= t("forum_thread_error_explanation") %></h2>
-
-      <ul>
-        <% @forum_post.errors.full_messages.each do |message| %>
-          <li><%= message %></li>
-        <% end %>
-      </ul>
+    <div class="alert alert-danger" role="alert">
+      <% @forum_post.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
     </div>
   <% end %>
 

app/views/simple_discussion/forum_posts/_forum_post.html.erb

@@ -27,7 +27,7 @@
     </div>
   </div>
 
-  <div class="card-body pb-0">
+  <div class="card-body p-3">
     <%= formatted_content forum_post.body %>
   </div>
 

app/views/simple_discussion/forum_threads/_form.html.erb

@@ -3,14 +3,10 @@
    html: { data: {behavior: "comment-form"} } do |f| %>
 
   <% if @forum_thread.errors.any? %>
-    <div id="error_explanation">
-      <h2><%= pluralize(@forum_thread.errors.count, "error") %> <%= t("forum_thread_error_explanation") %></h2>
-
-      <ul>
+    <div class="alert alert-danger" role="alert">
       <% @forum_thread.errors.full_messages.each do |message| %>
         <li><%= message %></li>
       <% end %>
-      </ul>
     </div>
   <% end %>
 

app/views/simple_discussion/forum_threads/_forum_thread.html.erb

@@ -1,13 +1,13 @@
 <%= cache forum_thread do %>
-  <div class="forum-thread d-flex flex-row mb-4">
+  <%= link_to simple_discussion.forum_thread_path(forum_thread), class: "forum-thread d-flex flex-row mb-4" do %>
     <div class="mr-3 d-none d-md-block">
       <img class="avatar" src="<%= gravatar_url_for(forum_thread.user.email,size: 30) %>" alt="user avatar">
     </div>
     <div class="thread-container">
       <div class="thread-header d-flex flex-row justify-content-between mb-1">
-        <%= link_to simple_discussion.forum_thread_path(forum_thread), class: "thread-header-title" do %>
+        <div class="thread-header-title">
           <%= icon "fas", "thumb-tack", class: "text-muted" if forum_thread.pinned? %> <%= forum_thread.title %>
-        <% end %>
+        </div>
         <div class="thread-header-icons d-flex flex-row">
           <div class="chat-icon mr-3">
             <%= icon "fas", "comments" %>
@@ -39,5 +39,5 @@
         </div>
       </div>
     </div>
-  </div>
+  <% end %>
 <% end %>

config/locales/en.yml

@@ -55,4 +55,5 @@ en:
   open: "Open"
   create_account: "Create account"
   login: "Log in"
-  commented: "commented:"
+  commented: "commented:"
+  inappropriate_language_error_message: "contains inappropriate language: %{words}"

config/locales/es.yml

@@ -39,3 +39,20 @@ es:
   ask_your_question: Haz tu pregunta
   update_comment: Actualiza tu comentario
   your_changes_were_saved: Tus cambios fueron guardados
+  search_not_found: No se encontraron resultados para tu búsqueda
+  check_out: Echa un vistazo
+  latest_questions: las preguntas más recientes
+  instead: ¿en su lugar?
+  forum_thread_error_explanation: "prohibió que este hilo del foro se guardara:"
+  ago: "hace"
+  on: "el"
+  mark_as_solved: "Marcar como resuelto"
+  undo: "Deshacer"
+  back_to_thread: "Volver al hilo"
+  created_by: "Creado por"
+  solved: "Resuelto"
+  open: "Abrir"
+  create_account: "Crear cuenta"
+  login: "Iniciar sesión"
+  commented: "comentó:"
+  inappropriate_language_error_message: "contiene lenguaje inapropiado: %{words}"

config/locales/fr.yml

@@ -45,3 +45,16 @@ fr:
   check_out: Voir
   latest_questions: les dernières questions
   instead: à la place
+  forum_thread_error_explanation: "a interdit l'enregistrement de ce fil de discussion:"
+  ago: "il y a"
+  on: "le"
+  mark_as_solved: "Marquer comme résolu"
+  undo: "Annuler"
+  back_to_thread: "Retour au fil de discussion"
+  created_by: "Créé par"
+  solved: "Résolu"
+  open: "Ouvrir"
+  create_account: "Créer un compte"
+  login: "Se connecter"
+  commented: "a commenté:"
+  inappropriate_language_error_message: "contient un langage inapproprié : %{words}"