From 15174448873e38eaf79e27007208ca3175daec5c Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 6 Apr 2026 16:07:31 +0200
Subject: [PATCH] [call-me] - add copy username button to sign-in input

---
 app/locales/ar.json |  1 +
 app/locales/de.json |  1 +
 app/locales/en.json |  1 +
 app/locales/es.json |  1 +
 app/locales/fr.json |  1 +
 app/locales/hi.json |  1 +
 app/locales/hr.json |  1 +
 app/locales/it.json |  1 +
 app/locales/ja.json |  1 +
 app/locales/pt.json |  1 +
 app/locales/ru.json |  1 +
 app/locales/sr.json |  1 +
 app/locales/zh.json |  1 +
 package-lock.json   |  4 ++--
 package.json        |  2 +-
 public/client.js    | 17 +++++++++++++++++
 public/index.html   | 24 +++++++++++++++++-------
 public/style.css    | 34 +++++++++++++++++++++++++++++++++-
 18 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/app/locales/ar.json b/app/locales/ar.json
index f39c952..36ac2d3 100644
--- a/app/locales/ar.json
+++ b/app/locales/ar.json
@@ -77,6 +77,7 @@
         "invalidPassword": "كلمة مرور غير صحيحة",
         "shareRoomText": "اتصل بي على Call-me!",
         "roomCopied": "تم نسخ رابط الاتصال إلى الحافظة!",
+        "usernameCopied": "تم نسخ اسم المستخدم '__username__' إلى الحافظة!",
         "devicesRefreshed": "تم تحديث الأجهزة بنجاح",
         "cameraChanged": "تم تغيير الكاميرا بنجاح",
         "microphoneChanged": "تم تغيير الميكروفون بنجاح",
diff --git a/app/locales/de.json b/app/locales/de.json
index 68fb334..3c8d13f 100644
--- a/app/locales/de.json
+++ b/app/locales/de.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Ungültiges Passwort",
         "shareRoomText": "Ruf mich auf Call-me an!",
         "roomCopied": "Anruflink in die Zwischenablage kopiert!",
+        "usernameCopied": "Benutzername '__username__' in die Zwischenablage kopiert!",
         "devicesRefreshed": "Geräte erfolgreich aktualisiert",
         "cameraChanged": "Kamera erfolgreich gewechselt",
         "microphoneChanged": "Mikrofon erfolgreich gewechselt",
diff --git a/app/locales/en.json b/app/locales/en.json
index f78ed75..5bab4cb 100644
--- a/app/locales/en.json
+++ b/app/locales/en.json
@@ -78,6 +78,7 @@
         "invalidPassword": "Invalid password",
         "shareRoomText": "Call me on Call-me!",
         "roomCopied": "Call link copied to clipboard!",
+        "usernameCopied": "Username '__username__' copied to clipboard!",
         "devicesRefreshed": "Devices refreshed successfully",
         "cameraChanged": "Camera changed successfully",
         "microphoneChanged": "Microphone changed successfully",
diff --git a/app/locales/es.json b/app/locales/es.json
index a9b2bac..8c55332 100644
--- a/app/locales/es.json
+++ b/app/locales/es.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Contraseña inválida",
         "shareRoomText": "¡Llámame en Call-me!",
         "roomCopied": "¡Enlace de llamada copiado al portapapeles!",
+        "usernameCopied": "¡Nombre de usuario '__username__' copiado al portapapeles!",
         "devicesRefreshed": "Dispositivos actualizados correctamente",
         "cameraChanged": "Cámara cambiada correctamente",
         "microphoneChanged": "Micrófono cambiado correctamente",
diff --git a/app/locales/fr.json b/app/locales/fr.json
index a4ae3a4..73764fa 100644
--- a/app/locales/fr.json
+++ b/app/locales/fr.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Mot de passe invalide",
         "shareRoomText": "Appelez-moi sur Call-me !",
         "roomCopied": "Lien d'appel copié dans le presse-papiers !",
+        "usernameCopied": "Nom d'utilisateur '__username__' copié dans le presse-papiers !",
         "devicesRefreshed": "Appareils actualisés avec succès",
         "cameraChanged": "Caméra changée avec succès",
         "microphoneChanged": "Microphone changé avec succès",
