fix: resolve uuid generator issue and prevent duplicate subscription URL in production

Author: primeZdev

frontend/package-lock.json

@@ -28,6 +28,7 @@
         "react-hook-form": "^7.48.0",
         "react-router-dom": "^6.20.0",
         "tailwind-merge": "^2.2.1",
+        "uuid": "^13.0.0",
         "zod": "^3.22.4"
     },
     "devDependencies": {

frontend/package.json

@@ -1,4 +1,5 @@
 import { getApiClient } from './api-client'
+import { v4 as uuidv4 } from 'uuid'
 import {
     LoginResponse,
     DashboardData,
@@ -294,7 +295,7 @@ export const userAPI = {
     createUser: async (email: string, totalGb: number, expiryDatetime?: string | null): Promise<ClientsOutput> => {
         const submitData = {
             email,
-            id: crypto.randomUUID(),
+            id: uuidv4(),
             enable: true,
             expiry_time: expiryDatetime ? new Date(expiryDatetime + 'T00:00:00').getTime() : 0,
             total: Math.floor(totalGb * 1024 * 1024 * 1024),

frontend/src/lib/api.ts

@@ -56,6 +56,19 @@ import {
 } from '@/components/ui/dialog'
 import { UserFormDialog } from './components/UserFormDialog'
 
+    function buildSubUrl(subUrl?: string, subId?: string) {
+        if (!subUrl || !subId) return ''
+
+        if (subId.startsWith('http://') || subId.startsWith('https://')) {
+            return subId
+        }
+
+        const cleanBase = subUrl.replace(/\/+$/, '')
+        const cleanId = subId.replace(/^\/+/, '')
+
+        return `${cleanBase}/${cleanId}`
+    }
+
 
 interface ExpandedRow {
     [key: string]: boolean
@@ -645,7 +658,7 @@ export function DashboardPage() {
                             <>
                                 <div className="p-4 bg-white rounded-lg border">
                                     <QRCodeSVG
-                                        value={`${dashboardData.sub_url}/${qrUser.sub_id?.replace(/^\/+|\/+$/g, '')}`}
+                                        value={buildSubUrl(dashboardData.sub_url, qrUser.sub_id)}
                                         size={200}
                                         level="M"
                                     />
@@ -655,7 +668,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(new RegExp(`^${dashboardData.sub_url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '')}`}
+                                        {buildSubUrl(dashboardData.sub_url, qrUser.sub_id)}
                                     </div>
                                 </div>
                             </>
@@ -780,7 +793,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(new RegExp(`^${subUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '')}`}</div>
+                                    {buildSubUrl(subUrl, user.sub_id)}
                                 </div>
                             )}
                             <div className="flex flex-wrap gap-2 pt-2">
@@ -797,7 +810,8 @@ function DetailsRow({
                                         size="sm"
                                         variant="outline"
                                         onClick={() => {
-                                            navigator.clipboard.writeText(`${subUrl}/${user.sub_id?.replace(new RegExp(`^${subUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '') || user.sub_id}`)
+                                            navigator.clipboard.writeText(buildSubUrl(subUrl, user.sub_id))
+
                                         }}
                                     >
                                         <Copy className="h-4 w-4 mr-2" />
@@ -968,7 +982,8 @@ function MobileUserCard({
                                 className="flex-1 min-w-[80px]"
                                 onClick={(e) => {
                                     e.stopPropagation()
-                                    navigator.clipboard.writeText(`${subUrl}/${user.sub_id?.replace(new RegExp(`^${subUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`), '').replace(/^\/+/, '') || user.sub_id}`)
+                                    navigator.clipboard.writeText(buildSubUrl(subUrl, user.sub_id))
+
                                 }}
                             >
                                 <Copy className="h-3 w-3 mr-1" />