Prevent creating network which can't contain already existing devices & Hostname validator tweak

web/src/pages/AddLocationPage/steps/AddLocationInternalVpnStep.tsx

@@ -1,18 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+import { toNumber } from 'lodash-es';
 import z from 'zod';
 import { useShallow } from 'zustand/react/shallow';
 import { m } from '../../../paraglide/messages';
+import api from '../../../shared/api/api';
 import { Controls } from '../../../shared/components/Controls/Controls';
 import { DescriptionBlock } from '../../../shared/components/DescriptionBlock/DescriptionBlock';
 import { WizardCard } from '../../../shared/components/wizard/WizardCard/WizardCard';
 import { Button } from '../../../shared/defguard-ui/components/Button/Button';
 import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox';
+import { Snackbar } from '../../../shared/defguard-ui/providers/snackbar/snackbar';
 import { ThemeSpacing } from '../../../shared/defguard-ui/types';
 import { useAppForm } from '../../../shared/form';
 import { formChangeLogic } from '../../../shared/formLogic';
 import { Validate } from '../../../shared/validate';
 import { AddLocationPageStep } from '../types';
 import { useAddLocationStore } from '../useAddLocationStore';
 
+const networkSize = (network_address: string): number => {
+  let minimal_cidr = 32;
+  for (const address of network_address.split(',')) {
+    const cidr = toNumber(address.trim().split('/')[1]);
+    if (cidr < minimal_cidr) {
+      minimal_cidr = cidr;
+    }
+  }
+  return 2 ** (32 - minimal_cidr) - 3;
+};
+
 const formSchema = z.object({
   address: z
     .string(m.form_error_required())
@@ -56,6 +71,12 @@ const formSchema = z.object({
 type FormFields = z.infer<typeof formSchema>;
 
 export const AddLocationInternalVpnStep = () => {
+  const { data: devices } = useQuery({
+    queryKey: ['device', 'all'],
+    queryFn: api.device.getDevices,
+    select: (resp) => resp.data,
+  });
+
   const defaultValues = useAddLocationStore(
     useShallow(
       (s): FormFields => ({
@@ -73,6 +94,14 @@ export const AddLocationInternalVpnStep = () => {
       onChange: formSchema,
     },
     onSubmit: ({ value }) => {
+      const deviceCount = Array.isArray(devices) ? devices.length : 0;
+      const network_size = networkSize(value.address);
+      if (deviceCount > network_size) {
+        Snackbar.error(
+          `The network is too small to accommodate all existing devices (network capacity: ${network_size}, total devices: ${deviceCount}).`,
+        );
+        return;
+      }
       useAddLocationStore.setState({
         ...value,
         allowed_ips: value.allowed_ips ?? '',

web/src/shared/validate.ts

@@ -118,7 +118,7 @@ export const Validate = {
     if (!value) {
       return true;
     }
-    const items = value.replaceAll(' ', '').split(splitWith);
+    const items = value.split(splitWith).map((item) => item.trim());
 
     if (items.length > 1 && !allowList) {
       return false;
@@ -148,7 +148,7 @@ export const Validate = {
     if (!value) {
       return true;
     }
-    const items = value.replaceAll(' ', '').split(splitWith);
+    const items = value.split(splitWith).map((item) => item.trim());
 
     if (items.length > 1 && !allowList) {
       return false;