chore: update version to 2.3.0 and add HWID settings to subscription and external squads tabs

Author: kastov

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@remnawave/frontend",
   "private": false,
   "type": "module",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "license": "AGPL-3.0-only",
   "author": "REMNAWAVE <github.com/remnawave>",
   "homepage": "https://github.com/remnawave",
@@ -59,7 +59,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "2.2.37",
+    "@remnawave/backend-contract": "2.3.0",
     "@simplewebauthn/browser": "^13.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",

package.json

@@ -1796,5 +1796,27 @@
         "widget": {
             "response-headers": "Headers"
         }
+    },
+    "subscription-hwid-settings": {
+        "widget": {
+            "hwid-card-description": "Carefully review documentation before enabling HWID feature. Not all client applications support this feature.",
+            "hwid-settings": "HWID Settings",
+            "hwid-limit": "HWID Limit",
+            "fallback-device-limit-description": "Enter the maximum number of devices that can be used with a subscription",
+            "fallback-device-limit": "Fallback Device Limit",
+            "max-devices-announce-description": "Enter message that will be displayed when the user has reached the maximum number of devices",
+            "max-devices-announce": "Max Devices Announce",
+            "max-200-characters": "Max. 200 characters",
+            "documentation": "Documentation"
+        }
+    },
+    "external-squads-hwid-settings": {
+        "tab": {
+            "widget": {
+                "hwid-settings-override": "HWID Settings Override",
+                "override-hwid-description": "Override HWID device limit settings for this external squad. When disabled, global subscription settings will be used.",
+                "enable-hwid-override": "Enable HWID Override"
+            }
+        }
     }
-}
+}

public/locales/en/remnawave.json

