From d12045e10cdc5c39e01c3d9e595e6d2dd03c4912 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Mon, 17 Nov 2025 10:15:22 +0100
Subject: [PATCH] fix ui, fix client

---
 .../advanced/config/optional-config.md        |  5 ++++-
 src/app/components/Form/ArrayField.vue        |  2 +-
 src/app/components/Form/HostField.vue         |  2 +-
 src/app/components/Form/NullTextField.vue     |  2 +-
 src/app/components/Form/NumberField.vue       |  2 +-
 src/app/components/Form/SwitchField.vue       |  2 +-
 src/app/components/Form/TextField.vue         |  2 +-
 .../database/repositories/client/service.ts   | 21 ++++++++++++-------
 8 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/docs/content/advanced/config/optional-config.md b/docs/content/advanced/config/optional-config.md
index 0bba7b3e..ab9969f0 100644
--- a/docs/content/advanced/config/optional-config.md
+++ b/docs/content/advanced/config/optional-config.md
@@ -73,7 +73,10 @@ When these override environment variables are set:
 - However, the overridden values from environment variables will always take precedence at runtime
 - The Web UI will display the database values with warning indicators showing which fields are overridden
 
-These overrides are useful for containerized environments where configuration should be controlled externally.
+Some overrides will not be applied to existing clients until they are manually edited.
+
+- `WG_DEFAULT_*` settings will only apply to new clients
+- `WG_IPV4_CIDR` and `WG_IPV6_CIDR` changes will require clients to be manually edited to take effect
 
 ///
 
diff --git a/src/app/components/Form/ArrayField.vue b/src/app/components/Form/ArrayField.vue
index d7de0195..80bd86e2 100644
--- a/src/app/components/Form/ArrayField.vue
+++ b/src/app/components/Form/ArrayField.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-2">
     <div
       v-if="overridden"
-      class="flex items-center gap-2 rounded-lg bg-amber-50 p-2 text-sm text-amber-700 dark:bg-amber-900/20 dark:text-amber-400"
+      class="flex w-fit items-center gap-2 rounded-lg bg-amber-50 p-2 text-sm text-amber-700 dark:bg-amber-900/20 dark:text-amber-400"
     >
       <IconsWarning class="size-4" />
       <span>This field is overridden by an environment variable</span>
diff --git a/src/app/components/Form/HostField.vue b/src/app/components/Form/HostField.vue
index 2e2d1ea6..eec76a36 100644
--- a/src/app/components/Form/HostField.vue
+++ b/src/app/components/Form/HostField.vue
@@ -10,7 +10,7 @@
       v-if="overridden"
       text="This field is overridden by an environment variable"
     >
-      <IconsWarning class="ml-1 size-4 text-amber-500" />
+      <IconsWarning class="size-4 text-amber-500" />
     </BaseTooltip>
   </div>
   <div class="flex gap-1">
diff --git a/src/app/components/Form/NullTextField.vue b/src/app/components/Form/NullTextField.vue
index a9c01f26..d3387ef6 100644
--- a/src/app/components/Form/NullTextField.vue
+++ b/src/app/components/Form/NullTextField.vue
@@ -10,7 +10,7 @@
       v-if="overridden"
       text="This field is overridden by an environment variable"
     >
-      <IconsWarning class="ml-1 size-4 text-amber-500" />
+      <IconsWarning class="size-4 text-amber-500" />
     </BaseTooltip>
   </div>
   <BaseInput
diff --git a/src/app/components/Form/NumberField.vue b/src/app/components/Form/NumberField.vue
index d826ef1d..af1b8275 100644
--- a/src/app/components/Form/NumberField.vue
+++ b/src/app/components/Form/NumberField.vue
@@ -10,7 +10,7 @@
       v-if="overridden"
       text="This field is overridden by an environment variable"
     >
