Upload 20 files

Dockerfile

@@ -16,6 +16,7 @@ RUN wget -q https://go.dev/dl/go1.22.5.linux-amd64.tar.gz \
     && rm go1.22.5.linux-amd64.tar.gz
 ENV PATH="/usr/local/go/bin:${PATH}"
 ENV GOPATH="/data/go"
+ENV ADMIN_API_URL=""
 
 # Tạo user (HF Spaces yêu cầu user 1000)
 RUN useradd -m -u 1000 user

config.py

@@ -24,3 +24,10 @@ MAX_PORT = 65535
 
 # ── Terminal ───────────────────────────────────
 SCROLLBACK_SIZE = 128 * 1024  # 128 KB
+
+# ── Admin API (Cloudflare Worker) ──────────────
+ADMIN_API_URL = os.environ.get("ADMIN_API_URL", "")  # e.g. "https://hugpanel-admin.username.workers.dev"
+
+# ── Backup (local temp dir) ────────────────────
+BACKUP_DIR = DATA_DIR.parent / "backups"
+BACKUP_DIR.mkdir(parents=True, exist_ok=True)

requirements.txt

@@ -4,3 +4,4 @@ websockets==14.1
 python-multipart==0.0.18
 aiofiles==24.1.0
 httpx==0.28.1
+

routers/backup.py

