From 348e37b8947a91f5622f9d0594929850a1b9b52d Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 6 Apr 2026 16:31:20 +0200
Subject: [PATCH] [call-me] - add random username generator button

---
 package-lock.json |  4 ++--
 package.json      |  2 +-
 public/client.js  | 12 ++++++++++++
 public/index.html |  8 ++++++++
 public/style.css  | 27 ++++++++++++++++++++++++++-
 5 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6021e85..f17cab4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.3.18",
+    "version": "1.3.19",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.3.18",
+            "version": "1.3.19",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.7.0",
diff --git a/package.json b/package.json
index 273ea02..3d1ff31 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.3.18",
+    "version": "1.3.19",
     "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 25070c1..9c9825e 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('randomUsernameBtn').addEventListener('click', handleRandomUsername);
     document.getElementById('copyUsernameBtn').addEventListener('click', handleCopyUsername);
     usersTab.addEventListener('click', () => switchTab('users'));
     chatTab.addEventListener('click', () => switchTab('chat'));
@@ -794,6 +795,17 @@ async function handleShareRoomClick() {
     }
 }
 
+// Generate random username
+function handleRandomUsername() {
+    const adjectives = ['Cool', 'Fast', 'Bright', 'Swift', 'Bold', 'Calm', 'Lucky', 'Brave', 'Clever', 'Happy'];
+    const nouns = ['Fox', 'Eagle', 'Tiger', 'Wolf', 'Hawk', 'Lion', 'Bear', 'Panda', 'Falcon', 'Shark'];
+    const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
+    const noun = nouns[Math.floor(Math.random() * nouns.length)];
+    const num = Math.floor(Math.random() * 1000);
+    usernameIn.value = `${adj}${noun}${num}`;
+    usernameIn.focus();
+}
+
 // Copy username to clipboard
 async function handleCopyUsername() {
     const username = usernameIn.value.trim();
diff --git a/public/index.html b/public/index.html
index b820c6a..1146337 100755
--- a/public/index.html
+++ b/public/index.html
@@ -86,6 +86,14 @@
                                         data-i18n-placeholder="signIn.username"
                                         required
                                     />
+                                    <button
+                                        id="randomUsernameBtn"
+                                        class="random-username-btn"
+                                        type="button"
+                                        title="Generate random username"
+                                    >
+                                        <i class="fas fa-random"></i>
+                                    </button>
                                     <button
                                         id="copyUsernameBtn"
                                         class="copy-username-btn"
diff --git a/public/style.css b/public/style.css
index da0eacd..d7b5e1b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -901,6 +901,31 @@ input {
     align-items: center;
 }
 
+.random-username-btn {
+    position: absolute;
+    right: 42px;
+    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;
+}
+
+.random-username-btn:hover {
+    color: var(--primary-light);
+    background: rgba(59, 130, 246, 0.1);
+}
+
+.random-username-btn:active {
+    transform: scale(0.9);
+}
+
 .copy-username-btn {
     position: absolute;
     right: 10px;
@@ -930,7 +955,7 @@ input {
 #usernameIn {
     display: block;
     width: 100%;
-    padding: 14px 42px 14px 18px;
+    padding: 14px 74px 14px 18px;
     font-size: 16px;
     color: var(--text-color);
     border: 2px solid var(--glass-border);