diff --git a/app/locales/hi.json b/app/locales/hi.json
index 129ffac..c503cc9 100644
--- a/app/locales/hi.json
+++ b/app/locales/hi.json
@@ -77,6 +77,7 @@
         "invalidPassword": "अमान्य पासवर्ड",
         "shareRoomText": "मुझे Call-me पर कॉल करें!",
         "roomCopied": "कॉल लिंक क्लिपबोर्ड पर कॉपी किया गया!",
+        "usernameCopied": "उपयोगकर्ता नाम '__username__' क्लिपबोर्ड पर कॉपी किया गया!",
         "devicesRefreshed": "डिवाइस सफलतापूर्वक रिफ्रेश किए गए",
         "cameraChanged": "कैमरा सफलतापूर्वक बदला गया",
         "microphoneChanged": "माइक्रोफ़ोन सफलतापूर्वक बदला गया",
diff --git a/app/locales/hr.json b/app/locales/hr.json
index e407a75..0861969 100644
--- a/app/locales/hr.json
+++ b/app/locales/hr.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Neispravna lozinka",
         "shareRoomText": "Nazovi me na Call-me!",
         "roomCopied": "Link za poziv kopiran u međuspremnik!",
+        "usernameCopied": "Korisničko ime '__username__' kopirano u međuspremnik!",
         "devicesRefreshed": "Uređaji su uspješno osvježeni",
         "cameraChanged": "Kamera je uspješno promijenjena",
         "microphoneChanged": "Mikrofon je uspješno promijenjen",
diff --git a/app/locales/it.json b/app/locales/it.json
index 3c75d70..e55f563 100644
--- a/app/locales/it.json
+++ b/app/locales/it.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Password non valida",
         "shareRoomText": "Chiamami su Call-me!",
         "roomCopied": "Link di chiamata copiato negli appunti!",
+        "usernameCopied": "Nome utente '__username__' copiato negli appunti!",
         "devicesRefreshed": "Dispositivi aggiornati correttamente",
         "cameraChanged": "Fotocamera cambiata correttamente",
         "microphoneChanged": "Microfono cambiato correttamente",
diff --git a/app/locales/ja.json b/app/locales/ja.json
index 6eb0fe2..cab5fcf 100644
--- a/app/locales/ja.json
+++ b/app/locales/ja.json
@@ -77,6 +77,7 @@
         "invalidPassword": "パスワードが無効です",
         "shareRoomText": "Call-meで電話してね！",
         "roomCopied": "通話リンクをクリップボードにコピーしました！",
+        "usernameCopied": "ユーザー名 '__username__' をクリップボードにコピーしました！",
         "devicesRefreshed": "デバイスを正常に更新しました",
         "cameraChanged": "カメラを正常に変更しました",
         "microphoneChanged": "マイクを正常に変更しました",
diff --git a/app/locales/pt.json b/app/locales/pt.json
index 8591898..0841f26 100644
--- a/app/locales/pt.json
+++ b/app/locales/pt.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Senha inválida",
         "shareRoomText": "Me ligue no Call-me!",
         "roomCopied": "Link de chamada copiado para a área de transferência!",
+        "usernameCopied": "Nome de usuário '__username__' copiado para a área de transferência!",
         "devicesRefreshed": "Dispositivos atualizados com sucesso",
         "cameraChanged": "Câmera alterada com sucesso",
         "microphoneChanged": "Microfone alterado com sucesso",
diff --git a/app/locales/ru.json b/app/locales/ru.json
index 4f36dca..8039e33 100644
--- a/app/locales/ru.json
+++ b/app/locales/ru.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Неверный пароль",
         "shareRoomText": "Позвоните мне на Call-me!",
         "roomCopied": "Ссылка для звонка скопирована в буфер обмена!",
+        "usernameCopied": "Имя пользователя '__username__' скопировано в буфер обмена!",
         "devicesRefreshed": "Устройства успешно обновлены",
         "cameraChanged": "Камера успешно изменена",
         "microphoneChanged": "Микрофон успешно изменён",
diff --git a/app/locales/sr.json b/app/locales/sr.json
index 27d6f3a..291f417 100644
--- a/app/locales/sr.json
+++ b/app/locales/sr.json
@@ -77,6 +77,7 @@
         "invalidPassword": "Neispravna lozinka",
         "shareRoomText": "Pozovi me na Call-me!",
         "roomCopied": "Link za poziv kopiran u ostavu!",