@@ -0,0 +1,301 @@
+"""
+Backup & Restore API - proxies through the Admin Worker (Cloudflare Worker).
+
+The Admin Worker handles HuggingFace Dataset storage with per-user folders.
+This router creates local tar.gz archives and sends them to the Worker,
+or downloads archives from the Worker and extracts them locally.
+
+Requires env var:
+  ADMIN_API_URL - URL of the Cloudflare Worker admin API
+"""
+
+import os
+import shutil
+import tarfile
+from datetime import datetime
+from pathlib import Path
+
+import httpx
+from fastapi import APIRouter, HTTPException, BackgroundTasks, Request
+
+from config import DATA_DIR, ADMIN_API_URL, BACKUP_DIR
+from storage import load_meta, save_meta, validate_zone_name
+
+router = APIRouter(prefix="/api/backup", tags=["backup"])
+
+
+def _get_token(request: Request) -> str:
+    """Extract JWT token from request Authorization header."""
+    auth = request.headers.get("Authorization", "")
+    if auth.startswith("Bearer "):
+        return auth[7:]
+    return ""
+
+
+def _worker_headers(token: str) -> dict:
+    """Build headers for Worker API calls."""
+    return {"Authorization": f"Bearer {token}"}
+
+
+def _create_zone_archive(zone_name: str) -> Path:
+    """Create a tar.gz archive of a zone directory."""
+    zone_path = DATA_DIR / zone_name
+    if not zone_path.is_dir():
+        raise ValueError(f"Zone '{zone_name}' khong ton tai")
+
+    archive_path = BACKUP_DIR / f"{zone_name}.tar.gz"
+    with tarfile.open(archive_path, "w:gz") as tar:
+        tar.add(str(zone_path), arcname=zone_name)
+    return archive_path
+
+
+_backup_status: dict = {"running": False, "last": None, "error": None, "progress": ""}
+
+
+@router.get("/status")
+def backup_status():
+    return {
+        "configured": bool(ADMIN_API_URL),
+        "admin_url": ADMIN_API_URL or None,
+        "running": _backup_status["running"],
+        "last": _backup_status["last"],
+        "error": _backup_status["error"],
+        "progress": _backup_status["progress"],
+    }
+
+
+@router.get("/list")
+async def list_backups(request: Request):
+    if not ADMIN_API_URL:
+        raise HTTPException(400, "ADMIN_API_URL chua duoc cau hinh")
+    token = _get_token(request)
+    if not token:
+        raise HTTPException(401, "Chua dang nhap")
+    try:
+        async with httpx.AsyncClient(timeout=30) as client:
+            resp = await client.get(f"{ADMIN_API_URL}/backup/list", headers=_worker_headers(token))
+            if resp.status_code != 200:
+                data = resp.json() if resp.headers.get("content-type", "").startswith("application/json") else {"error": resp.text}
+                raise HTTPException(resp.status_code, data.get("error", "Worker error"))
+            return resp.json()
+    except httpx.HTTPError as e:
+        raise HTTPException(502, f"Khong the ket noi Worker: {e}")
+
+
+@router.post("/zone/{zone_name}")
+async def backup_zone(zone_name: str, request: Request, background_tasks: BackgroundTasks):
+    if not ADMIN_API_URL:
+        raise HTTPException(400, "ADMIN_API_URL chua duoc cau hinh")
+    token = _get_token(request)
+    if not token:
+        raise HTTPException(401, "Chua dang nhap")
+    try:
+        validate_zone_name(zone_name)
+        if not (DATA_DIR / zone_name).is_dir():
+            raise ValueError(f"Zone '{zone_name}' khong ton tai")
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+    if _backup_status["running"]:
+        raise HTTPException(409, "Dang co backup khac dang chay")
+
+    def _run():
+        _backup_status["running"] = True
+        _backup_status["error"] = None
+        _backup_status["progress"] = f"Dang backup zone: {zone_name}..."
+        try:
+            archive_path = _create_zone_archive(zone_name)
+            try:
+                with httpx.Client(timeout=300) as client:
+                    with open(archive_path, "rb") as f:
+                        resp = client.post(
+                            f"{ADMIN_API_URL}/backup/upload/{zone_name}",
+                            headers={**_worker_headers(token), "Content-Type": "application/octet-stream"},
+                            content=f.read(),
+                        )
+                    if resp.status_code != 200:
+                        raise ValueError(f"Worker error: {resp.text}")
+            finally:
+                archive_path.unlink(missing_ok=True)
+            _backup_status["last"] = datetime.now().isoformat()
+            _backup_status["progress"] = f"Backup zone {zone_name} thanh cong"
+        except Exception as e:
+            _backup_status["error"] = str(e)
+            _backup_status["progress"] = f"Loi backup: {e}"
+        finally:
+            _backup_status["running"] = False
+
+    background_tasks.add_task(_run)
+    return {"ok": True, "message": f"Dang backup zone {zone_name} trong nen..."}
+
+
+@router.post("/all")
+async def backup_all(request: Request, background_tasks: BackgroundTasks):
+    if not ADMIN_API_URL:
+        raise HTTPException(400, "ADMIN_API_URL chua duoc cau hinh")
+    token = _get_token(request)
+    if not token:
+        raise HTTPException(401, "Chua dang nhap")
+    if _backup_status["running"]:
+        raise HTTPException(409, "Dang co backup khac dang chay")
+
+    def _run():
+        _backup_status["running"] = True
+        _backup_status["error"] = None
+        _backup_status["progress"] = "Dang backup tat ca zones..."
+        try:
+            meta = load_meta()
+            total = len(meta)
+            done = 0
+            for zone_name in meta:
+                zone_path = DATA_DIR / zone_name
+                if not zone_path.is_dir():
+                    continue
+                _backup_status["progress"] = f"Dang backup zone {zone_name} ({done + 1}/{total})..."
+                archive_path = _create_zone_archive(zone_name)
+                try:
+                    with httpx.Client(timeout=300) as client:
+                        with open(archive_path, "rb") as f:
+                            resp = client.post(
+                                f"{ADMIN_API_URL}/backup/upload/{zone_name}",
+                                headers={**_worker_headers(token), "Content-Type": "application/octet-stream"},
+                                content=f.read(),
+                            )
+                        if resp.status_code != 200:
+                            raise ValueError(f"Worker error for {zone_name}: {resp.text}")
+                finally:
+                    archive_path.unlink(missing_ok=True)
+                done += 1
+            _backup_status["last"] = datetime.now().isoformat()
+            _backup_status["progress"] = "Backup tat ca zones thanh cong"
+        except Exception as e:
+            _backup_status["error"] = str(e)
+            _backup_status["progress"] = f"Loi backup: {e}"
+        finally:
+            _backup_status["running"] = False
+
+    background_tasks.add_task(_run)
+    return {"ok": True, "message": "Dang backup tat ca zones trong nen..."}
+
+
+@router.post("/restore/{zone_name}")
+async def restore_zone(zone_name: str, request: Request, background_tasks: BackgroundTasks):
+    if not ADMIN_API_URL:
+        raise HTTPException(400, "ADMIN_API_URL chua duoc cau hinh")
+    token = _get_token(request)
+    if not token:
+        raise HTTPException(401, "Chua dang nhap")
+    try:
+        validate_zone_name(zone_name)
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+    if _backup_status["running"]:
+        raise HTTPException(409, "Dang co backup/restore khac dang chay")
+
+    def _run():
+        _backup_status["running"] = True
+        _backup_status["error"] = None
+        _backup_status["progress"] = f"Dang restore zone: {zone_name}..."
+        try:
+            with httpx.Client(timeout=300) as client:
+                resp = client.get(f"{ADMIN_API_URL}/backup/download/{zone_name}", headers=_worker_headers(token))
+                if resp.status_code == 404:
+                    raise ValueError(f"Backup zone '{zone_name}' khong ton tai")
+                if resp.status_code != 200:
+                    raise ValueError(f"Worker error: {resp.text}")
+                archive_path = BACKUP_DIR / f"{zone_name}.tar.gz"
+                archive_path.write_bytes(resp.content)
+
+            try:
+                zone_path = DATA_DIR / zone_name
+                if zone_path.exists():
+                    shutil.rmtree(zone_path)
+                with tarfile.open(archive_path, "r:gz") as tar:
+                    for member in tar.getmembers():
+                        member_path = os.path.normpath(member.name)
+                        if member_path.startswith("..") or os.path.isabs(member_path):
+                            raise ValueError(f"Archive chua path khong an toan: {member.name}")
+                        if not member_path.startswith(zone_name):
+                            raise ValueError(f"Archive chua path ngoai zone: {member.name}")
+                    tar.extractall(path=str(DATA_DIR), filter="data")
+                meta = load_meta()
+                if zone_name not in meta:
+                    meta[zone_name] = {"description": "", "created": datetime.now().isoformat()}
+                    save_meta(meta)
+            finally:
+                archive_path.unlink(missing_ok=True)
+
+            _backup_status["last"] = datetime.now().isoformat()
+            _backup_status["progress"] = f"Restore zone {zone_name} thanh cong"
+        except Exception as e:
+            _backup_status["error"] = str(e)
+            _backup_status["progress"] = f"Loi restore: {e}"
+        finally:
+            _backup_status["running"] = False
+
+    background_tasks.add_task(_run)
+    return {"ok": True, "message": f"Dang restore zone {zone_name} trong nen..."}
+
+
+@router.post("/restore-all")
+async def restore_all(request: Request, background_tasks: BackgroundTasks):
+    if not ADMIN_API_URL:
+        raise HTTPException(400, "ADMIN_API_URL chua duoc cau hinh")
+    token = _get_token(request)
+    if not token:
+        raise HTTPException(401, "Chua dang nhap")
+    if _backup_status["running"]:
+        raise HTTPException(409, "Dang co backup/restore khac dang chay")
+
+    def _run():
+        _backup_status["running"] = True
+        _backup_status["error"] = None
+        _backup_status["progress"] = "Dang restore tat ca zones..."
+        try:
+            with httpx.Client(timeout=30) as client:
+                resp = client.get(f"{ADMIN_API_URL}/backup/list", headers=_worker_headers(token))
+                if resp.status_code != 200:
+                    raise ValueError(f"Khong the lay danh sach backup: {resp.text}")
+                backup_list = resp.json()
+
+            total = len(backup_list)
+            done = 0
+            for b in backup_list:
+                zone_name = b["zone_name"]
+                _backup_status["progress"] = f"Dang restore zone {zone_name} ({done + 1}/{total})..."
+                with httpx.Client(timeout=300) as client:
+                    resp = client.get(f"{ADMIN_API_URL}/backup/download/{zone_name}", headers=_worker_headers(token))
+                    if resp.status_code != 200:
+                        continue
+                    archive_path = BACKUP_DIR / f"{zone_name}.tar.gz"
+                    archive_path.write_bytes(resp.content)
+
+                try:
+                    zone_path = DATA_DIR / zone_name
+                    if zone_path.exists():
+                        shutil.rmtree(zone_path)
+                    with tarfile.open(archive_path, "r:gz") as tar:
+                        for member in tar.getmembers():
+                            member_path = os.path.normpath(member.name)
+                            if member_path.startswith("..") or os.path.isabs(member_path):
+                                raise ValueError(f"Archive chua path khong an toan: {member.name}")
+                            if not member_path.startswith(zone_name):
+                                raise ValueError(f"Archive chua path ngoai zone: {member.name}")
+                        tar.extractall(path=str(DATA_DIR), filter="data")
+                    meta = load_meta()
+                    if zone_name not in meta:
+                        meta[zone_name] = {"description": "", "created": datetime.now().isoformat()}
+                        save_meta(meta)
+                finally:
+                    archive_path.unlink(missing_ok=True)
+                done += 1
+
+            _backup_status["last"] = datetime.now().isoformat()
+            _backup_status["progress"] = f"Restore {done}/{total} zones thanh cong"
+        except Exception as e:
+            _backup_status["error"] = str(e)
+            _backup_status["progress"] = f"Loi restore: {e}"
+        finally:
+            _backup_status["running"] = False
+
+    background_tasks.add_task(_run)
+    return {"ok": True, "message": "Dang restore tat ca zones trong nen..."}

