From 3b813a85dabae31cbf51e3ab9d197a2f1eace11a Mon Sep 17 00:00:00 2001
From: DungTT <dungtt@phenikaa-x.com>
Date: Mon, 20 Apr 2026 15:27:27 +0700
Subject: [PATCH] sercurity

---
 public/js/app.js        | 24 +++++++++++++++++++-----
 public/pages/login.html |  2 +-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index 807418c..6d65067 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -456,6 +456,15 @@ class AccountManager {
         };
     }
 
+    maskForeignAccountUsername(username) {
+        const value = String(username || '').trim();
+        if (!value) return '-';
+        if (value.length < 5) {
+            return `${value.slice(0, 1)}*****`;
+        }
+        return `${value.slice(0, 3)}*****`;
+    }
+
     handleLogout() {
         if (confirm('Are you sure you want to logout?')) {
             this.saveToStorage('currentUser', null);
@@ -586,7 +595,6 @@ class AccountManager {
                             <table class="w-full text-left border-collapse w-full">
                                 <thead class="sticky top-0 z-10">
                                     <tr class="bg-slate-50 border-b border-slate-200">
-                                        <th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">User</th>
                                         <th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Owner</th>
                                         <th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Username</th>
                                         <th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Service</th>
@@ -596,6 +604,10 @@ class AccountManager {
                                 <tbody class="divide-y divide-slate-100 accounts-table-body">
                                     ${pageInfo.data.map(acc => {
                                         const isOwnAccount = acc.UserId == currentUserId;
+                                        const accountUsername = acc.AccountUsername || '-';
+                                        const displayAccountUsername = isOwnAccount
+                                            ? accountUsername
+                                            : this.maskForeignAccountUsername(accountUsername);
                                         const actionContent = isOwnAccount
                                             ? `<button class="p-1.5 text-slate-400 transition-colors view-account hover:text-slate-600" data-account-id="${acc.AccountId}" title="View Details">
                                                     <span class="material-symbols-outlined text-lg">info</span>
@@ -609,9 +621,8 @@ class AccountManager {
                                             : '<span class="text-slate-400 text-xs">-</span>';
                                         return `
                                         <tr class="hover:bg-slate-50/80 transition-colors group account-row" data-account-id="${acc.AccountId}" data-user-id="${acc.UserId}">
-                                            <td class="px-4 py-3 text-sm font-medium text-slate-900">${acc.Username || acc.FullName || '-'}</td>
                                             <td class="px-4 py-3 text-sm text-slate-600">${acc.Email || '-'}</td>
-                                            <td class="px-4 py-3 text-sm text-slate-600">${acc.AccountUsername || '-'}</td>
+                                            <td class="px-4 py-3 text-sm text-slate-600">${displayAccountUsername}</td>
                                             <td class="px-4 py-3 text-sm">
                                                 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-semibold">${acc.AppName || '-'}</span>
                                             </td>
@@ -778,6 +789,10 @@ class AccountManager {
         this.accountPage = pageInfo.current;
         tbody.innerHTML = pageInfo.data.map(acc => {
             const isOwnAccount = acc.UserId == currentUserId;
+            const accountUsername = acc.AccountUsername || '-';
+            const displayAccountUsername = isOwnAccount
+                ? accountUsername
+                : this.maskForeignAccountUsername(accountUsername);
             const actionContent = isOwnAccount
                 ? `<button class="p-1.5 text-slate-400 transition-colors view-account hover:text-slate-600" data-account-id="${acc.AccountId}" title="View Details">
                         <span class="material-symbols-outlined text-lg">info</span>
@@ -791,9 +806,8 @@ class AccountManager {
                 : '<span class="text-slate-400 text-xs">-</span>';
             return `
             <tr class="hover:bg-slate-50/80 transition-colors group account-row" data-account-id="${acc.AccountId}" data-user-id="${acc.UserId}">
-                <td class="px-4 py-3 text-sm font-medium text-slate-900">${acc.Username || acc.FullName || '-'}</td>
                 <td class="px-4 py-3 text-sm text-slate-600">${acc.Email || '-'}</td>
-                <td class="px-4 py-3 text-sm text-slate-600">${acc.AccountUsername || '-'}</td>
+                <td class="px-4 py-3 text-sm text-slate-600">${displayAccountUsername}</td>
                 <td class="px-4 py-3 text-sm">
                     <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-semibold">${acc.AppName || '-'}</span>
                 </td>
diff --git a/public/pages/login.html b/public/pages/login.html
index 2d40221..a847897 100644
--- a/public/pages/login.html
+++ b/public/pages/login.html
@@ -320,7 +320,7 @@
                     passwordInput.focus();
                 }
             } catch (error) {
-                errorMessage.textContent = 'Connection error. Try admin / admin';
+                errorMessage.textContent = 'Connection error. Try again later.';
                 errorMessage.classList.remove('hidden');
                 console.error('Login error:', error);
             }