From d61511fde5ff10c588f00a92dd311523a2b10fce Mon Sep 17 00:00:00 2001
From: deing <admin@15318.de>
Date: Fri, 26 Jul 2019 14:57:33 +0200
Subject: [PATCH] Tags: Add client-side check for invalid characters

---
 tildes/scss/themes/_theme_base.scss             | 17 +++++++++++++++++
 .../static/js/behaviors/autocomplete-input.js   |  8 ++++++++
 tildes/tildes/templates/macros/forms.jinja2     |  1 +
 3 files changed, 26 insertions(+)

diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index c50a4f3..729669f 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -230,6 +230,23 @@
         color: $active-color;
       }
     }
+
+    &.error {
+      background-color: map-get($theme, "error");
+
+      $error-color: #fff;
+      $is-error-bg-light: perceived-brightness(map-get($theme, "error")) > 50;
+
+      @if ($is-error-bg-light) {
+        $error-color: #000;
+      }
+
+      color: $error-color;
+
+      .btn {
+        color: $error-color;
+      }
+    }
   }
 
   .comment-branch-counter {
diff --git a/tildes/static/js/behaviors/autocomplete-input.js b/tildes/static/js/behaviors/autocomplete-input.js
index 340e349..b23d4be 100644
--- a/tildes/static/js/behaviors/autocomplete-input.js
+++ b/tildes/static/js/behaviors/autocomplete-input.js
@@ -35,6 +35,14 @@ $.onmount("[data-js-autocomplete-input]", function() {
                     $chip.html(tag);
                     $chip.append(clearIcon);
 
+                    if (!tag.match(/^[\w .]+$/)) {
+                        $chip.addClass("error");
+                        $chip.attr(
+                            "title",
+                            "Tags may only contain letters, numbers, and spaces."
+                        );
+                    }
+
                     $chips.append($chip);
 
                     $tagsHiddenInput.val($tagsHiddenInput.val() + tag + ",");
diff --git a/tildes/tildes/templates/macros/forms.jinja2 b/tildes/tildes/templates/macros/forms.jinja2
index 6d323ce..a675476 100644
--- a/tildes/tildes/templates/macros/forms.jinja2
+++ b/tildes/tildes/templates/macros/forms.jinja2
@@ -49,6 +49,7 @@
         autocapitalize="none"
         spellcheck="false"
         name="tags"
+        pattern="[\w .,]*"
         placeholder='Tags (like "music, soundtrack, full album")'
         data-js-autocomplete-input='{{ autocomplete_options|tojson if autocomplete_options }}'
         {% if value %} value="{{ value }}"{% endif %}