Fix: Improve subscription link generation to prevent duplicate path segments

This commit addresses an issue where subscription links were being generated with duplicate path segments when the sub_id contained path components.

The fix implements a more robust approach to sanitize the sub_id when constructing subscription URLs:

First removes the base URL from the beginning of sub_id if it exists as a prefix
Then removes any leading slashes to ensure proper URL construction
This prevents duplicate path segments in the final subscription URL
The solution handles both cases where:

sub_id contains only the identifier without any path
sub_id contains the full path or URL as a prefix
This ensures clean and properly formatted subscription links without redundant path components.

Author: Liwyd

frontend/src/lib/api.ts

@@ -181,7 +181,8 @@ function generateSubId(): string {
     for (let i = 0; i < 8; i++) {
         result += chars.charAt(Math.floor(Math.random() * chars.length))
     }
-    return result
+    // Ensure no leading or trailing slashes
+    return result.replace(/^\/+|\/+$/g, '')
 }
 
 // User API
@@ -216,12 +217,15 @@ export const userAPI = {
         flow: string = '',
         userId?: string
     ): Promise<ClientsOutput> => {
+        // Sanitize sub_id to remove leading and trailing slashes to prevent double slashes in subscription URL
+        const sanitizedSubId = subId?.replace(/^\/+|\/+$/g, '') || '';
+        
         const submitData = {
             email,
             enable,
             expiry_time: expiryDatetime ? new Date(expiryDatetime + 'T00:00:00').getTime() : 0,
             total: Math.floor(totalGb * 1024 * 1024 * 1024),
-            sub_id: subId,
+            sub_id: sanitizedSubId,
             flow,
         }
 

frontend/src/pages/DashboardPage.tsx

@@ -589,7 +589,7 @@ export function DashboardPage() {
                             <>
                                 <div className="p-4 bg-white rounded-lg border">
                                     <QRCodeSVG
-                                        value={`${dashboardData.sub_url}/${qrUser.sub_id?.replace('/', '')}`}
+                                        value={`${dashboardData.sub_url}/${qrUser.sub_id?.replace(/^\/+|\/+$/g, '')}`}
                                         size={200}
                                         level="M"
                                     />
@@ -599,7 +599,7 @@ export function DashboardPage() {
                                         <p><strong>User:</strong> {qrUser?.username}</p>
                                     </div>
                                     <div className="p-3 bg-muted rounded-md break-all text-xs font-mono">
-                                        {`${dashboardData.sub_url}/${qrUser.sub_id?.replace('/', '')}`}
+                                        {`${dashboardData.sub_url}/${qrUser.sub_id?.replace(new RegExp(`^${dashboardData.sub_url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '')}`}
                                     </div>
                                 </div>
                             </>
@@ -720,7 +720,7 @@ function DetailsRow({
                             {subUrl && user.sub_id && (
                                 <div className="p-3 bg-background rounded-md border">
                                     <div className="text-xs text-muted-foreground mb-1">Subscription Link:</div>
-                                    <div className="text-xs font-mono break-all">{`${subUrl}/${user.sub_id?.replace('/', '')}`}</div>
+                                    <div className="text-xs font-mono break-all">{`${subUrl}/${user.sub_id?.replace(new RegExp(`^${subUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '')}`}</div>
                                 </div>
                             )}
                             <div className="flex flex-wrap gap-2 pt-2">
@@ -737,7 +737,7 @@ function DetailsRow({
                                         size="sm"
                                         variant="outline"
                                         onClick={() => {
-                                            navigator.clipboard.writeText(`${subUrl}/${user.sub_id?.replace('/', '') || user.sub_id}`)
+                                            navigator.clipboard.writeText(`${subUrl}/${user.sub_id?.replace(new RegExp(`^${subUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '') || user.sub_id}`)
                                         }}
                                     >
                                         <Copy className="h-4 w-4 mr-2" />
@@ -896,7 +896,7 @@ function MobileUserCard({
                                 className="flex-1 min-w-[80px]"
                                 onClick={(e) => {
                                     e.stopPropagation()
-                                    navigator.clipboard.writeText(`${subUrl}/${user.sub_id?.replace('/', '') || user.sub_id}`)
+                                    navigator.clipboard.writeText(`${subUrl}/${user.sub_id?.replace(new RegExp(`^${subUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '') || user.sub_id}`)
                                 }}
                             >
                                 <Copy className="h-3 w-3 mr-1" />