fix ui, fix client

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
 
 ///
 

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>

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">

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

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" />

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" />

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

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)