+        "usernameCopied": "Korisničko ime '__username__' kopirano u ostavu!",
         "devicesRefreshed": "Uređaji su uspešno osveženi",
         "cameraChanged": "Kamera je uspešno promenjena",
         "microphoneChanged": "Mikrofon je uspešno promenjen",
diff --git a/app/locales/zh.json b/app/locales/zh.json
index b9ee038..b755751 100644
--- a/app/locales/zh.json
+++ b/app/locales/zh.json
@@ -77,6 +77,7 @@
         "invalidPassword": "密码无效",
         "shareRoomText": "在 Call-me 上呼叫我！",
         "roomCopied": "通话链接已复制到剪贴板！",
+        "usernameCopied": "用户名 '__username__' 已复制到剪贴板！",
         "devicesRefreshed": "设备刷新成功",
         "cameraChanged": "摄像头切换成功",
         "microphoneChanged": "麦克风切换成功",
diff --git a/package-lock.json b/package-lock.json
index 32a5739..6021e85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.3.17",
+    "version": "1.3.18",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.3.17",
+            "version": "1.3.18",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.7.0",
diff --git a/package.json b/package.json
index fa93d95..273ea02 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.3.17",
+    "version": "1.3.18",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",
diff --git a/public/client.js b/public/client.js
index 2d0f18e..25070c1 100755
--- a/public/client.js
+++ b/public/client.js
@@ -543,6 +543,7 @@ function handleListeners() {
     localVideoContainer.addEventListener('click', toggleFullScreen);
     remoteVideo.addEventListener('click', toggleFullScreen);
     usernameIn.addEventListener('keyup', (e) => handleKeyUp(e, handleSignInClick));
+    document.getElementById('copyUsernameBtn').addEventListener('click', handleCopyUsername);
     usersTab.addEventListener('click', () => switchTab('users'));
     chatTab.addEventListener('click', () => switchTab('chat'));
     settingsTab.addEventListener('click', () => switchTab('settings'));
@@ -793,6 +794,22 @@ async function handleShareRoomClick() {
     }
 }
 
+// Copy username to clipboard
+async function handleCopyUsername() {
+    const username = usernameIn.value.trim();
+    if (!username) {
+        toast(t('signIn.enterUsername'), 'warning', 'top', 2000);
+        usernameIn.focus();
+        return;
+    }
+    try {
+        await navigator.clipboard.writeText(username);
+        toast(t('messages.usernameCopied', { username }), 'success', 'top', 3000);
+    } catch (error) {
+        handleError(t('errors.copyToClipboardFailed'), error.message);
+    }
+}
+
 // Copy text to clipboard
 async function copyToClipboard(text, showError = true) {
     try {
diff --git a/public/index.html b/public/index.html
index 4fe9248..b820c6a 100755
--- a/public/index.html
+++ b/public/index.html
@@ -78,13 +78,23 @@
                             <!-- Sign-in Form -->
                             <div class="mb-3">
                                 <!-- Input field for entering the username -->
-                                <input
-                                    id="usernameIn"
-                                    type="text"
-                                    placeholder="Choose a display name"
-                                    data-i18n-placeholder="signIn.username"
-                                    required
-                                />
+                                <div class="username-input-wrapper">
+                                    <input
+                                        id="usernameIn"
+                                        type="text"
+                                        placeholder="Choose a display name"
+                                        data-i18n-placeholder="signIn.username"
+                                        required
+                                    />
+                                    <button
+                                        id="copyUsernameBtn"
+                                        class="copy-username-btn"
+                                        type="button"
+                                        title="Copy username"
+                                    >
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
                             </div>
                             <!-- Media toggles -->
                             <div class="media-toggles mb-3">
diff --git a/public/style.css b/public/style.css
index acd4e98..da0eacd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -894,11 +894,43 @@ input {
     text-align: center;
 }
 
+/* Username input wrapper */
+.username-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.copy-username-btn {
+    position: absolute;
+    right: 10px;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 6px 8px;
+    border-radius: var(--border-radius);
+    transition: all var(--transition-base);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.copy-username-btn:hover {
+    color: var(--primary-light);
+    background: rgba(59, 130, 246, 0.1);
+}
+
+.copy-username-btn:active {
+    transform: scale(0.9);
+}
+
 /* Modern Input Styling */
 #usernameIn {
     display: block;
     width: 100%;
-    padding: 14px 18px;
+    padding: 14px 42px 14px 18px;
     font-size: 16px;
     color: var(--text-color);
     border: 2px solid var(--glass-border);