Merge branch '50521-block-emojis-and-symbol-characters-from-user-s-full-names-2' into 'master'

Resolve "Block emojis and symbol characters from user's full names"

Closes #50521

See merge request gitlab-org/gitlab-ce!24523

1 files changed, 12 insertions, 0 deletions

diff --git a/app/assets/javascripts/pages/profiles/show/index.js b/app/assets/javascripts/pages/profiles/show/index.js
index c7ce4675573..0dd0d5336fc 100644
--- a/app/assets/javascripts/pages/profiles/show/index.js
+++ b/app/assets/javascripts/pages/profiles/show/index.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import createFlash from '~/flash';
 import GfmAutoComplete from '~/gfm_auto_complete';
+import emojiRegex from 'emoji-regex';
 import EmojiMenu from './emoji_menu';
 
 const defaultStatusEmoji = 'speech_balloon';
@@ -42,6 +43,17 @@ document.addEventListener('DOMContentLoaded', () => {
   const emojiAutocomplete = new GfmAutoComplete();
   emojiAutocomplete.setup($(statusMessageField), { emojis: true });
 
+  const userNameInput = document.getElementById('user_name');
+  userNameInput.addEventListener('input', () => {
+    const EMOJI_REGEX = emojiRegex();
+    if (EMOJI_REGEX.test(userNameInput.value)) {
+      // set field to invalid so it gets detected by GlFieldErrors
+      userNameInput.setCustomValidity('Invalid field');
+    } else {
+      userNameInput.setCustomValidity('');
+    }
+  });
+
   import(/* webpackChunkName: 'emoji' */ '~/emoji')
     .then(Emoji => {
       const emojiMenu = new EmojiMenu(