-      <IconsWarning class="ml-1 size-4 text-amber-500" />
+      <IconsWarning class="size-4 text-amber-500" />
     </BaseTooltip>
   </div>
   <BaseInput :id="id" v-model.number="data" :name="id" type="number" />
diff --git a/src/app/components/Form/SwitchField.vue b/src/app/components/Form/SwitchField.vue
index 1824cbd8..43cc8d26 100644
--- a/src/app/components/Form/SwitchField.vue
+++ b/src/app/components/Form/SwitchField.vue
@@ -10,7 +10,7 @@
       v-if="overridden"
       text="This field is overridden by an environment variable"
     >
-      <IconsWarning class="ml-1 size-4 text-amber-500" />
+      <IconsWarning class="size-4 text-amber-500" />
     </BaseTooltip>
   </div>
   <BaseSwitch :id="id" v-model="data" />
diff --git a/src/app/components/Form/TextField.vue b/src/app/components/Form/TextField.vue
index 8a226805..4f99dba4 100644
--- a/src/app/components/Form/TextField.vue
+++ b/src/app/components/Form/TextField.vue
@@ -10,7 +10,7 @@
       v-if="overridden"
       text="This field is overridden by an environment variable"
     >
-      <IconsWarning class="ml-1 size-4 text-amber-500" />
+      <IconsWarning class="size-4 text-amber-500" />
     </BaseTooltip>
   </div>
   <BaseInput
diff --git a/src/server/database/repositories/client/service.ts b/src/server/database/repositories/client/service.ts
index 97953cda..cff161b8 100644
--- a/src/server/database/repositories/client/service.ts
+++ b/src/server/database/repositories/client/service.ts
@@ -175,26 +175,30 @@ export class ClientService {
 
     return this.#db.transaction(async (tx) => {
       const clients = await tx.query.client.findMany().execute();
-      const clientInterface = await tx.query.wgInterface
+      const _clientInterface = await tx.query.wgInterface
         .findFirst({
           where: eq(wgInterface.name, 'wg0'),
         })
         .execute();
 
-      if (!clientInterface) {
+      if (!_clientInterface) {
         throw new Error('WireGuard interface not found');
       }
 
-      const clientConfig = await tx.query.userConfig
+      const clientInterface = applyInterfaceOverrides(_clientInterface);
+
+      const _clientConfig = await tx.query.userConfig
         .findFirst({
           where: eq(userConfig.id, clientInterface.name),
         })
         .execute();
 
-      if (!clientConfig) {
+      if (!_clientConfig) {
         throw new Error('WireGuard interface configuration not found');
       }
 
+      const clientConfig = applyUserConfigOverrides(_clientConfig);
+
       const ipv4Cidr = parseCidr(clientInterface.ipv4Cidr);
       const ipv4Address = nextIP(4, ipv4Cidr, clients);
       const ipv6Cidr = parseCidr(clientInterface.ipv6Cidr);
@@ -241,16 +245,18 @@ export class ClientService {
 
   update(id: ID, data: UpdateClientType) {
     return this.#db.transaction(async (tx) => {
-      const clientInterface = await tx.query.wgInterface
+      const _clientInterface = await tx.query.wgInterface
         .findFirst({
           where: eq(wgInterface.name, 'wg0'),
         })
         .execute();
 
-      if (!clientInterface) {
+      if (!_clientInterface) {
         throw new Error('WireGuard interface not found');
       }
 
+      const clientInterface = applyInterfaceOverrides(_clientInterface);
+
       if (!containsCidr(clientInterface.ipv4Cidr, data.ipv4Address)) {
         throw new Error('IPv4 address is not within the CIDR range');
       }
@@ -272,7 +278,8 @@ export class ClientService {
     privateKey,
     publicKey,
   }: ClientCreateFromExistingType) {
-    const clientConfig = await Database.userConfigs.get();
+    const _clientConfig = await Database.userConfigs.get();
+    const clientConfig = applyUserConfigOverrides(_clientConfig);
 
     return this.#db
       .insert(client)