@@ -287,7 +287,7 @@ export const BulkAllUserActionsUpdateTabFeature = (props: IProps) => {
                             <Checkbox
                                 checked={form.getValues().hwidDeviceLimit === null}
                                 disabled={form.getValues().hwidDeviceLimit === 0}
-                                label="Use HWID_FALLBACK_DEVICE_LIMIT"
+                                label="Use Fallback Device Limit"
                                 mb="xs"
                                 mt="xs"
                                 onChange={(event) => {

src/features/ui/dashboard/users/bulk-all-user-actions-tabs/bulk-all-user-actions-tabs.update.tab.feature.tsx

@@ -331,7 +331,7 @@ export const BulkUserActionsUpdateTabFeature = (props: IProps) => {
                             <Checkbox
                                 checked={form.getValues().fields.hwidDeviceLimit === null}
                                 disabled={form.getValues().fields.hwidDeviceLimit === 0}
-                                label="Use HWID_FALLBACK_DEVICE_LIMIT"
+                                label="Use Fallback Device Limit"
                                 mb="xs"
                                 mt="xs"
                                 onChange={(event) => {

src/features/ui/dashboard/users/bulk-user-actions-tabs/bulk-user-actions.update.tab.feature.tsx

@@ -338,14 +338,14 @@ export function GetHwidUserDevicesFeature(props: IProps) {
                         <Accordion.Panel>
                             <Text c="dimmed" size="sm">
                                 {t('get-hwid-user-devices.feature.important-note-line-1')}{' '}
-                                <Code fw={500}>HWID_DEVICE_LIMIT_ENABLED=true</Code>{' '}
+                                <Code fw={500}>Enabled HWID Device Limit</Code>{' '}
                                 {t('get-hwid-user-devices.feature.important-note-line-2')}
                                 <br />
                                 {t('get-hwid-user-devices.feature.important-note-line-3')}
                                 <br />
                                 <br />
                                 {t('get-hwid-user-devices.feature.important-note-line-4')}{' '}
-                                <Code>HWID_FALLBACK_DEVICE_LIMIT</Code>{' '}
+                                <Code>Fallback Device Limit</Code>{' '}
                                 {t('get-hwid-user-devices.feature.important-note-line-5')}
                                 <br />
                                 <br />

src/features/ui/dashboard/users/get-hwid-user-devices/get-hwid-user-devices.feature.tsx

@@ -63,9 +63,7 @@ export function DeviceTagSettingsCard<
                             <>
                                 <Text c="dimmed" size="0.75rem">
                                     {t('create-user-modal.widget.hwid-user-limit-line-1')}{' '}
-                                    <Code>HWID_DEVICE_LIMIT_ENABLED</Code>{' '}
-                                    {t('create-user-modal.widget.hwid-user-limit-line-2')}{' '}
-                                    <Code>true</Code>.{' '}
+                                    <Code>HWID Device Limit Enabled</Code>{' '}
                                     <Anchor
                                         href="https://docs.rw/docs/features/hwid-device-limit"
                                         target="_blank"
@@ -97,7 +95,7 @@ export function DeviceTagSettingsCard<
                             hideControls
                             key={form.key('hwidDeviceLimit')}
                             leftSection={<TbDevices2 size="16px" />}
-                            placeholder="HWID_FALLBACK_DEVICE_LIMIT in use"
+                            placeholder="Fallback Device Limit in use"
                             {...form.getInputProps('hwidDeviceLimit')}
                         />
                     </Stack>

src/shared/ui/forms/users/forms-components/device-tag-settings-card.tsx

@@ -13,8 +13,8 @@ import {
     Tooltip,
     Transition
 } from '@mantine/core'
+import { PiCheck, PiCopy, PiIdentificationBadge, PiListChecks, PiUsers } from 'react-icons/pi'
 import { TbFolder, TbPrescription, TbSettings, TbWebhook } from 'react-icons/tb'
-import { PiCheck, PiCopy, PiListChecks, PiUsers } from 'react-icons/pi'
 import { useTranslation } from 'react-i18next'
 import { memo, useState } from 'react'
 
@@ -25,6 +25,7 @@ import { formatInt } from '@shared/utils/misc'
 
 import {
     ExternalSquadsHostOverridesTabWidget,
+    ExternalSquadsHwidSettingsTabWidget,
     ExternalSquadsSettingsTabWidget,
     ExternalSquadsTemplatesTabWidget
 } from './tabs'
@@ -35,7 +36,8 @@ const TAB_TYPE = {
     settings: 'settings',
     templates: 'templates',
     hosts: 'hosts',
-    responseHeaders: 'responseHeaders'
+    responseHeaders: 'responseHeaders',
+    hwidSettings: 'hwidSettings'
 } as const
 
 type TabType = (typeof TAB_TYPE)[keyof typeof TAB_TYPE]
@@ -184,6 +186,12 @@ export const ExternalSquadsDrawer = memo(() => {
                         >
                             {t('external-squads-response-headers.widget.response-headers')}
                         </Tabs.Tab>
+                        <Tabs.Tab
+                            leftSection={<PiIdentificationBadge size={px('1.2rem')} />}
+                            value={TAB_TYPE.hwidSettings}
+                        >
+                            HWID
+                        </Tabs.Tab>
                     </Tabs.List>
 
                     <Tabs.Panel pt="xl" value={TAB_TYPE.templates}>
@@ -257,6 +265,24 @@ export const ExternalSquadsDrawer = memo(() => {
                             )}
                         </Transition>
                     </Tabs.Panel>
+
+                    <Tabs.Panel pt="xl" value={TAB_TYPE.hwidSettings}>
+                        <Transition
+                            duration={200}
+                            mounted={activeTab === TAB_TYPE.hwidSettings}
+                            timingFunction="linear"
+                            transition="fade"
+                        >
+                            {(styles) => (
+                                <Stack gap="lg" style={styles}>
+                                    <ExternalSquadsHwidSettingsTabWidget
+                                        externalSquad={externalSquad}
+                                        isOpen={isOpen}
+                                    />
+                                </Stack>
+                            )}
+                        </Transition>
+                    </Tabs.Panel>
                 </Tabs>
             </Stack>
         )