From 9d0e62f80ee83794b61bd389413eef5c49af86c5 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 7 Aug 2025 14:14:07 +0200
Subject: [PATCH] feat(ui): update IPv6 static configuration to use CIDR
 notation for address

---
 internal/confparser/confparser.go    |  4 +++
 internal/network/config.go           |  3 +-
 ui/src/components/StaticIpv6Card.tsx | 42 ++++++++++++++++------------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/internal/confparser/confparser.go b/internal/confparser/confparser.go
index 701ba9a..6a65207 100644
--- a/internal/confparser/confparser.go
+++ b/internal/confparser/confparser.go
@@ -407,6 +407,10 @@ func (f *FieldConfig) validateSingleValue(val string, index int) error {
 			if _, err := url.Parse(val); err != nil {
 				return fmt.Errorf("%s is not a valid URL: %s", fieldRef, val)
 			}
+		case "cidr":
+			if _, _, err := net.ParseCIDR(val); err != nil {
+				return fmt.Errorf("%s is not a valid CIDR notation: %s", fieldRef, val)
+			}
 		default:
 			return fmt.Errorf("field `%s` cannot use validate_type: unsupported validator: %s", f.Name, validateType)
 		}
diff --git a/internal/network/config.go b/internal/network/config.go
index 18f7b13..6f0669a 100644
--- a/internal/network/config.go
+++ b/internal/network/config.go
@@ -28,8 +28,7 @@ type IPv4StaticConfig struct {
 }
 
 type IPv6StaticConfig struct {
-	Address null.String `json:"address,omitempty" validate_type:"ipv6" required:"true"`
-	Prefix  null.String `json:"prefix,omitempty" required:"true"`
+	Address null.String `json:"address,omitempty" validate_type:"cidr" required:"true"`
 	Gateway null.String `json:"gateway,omitempty" validate_type:"ipv6" required:"true"`
 	DNS     []string    `json:"dns,omitempty" validate_type:"ipv6" required:"true"`
 }
diff --git a/ui/src/components/StaticIpv6Card.tsx b/ui/src/components/StaticIpv6Card.tsx
index 845f2ed..e9d50ab 100644
--- a/ui/src/components/StaticIpv6Card.tsx
+++ b/ui/src/components/StaticIpv6Card.tsx
@@ -26,23 +26,29 @@ export default function StaticIpv6Card() {
             Static IPv6 Configuration
           </h3>
 
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <InputFieldWithLabel
-              label="IP Address"
-              type="text"
-              size="SM"
-              placeholder="2001:db8::1"
-              {...register("ipv6_static.address")}
-            />
-
-            <InputFieldWithLabel
-              label="Prefix"
-              type="text"
-              size="SM"
-              placeholder="64"
-              {...register("ipv6_static.prefix")}
-            />
-          </div>
+          <InputFieldWithLabel
+            label="IP Address/Prefix"
+            type="text"
+            size="SM"
+            placeholder="2001:db8::1/64"
+            {...register("ipv6_static.address", {
+              validate: (value: string) => {
+                if (value === "") return true;
+                // Check if it's a valid IPv6 address with CIDR notation
+                const parts = value.split("/");
+                if (parts.length !== 2)
+                  return "Please use CIDR notation (e.g., 2001:db8::1/64)";
+                const [address, prefix] = parts;
+                if (!validator.isIP(address, 6)) return "Invalid IPv6 address";
+                const prefixNum = parseInt(prefix);
+                if (isNaN(prefixNum) || prefixNum < 0 || prefixNum > 128) {
+                  return "Prefix must be between 0 and 128";
+                }
+                return true;
+              },
+            })}
+            error={formState.errors.ipv6_static?.address?.message}
+          />
 
           <InputFieldWithLabel
             label="Gateway"
@@ -63,7 +69,7 @@ export default function StaticIpv6Card() {
                         label={index === 0 ? "DNS Server" : null}
                         type="text"
                         size="SM"
-                        placeholder="1.1.1.1"
+                        placeholder="2001:4860:4860::8888"
                         {...register(`ipv6_static.dns.${index}`, {
                           validate: (value: string) => {
                             if (value === "") return true;