aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - add share room button and improve input validation to login page

Browse Source
This commit is contained in:
Miroslav Pejic
2026-03-18 21:26:33 +01:00
parent 6a7d3f28f0
commit 492f67b811
10 changed files with 68 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.template
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.7.54 - Environment Configuration
# MiroTalk P2P v.1.7.55 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -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.
app/src/server.js
+1 -1
View File
@@ -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
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -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",
package.json
+1 -1
View File
@@ -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": {
public/css/login.css
+18
View File
@@ -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;
public/js/brand.js
+1 -1
View File
@@ -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"
public/js/client.js
+2 -2
View File
@@ -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: `
public/js/login.js
+34 -1
View File
@@ -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();
public/views/login.html
+7
View File
@@ -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;