FIX: don't allow adding a value containing vertical bar char to the secret list

app/assets/javascripts/admin/components/secret-value-list.js.es6

@@ -2,11 +2,10 @@ import { on } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
   classNameBindings: [":value-list", ":secret-value-list"],
-  inputInvalidKey: Ember.computed.empty("newKey"),
-  inputInvalidSecret: Ember.computed.empty("newSecret"),
   inputDelimiter: null,
   collection: null,
   values: null,
+  validationMessage: null,
 
   @on("didReceiveAttrs")
   _setupCollection() {
@@ -20,15 +19,18 @@ export default Ember.Component.extend({
 
   actions: {
     changeKey(index, newValue) {
+      if (this._checkInvalidInput(newValue)) return;
       this._replaceValue(index, newValue, "key");
     },
 
     changeSecret(index, newValue) {
+      if (this._checkInvalidInput(newValue)) return;
       this._replaceValue(index, newValue, "secret");
     },
 
     addValue() {
-      if (this.get("inputInvalidKey") || this.get("inputInvalidSecret")) return;
+      if (this._checkInvalidInput([this.get("newKey"), this.get("newSecret")]))
+        return;
       this._addValue(this.get("newKey"), this.get("newSecret"));
       this.setProperties({ newKey: "", newSecret: "" });
     },
@@ -38,6 +40,19 @@ export default Ember.Component.extend({
     }
   },
 
+  _checkInvalidInput(inputs) {
+    this.set("validationMessage", null);
+    for (let input of inputs) {
+      if (Ember.isEmpty(input) || input.includes("|")) {
+        this.set(
+          "validationMessage",
+          I18n.t("admin.site_settings.secret_list.invalid_input")
+        );
+        return true;
+      }
+    }
+  },
+
   _addValue(value, secret) {
     this.get("collection").addObject({ key: value, secret: secret });
     this._saveValues();

app/assets/javascripts/admin/templates/components/secret-value-list.hbs

@@ -20,3 +20,5 @@
              icon="plus"
              class="add-value-btn btn-small"}}
 </div>
+
+{{setting-validation-message message=validationMessage}}

app/assets/stylesheets/common/admin/admin_base.scss

@@ -935,12 +935,23 @@ table#user-badges {
       margin-left: 0.25em;
       margin-top: 0.125em;
     }
-    &:last-of-type {
-      .new-value-input {
-        &:first-of-type {
-          margin-left: 0.25em;
-        }
-      }
+    .new-value-input {
+      margin-left: 0.25em;
+    }
+  }
+}
+
+.mobile-view .secret-value-list {
+  .add-value-btn {
+    margin-bottom: 9px;
+  }
+  .value {
+    .value-input:last-of-type {
+      margin-left: 2.35em;
+    }
+    .new-value-input:first-of-type {
+      margin-right: 2.15em;
+      margin-left: 0.25em;
     }
   }
 }

config/locales/client.en.yml

@@ -3948,6 +3948,8 @@ en:
           tags: "Tags"
           search: "Search"
           groups: "Groups"
+        secret_list:
+          invalid_input: "Input fields cannot be empty or contain vertical bar character."
 
       badges:
         title: Badges

test/javascripts/components/secret-value-list-test.js.es6

@@ -41,6 +41,34 @@ componentTest("adding a value", {
   }
 });
 
+componentTest("adding an invalid value", {
+  template: "{{secret-value-list values=values}}",
+
+  async test(assert) {
+    await fillIn(".new-value-input.key", "someString");
+    await fillIn(".new-value-input.secret", "keyWithAPipe|Hidden");
+    await click(".add-value-btn");
+
+    assert.ok(
+      find(".values .value").length === 0,
+      "it doesn't add the value to the list of values"
+    );
+
+    assert.deepEqual(
+      this.get("values"),
+      undefined,
+      "it doesn't add the value to the list of values"
+    );
+
+    assert.ok(
+      find(".validation-error")
+        .html()
+        .indexOf(I18n.t("admin.site_settings.secret_list.invalid_input")) > -1,
+      "it shows validation error"
+    );
+  }
+});
+
 componentTest("removing a value", {
   template: "{{secret-value-list values=values}}",