From 6fa178f522f85749df7a4fd984e70509b9f81def Mon Sep 17 00:00:00 2001
From: farhadzand <f.zand@digikala.com>
Date: Sat, 18 Jul 2026 16:38:46 +0330
Subject: [PATCH] Fix .conf download filename so WireGuard apps accept the
 import

WireGuard for Android derives the tunnel name from the imported file's
name and requires 1-15 chars of [a-zA-Z0-9_=+.-]. The Download .conf
button used the raw account label + node name with no sanitization or
length cap, so almost any real label (long, spaces, non-Latin) produced
a file the app rejects with "Invalid name". Reuse the backend's
confFilename rule (subscription.go) on the frontend: lowercase, collapse
illegal chars to "-", truncate to 15, trim trailing separators.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/AccountsPage.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/AccountsPage.tsx b/frontend/src/pages/AccountsPage.tsx
index 90825fe..185416f 100644
--- a/frontend/src/pages/AccountsPage.tsx
+++ b/frontend/src/pages/AccountsPage.tsx
@@ -87,6 +87,19 @@ function formatBytes(bytes: number): string {
   return `${(bytes / 1024 ** i).toFixed(1)} ${units[i]}`
 }
 
+// Mirrors the backend's confFilename (subscription.go): WireGuard clients derive
+// the tunnel name from the imported file's name, and Android/wg-quick tunnel names
+// must be 1-15 chars of [a-zA-Z0-9_=+.-] - a raw account label (Unicode, spaces,
+// or just too long) makes the app reject the file with "Invalid name".
+function confFilename(label: string): string {
+  let stem = label.toLowerCase().replace(/[^a-z0-9._-]+/g, '-')
+  if (stem.length > 15) stem = stem.slice(0, 15)
+  // Trim AFTER truncating so a cut landing on a separator doesn't leave a
+  // trailing "-"/"." right before the extension.
+  stem = stem.replace(/^[-.]+|[-.]+$/g, '')
+  return `${stem === '' ? 'wgpanel' : stem}.conf`
+}
+
 // Mirrors the backend's peerOnlineWindow (180s) purely for display wording - the
 // authoritative online/offline bit itself always comes from the server's `online`
 // field, never recomputed here from last_handshake_at.
@@ -776,12 +789,11 @@ function AccountDetailDialog({
                 <Button
                   variant="secondary"
                   onClick={() => {
-                    const slug = (configNodeName ?? 'node').toLowerCase().replace(/[^a-z0-9]+/g, '-')
                     const blob = new Blob([configText], { type: 'text/plain' })
                     const url = URL.createObjectURL(blob)
                     const link = document.createElement('a')
                     link.href = url
-                    link.download = `${account.label}-${slug}.conf`
+                    link.download = confFilename(`${account.label}-${configNodeName ?? 'node'}`)
                     link.click()
                     URL.revokeObjectURL(url)
                   }}