[call-me] - add random username generator button

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",

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",

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();

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"

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);