From 492f67b811d9f5a66cc4292e73f1de9912d85867 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Wed, 18 Mar 2026 21:26:33 +0100
Subject: [PATCH] [mirotalk] - add share room button and improve input
 validation to login page

---
 .env.template              |  2 +-
 app/src/config.template.js |  2 +-
 app/src/server.js          |  2 +-
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 public/css/login.css       | 18 ++++++++++++++++++
 public/js/brand.js         |  2 +-
 public/js/client.js        |  4 ++--
 public/js/login.js         | 35 ++++++++++++++++++++++++++++++++++-
 public/views/login.html    |  7 +++++++
 10 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/.env.template b/.env.template
index e8cb822b..43c808d6 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.7.54 - Environment Configuration
+# MiroTalk P2P v.1.7.55 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 0fa2677d..7e7fdd3d 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.7.54 - Configuration File
+ * MiroTalk P2P v.1.7.55 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index a552d477..b6bd7bca 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.54
+ * @version 1.7.55
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 0a2d68ee..714ae145 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.7.54",
+    "version": "1.7.55",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.7.54",
+            "version": "1.7.55",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.4.0",
diff --git a/package.json b/package.json
index b993ed39..af0af004 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.7.54",
+    "version": "1.7.55",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/login.css b/public/css/login.css
index 6d6e2d2a..ee974d4b 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -213,6 +213,24 @@
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.login-card .share-room-btn {
+    padding: 0 14px;
+    font-size: 16px;
+    color: #f9faff;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease;
+}
+.login-card .share-room-btn:hover {
+    border-color: rgba(70, 120, 249, 0.4);
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
 .login-card .join-room-btn {
     width: 100%;
     padding: 12px 24px;
diff --git a/public/js/brand.js b/public/js/brand.js
index b4bc251a..f0026f70 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -107,7 +107,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.7.54',
+        title: 'WebRTC P2P v1.7.55',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index c0c62365..e2c8df5e 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.54
+ * @version 1.7.55
  *
  */
 
@@ -13738,7 +13738,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.54',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.55',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/js/login.js b/public/js/login.js
index 6dd9dccf..ed0b8f35 100644
--- a/public/js/login.js
+++ b/public/js/login.js
@@ -10,6 +10,7 @@ const joinRoomForm = document.getElementById('joinRoomForm');
 const roomNameInput = document.getElementById('roomName');
 const joinSelectRoomButton = document.getElementById('joinSelectRoomButton');
 const randomRoomButton = document.getElementById('randomRoomButton');
+const shareRoomButton = document.getElementById('shareRoomButton');
 
 usernameInput.onkeyup = (e) => {
     if (e.keyCode === 13) {
@@ -120,6 +121,15 @@ function highlightEmpty(input) {
         },
         { once: true }
     );
+    document.addEventListener(
+        'mousedown',
+        function (e) {
+            if (e.target !== input) {
+                input.classList.remove('input-error');
+            }
+        },
+        { once: true }
+    );
 }
 
 function showLoginError(msg) {
@@ -149,7 +159,7 @@ function showJoinRoomForm() {
         const room = roomNameInput ? filterXSS(roomNameInput.value.trim()) : '';
         const name = filterXSS(document.getElementById('username').value).trim();
         if (!room) {
-            popup('warning', 'Room Name required');
+            highlightEmpty(roomNameInput);
             return;
         }
         window.location.href =
@@ -176,6 +186,29 @@ function showJoinRoomForm() {
             if (roomNameInput) roomNameInput.value = getUUID4();
         };
     }
+    if (shareRoomButton) {
+        shareRoomButton.onclick = (e) => {
+            e.preventDefault();
+            const room = roomNameInput ? filterXSS(roomNameInput.value.trim()) : '';
+            if (!room) {
+                highlightEmpty(roomNameInput);
+                return;
+            }
+            const shareUrl = window.location.origin + '/join/' + encodeURIComponent(room);
+            if (navigator.share) {
+                navigator.share({ title: 'MiroTalk Room', url: shareUrl }).catch(() => {});
+            } else {
+                navigator.clipboard
+                    .writeText(shareUrl)
+                    .then(() => {
+                        popup('success', 'Room link copied to clipboard');
+                    })
+                    .catch(() => {
+                        popup('error', 'Failed to copy link');
+                    });
+            }
+        };
+    }
     if (joinSelectRoomButton) {
         joinSelectRoomButton.onclick = (e) => {
             e.preventDefault();
diff --git a/public/views/login.html b/public/views/login.html
index e2c8bf4c..60a6c397 100644
--- a/public/views/login.html
+++ b/public/views/login.html
@@ -147,6 +147,13 @@
                                                 >
                                                     <i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
                                                 </button>
+                                                <button
+                                                    id="shareRoomButton"
+                                                    class="share-room-btn"
+                                                    title="Share room link"
+                                                >
+                                                    <i class="fa-solid fa-share-nodes" aria-hidden="true"></i>
+                                                </button>
                                             </div>
                                             <button id="joinSelectRoomButton" class="join-room-btn">
                                                 <i class="fa-solid fa-right-to-bracket"></i>&nbsp;