From 6a4b83fb9d1fb650e9ccf0ab0ad0c1e052aa5515 Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Fri, 16 Feb 2024 17:52:50 +0200
Subject: [PATCH] Remove jQuery from username change prompt and fix its
 detection (#29197)

- Switched to plain JavaScript
- Tested the user rename prompt toggling functionality and it works as
before
- Fixed bug that allowed pasting with the mouse to avoid the prompt

# Before

![before](https://github.com/go-gitea/gitea/assets/20454870/aa300ad7-612b-461e-bbb2-3f74b3b83ede)

# After

![after](https://github.com/go-gitea/gitea/assets/20454870/f2b5a51b-7b39-43c7-8a4a-62f1f77acae4)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 0768842ef56758b3290406656c5ebbd605358f6e)
---
 web_src/js/features/user-settings.js | 29 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js
index d49bf39275..0dd908f34a 100644
--- a/web_src/js/features/user-settings.js
+++ b/web_src/js/features/user-settings.js
@@ -1,18 +1,19 @@
-import $ from 'jquery';
 import {hideElem, showElem} from '../utils/dom.js';
 
 export function initUserSettings() {
-  if ($('.user.settings.profile').length > 0) {
-    $('#username').on('keyup', function () {
-      const $prompt = $('#name-change-prompt');
-      const $prompt_redirect = $('#name-change-redirect-prompt');
-      if ($(this).val().toString().toLowerCase() !== $(this).data('name').toString().toLowerCase()) {
-        showElem($prompt);
-        showElem($prompt_redirect);
-      } else {
-        hideElem($prompt);
-        hideElem($prompt_redirect);
-      }
-    });
-  }
+  if (document.querySelectorAll('.user.settings.profile').length === 0) return;
+
+  const usernameInput = document.getElementById('username');
+  if (!usernameInput) return;
+  usernameInput.addEventListener('input', function () {
+    const prompt = document.getElementById('name-change-prompt');
+    const promptRedirect = document.getElementById('name-change-redirect-prompt');
+    if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) {
+      showElem(prompt);
+      showElem(promptRedirect);
+    } else {
+      hideElem(prompt);
+      hideElem(promptRedirect);
+    }
+  });
 }