[call-me] - fix sign-in

package.json

@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.0.31",
+    "version": "1.0.32",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",

public/client.js

@@ -34,10 +34,11 @@ let thisConnection;
 let stream;
 
 // On html page loaded...
-document.addEventListener('DOMContentLoaded', async function () {
+document.addEventListener('DOMContentLoaded', function () {
     handleToolTip();
     handleLocalStorage();
     handleDirectJoin();
+    handleListeners();
     fetchRandomImage();
 });
 
@@ -186,17 +187,19 @@ function handleMessage(data) {
     }
 }
 
-// Event listeners
-signInBtn.addEventListener('click', handleSignInClick);
-callBtn.addEventListener('click', handleCallClick);
-hideBtn.addEventListener('click', toggleLocalVideo);
-hangUpBtn.addEventListener('click', handleHangUpClick);
-localVideoContainer.addEventListener('click', toggleFullScreen);
-remoteVideo.addEventListener('click', toggleFullScreen);
-
-// Add keyUp listeners
-callUsernameIn.addEventListener('keyup', (e) => handleKeyUp(e, handleCallClick));
-usernameIn.addEventListener('keyup', (e) => handleKeyUp(e, handleSignInClick));
+// Handle Listeners
+function handleListeners() {
+    // Event listeners
+    signInBtn.addEventListener('click', handleSignInClick);
+    callBtn.addEventListener('click', handleCallClick);
+    hideBtn.addEventListener('click', toggleLocalVideo);
+    hangUpBtn.addEventListener('click', handleHangUpClick);
+    localVideoContainer.addEventListener('click', toggleFullScreen);
+    remoteVideo.addEventListener('click', toggleFullScreen);
+    // Add keyUp listeners
+    callUsernameIn.addEventListener('keyup', (e) => handleKeyUp(e, handleCallClick));
+    usernameIn.addEventListener('keyup', (e) => handleKeyUp(e, handleSignInClick));
+}
 
 // Generic keyUp handler
 function handleKeyUp(e, callback) {
@@ -208,7 +211,7 @@ function handleKeyUp(e, callback) {
 
 // Handle sign-in button click
 function handleSignInClick() {
-    userName = usernameIn.value;
+    userName = usernameIn.value.trim();
     if (userName.length > 0) {
         sendMsg({
             type: 'signIn',
@@ -220,7 +223,7 @@ function handleSignInClick() {
 
 // Handle call button click
 function handleCallClick() {
-    const callToUsername = callUsernameIn.value;
+    const callToUsername = callUsernameIn.value.trim();
     if (callToUsername.length > 0) {
         if (callToUsername === userName) {
             callUsernameIn.value = '';

public/index.html

@@ -67,21 +67,12 @@
                             <div class="card-header"><h1>Call-me</h1></div>
                             <div class="card-body">
                                 <!-- Sign-in Form -->
-                                <form>
-                                    <div class="mb-3">
-                                        <!-- Input field for entering the username -->
-                                        <input
-                                            id="usernameIn"
-                                            type="email"
-                                            class="form-control"
-                                            id="email"
-                                            placeholder="Enter username"
-                                            required
-                                        />
-                                    </div>
-                                    <!-- Sign-in button -->
-                                    <button id="signInBtn" type="submit" class="btn btn-primary">Sign In</button>
-                                </form>
+                                <div class="mb-3">
+                                    <!-- Input field for entering the username -->
+                                    <input id="usernameIn" type="text" placeholder="Enter username" required />
+                                </div>
+                                <!-- Sign-in button -->
+                                <button id="signInBtn" class="btn btn-primary">Sign In</button>
                             </div>
                         </div>
                     </div>

public/style.css

@@ -193,6 +193,24 @@ input {
     text-align: center;
 }
 
+/* Style the input field */
+#usernameIn {
+    width: 100%;
+    padding: 10px 15px;
+    font-size: 16px;
+    color: var(--text-color);
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.5);
+    transition:
+        border-color 0.3s,
+        background-color 0.3s;
+}
+
+#usernameIn:hover {
+    border-color: #007bff;
+}
+
 /* Text Input Styles */
 #callUsernameIn {
     background: rgba(0, 0, 0, 0.5);