static/app.js

@@ -1,5 +1,16 @@
 function hugpanel() {
   return {
+    // ── Auth State ──
+    user: null,
+    token: localStorage.getItem('hugpanel_token'),
+    adminApiUrl: '',
+    authLoading: true,
+    authMode: 'login',
+    authError: '',
+    authSubmitting: false,
+    loginForm: { username: '', password: '' },
+    registerForm: { username: '', email: '', password: '' },
+
     // ── State ──
     sidebarOpen: false,
     zones: [],
@@ -10,6 +21,7 @@ function hugpanel() {
       { id: 'editor', label: 'Editor', icon: 'file-code' },
       { id: 'terminal', label: 'Terminal', icon: 'terminal' },
       { id: 'ports', label: 'Ports', icon: 'radio' },
+      { id: 'backup', label: 'Backup', icon: 'cloud' },
     ],
 
     // Files
@@ -38,6 +50,11 @@ function hugpanel() {
     newPort: null,
     newPortLabel: '',
 
+    // Backup
+    backupStatus: { configured: false, admin_url: null, running: false, last: null, error: null, progress: '' },
+    backupList: [],
+    backupLoading: false,
+
     // Create Zone
     showCreateZone: false,
     createZoneName: '',
@@ -58,7 +75,39 @@ function hugpanel() {
 
     // ── Init ──
     async init() {
-      await this.loadZones();
+      // Load backup status to get adminApiUrl
+      await this.loadBackupStatus();
+      this.adminApiUrl = this.backupStatus.admin_url || '';
+
+      // Try to restore session from stored token
+      if (this.token && this.adminApiUrl) {
+        try {
+          const resp = await fetch(`${this.adminApiUrl}/auth/me`, {
+            headers: { 'Authorization': `Bearer ${this.token}` },
+          });
+          if (resp.ok) {
+            const data = await resp.json();
+            this.user = data.user;
+          } else {
+            this.token = null;
+            localStorage.removeItem('hugpanel_token');
+          }
+        } catch {
+          // Worker unreachable — clear token
+          this.token = null;
+          localStorage.removeItem('hugpanel_token');
+        }
+      } else {
+        this.token = null;
+        localStorage.removeItem('hugpanel_token');
+      }
+
+      this.authLoading = false;
+
+      if (this.user) {
+        await this._loadPanel();
+      }
+
       this.$nextTick(() => lucide.createIcons());
 
       // Watch for icon updates
@@ -67,6 +116,8 @@ function hugpanel() {
       this.$watch('activeTab', () => this.$nextTick(() => lucide.createIcons()));
       this.$watch('currentZone', () => this.$nextTick(() => lucide.createIcons()));
       this.$watch('ports', () => this.$nextTick(() => lucide.createIcons()));
+      this.$watch('backupList', () => this.$nextTick(() => lucide.createIcons()));
+      this.$watch('backupStatus', () => this.$nextTick(() => lucide.createIcons()));
       this.$watch('showCreateZone', () => {
         this.$nextTick(() => {
           lucide.createIcons();
@@ -104,7 +155,12 @@ function hugpanel() {
     // ── API Helper ──
     async api(url, options = {}) {
       try {
-        const resp = await fetch(url, options);
+        const headers = options.headers || {};
+        // Add JWT token for backup API calls (proxied to Worker)
+        if (this.token && url.startsWith('/api/backup')) {
+          headers['Authorization'] = `Bearer ${this.token}`;
+        }
+        const resp = await fetch(url, { ...options, headers: { ...headers, ...options.headers } });
         if (!resp.ok) {
           const data = await resp.json().catch(() => ({ detail: resp.statusText }));
           throw new Error(data.detail || resp.statusText);
@@ -116,6 +172,80 @@ function hugpanel() {
       }
     },
 
+    // ── Auth ──
+    async _loadPanel() {
+      await this.loadZones();
+      await this.loadBackupStatus();
+    },
+
+    async login() {
+      if (!this.adminApiUrl) {
+        this.authError = 'ADMIN_API_URL chưa cấu hình trên server';
+        return;
+      }
+      this.authError = '';
+      this.authSubmitting = true;
+      try {
+        const resp = await fetch(`${this.adminApiUrl}/auth/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.loginForm),
+        });
+        const data = await resp.json();
+        if (!resp.ok) {
+          this.authError = data.error || 'Đăng nhập thất bại';
+          this.authSubmitting = false;
+          return;
+        }
+        this.token = data.token;
+        this.user = data.user;
+        localStorage.setItem('hugpanel_token', data.token);
+        await this._loadPanel();
+        this.$nextTick(() => lucide.createIcons());
+      } catch (err) {
+        this.authError = 'Không thể kết nối Admin Server';
+      }
+      this.authSubmitting = false;
+    },
+
+    async register() {
+      if (!this.adminApiUrl) {
+        this.authError = 'ADMIN_API_URL chưa cấu hình trên server';
+        return;
+      }
+      this.authError = '';
+      this.authSubmitting = true;
+      try {
+        const resp = await fetch(`${this.adminApiUrl}/auth/register`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.registerForm),
+        });
+        const data = await resp.json();
+        if (!resp.ok) {
+          this.authError = data.error || 'Đăng ký thất bại';
+          this.authSubmitting = false;
+          return;
+        }
+        this.token = data.token;
+        this.user = data.user;
+        localStorage.setItem('hugpanel_token', data.token);
+        await this._loadPanel();
+        this.$nextTick(() => lucide.createIcons());
+      } catch (err) {
+        this.authError = 'Không thể kết nối Admin Server';
+      }
+      this.authSubmitting = false;
+    },
+
+    logout() {
+      this.token = null;
+      this.user = null;
+      localStorage.removeItem('hugpanel_token');
+      this.currentZone = null;
+      this.disconnectTerminal();
+    },
+
     // ── Zones ──
     async loadZones() {
       try {
@@ -132,6 +262,9 @@ function hugpanel() {
       this.disconnectTerminal();
       await this.loadFiles();
       await this.loadPorts();
+      if (this.backupStatus.configured) {
+        await this.loadBackupList();
+      }
     },
 
     async createZone() {
@@ -453,5 +586,74 @@ function hugpanel() {
         await this.loadPorts();
       } catch {}
     },
+
+    // ── Backup ──
+    async loadBackupStatus() {
+      try {
+        this.backupStatus = await this.api('/api/backup/status');
+      } catch {}
+    },
+
+    async loadBackupList() {
+      this.backupLoading = true;
+      try {
+        this.backupList = await this.api('/api/backup/list');
+      } catch { this.backupList = []; }
+      this.backupLoading = false;
+    },
+
+    async backupZone(zoneName) {
+      if (!confirm(`Backup zone "${zoneName}" lên HuggingFace?`)) return;
+      try {
+        const res = await this.api(`/api/backup/zone/${zoneName}`, { method: 'POST' });
+        this.notify(res.message);
+        this._pollBackupStatus();
+      } catch {}
+    },
+
+    async backupAll() {
+      if (!confirm('Backup tất cả zones lên HuggingFace?')) return;
+      try {
+        const res = await this.api('/api/backup/all', { method: 'POST' });
+        this.notify(res.message);
+        this._pollBackupStatus();
+      } catch {}
+    },
+
+    async restoreZone(zoneName) {
+      if (!confirm(`Restore zone "${zoneName}" từ backup? Dữ liệu hiện tại sẽ bị ghi đè.`)) return;
+      try {
+        const res = await this.api(`/api/backup/restore/${zoneName}`, { method: 'POST' });
+        this.notify(res.message);
+        this._pollBackupStatus();
+      } catch {}
+    },
+
+    async restoreAll() {
+      if (!confirm('Restore tất cả zones từ backup? Dữ liệu hiện tại sẽ bị ghi đè.')) return;
+      try {
+        const res = await this.api('/api/backup/restore-all', { method: 'POST' });
+        this.notify(res.message);
+        this._pollBackupStatus();
+      } catch {}
+    },
+
+    _pollBackupStatus() {
+      if (this._pollTimer) return;
+      this._pollTimer = setInterval(async () => {
+        await this.loadBackupStatus();
+        if (!this.backupStatus.running) {
+          clearInterval(this._pollTimer);
+          this._pollTimer = null;
+          await this.loadBackupList();
+          await this.loadZones();
+          if (this.backupStatus.error) {
+            this.notify(this.backupStatus.error, 'error');
+          } else {
+            this.notify(this.backupStatus.progress);
+          }
+        }
+      }, 2000);
+    },
   };
 }

static/index.html

@@ -42,6 +42,63 @@
 
 <body class="h-full bg-gray-950 text-gray-100 overflow-hidden" x-data="hugpanel()" x-init="init()">
 
+  <!-- ═══ AUTH: Login / Register Screen ═══ -->
+  <div x-show="!user && !authLoading" x-transition class="min-h-full flex items-center justify-center p-4">
+    <div class="w-full max-w-sm">
+      <!-- Logo -->
+      <div class="text-center mb-6">
+        <div class="w-14 h-14 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center text-2xl font-bold shadow-lg shadow-brand-500/25">H</div>
+        <h1 class="text-xl font-bold">HugPanel</h1>
+        <p class="text-xs text-gray-500 mt-1">Workspace Manager</p>
+      </div>
+
+      <div class="bg-gray-900 rounded-2xl border border-gray-800 p-6 space-y-4">
+        <!-- Tab switch -->
+        <div class="flex bg-gray-800 rounded-lg p-0.5">
+          <button @click="authMode = 'login'" :class="authMode === 'login' ? 'bg-brand-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'" class="flex-1 py-2 text-sm font-medium rounded-md transition">Đăng nhập</button>
+          <button @click="authMode = 'register'" :class="authMode === 'register' ? 'bg-brand-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'" class="flex-1 py-2 text-sm font-medium rounded-md transition">Đăng ký</button>
+        </div>
+
+        <!-- Error -->
+        <div x-show="authError" class="text-xs text-red-400 bg-red-400/10 rounded-lg px-3 py-2" x-text="authError"></div>
+
+        <!-- Login Form -->
+        <div x-show="authMode === 'login'" class="space-y-3">
+          <input x-model="loginForm.username" placeholder="Username hoặc Email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" @keydown.enter="login()" />
+          <input x-model="loginForm.password" type="password" placeholder="Mật khẩu" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" @keydown.enter="login()" />
+          <button @click="login()" :disabled="authSubmitting" class="w-full py-2.5 bg-brand-600 hover:bg-brand-500 rounded-lg text-sm font-medium transition disabled:opacity-50">
+            <span x-show="!authSubmitting">Đăng nhập</span>
+            <span x-show="authSubmitting">Đang xử lý...</span>
+          </button>
+        </div>
+
+        <!-- Register Form -->
+        <div x-show="authMode === 'register'" class="space-y-3">
+          <input x-model="registerForm.username" placeholder="Username" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" @keydown.enter="register()" />
+          <input x-model="registerForm.email" type="email" placeholder="Email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" @keydown.enter="register()" />
+          <input x-model="registerForm.password" type="password" placeholder="Mật khẩu (ít nhất 6 ký tự)" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" @keydown.enter="register()" />
+          <button @click="register()" :disabled="authSubmitting" class="w-full py-2.5 bg-brand-600 hover:bg-brand-500 rounded-lg text-sm font-medium transition disabled:opacity-50">
+            <span x-show="!authSubmitting">Đăng ký</span>
+            <span x-show="authSubmitting">Đang xử lý...</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Admin API URL indicator -->
+      <div class="mt-4 text-center">
+        <div x-show="!adminApiUrl" class="text-xs text-yellow-500">ADMIN_API_URL chưa cấu hình</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Auth loading spinner -->
+  <div x-show="authLoading" class="min-h-full flex items-center justify-center">
+    <div class="w-8 h-8 border-2 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+  </div>
+
+  <!-- ═══ MAIN PANEL (shown when logged in) ═══ -->
+  <div x-show="user" x-cloak>
+
   <!-- ═══ Mobile Top Bar ═══ -->
   <header class="lg:hidden fixed top-0 inset-x-0 z-50 bg-gray-900/95 backdrop-blur border-b border-gray-800 px-4 py-3 flex items-center justify-between">
     <button @click="sidebarOpen = !sidebarOpen" class="p-1.5 rounded-lg hover:bg-gray-800 transition">
@@ -94,13 +151,27 @@
       </div>
 
       <!-- Create Zone -->
-      <div class="p-3 border-t border-gray-800">
+      <div class="p-3 border-t border-gray-800 space-y-2">
         <button @click="showCreateZone = true"
                 class="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg bg-brand-600 hover:bg-brand-500 text-white text-sm font-medium transition shadow-lg shadow-brand-600/25">
           <i data-lucide="plus" class="w-4 h-4"></i>
           Tạo Zone
         </button>
       </div>
+
+      <!-- User Info + Logout -->
+      <div class="p-3 border-t border-gray-800">
+        <div class="flex items-center gap-2.5 px-2 py-1.5">
+          <div class="w-8 h-8 rounded-lg bg-gray-800 flex items-center justify-center text-xs font-bold text-brand-400" x-text="user?.username?.charAt(0).toUpperCase()"></div>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium truncate" x-text="user?.username"></div>
+            <div class="text-xs text-gray-500" x-text="user?.role === 'admin' ? 'Admin' : 'User'"></div>
+          </div>
+          <button @click="logout()" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-400/10 transition" title="Đăng xuất">
+            <i data-lucide="log-out" class="w-4 h-4"></i>
+          </button>
+        </div>
+      </div>
     </aside>
 
     <!-- ═══ Main Content ═══ -->
@@ -324,10 +395,131 @@
             </div>
           </div>
         </div>
+
+        <!-- ═══ TAB: Backup ═══ -->
+        <div x-show="activeTab === 'backup'" x-effect="if(activeTab==='backup' && backupStatus.configured) loadBackupList()" class="flex-1 overflow-y-auto">
+          <div class="p-4 space-y-4">
+
+            <!-- Not configured -->
+            <div x-show="!backupStatus.configured" class="bg-gray-900 rounded-xl border border-gray-800 p-6 text-center">
+              <div class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-yellow-500/10 flex items-center justify-center">
+                <i data-lucide="cloud-off" class="w-7 h-7 text-yellow-500"></i>
+              </div>
+              <h3 class="text-sm font-semibold text-gray-300 mb-2">Chưa cấu hình Backup</h3>
+              <p class="text-xs text-gray-500 mb-4 max-w-xs mx-auto">
+                Đặt biến môi trường <code class="text-brand-400">ADMIN_API_URL</code> để kết nối với Admin Worker và sử dụng tính năng backup.
+              </p>
+              <div class="bg-gray-800 rounded-lg p-3 text-left text-xs font-mono text-gray-400 max-w-sm mx-auto space-y-1">
+                <div>ADMIN_API_URL=https://your-worker.workers.dev</div>
+              </div>
+            </div>
+
+            <!-- Configured: Status & Actions -->
+            <div x-show="backupStatus.configured" class="space-y-4">
+
+              <!-- Status Card -->
+              <div class="bg-gray-900 rounded-xl border border-gray-800 p-4">
+                <div class="flex items-center gap-3 mb-3">
+                  <div class="w-10 h-10 rounded-lg bg-brand-500/10 flex items-center justify-center flex-shrink-0">
+                    <i data-lucide="cloud" class="w-5 h-5 text-brand-400"></i>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium">Cloud Backup</div>
+                    <div class="text-xs text-gray-500 font-mono truncate" x-text="backupStatus.admin_url"></div>
+                  </div>
+                  <div x-show="backupStatus.running" class="flex items-center gap-2">
+                    <div class="w-4 h-4 border-2 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+                    <span class="text-xs text-brand-400">Đang chạy</span>
+                  </div>
+                </div>
+
+                <!-- Progress -->
+                <div x-show="backupStatus.progress" class="text-xs text-gray-400 mb-3 px-1" x-text="backupStatus.progress"></div>
+
+                <!-- Error -->
+                <div x-show="backupStatus.error" class="text-xs text-red-400 bg-red-400/10 rounded-lg px-3 py-2 mb-3" x-text="backupStatus.error"></div>
+
+                <!-- Last backup -->
+                <div x-show="backupStatus.last" class="text-xs text-gray-500 px-1">
+                  Lần cuối: <span x-text="backupStatus.last ? new Date(backupStatus.last).toLocaleString('vi-VN') : 'Chưa có'" class="text-gray-400"></span>
+                </div>
+              </div>
+
+              <!-- Action Buttons -->
+              <div class="grid grid-cols-2 gap-2">
+                <button @click="backupZone(currentZone)" :disabled="backupStatus.running"
+                        :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-brand-500'"
+                        class="flex items-center justify-center gap-2 px-4 py-3 bg-brand-600 rounded-xl text-sm font-medium transition">
+                  <i data-lucide="upload-cloud" class="w-4 h-4"></i>
+                  Backup Zone này
+                </button>
+                <button @click="backupAll()" :disabled="backupStatus.running"
+                        :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-brand-500'"
+                        class="flex items-center justify-center gap-2 px-4 py-3 bg-brand-600 rounded-xl text-sm font-medium transition">
+                  <i data-lucide="cloud-upload" class="w-4 h-4"></i>
+                  Backup tất cả
+                </button>
+                <button @click="restoreZone(currentZone)" :disabled="backupStatus.running"
+                        :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-500'"
+                        class="flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 rounded-xl text-sm font-medium transition">
+                  <i data-lucide="download-cloud" class="w-4 h-4"></i>
+                  Restore Zone này
+                </button>
+                <button @click="restoreAll()" :disabled="backupStatus.running"
+                        :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-500'"
+                        class="flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 rounded-xl text-sm font-medium transition">
+                  <i data-lucide="cloud-download" class="w-4 h-4"></i>
+                  Restore tất cả
+                </button>
+              </div>
+
+              <!-- Backup List -->
+              <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+                <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
+                  <h3 class="text-sm font-medium text-gray-300">Bản backup trên cloud</h3>
+                  <button @click="loadBackupList()" class="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-800 transition" title="Refresh">
+                    <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
+                  </button>
+                </div>
+
+                <div x-show="backupLoading" class="flex items-center justify-center py-8">
+                  <div class="w-5 h-5 border-2 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+                </div>
+
+                <div x-show="!backupLoading && backupList.length === 0" class="text-center py-8 text-gray-600 text-sm">
+                  Chưa có bản backup nào
+                </div>
+
+                <div x-show="!backupLoading" class="divide-y divide-gray-800/50">
+                  <template x-for="b in backupList" :key="b.zone_name">
+                    <div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-800/30 transition">
+                      <div class="w-8 h-8 rounded-lg bg-brand-500/10 flex items-center justify-center flex-shrink-0">
+                        <i data-lucide="archive" class="w-4 h-4 text-brand-400"></i>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <div class="text-sm font-medium truncate" x-text="b.zone_name"></div>
+                        <div class="text-xs text-gray-500">
+                          <span x-show="b.size" x-text="(b.size / 1024 / 1024).toFixed(1) + ' MB'"></span>
+                          <span x-show="b.last_modified"> · <span x-text="b.last_modified"></span></span>
+                        </div>
+                      </div>
+                      <button @click="restoreZone(b.zone_name)" :disabled="backupStatus.running"
+                              class="p-2 rounded-lg text-gray-400 hover:text-emerald-400 hover:bg-emerald-400/10 transition" title="Restore">
+                        <i data-lucide="download-cloud" class="w-4 h-4"></i>
+                      </button>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </main>
   </div>
 
+  </div><!-- end x-show="user" -->
+
   <!-- ═══ MODAL: Create Zone ═══ -->
   <div x-show="showCreateZone" x-transition:enter="transition duration-200" x-transition:leave="transition duration-150"
        class="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4 bg-black/60 backdrop-blur-sm">