From 7403d466f4a1d5f61871fc16a38f44fe43e0cdd3 Mon Sep 17 00:00:00 2001
From: Ehsan Abdulqader <dev.e7san@gmail.com>
Date: Mon, 18 Feb 2019 08:40:07 +0000
Subject: Merge branch 'master' of https://gitlab.com/gitlab-org/gitlab-ce into
 feature/56787-realtime-validation-for-user-fullname-and-username

---
 app/assets/javascripts/emoji/no_emoji_validator.js | 63 ++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 app/assets/javascripts/emoji/no_emoji_validator.js

(limited to 'app/assets/javascripts/emoji')

diff --git a/app/assets/javascripts/emoji/no_emoji_validator.js b/app/assets/javascripts/emoji/no_emoji_validator.js
new file mode 100644
index 00000000000..0fd4dd74953
--- /dev/null
+++ b/app/assets/javascripts/emoji/no_emoji_validator.js
@@ -0,0 +1,63 @@
+import { __ } from '~/locale';
+import emojiRegex from 'emoji-regex';
+
+const invalidInputClass = 'gl-field-error-outline';
+
+export default class NoEmojiValidator {
+  constructor(opts = {}) {
+    const container = opts.container || '';
+    this.noEmojiEmelents = document.querySelectorAll(`${container} .js-block-emoji`);
+
+    this.noEmojiEmelents.forEach(element =>
+      element.addEventListener('input', this.eventHandler.bind(this)),
+    );
+  }
+
+  eventHandler(event) {
+    this.inputDomElement = event.target;
+    this.inputErrorMessage = this.inputDomElement.nextSibling;
+
+    const { value } = this.inputDomElement;
+
+    this.validatePattern(value);
+    this.setValidationStateAndMessage();
+  }
+
+  validatePattern(value) {
+    const pattern = emojiRegex();
+    this.hasEmojis = new RegExp(pattern).test(value);
+
+    if (this.hasEmojis) {
+      this.inputDomElement.setCustomValidity(__('Invalid input, please avoid emojis'));
+    } else {
+      this.inputDomElement.setCustomValidity('');
+    }
+  }
+
+  setValidationStateAndMessage() {
+    if (!this.inputDomElement.checkValidity()) {
+      this.setInvalidState();
+    } else {
+      this.clearFieldValidationState();
+    }
+  }
+
+  clearFieldValidationState() {
+    this.inputDomElement.classList.remove(invalidInputClass);
+    this.inputErrorMessage.classList.add('hide');
+  }
+
+  setInvalidState() {
+    this.inputDomElement.classList.add(invalidInputClass);
+    this.setErrorMessage();
+  }
+
+  setErrorMessage() {
+    if (this.hasEmojis) {
+      this.inputErrorMessage.innerHTML = this.inputDomElement.validationMessage;
+    } else {
+      this.inputErrorMessage.innerHTML = this.inputDomElement.title;
+    }
+    this.inputErrorMessage.classList.remove('hide');
+  }
+}
-- 
cgit v1.2.3