Upload 3 files

static/app.js

@@ -99,6 +99,8 @@ function hugpanel() {
       await this._loadZoneLimit();
 
       // Try to restore session from stored token
+      this.syncAuthCookie();
+
       if (this.token && this.adminApiUrl) {
         try {
           const resp = await fetch(`${this.adminApiUrl}/auth/me`, {
@@ -189,6 +191,20 @@ function hugpanel() {
       setTimeout(() => { this.toast.show = false; }, 3000);
     },
 
+    setAuthCookie(token) {
+      const secure = location.protocol === 'https:' ? '; Secure' : '';
+      document.cookie = `token=${encodeURIComponent(token)}; Path=/; SameSite=Lax${secure}`;
+    },
+
+    clearAuthCookie() {
+      document.cookie = 'token=; Path=/; Max-Age=0; SameSite=Lax';
+    },
+
+    syncAuthCookie() {
+      if (this.token) this.setAuthCookie(this.token);
+      else this.clearAuthCookie();
+    },
+
     // ── API Helper ──
     async api(url, options = {}) {
       try {
@@ -258,6 +274,7 @@ function hugpanel() {
         this.token = data.token;
         this.user = data.user;
         localStorage.setItem('hugpanel_token', data.token);
+        this.syncAuthCookie();
         await this._loadPanel();
         this.$nextTick(() => lucide.createIcons());
       } catch (err) {
@@ -288,6 +305,7 @@ function hugpanel() {
         this.token = data.token;
         this.user = data.user;
         localStorage.setItem('hugpanel_token', data.token);
+        this.syncAuthCookie();
         await this._loadPanel();
         this.$nextTick(() => lucide.createIcons());
       } catch (err) {
@@ -299,6 +317,7 @@ function hugpanel() {
     logout() {
       this.token = null;
       this.user = null;
+      this.clearAuthCookie();
       localStorage.removeItem('hugpanel_token');
       localStorage.removeItem('hugpanel_admin_url');
       localStorage.removeItem('hugpanel_zone');
@@ -559,6 +578,11 @@ function hugpanel() {
       return this.backupList.filter((item) => item.zone_name === zoneName).length;
     },
 
+    buildPortUrl(port) {
+      const base = port?.url || (`/port/${this.currentZone}/${port?.port}/`);
+      return new URL(base, location.origin).toString();
+    },
+
     async copyText(value, message = 'Đã copy') {
       try {
         await navigator.clipboard.writeText(value);

static/index.html

@@ -499,11 +499,11 @@
                       Port: <span x-text="port.port" class="text-gray-400 font-mono"></span>
                     </div>
                   </div>
-                  <button @click="copyText((location.origin || '') + (port.url || ('/port/' + currentZone + '/' + port.port + '/')), 'Đã copy link port')"
+                  <button @click="copyText(buildPortUrl(port), 'Đã copy link port')"
                           class="p-2 rounded-lg text-gray-400 hover:text-cyan-400 hover:bg-cyan-400/10 transition" title="Copy link">
                     <i data-lucide="copy" class="w-4 h-4"></i>
                   </button>
-                  <a :href="port.url || ('/port/' + currentZone + '/' + port.port + '/')"
+                  <a :href="buildPortUrl(port)"
                      target="_blank"
                      class="p-2 rounded-lg text-gray-400 hover:text-brand-400 hover:bg-brand-400/10 transition" title="Mở">
                     <i data-lucide="external-link" class="w-4 h-4"></i>