From ae33056836d360c855a37e25c883e1f1eff6bca9 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Tue, 17 Mar 2026 09:06:19 +0100
Subject: [PATCH] [mirotalk] - feat: add toggle password visibility eye icon on
 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       | 25 +++++++++++++++++++++++--
 public/js/brand.js         |  2 +-
 public/js/client.js        |  4 ++--
 public/js/login.js         |  8 ++++++++
 public/views/login.html    |  1 +
 10 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/.env.template b/.env.template
index b52dd67c..1f4306be 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.7.51 - Environment Configuration
+# MiroTalk P2P v.1.7.52 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 0e44e3ee..405884a0 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.7.51 - Configuration File
+ * MiroTalk P2P v.1.7.52 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index 2ead036a..840f86dd 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.51
+ * @version 1.7.52
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 176e34f8..420b8aa9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.7.50",
+    "version": "1.7.52",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.7.50",
+            "version": "1.7.52",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.4.0",
diff --git a/package.json b/package.json
index d3738491..dfbf5f39 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.7.51",
+    "version": "1.7.52",
     "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 22347f85..6aa99620 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -92,7 +92,7 @@
     position: relative;
     margin-bottom: 16px;
 }
-.login-input-group i {
+.login-input-group i:not(.toggle-password) {
     position: absolute;
     left: 14px;
     top: 50%;
@@ -105,10 +105,31 @@
 .login-input-group .form-input {
     padding-left: 42px;
 }
-.login-input-group:focus-within i {
+.login-input-group:focus-within i:not(.toggle-password) {
     color: #4678f9;
 }
 
+/* Toggle password visibility */
+.login-input-group .toggle-password {
+    position: absolute;
+    right: 14px;
+    left: auto;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #6b7a85;
+    font-size: 14px;
+    cursor: pointer;
+    pointer-events: all;
+    z-index: 2;
+    transition: color 0.2s ease;
+}
+.toggle-password:hover {
+    color: #4678f9;
+}
+.login-input-group .form-input:has(~ .toggle-password) {
+    padding-right: 42px;
+}
+
 /* Login button */
 .login-card .login-btn {
     width: 100%;
diff --git a/public/js/brand.js b/public/js/brand.js
index 90fa9d9f..77a2fbd2 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -104,7 +104,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.7.51',
+        title: 'WebRTC P2P v1.7.52',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index 3532d4c3..e2fb03e2 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.51
+ * @version 1.7.52
  *
  */
 
@@ -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.51',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.52',
         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 958340e8..0e4d50ef 100644
--- a/public/js/login.js
+++ b/public/js/login.js
@@ -4,6 +4,7 @@ console.log(window.location);
 
 const usernameInput = document.getElementById('username');
 const passwordInput = document.getElementById('password');
+const togglePassword = document.getElementById('togglePassword');
 const loginBtn = document.getElementById('loginButton');
 const joinRoomForm = document.getElementById('joinRoomForm');
 const roomNameInput = document.getElementById('roomName');
@@ -27,6 +28,13 @@ loginBtn.onclick = (e) => {
     login();
 };
 
+togglePassword.onclick = () => {
+    const isPassword = passwordInput.type === 'password';
+    passwordInput.type = isPassword ? 'text' : 'password';
+    togglePassword.classList.toggle('fa-eye', !isPassword);
+    togglePassword.classList.toggle('fa-eye-slash', isPassword);
+};
+
 function login() {
     const username = filterXSS(document.getElementById('username').value);
     const password = filterXSS(document.getElementById('password').value);
diff --git a/public/views/login.html b/public/views/login.html
index 7bbecc31..44cd89ee 100644
--- a/public/views/login.html
+++ b/public/views/login.html
@@ -109,6 +109,7 @@
                                                     placeholder="Password"
                                                     required
                                                 />
+                                                <i id="togglePassword" class="fa-solid fa-eye toggle-password"></i>
                                             </div>
                                             <button id="loginButton" class="login-btn pulse">
                                                 <i class="fa-solid fa-right-to-bracket"></i>&nbsp;