Bump version to 15.0.0-beta.9

Feat: add ability to restart interface (#1740 )
add ability to restart interface
2025-03-14 12:22:43 +01:00 · 2025-03-14 12:19:26 +01:00 · 2025-03-14 10:33:02 +01:00 · 2025-03-13 11:28:05 +01:00 · 2025-03-12 13:47:46 +01:00 · 2025-03-12 13:44:45 +01:00
108 changed files with 2715 additions and 2266 deletions
@@ -6,6 +6,9 @@
  "nuxtr.vueFiles.style.addStyleTag": false,
  "nuxtr.piniaFiles.defaultTemplate": "setup",
  "nuxtr.monorepoMode.DirectoryName": "src",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
@@ -24,6 +24,8 @@ This update is an entire rewrite to make it even easier to set up your own VPN.
 - Deprecated Dockerless Installations
 - Added Docker Volume Mount (`/lib/modules`)
 - Removed ARMv6 and ARMv7 support
+- Connections over HTTP require setting the `INSECURE` env var
+- Changed license from CC BY-NC-SA 4.0 to AGPL-3.0-only

 ## [14.0.0] - 2024-09-04

@@ -47,6 +47,7 @@ ENV DEBUG=Server,WireGuard,Database,CMD
 ENV PORT=51821
 ENV HOST=0.0.0.0
 ENV INSECURE=false
+ENV INIT_ENABLED=false

 LABEL org.opencontainers.image.source=https://github.com/wg-easy/wg-easy

@@ -26,7 +26,8 @@ RUN update-alternatives --install /usr/sbin/ip6tables ip6tables /usr/sbin/ip6tab
 ENV DEBUG=Server,WireGuard,Database,CMD
 ENV PORT=51821
 ENV HOST=0.0.0.0
-ENV INSECURE=false
+ENV INSECURE=true
+ENV INIT_ENABLED=false

 # Install Dependencies
 COPY src/package.json src/pnpm-lock.yaml ./
@@ -42,8 +42,21 @@ You have found the easiest way to install & manage WireGuard on any Linux host!
 > [!NOTE]
 > To better manage documentation for this project, it has its own site here: [https://wg-easy.github.io/wg-easy/latest](https://wg-easy.github.io/wg-easy/latest)

+<!-- TODO: remove after release -->
+
+> [!WARNING]
+> As the Docs are still in Pre-release, you can access them here [https://wg-easy.github.io/wg-easy/Pre-release](https://wg-easy.github.io/wg-easy/Pre-release)
+
 - [Getting Started](https://wg-easy.github.io/wg-easy/latest/getting-started/)
 - [Basic Installation](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/basic-installation/)
+- [Caddy](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/caddy/)
+- [Nginx](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/nginx/)
+- [Traefik](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/traefik/)
+- [Podman](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/podman/)
+- [AdGuard Home](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/adguard/)
+
+> [!NOTE]
+> If you want to migrate from the old version to the new version, you can find the migration guide here: [Migration Guide](https://wg-easy.github.io/wg-easy/latest/advanced/migrate/)

 ## Requirements

@@ -89,52 +102,7 @@ Now setup a reverse proxy to be able to access the Web UI from the internet.

 If you want to access the Web UI over HTTP, change the env var `INSECURE` to `true`. This is not recommended. Only use this for testing

-<!-- TOOD: add to docs: Grafana dashboard [21733](https://grafana.com/grafana/dashboards/21733-wireguard/) -->
-
-<!-- TOOD: add to docs
-To setup the IPv6 Network, simply run once:
-
-```bash
-  docker network create \
-  -d bridge --ipv6 \
-  -d default \
-  --subnet 10.42.42.0/24 \
-  --subnet fdcc:ad94:bacf:61a3::/64 wg \
-```
-
-To automatically install & run wg-easy, simply run:
-
-```bash
-  docker run -d \
-  --net wg \
-  -e PORT=51821 \
-  --name wg-easy \
-  --ip6 fdcc:ad94:bacf:61a3::2a \
-  --ip 10.42.42.42 \
-  -v ~/.wg-easy:/etc/wireguard \
-  -v /lib/modules:/lib/modules:ro \
-  -p 51820:51820/udp \
-  -p 51821:51821/tcp \
-  --cap-add NET_ADMIN \
-  --cap-add SYS_MODULE \
-  --sysctl net.ipv4.ip_forward=1 \
-  --sysctl net.ipv4.conf.all.src_valid_mark=1 \
-  --sysctl net.ipv6.conf.all.disable_ipv6=0 \
-  --sysctl net.ipv6.conf.all.forwarding=1 \
-  --sysctl net.ipv6.conf.default.forwarding=1 \
-  --restart unless-stopped \
-  ghcr.io/wg-easy/wg-easy
-```
-
-The Web UI will now be available on `http://0.0.0.0:51821`.
-
-The Prometheus metrics will now be available on `http://0.0.0.0:51821/api/metrics`. Grafana dashboard [21733](https://grafana.com/grafana/dashboards/21733-wireguard/)
-
-> 💡 Your configuration files will be saved in `~/.wg-easy`
-
-->
-
-### 3. Sponsor
+### Donate

 Are you enjoying this project? Consider donating.

@@ -142,46 +110,30 @@ Founder: [Buy Emile a beer!](https://github.com/sponsors/WeeJeWel) 🍻

 Maintainer: [Buy kaaax0815 a coffee!](https://github.com/sponsors/kaaax0815) ☕

-<!-- TOOD: add to docs
+## Development

-## Options
+### Prerequisites

-These options can be configured by setting environment variables using `-e KEY="VALUE"` in the `docker run` command.
+- Docker
+- Node LTS & corepack enabled
+- Visual Studio Code

-| Env        | Default   | Example     | Description                    |
-| ---------- | --------- | ----------- | ------------------------------ |
-| `PORT`.    | `51821`   | `6789`      | TCP port for Web UI.           |
-| `HOST`     | `0.0.0.0` | `localhost` | IP address web UI binds to.    |
-| `INSECURE` | `false`   | `true`      | If access over http is allowed |
+### Dev Server

-## Updating
-
-To update to the latest version, simply run:
+This starts the development server with docker

 ```shell
-docker stop wg-easy
-docker rm wg-easy
-docker pull ghcr.io/wg-easy/wg-easy
+pnpm dev
 ```

-And then run the `docker run -d \ ...` command above again.
+### Update Auto Imports

-With Docker Compose WireGuard Easy can be updated with a single command:
-`docker compose up --detach --pull always` (if an image tag is specified in the
-Compose file and it is not `latest`, make sure that it is changed to the desired
-one; by default it is omitted and
-[defaults to `latest`](https://docs.docker.com/engine/reference/run/#image-references)). \
-The WireGuard Easy container will be automatically recreated if a newer image
-was pulled.
+If you add something that should be auto-importable and VSCode complains, run:

-## Common Use Cases
-
- [Using WireGuard-Easy with Pi-Hole](https://github.com/wg-easy/wg-easy/wiki/Using-WireGuard-Easy-with-Pi-Hole)
- [Using WireGuard-Easy with nginx/SSL](https://github.com/wg-easy/wg-easy/wiki/Using-WireGuard-Easy-with-nginx-SSL)
-
-For less common or specific edge-case scenarios, please refer to the detailed information provided in the [Wiki](https://github.com/wg-easy/wg-easy/wiki).
-
-->
+```shell
+cd src
+pnpm install
+```

 ## License

@@ -15,6 +15,12 @@ services:
    cap_add:
      - NET_ADMIN
      - SYS_MODULE
+    environment:
+      - INIT_ENABLED=true
+      - INIT_HOST=test
+      - INIT_PORT=51820
+      - INIT_USERNAME=testtest
+      - INIT_PASSWORD=Qweasdyxcv!2

 # folders should be generated inside container
 volumes:
@@ -9,7 +9,7 @@ services:
    #  - HOST=0.0.0.0
    #  - INSECURE=false

-    image: ghcr.io/wg-easy/wg-easy
+    image: ghcr.io/wg-easy/wg-easy:15
    container_name: wg-easy
    networks:
      wg:
@@ -25,7 +25,7 @@ services:
    cap_add:
      - NET_ADMIN
      - SYS_MODULE
-      # - NET_RAW # ⚠️ Uncomment if using Podman
+      # - NET_RAW # ⚠️ Uncomment if using Podman Compose
    sysctls:
      - net.ipv4.ip_forward=1
      - net.ipv4.conf.all.src_valid_mark=1
@@ -3,3 +3,9 @@ title: Optional Configuration
 ---

 TODO
+
+| Env        | Default   | Example     | Description                    |
+| ---------- | --------- | ----------- | ------------------------------ |
+| `PORT`     | `51821`   | `6789`      | TCP port for Web UI.           |
+| `HOST`     | `0.0.0.0` | `localhost` | IP address web UI binds to.    |
+| `INSECURE` | `false`   | `true`      | If access over http is allowed |
@@ -0,0 +1,32 @@
+---
+title: Unattended Setup
+---
+
+If you want to run the setup without any user interaction, e.g. with a tool like Ansible, you can use these environment variables to configure the setup.
+
+These will only be used during the first start of the container. After that, the setup will be disabled.
+
+| Env              | Example           | Description                                               | Group |
+| ---------------- | ----------------- | --------------------------------------------------------- | ----- |
+| `INIT_ENABLED`   | `true`            | Enables the below env vars                                | 0     |
+| `INIT_USERNAME`  | `admin`           | Sets admin username                                       | 1     |
+| `INIT_PASSWORD`  | `Se!ureP%ssw`     | Sets admin password                                       | 1     |
+| `INIT_HOST`      | `vpn.example.com` | Host clients will connect to                              | 1     |
+| `INIT_PORT`      | `51820`           | Port clients will connect to and wireguard will listen on | 1     |
+| `INIT_DNS`       | `1.1.1.1,8.8.8.8` | Sets global dns setting                                   | 2     |
+| `INIT_IPV4_CIDR` | `10.8.0.0/24`     | Sets IPv4 cidr                                            | 3     |
+| `INIT_IPV6_CIDR` | `2001:0DB8::/32`  | Sets IPv6 cidr                                            | 3     |
+
+/// warning | Variables have to be used together
+
+If variables are in the same group, you have to set all of them. For example, if you set `INIT_IPV4_CIDR`, you also have to set `INIT_IPV6_CIDR`.
+
+If you want to skip the setup process, you have to configure group `1`
+///
+
+/// note | Security
+
+The initial username and password is not checked for complexity. Make sure to set a long enough username and a secure password. Otherwise, the user won't be able to log in.
+
+Its recommended to remove the variables after the setup is done to prevent the password from being exposed.
+///
@@ -0,0 +1,7 @@
+---
+title: Prometheus
+---
+
+TODO
+
+<!-- TOOD: add to docs: Grafana dashboard [21733](https://grafana.com/grafana/dashboards/21733-wireguard/) -->
@@ -0,0 +1,7 @@
+---
+title: Migrate
+---
+
+If you want to migrate from an older version of `wg-easy` to the new version, you can find the migration guides listed below.
+
+- [Migrate from v14 to v15](./from-14-to-15.md) : This guide should also work for any version before `v14`.
@@ -0,0 +1,5 @@
+---
+title: AdGuard Home
+---
+
+TODO
@@ -0,0 +1,34 @@
+---
+title: Auto Updates
+---
+
+## Docker Compose
+
+With Docker Compose `wg-easy` can be updated with a single command:
+
+Replace `$DIR` with the directory where your `docker-compose.yml` is located.
+
+```shell
+cd $DIR
+sudo docker compose up -d --pull always
+```
+
+## Docker Run
+
+```shell
+sudo docker stop wg-easy
+sudo docker rm wg-easy
+sudo docker pull ghcr.io/wg-easy/wg-easy
+```
+
+And then run the `docker run -d \ ...` command from [Docker Run][docker-run] again.
+
+[docker-run]: ./docker-run.md
+
+## Podman
+
+To update `wg-easy` (and every container that has auto updates enabled), you can run the following command:
+
+```shell
+sudo podman auto-update
+```
@@ -27,7 +27,7 @@ Follow the Docs here: <https://docs.docker.com/engine/install/> and install Dock
 2. Download docker compose file

   ```shell
-   sudo curl -o $URL/docker-compose.yml https://raw.githubusercontent.com/wg-easy/wg-easy/master/docker-compose.yml
+   sudo curl -o $DIR/docker-compose.yml https://raw.githubusercontent.com/wg-easy/wg-easy/master/docker-compose.yml
   ```

 3. Start `wg-easy`
@@ -54,3 +54,18 @@ TODO
 Open your browser and navigate to `https://<your-domain>:51821` or `https://<your-ip>:51821`.

 Follow the instructions to set up your WireGuard VPN.
+
+## Update `wg-easy`
+
+To update `wg-easy` to the latest version, run:
+
+```shell
+sudo docker-compose -f $DIR/docker-compose.yml pull
+sudo docker-compose -f $DIR/docker-compose.yml up -d
+```
+
+## Auto Update
+
+If you want to enable auto-updates, follow the instructions here: [Auto Updates][auto-updates]
+
+[auto-updates]: ./auto-updates.md
@@ -0,0 +1,5 @@
+---
+title: Caddy
+---
+
+TODO
@@ -0,0 +1,43 @@
+---
+title: Docker Run
+---
+
+To setup the IPv6 Network, simply run once:
+
+```shell
+  docker network create \
+  -d bridge --ipv6 \
+  -d default \
+  --subnet 10.42.42.0/24 \
+  --subnet fdcc:ad94:bacf:61a3::/64 wg \
+```
+
+<!-- ref: major version -->
+
+To automatically install & run ``wg-easy, simply run:
+
+```shell
+  docker run -d \
+  --net wg \
+  -e INSECURE=true \
+  --name wg-easy \
+  --ip6 fdcc:ad94:bacf:61a3::2a \
+  --ip 10.42.42.42 \
+  -v ~/.wg-easy:/etc/wireguard \
+  -v /lib/modules:/lib/modules:ro \
+  -p 51820:51820/udp \
+  -p 51821:51821/tcp \
+  --cap-add NET_ADMIN \
+  --cap-add SYS_MODULE \
+  --sysctl net.ipv4.ip_forward=1 \
+  --sysctl net.ipv4.conf.all.src_valid_mark=1 \
+  --sysctl net.ipv6.conf.all.disable_ipv6=0 \
+  --sysctl net.ipv6.conf.all.forwarding=1 \
+  --sysctl net.ipv6.conf.default.forwarding=1 \
+  --restart unless-stopped \
+  ghcr.io/wg-easy/wg-easy:15
+```
+
+The Web UI will now be available on `http://0.0.0.0:51821`.
+
+> 💡 Your configuration files will be saved in `~/.wg-easy`
@@ -0,0 +1,5 @@
+---
+title: NGINX
+---
+
+TODO
@@ -19,16 +19,23 @@ sudo mkdir -p /etc/containers/volumes/wg-easy

 Create a file `/etc/containers/systemd/wg-easy/wg-easy.container` with the following content:

+<!-- ref: major version -->
+
 ```ini
 [Container]
 ContainerName=wg-easy
-Image=ghcr.io/wg-easy/wg-easy:latest
+Image=ghcr.io/wg-easy/wg-easy:15
+AutoUpdate=registry

 Volume=/etc/containers/volumes/wg-easy:/etc/wireguard:Z
 Network=wg-easy.network
 PublishPort=51820:51820/udp
 PublishPort=51821:51821/tcp

+# this is used to allow access over HTTP
+# remove this when using a reverse proxy
+Environment=INSECURE=true
+
 AddCapability=NET_ADMIN
 AddCapability=SYS_MODULE
 AddCapability=NET_RAW
@@ -81,7 +88,7 @@ In the Admin Panel of your WireGuard server, go to the `Hooks` tab and add the f
 1. PostUp

   ```shell
-   apk add nftables; nft add table inet wg_table; nft add chain inet wg_table postrouting { type nat hook postrouting priority 100 \; }; nft add rule inet wg_table postrouting ip saddr {{ipv4Cidr}} oifname {{device}} masquerade; nft add rule inet wg_table postrouting ip6 saddr {{ipv6Cidr}} oifname {{device}} masquerade; nft add chain inet wg_table input { type filter hook input priority 0 \; policy drop \; }; nft add rule inet wg_table input udp dport {{port}} accept; nft add chain inet wg_table forward { type filter hook forward priority 0 \; policy drop \; }; nft add rule inet wg_table forward iifname "wg0" accept; nft add rule inet wg_table forward oifname "wg0" accept;
+   apk add nftables; nft add table inet wg_table; nft add chain inet wg_table postrouting { type nat hook postrouting priority 100 \; }; nft add rule inet wg_table postrouting ip saddr {{ipv4Cidr}} oifname {{device}} masquerade; nft add rule inet wg_table postrouting ip6 saddr {{ipv6Cidr}} oifname {{device}} masquerade; nft add chain inet wg_table input { type filter hook input priority 0 \; policy drop \; }; nft add rule inet wg_table input udp dport {{port}} accept; nft add rule inet wg_table input tcp dport {{uiPort}} accept; nft add chain inet wg_table forward { type filter hook forward priority 0 \; policy drop \; }; nft add rule inet wg_table forward iifname "wg0" accept; nft add rule inet wg_table forward oifname "wg0" accept;
   ```

 2. PostDown
@@ -90,6 +97,16 @@ In the Admin Panel of your WireGuard server, go to the `Hooks` tab and add the f
   nft delete table inet wg_table
   ```

+If you don't have iptables loaded on your server, you could see many errors in the logs or in the UI. You can ignore them.
+
+## Restart the Container
+
+Restart the container to apply the new hooks:
+
+```shell
+sudo systemctl restart wg-easy
+```
+
 <!--
 TODO: improve docs after better nftables support
 TODO: fix accept web ui port
@@ -0,0 +1,5 @@
+---
+title: Traefik
+---
+
+TODO
@@ -4,7 +4,8 @@
  "scripts": {
    "dev": "docker compose -f docker-compose.dev.yml up --build",
    "build": "docker build -t wg-easy .",
-    "docs:preview": "docker run --rm -it -p 8080:8080 -v ./docs:/docs squidfunk/mkdocs-material serve -a 0.0.0.0:8080"
+    "docs:preview": "docker run --rm -it -p 8080:8080 -v ./docs:/docs squidfunk/mkdocs-material serve -a 0.0.0.0:8080",
+    "scripts:version": "bash scripts/version.sh"
  },
-  "packageManager": "pnpm@10.5.2"
+  "packageManager": "pnpm@10.6.3"
 }
@@ -0,0 +1,54 @@
+#!/bin/bash
+
+package_json="src/package.json"
+
+# Function to update the version in package.json
+update_version() {
+  local new_version=$1
+  jq --arg new_version "$new_version" '.version = $new_version' $package_json > tmp.json && mv tmp.json $package_json
+}
+
+# Get the current version from package.json
+current_version=$(jq -r '.version' $package_json)
+echo "Current version: $current_version"
+
+# Prompt the user for the new version
+read -p "Enter the new version (following SemVer): " new_version
+
+# Official SemVer regex for validation
+semver_regex="^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$"
+
+# Validate the new version
+if ! echo "$new_version" | grep -Eq "$semver_regex"; then
+  echo "Invalid version format. Please use SemVer format (e.g., 1.0.0 or 1.0.0-alpha)."
+  exit 1
+fi
+
+# Update the version in package.json
+update_version $new_version
+echo "Updated package.json to version $new_version"
+
+echo "----"
+echo "If you changed the major version, remember to update the docker-compose.yml file and docs (search for: ref: major version)"
+echo "----"
+
+echo "If you did everything press 'y' to commit the changes and create a new tag"
+read -p "Do you want to continue? (y/n): " confirm
+
+if [ "$confirm" != "y" ]; then
+  echo "Aborted."
+  exit 1
+fi
+
+# Commit the changes
+git add $package_json
+git commit -m "Bump version to $new_version"
+echo "Committed the changes"
+
+# Create a new Git tag
+git tag -a "v$new_version" -m "Release version $new_version"
+echo "Created Git tag v$new_version"
+
+# Push the commit & tag to the remote repository
+git push origin master --follow-tags
+echo "Pushed Git commit and tag v$new_version to remote repository"
@@ -0,0 +1,24 @@
+<template>
+  <BaseDialog :trigger-class="triggerClass">
+    <template #trigger><slot /></template>
+    <template #title>{{ $t('admin.interface.restart') }}</template>
+    <template #description>
+      {{ $t('admin.interface.restartWarn') }}
+    </template>
+    <template #actions>
+      <DialogClose as-child>
+        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+      </DialogClose>
+      <DialogClose as-child>
+        <BaseButton @click="$emit('restart')">
+          {{ $t('admin.interface.restart') }}
+        </BaseButton>
+      </DialogClose>
+    </template>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+defineEmits(['restart']);
+defineProps<{ triggerClass?: string }>();
+</script>
@@ -0,0 +1,40 @@
+<template>
+  <BaseDialog :trigger-class="triggerClass">
+    <template #trigger><slot /></template>
+    <template #title>{{ $t('admin.config.suggest') }}</template>
+    <template #description>
+      <p v-if="!values">
+        {{ $t('general.loading') }}
+      </p>
+      <div v-else class="flex flex-col items-start gap-2">
+        <p>{{ $t('admin.config.suggestDesc') }}</p>
+        <BaseSelect v-model="selected" :options="values" />
+      </div>
+    </template>
+    <template #actions>
+      <DialogClose as-child>
+        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+      </DialogClose>
+      <DialogClose as-child>
+        <BaseButton @click="$emit('change', selected)">
+          {{ $t('dialog.change') }}
+        </BaseButton>
+      </DialogClose>
+    </template>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+defineEmits(['change']);
+const props = defineProps<{
+  triggerClass?: string;
+  url: '/api/admin/ip-info' | '/api/setup/4';
+}>();
+
+const { data } = await useFetch(props.url, {
+  method: 'get',
+});
+
+const selected = ref<string>();
+const values = toRef(data.value);
+</script>
@@ -6,7 +6,7 @@
        class="fixed inset-0 z-30 bg-gray-500 opacity-75 dark:bg-black dark:opacity-50"
      />
      <DialogContent
-        class="fixed left-1/2 top-1/2 z-[100] max-h-[85vh] w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md p-6 shadow-2xl focus:outline-none dark:bg-neutral-700"
+        class="fixed left-1/2 top-1/2 z-[100] max-h-[85vh] w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-6 shadow-2xl focus:outline-none dark:bg-neutral-700"
      >
        <DialogTitle
          class="m-0 text-lg font-semibold text-gray-900 dark:text-neutral-200"
@@ -0,0 +1,37 @@
+<template>
+  <SelectRoot v-model="selected">
+    <SelectTrigger
+      class="inline-flex h-8 items-center justify-around gap-2 rounded bg-gray-200 px-3 text-sm leading-none dark:bg-neutral-500 dark:text-neutral-200"
+      aria-label="Choose option"
+    >
+      <SelectValue placeholder="Select..." />
+      <IconsArrowDown class="size-3" />
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        class="z-[100] min-w-28 rounded bg-gray-300 dark:bg-neutral-500"
+      >
+        <SelectViewport class="p-2">
+          <SelectItem
+            v-for="(option, index) in options"
+            :key="index"
+            :value="option.value"
+            class="relative flex h-6 items-center rounded px-3 text-sm leading-none outline-none hover:bg-red-800 hover:text-white dark:text-white"
+          >
+            <SelectItemText>
+              {{ option.value }} - {{ option.label }}
+            </SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  options: { label: string; value: string }[];
+}>();
+const selected = defineModel<string>();
+</script>
@@ -1,14 +1,17 @@
 <template>
  <TooltipProvider>
-    <TooltipRoot>
+    <TooltipRoot :open="open" @update:open="open = $event">
      <TooltipTrigger
-        class="inline-flex h-8 w-8 items-center justify-center rounded-full text-gray-400 outline-none focus:shadow-sm focus:shadow-black"
+        class="mx-2 inline-flex h-4 w-4 items-center justify-center rounded-full text-gray-400 outline-none focus:shadow-sm focus:shadow-black"
+        as-child
      >
+        <button @click="open = !open">
          <slot />
+        </button>
      </TooltipTrigger>
      <TooltipPortal>
        <TooltipContent
-          class="select-none rounded bg-gray-600 px-3 py-2 text-sm leading-none text-white shadow-lg will-change-[transform,opacity]"
+          class="select-none whitespace-pre-line rounded bg-gray-600 px-3 py-2 text-sm leading-none text-white shadow-lg will-change-[transform,opacity]"
          :side-offset="5"
        >
          {{ text }}
@@ -21,4 +24,6 @@

 <script lang="ts" setup>
 defineProps<{ text: string }>();
+
+const open = ref(false);
 </script>
@@ -1,10 +1,10 @@
 <template>
+  <div class="flex flex-col gap-2">
    <div v-if="data?.length === 0">
      {{ emptyText || $t('form.noItems') }}
    </div>
-  <div v-else class="flex flex-col gap-2">
-    <div v-for="(item, i) in data" :key="i">
-      <div class="flex flex-row gap-1">
+    <div v-for="(item, i) in data" v-else :key="i">
+      <div class="mt-1 flex flex-row gap-1">
        <input
          :value="item"
          :name="name"
@@ -12,13 +12,20 @@
          class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
          @input="update($event, i)"
        />
-        <BaseButton as="input" type="button" value="-" @click="del(i)" />
+        <BaseButton
+          as="input"
+          type="button"
+          class="rounded-lg"
+          value="-"
+          @click="del(i)"
+        />
      </div>
    </div>
    <div class="mt-2">
      <BaseButton
        as="input"
        type="button"
+        class="rounded-lg"
        :value="$t('form.add')"
        @click="add"
      />
@@ -1,5 +1,5 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+  <section class="grid grid-cols-2 gap-4">
    <slot />
    <Separator
      decorative
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center">
+    <FormLabel :for="id">
+      {{ label }}
+    </FormLabel>
+    <BaseTooltip v-if="description" :text="description">
+      <IconsInfo class="size-4" />
+    </BaseTooltip>
+  </div>
+  <div class="flex">
+    <BaseInput
+      :id="id"
+      v-model.trim="data"
+      :name="id"
+      type="text"
+      class="w-full"
+      :placeholder="placeholder"
+    />
+    <AdminSuggestDialog :url="url" @change="data = $event">
+      <BaseButton as="span">
+        <div class="flex items-center gap-3">
+          <IconsSparkles class="w-4" />
+          <span>{{ $t('admin.config.suggest') }}</span>
+        </div>
+      </BaseButton>
+    </AdminSuggestDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  id: string;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  url: '/api/admin/ip-info' | '/api/setup/4';
+}>();
+
+const data = defineModel<string | null>({
+  set(value) {
+    const temp = value?.trim() ?? null;
+    if (temp === '') {
+      return null;
+    }
+    return temp;
+  },
+});
+</script>
@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div v-if="data === null">
+      {{ emptyText || $t('form.nullNoItems') }}
+    </div>
+    <div v-for="(item, i) in data" v-else :key="i">
+      <div class="mt-1 flex flex-row gap-1">
+        <input
+          :value="item"
+          :name="name"
+          type="text"
+          class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
+          @input="update($event, i)"
+        />
+        <BaseButton
+          as="input"
+          type="button"
+          class="rounded-lg"
+          value="-"
+          @click="del(i)"
+        />
+      </div>
+    </div>
+    <div class="mt-2">
+      <BaseButton
+        as="input"
+        type="button"
+        class="rounded-lg"
+        :value="$t('form.add')"
+        @click="add"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const data = defineModel<string[] | null>();
+defineProps<{ emptyText?: string[]; name: string }>();
+
+function update(e: Event, i: number) {
+  const v = (e.target as HTMLInputElement).value;
+  if (!data.value) {
+    return;
+  }
+  data.value[i] = v;
+}
+
+function add() {
+  if (data.value === undefined) {
+    return;
+  }
+  if (data.value === null) {
+    data.value = [''];
+  } else {
+    data.value.push('');
+  }
+}
+
+function del(i: number) {
+  if (!data.value) {
+    return;
+  }
+  data.value.splice(i, 1);
+  if (data.value.length === 0) {
+    data.value = null;
+  }
+}
+</script>
@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink to="/" class="mb-4 flex-grow self-start">
+  <NuxtLink to="/" class="mb-4">
    <h1 class="text-4xl font-medium dark:text-neutral-200">
      <img
        src="/logo.png"
@@ -1,6 +1,10 @@
 <template>
  <div
-    v-if="globalStore.release?.updateAvailable"
+    v-if="
+      globalStore.release?.updateAvailable &&
+      authStore.userData &&
+      hasPermissions(authStore.userData, 'admin', 'any')
+    "
    class="font-small mb-10 rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
    :title="`v${globalStore.release.currentRelease} → v${globalStore.release.latestRelease.version}`"
  >
@@ -23,6 +27,5 @@

 <script lang="ts" setup>
 const globalStore = useGlobalStore();
-
-// TODO: only show this to admins
+const authStore = useAuthStore();
 </script>
@@ -1,13 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
-      clip-rule="evenodd"
-    />
-  </svg>
+  <ArrowDownIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowDownIcon from '@heroicons/vue/24/outline/esm/ArrowDownIcon';
+</script>
@@ -1,16 +1,7 @@
 <template>
-  <svg
-    inline
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-    />
-  </svg>
+  <ArrowPathIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowPathIcon from '@heroicons/vue/24/outline/esm/ArrowPathIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-    />
-  </svg>
+  <ArrowLeftCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowLeftCircleIcon from '@heroicons/vue/24/outline/esm/ArrowLeftCircleIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-    />
-  </svg>
+  <ArrowRightCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowRightCircleIcon from '@heroicons/vue/24/outline/esm/ArrowLeftCircleIcon';
+</script>
@@ -1,13 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
-      clip-rule="evenodd"
-    />
-  </svg>
+  <ArrowUpIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowUpIcon from '@heroicons/vue/24/outline/esm/ArrowUpIcon';
+</script>
@@ -1,12 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    fill="currentColor"
-  >
-    <path
-      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z"
-    />
-  </svg>
+  <ChartBarIcon />
 </template>
+
+<script lang="ts" setup>
+import ChartBarIcon from '@heroicons/vue/24/outline/esm/ChartBarIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-    />
-  </svg>
+  <CheckCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import CheckCircleIcon from '@heroicons/vue/24/outline/esm/CheckCircleIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M6 18L18 6M6 6l12 12"
-    />
-  </svg>
+  <XMarkIcon />
 </template>
+
+<script lang="ts" setup>
+import XMarkIcon from '@heroicons/vue/24/outline/esm/XMarkIcon';
+</script>
@@ -1,13 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-      clip-rule="evenodd"
-    />
-  </svg>
+  <TrashIcon />
 </template>
+
+<script lang="ts" setup>
+import TrashIcon from '@heroicons/vue/24/outline/esm/TrashIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-    />
-  </svg>
+  <ArrowDownTrayIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowDownTrayIcon from '@heroicons/vue/24/outline/esm/ArrowDownTrayIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-    />
-  </svg>
+  <PencilSquareIcon />
 </template>
+
+<script lang="ts" setup>
+import PencilSquareIcon from '@heroicons/vue/24/outline/esm/PencilSquareIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
-    />
-  </svg>
+  <InformationCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import InformationCircleIcon from '@heroicons/vue/24/outline/esm/InformationCircleIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"
-    />
-  </svg>
+  <LanguageIcon />
 </template>
+
+<script lang="ts" setup>
+import LanguageIcon from '@heroicons/vue/24/outline/esm/LanguageIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"
-    />
-  </svg>
+  <LinkIcon />
 </template>
+
+<script lang="ts" setup>
+import LinkIcon from '@heroicons/vue/24/outline/esm/LinkIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-    />
-  </svg>
+  <ArrowRightStartOnRectangleIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowRightStartOnRectangleIcon from '@heroicons/vue/24/outline/esm/ArrowRightStartOnRectangleIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
-    />
-  </svg>
+  <MoonIcon />
 </template>
+
+<script lang="ts" setup>
+import MoonIcon from '@heroicons/vue/24/outline/esm/MoonIcon';
+</script>
@@ -1,16 +1,7 @@
 <template>
-  <svg
-    inline
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-    />
-  </svg>
+  <PlusIcon />
 </template>
+
+<script lang="ts" setup>
+import PlusIcon from '@heroicons/vue/24/outline/esm/PlusIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
-    />
-  </svg>
+  <QrCodeIcon />
 </template>
+
+<script lang="ts" setup>
+import QrCodeIcon from '@heroicons/vue/24/outline/esm/QrCodeIcon';
+</script>
@@ -0,0 +1,7 @@
+<template>
+  <SparklesIcon />
+</template>
+
+<script lang="ts" setup>
+import SparklesIcon from '@heroicons/vue/24/outline/esm/SparklesIcon';
+</script>
@@ -1,16 +1,7 @@
 <template>
-  <svg
-    inline
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
-    />
-  </svg>
+  <ServerStackIcon />
 </template>
+
+<script lang="ts" setup>
+import ServerStackIcon from '@heroicons/vue/24/outline/esm/ServerStackIcon';
+</script>
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
-    />
-  </svg>
+  <SunIcon />
 </template>
+
+<script lang="ts" setup>
+import SunIcon from '@heroicons/vue/24/outline/esm/SunIcon';
+</script>
@@ -1,17 +1,7 @@
 <template>
-  <!-- Heroicon name: outline/exclamation -->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    aria-hidden="true"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-    />
-  </svg>
+  <ExclamationTriangleIcon />
 </template>
+
+<script lang="ts" setup>
+import ExclamationTriangleIcon from '@heroicons/vue/24/outline/esm/ExclamationTriangleIcon';
+</script>
@@ -24,7 +24,7 @@
      ·
      <a
        class="hover:underline"
-        href="https://github.com/sponsors/WeeJeWel"
+        href="https://github.com/wg-easy/wg-easy#donate"
        target="_blank"
        >{{ $t('layout.donate') }}</a
      >
@@ -1,23 +1,23 @@
 <template>
  <div>
-    <header class="container mx-auto mt-4 max-w-3xl px-3 xs:mt-6 md:px-0">
+    <header class="mx-auto mt-4 flex max-w-3xl flex-col justify-center">
      <div
-        class="mb-5"
+        class="mb-5 w-full"
        :class="
          loggedIn
-            ? 'flex flex-auto flex-col-reverse items-center gap-3 xxs:flex-row'
+            ? 'flex flex-col items-center justify-between sm:flex-row'
            : 'flex justify-end'
        "
      >
        <HeaderLogo v-if="loggedIn" />
-        <div class="flex grow-0 items-center gap-3 self-end xxs:self-center">
+        <div class="flex flex-row gap-3">
          <HeaderLangSelector />
          <HeaderThemeSwitch />
          <HeaderChartToggle v-if="loggedIn" />
          <UiUserMenu v-if="loggedIn" />
        </div>
      </div>
-      <HeaderUpdate class="mt-5" />
+      <HeaderUpdate class="mt-4" />
    </header>
    <slot />
    <UiFooter />
@@ -11,8 +11,8 @@
    </header>
    <main>
      <Panel>
-        <PanelBody class="mx-auto mt-10 p-4 md:w-[70%] lg:w-[60%]">
-          <h2 class="mb-16 mt-8 text-3xl font-medium">
+        <PanelBody class="m-4 mx-auto mt-10 md:w-[70%] lg:w-[60%]">
+          <h2 class="mb-16 mt-8 text-center text-3xl font-medium">
            {{ $t('setup.welcome') }}
          </h2>

@@ -1,8 +1,8 @@
 <template>
  <div>
    <div class="container mx-auto p-4">
-      <div class="flex">
-        <div class="mr-4 w-64 rounded-lg bg-white p-4 dark:bg-neutral-700">
+      <div class="flex flex-col gap-4 lg:flex-row">
+        <div class="rounded-lg bg-white p-4 lg:w-64 dark:bg-neutral-700">
          <NuxtLink to="/admin">
            <h2 class="mb-4 text-xl font-bold dark:text-neutral-200">
              {{ t('pages.admin.panel') }}
@@ -13,6 +13,7 @@
              v-for="(item, index) in menuItems"
              :key="index"
              :to="`/admin/${item.id}`"
+              active-class="bg-red-800 rounded"
            >
              <BaseButton
                as="span"
@@ -27,7 +28,7 @@
        <div
          class="flex-1 rounded-lg bg-white p-6 dark:bg-neutral-700 dark:text-neutral-200"
        >
-          <h1 class="mb-6 text-3xl font-bold">{{ activeMenuItem?.name }}</h1>
+          <h1 class="mb-6 text-3xl font-bold">{{ activeMenuItem.name }}</h1>
          <NuxtPage />
        </div>
      </div>
@@ -44,13 +45,17 @@ const { t } = useI18n();
 const route = useRoute();

 const menuItems = [
-  { id: '', name: t('pages.admin.general') },
+  { id: 'general', name: t('pages.admin.general') },
  { id: 'config', name: t('pages.admin.config') },
  { id: 'interface', name: t('pages.admin.interface') },
  { id: 'hooks', name: t('pages.admin.hooks') },
 ];

+const defaultItem = { id: '', name: t('pages.admin.panel') };
+
 const activeMenuItem = computed(() => {
-  return menuItems.find((item) => route.path === `/admin/${item.id}`);
+  return (
+    menuItems.find((item) => route.path === `/admin/${item.id}`) ?? defaultItem
+  );
 });
 </script>
@@ -3,11 +3,12 @@
    <FormElement @submit.prevent="submit">
      <FormGroup>
        <FormHeading>{{ $t('admin.config.connection') }}</FormHeading>
-        <FormTextField
+        <FormHostField
          id="host"
          v-model="data.host"
          :label="$t('general.host')"
          :description="$t('admin.config.hostDesc')"
+          url="/api/admin/ip-info"
        />
        <FormNumberField
          id="port"
@@ -27,7 +28,7 @@
      </FormGroup>
      <FormGroup>
        <FormHeading :description="$t('admin.config.dnsDesc')">{{
-          $t('admin.config.dns')
+          $t('general.dns')
        }}</FormHeading>
        <FormArrayField v-model="data.defaultDns" name="defaultDns" />
      </FormGroup>
@@ -0,0 +1,64 @@
+<template>
+  <main v-if="data">
+    <FormElement @submit.prevent="submit">
+      <FormGroup>
+        <FormNumberField
+          id="session"
+          v-model="data.sessionTimeout"
+          :label="$t('admin.general.sessionTimeout')"
+          :description="$t('admin.general.sessionTimeoutDesc')"
+        />
+      </FormGroup>
+      <FormGroup>
+        <FormHeading>{{ $t('admin.general.metrics') }}</FormHeading>
+        <FormNullTextField
+          id="password"
+          v-model="data.metricsPassword"
+          :label="$t('admin.general.metricsPassword')"
+          :description="$t('admin.general.metricsPasswordDesc')"
+        />
+        <FormSwitchField
+          id="prometheus"
+          v-model="data.metricsPrometheus"
+          :label="$t('admin.general.prometheus')"
+          :description="$t('admin.general.prometheusDesc')"
+        />
+        <FormSwitchField
+          id="json"
+          v-model="data.metricsJson"
+          :label="$t('admin.general.json')"
+          :description="$t('admin.general.jsonDesc')"
+        />
+      </FormGroup>
+      <FormGroup>
+        <FormHeading>{{ $t('form.actions') }}</FormHeading>
+        <FormActionField type="submit" :label="$t('form.save')" />
+        <FormActionField :label="$t('form.revert')" @click="revert" />
+      </FormGroup>
+    </FormElement>
+  </main>
+</template>
+
+<script setup lang="ts">
+const { data: _data, refresh } = await useFetch(`/api/admin/general`, {
+  method: 'get',
+});
+const data = toRef(_data.value);
+
+const _submit = useSubmit(
+  `/api/admin/general`,
+  {
+    method: 'post',
+  },
+  { revert }
+);
+
+function submit() {
+  return _submit(data.value);
+}
+
+async function revert() {
+  await refresh();
+  data.value = toRef(_data.value).value;
+}
+</script>
@@ -2,10 +2,26 @@
  <main v-if="data">
    <FormElement @submit.prevent="submit">
      <FormGroup>
-        <FormTextField id="PreUp" v-model="data.preUp" label="PreUp" />
-        <FormTextField id="PostUp" v-model="data.postUp" label="PostUp" />
-        <FormTextField id="PreDown" v-model="data.preDown" label="PreDown" />
-        <FormTextField id="PostDown" v-model="data.postDown" label="PostDown" />
+        <FormTextField
+          id="PreUp"
+          v-model="data.preUp"
+          :label="$t('hooks.preUp')"
+        />
+        <FormTextField
+          id="PostUp"
+          v-model="data.postUp"
+          :label="$t('hooks.postUp')"
+        />
+        <FormTextField
+          id="PreDown"
+          v-model="data.preDown"
+          :label="$t('hooks.preDown')"
+        />
+        <FormTextField
+          id="PostDown"
+          v-model="data.postDown"
+          :label="$t('hooks.postDown')"
+        />
      </FormGroup>
      <FormGroup>
        <FormHeading>{{ $t('form.actions') }}</FormHeading>
@@ -1,64 +1,5 @@
 <template>
-  <main v-if="data">
-    <FormElement @submit.prevent="submit">
-      <FormGroup>
-        <FormNumberField
-          id="session"
-          v-model="data.sessionTimeout"
-          :label="$t('admin.general.sessionTimeout')"
-          :description="$t('admin.general.sessionTimeoutDesc')"
-        />
-      </FormGroup>
-      <FormGroup>
-        <FormHeading>{{ $t('admin.general.metrics') }}</FormHeading>
-        <FormNullTextField
-          id="password"
-          v-model="data.metricsPassword"
-          :label="$t('admin.general.metricsPassword')"
-          :description="$t('admin.general.metricsPasswordDesc')"
-        />
-        <FormSwitchField
-          id="prometheus"
-          v-model="data.metricsPrometheus"
-          :label="$t('admin.general.prometheus')"
-          :description="$t('admin.general.prometheusDesc')"
-        />
-        <FormSwitchField
-          id="json"
-          v-model="data.metricsJson"
-          :label="$t('admin.general.json')"
-          :description="$t('admin.general.jsonDesc')"
-        />
-      </FormGroup>
-      <FormGroup>
-        <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
-      </FormGroup>
-    </FormElement>
+  <main class="flex flex-col gap-3">
+    <p class="whitespace-pre-line">{{ $t('admin.introText') }}</p>
  </main>
 </template>
-
-<script setup lang="ts">
-const { data: _data, refresh } = await useFetch(`/api/admin/general`, {
-  method: 'get',
-});
-const data = toRef(_data.value);
-
-const _submit = useSubmit(
-  `/api/admin/general`,
-  {
-    method: 'post',
-  },
-  { revert }
-);
-
-function submit() {
-  return _submit(data.value);
-}
-
-async function revert() {
-  await refresh();
-  data.value = toRef(_data.value).value;
-}
-</script>
@@ -34,8 +34,19 @@
          <FormActionField
            :label="$t('admin.interface.changeCidr')"
            class="w-full"
+            tabindex="-1"
          />
        </AdminCidrDialog>
+        <AdminRestartInterfaceDialog
+          trigger-class="col-span-2"
+          @restart="restartInterface"
+        >
+          <FormActionField
+            :label="$t('admin.interface.restart')"
+            class="w-full"
+            tabindex="-1"
+          />
+        </AdminRestartInterfaceDialog>
      </FormGroup>
    </FormElement>
  </main>
@@ -82,4 +93,20 @@ const _changeCidr = useSubmit(
 async function changeCidr(ipv4Cidr: string, ipv6Cidr: string) {
  await _changeCidr({ ipv4Cidr, ipv6Cidr });
 }
+
+const _restartInterface = useSubmit(
+  `/api/admin/interface/restart`,
+  {
+    method: 'post',
+  },
+  {
+    revert,
+    successMsg: t('admin.interface.restartSuccess'),
+    errorMsg: t('admin.interface.restartError'),
+  }
+);
+
+async function restartInterface() {
+  await _restartInterface(undefined);
+}
 </script>
@@ -41,21 +41,26 @@
            />
          </FormGroup>
          <FormGroup>
-            <FormHeading :description="$t('client.allowedIpsDesc')">{{
-              $t('general.allowedIps')
-            }}</FormHeading>
-            <FormArrayField v-model="data.allowedIps" name="allowedIps" />
+            <FormHeading :description="$t('client.allowedIpsDesc')">
+              {{ $t('general.allowedIps') }}
+            </FormHeading>
+            <FormNullArrayField v-model="data.allowedIps" name="allowedIps" />
          </FormGroup>
          <FormGroup>
-            <FormHeading :description="$t('client.serverAllowedIpsDesc')">{{
-              $t('client.serverAllowedIps')
-            }}</FormHeading>
+            <FormHeading :description="$t('client.serverAllowedIpsDesc')">
+              {{ $t('client.serverAllowedIps') }}
+            </FormHeading>
            <FormArrayField
              v-model="data.serverAllowedIps"
              name="serverAllowedIps"
            />
          </FormGroup>
-          <FormGroup></FormGroup>
+          <FormGroup>
+            <FormHeading :description="$t('client.dnsDesc')">
+              {{ $t('general.dns') }}
+            </FormHeading>
+            <FormNullArrayField v-model="data.dns" name="dns" />
+          </FormGroup>
          <FormGroup>
            <FormHeading>{{ $t('form.sectionAdvanced') }}</FormHeading>
            <FormNumberField
@@ -71,6 +76,35 @@
              :label="$t('general.persistentKeepalive')"
            />
          </FormGroup>
+          <FormGroup>
+            <FormHeading :description="$t('client.hooksDescription')">
+              {{ $t('client.hooks') }}
+            </FormHeading>
+            <FormTextField
+              id="PreUp"
+              v-model="data.preUp"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.preUp')"
+            />
+            <FormTextField
+              id="PostUp"
+              v-model="data.postUp"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.postUp')"
+            />
+            <FormTextField
+              id="PreDown"
+              v-model="data.preDown"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.preDown')"
+            />
+            <FormTextField
+              id="PostDown"
+              v-model="data.postDown"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.postDown')"
+            />
+          </FormGroup>
          <FormGroup>
            <FormHeading>{{ $t('form.actions') }}</FormHeading>
            <FormActionField type="submit" :label="$t('form.save')" />
@@ -113,8 +147,12 @@ const _submit = useSubmit(
    method: 'post',
  },
  {
-    revert: async () => {
+    revert: async (success) => {
+      if (success) {
        await navigateTo('/');
+      } else {
+        await revert();
+      }
    },
  }
 );
@@ -54,6 +54,9 @@
 </template>

 <script setup lang="ts">
+const authStore = useAuthStore();
+authStore.update();
+
 const authenticating = ref(false);
 const remember = ref(false);
 const username = ref<null | string>(null);
@@ -40,7 +40,7 @@
              id="confirm-password"
              v-model="confirmPassword"
              autocomplete="new-password"
-              :label="$t('me.confirmPassword')"
+              :label="$t('general.confirmPassword')"
            />
            <FormActionField
              type="submit"
@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <p class="px-8 pt-8 text-center text-2xl">
+  <div class="flex flex-col items-center">
+    <p class="px-8 text-center text-2xl">
      {{ $t('setup.welcomeDesc') }}
    </p>
-    <NuxtLink to="/setup/2">
+    <NuxtLink to="/setup/2" class="mt-8">
      <BaseButton as="span">{{ $t('general.continue') }}</BaseButton>
    </NuxtLink>
  </div>
@@ -1,9 +1,9 @@
 <template>
  <div>
-    <p class="p-8 text-center text-lg">
+    <p class="text-center text-lg">
      {{ $t('setup.createAdminDesc') }}
    </p>
-    <div class="flex flex-col gap-3">
+    <div class="mt-8 flex flex-col gap-3">
      <div class="flex flex-col">
        <FormNullTextField
          id="username"
@@ -20,7 +20,15 @@
          :label="$t('general.password')"
        />
      </div>
-      <div>
+      <div class="flex flex-col">
+        <FormPasswordField
+          id="confirmPassword"
+          v-model="confirmPassword"
+          autocomplete="new-password"
+          :label="$t('general.confirmPassword')"
+        />
+      </div>
+      <div class="mt-4 flex justify-center">
        <BaseButton @click="submit">{{ $t('setup.createAccount') }}</BaseButton>
      </div>
    </div>
@@ -37,6 +45,7 @@ setupStore.setStep(2);

 const username = ref<null | string>(null);
 const password = ref<string>('');
+const confirmPassword = ref<string>('');

 const _submit = useSubmit(
  '/api/setup/2',
@@ -54,6 +63,10 @@ const _submit = useSubmit(
 );

 function submit() {
-  return _submit({ username: username.value, password: password.value });
+  return _submit({
+    username: username.value,
+    password: password.value,
+    confirmPassword: confirmPassword.value,
+  });
 }
 </script>
@@ -1,14 +1,18 @@
 <template>
  <div>
-    <p class="p-8 text-center text-lg">
+    <p class="text-center text-lg">
      {{ $t('setup.existingSetup') }}
    </p>
-    <div class="mb-8 flex justify-center">
-      <NuxtLink to="/setup/4">
-        <BaseButton as="span">{{ $t('general.no') }}</BaseButton>
+    <div class="mt-4 flex justify-center gap-3">
+      <NuxtLink to="/setup/4" class="w-20">
+        <BaseButton as="span" class="w-full justify-center">
+          {{ $t('general.no') }}
+        </BaseButton>
      </NuxtLink>
-      <NuxtLink to="/setup/migrate">
-        <BaseButton as="span">{{ $t('general.yes') }}</BaseButton>
+      <NuxtLink to="/setup/migrate" class="w-20">
+        <BaseButton as="span" class="w-full justify-center">
+          {{ $t('general.yes') }}
+        </BaseButton>
      </NuxtLink>
    </div>
  </div>
@@ -1,21 +1,28 @@
 <template>
  <div>
-    <p class="p-8 text-center text-lg">
+    <p class="text-center text-lg">
      {{ $t('setup.setupConfigDesc') }}
    </p>
-    <div class="flex flex-col gap-3">
+    <div class="mt-8 flex flex-col gap-3">
      <div class="flex flex-col">
-        <FormNullTextField
+        <FormHostField
          id="host"
          v-model="host"
          :label="$t('general.host')"
          placeholder="vpn.example.com"
+          :description="$t('setup.hostDesc')"
+          url="/api/setup/4"
        />
      </div>
      <div class="flex flex-col">
-        <FormNumberField id="port" v-model="port" :label="$t('general.port')" />
+        <FormNumberField
+          id="port"
+          v-model="port"
+          :label="$t('general.port')"
+          :description="$t('setup.portDesc')"
+        />
      </div>
-      <div>
+      <div class="mt-4 flex justify-center">
        <BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton>
      </div>
    </div>
@@ -1,14 +1,16 @@
 <template>
-  <div>
-    <p class="p-8 text-center text-lg">
+  <div class="flex flex-col items-center">
+    <p class="text-center text-lg">
      {{ $t('setup.setupMigrationDesc') }}
    </p>
-    <div>
+    <div class="mt-8 flex gap-3">
      <Label for="migration">{{ $t('setup.migration') }}</Label>
      <input id="migration" type="file" @change="onChangeFile" />
    </div>
+    <div class="mt-4">
      <BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton>
    </div>
+  </div>
 </template>

 <script lang="ts" setup>
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col items-center">
    <p>{{ $t('setup.successful') }}</p>
-    <NuxtLink to="/login">
+    <NuxtLink to="/login" class="mt-4">
      <BaseButton as="span">{{ $t('login.signIn') }}</BaseButton>
    </NuxtLink>
  </div>
@@ -14,8 +14,7 @@
    "email": "E-Mail"
  },
  "me": {
-    "currentPassword": "Current Password",
-    "confirmPassword": "Confirm Password"
+    "currentPassword": "Current Password"
  },
  "general": {
    "name": "Name",
@@ -25,25 +24,30 @@
    "updatePassword": "Update Password",
    "mtu": "MTU",
    "allowedIps": "Allowed IPs",
+    "dns": "DNS",
    "persistentKeepalive": "Persistent Keepalive",
    "logout": "Logout",
    "continue": "Continue",
    "host": "Host",
    "port": "Port",
    "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "confirmPassword": "Confirm Password",
+    "loading": "Loading"
  },
  "setup": {
-    "welcome": "Welcome to your first setup of wg-easy !",
-    "welcomeDesc": "You have found the easiest way to install and manage WireGuard on any Linux host!",
+    "welcome": "Welcome to your first setup of wg-easy",
+    "welcomeDesc": "You have found the easiest way to install and manage WireGuard on any Linux host",
    "existingSetup": "Do you have an existing setup?",
    "createAdminDesc": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.",
    "setupConfigDesc": "Please enter the host and port information. This will be used for the client configuration when setting up WireGuard on their devices.",
    "setupMigrationDesc": "Please provide the backup file if you want to migrate your data from your previous wg-easy version to your new setup.",
    "upload": "Upload",
-    "migration": "Restore the backup",
+    "migration": "Restore the backup:",
    "createAccount": "Create Account",
-    "successful": "Setup successful"
+    "successful": "Setup successful",
+    "hostDesc": "Public hostname clients will connect to",
+    "portDesc": "Public UDP port clients will connect to and WireGuard will listen on"
  },
  "update": {
    "updateAvailable": "There is an update available!",
@@ -95,10 +99,14 @@
    "noPrivKey": "This client has no known private key. Cannot create Configuration.",
    "showQR": "Show QR Code",
    "downloadConfig": "Download Configuration",
-    "allowedIpsDesc": "Which IPs will be routed through the VPN",
+    "allowedIpsDesc": "Which IPs will be routed through the VPN (overrides global config)",
    "serverAllowedIpsDesc": "Which IPs the server will route to the client",
    "mtuDesc": "Sets the maximum transmission unit (packet size) for the VPN tunnel",
-    "persistentKeepaliveDesc": "Sets the interval (in seconds) for keep-alive packets. 0 disables it"
+    "persistentKeepaliveDesc": "Sets the interval (in seconds) for keep-alive packets. 0 disables it",
+    "hooks": "Hooks",
+    "hooksDescription": "Hooks only work with wg-quick",
+    "hooksLeaveEmpty": "Only for wg-quick. Otherwise, leave it empty",
+    "dnsDesc": "DNS server clients will use (overrides global config)"
  },
  "dialog": {
    "change": "Change",
@@ -118,6 +126,7 @@
    "sectionGeneral": "General",
    "sectionAdvanced": "Advanced",
    "noItems": "No items",
+    "nullNoItems": "No items. Using global config",
    "add": "Add"
  },
  "admin": {
@@ -135,12 +144,13 @@
    "config": {
      "connection": "Connection",
      "hostDesc": "Public hostname clients will connect to (invalidates config)",
-      "portDesc": "Public UDP port clients will connect to (invalidates config)",
-      "allowedIpsDesc": "Allowed IPs clients will use (invalidates config)",
-      "dns": "DNS",
-      "dnsDesc": "DNS server clients will use (invalidates config)",
-      "mtuDesc": "MTU clients will use (invalidates config)",
-      "persistentKeepaliveDesc": "Interval in seconds to send keepalives to the server. 0 = disabled (invalidates config)"
+      "portDesc": "Public UDP port clients will connect to (invalidates config, you probably want to change Interface Port too)",
+      "allowedIpsDesc": "Allowed IPs clients will use (global config)",
+      "dnsDesc": "DNS server clients will use (global config)",
+      "mtuDesc": "MTU clients will use (only for new clients)",
+      "persistentKeepaliveDesc": "Interval in seconds to send keepalives to the server. 0 = disabled (only for new clients)",
+      "suggest": "Suggest",
+      "suggestDesc": "Choose a IP-Address or Hostname for the Host field"
    },
    "interface": {
      "cidrSuccess": "Changed CIDR",
@@ -148,9 +158,15 @@
      "device": "Device",
      "deviceDesc": "Ethernet device the wireguard traffic should be forwarded through",
      "mtuDesc": "MTU WireGuard will use",
-      "portDesc": "UDP Port WireGuard will listen on (could invalidate config)",
-      "changeCidr": "Change CIDR"
-    }
+      "portDesc": "UDP Port WireGuard will listen on (you probably want to change Config Port too)",
+      "changeCidr": "Change CIDR",
+      "restart": "Restart Interface",
+      "restartDesc": "Restart the WireGuard interface",
+      "restartWarn": "Are you sure to restart the interface? This will disconnect all clients.",
+      "restartSuccess": "Interface restarted",
+      "restartError": "Failed to restart interface"
+    },
+    "introText": "Welcome to the admin panel.\n\nHere you can manage the general settings, the configuration, the interface settings and the hooks.\n\nStart by choosing one of the sections in the sidebar."
  },
  "zod": {
    "generic": {
@@ -193,7 +209,8 @@
    },
    "interface": {
      "cidr": "CIDR",
-      "device": "Device"
+      "device": "Device",
+      "cidrValid": "CIDR must be valid"
    },
    "otl": "One Time link",
    "stringMalformed": "String is malformed",
@@ -207,5 +224,11 @@
    "dns": "DNS",
    "allowedIps": "Allowed IPs",
    "file": "File"
+  },
+  "hooks": {
+    "preUp": "PreUp",
+    "postUp": "PostUp",
+    "preDown": "PreDown",
+    "postDown": "PostDown"
  }
 }
@@ -28,7 +28,9 @@ export default defineNuxtConfig({
    },
    locales: [
      {
+        // same as i18n.config.ts
        code: 'en',
+        // BCP 47 language tag
        language: 'en-US',
        name: 'English',
      },
@@ -1,6 +1,6 @@
 {
  "name": "wg-easy",
-  "version": "15.0.0-beta.1",
+  "version": "15.0.0-beta.9",
  "description": "The easiest way to run WireGuard VPN + Web-based Admin UI.",
  "private": true,
  "type": "module",
@@ -19,9 +19,10 @@
  },
  "dependencies": {
    "@eschricht/nuxt-color-mode": "^1.1.5",
+    "@heroicons/vue": "^2.2.0",
    "@libsql/client": "^0.14.0",
-    "@nuxtjs/i18n": "^9.2.1",
-    "@nuxtjs/tailwindcss": "^6.13.1",
+    "@nuxtjs/i18n": "^9.3.1",
+    "@nuxtjs/tailwindcss": "^6.13.2",
    "@pinia/nuxt": "^0.10.1",
    "@tailwindcss/forms": "^0.5.10",
    "apexcharts": "^4.5.0",
@@ -36,7 +37,7 @@
    "is-ip": "^5.0.1",
    "js-sha256": "^0.11.0",
    "lowdb": "^7.0.1",
-    "nuxt": "^3.15.4",
+    "nuxt": "^3.16.0",
    "pinia": "^3.0.1",
    "qrcode": "^1.5.4",
    "radix-vue": "^1.9.17",
@@ -48,17 +49,17 @@
    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "@nuxt/eslint": "1.1.0",
+    "@nuxt/eslint": "1.2.0",
    "@types/debug": "^4.1.12",
    "@types/qrcode": "^1.5.5",
    "@types/semver": "^7.5.8",
    "drizzle-kit": "^0.30.5",
-    "eslint": "^9.21.0",
-    "eslint-config-prettier": "^10.0.2",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "typescript": "^5.8.2",
    "vue-tsc": "^2.2.8"
  },
-  "packageManager": "pnpm@10.5.2"
+  "packageManager": "pnpm@10.6.3"
 }
@@ -0,0 +1,5 @@
+export default definePermissionEventHandler('admin', 'any', async () => {
+  await WireGuard.Restart();
+
+  return { success: true };
+});
@@ -0,0 +1,4 @@
+export default definePermissionEventHandler('admin', 'any', async () => {
+  const result = await cachedGetIpInformation();
+  return result;
+});
@@ -2,11 +2,10 @@ export default defineEventHandler(async (event) => {
  const session = await useWGSession(event);

  if (!session.data.userId) {
-    throw createError({
-      statusCode: 401,
-      statusMessage: 'Not logged in',
-    });
+    // not logged in
+    return null;
  }
+
  const user = await Database.users.get(session.data.userId);
  if (!user) {
    throw createError({
@@ -0,0 +1,4 @@
+export default defineSetupEventHandler(4, async () => {
+  const result = await cachedGetIpInformation();
+  return result;
+});
@@ -4,15 +4,19 @@ CREATE TABLE `clients_table` (
 	`name` text NOT NULL,
 	`ipv4_address` text NOT NULL,
 	`ipv6_address` text NOT NULL,
+	`pre_up` text DEFAULT '' NOT NULL,
+	`post_up` text DEFAULT '' NOT NULL,
+	`pre_down` text DEFAULT '' NOT NULL,
+	`post_down` text DEFAULT '' NOT NULL,
 	`private_key` text NOT NULL,
 	`public_key` text NOT NULL,
 	`pre_shared_key` text NOT NULL,
 	`expires_at` text,
-	`allowed_ips` text NOT NULL,
+	`allowed_ips` text,
 	`server_allowed_ips` text NOT NULL,
 	`persistent_keepalive` integer NOT NULL,
 	`mtu` integer NOT NULL,
-	`dns` text NOT NULL,
+	`dns` text,
 	`enabled` integer NOT NULL,
 	`created_at` text DEFAULT (CURRENT_TIMESTAMP) NOT NULL,
 	`updated_at` text DEFAULT (CURRENT_TIMESTAMP) NOT NULL,
@@ -60,13 +64,12 @@ CREATE TABLE `interfaces_table` (
 --> statement-breakpoint
 CREATE UNIQUE INDEX `interfaces_table_port_unique` ON `interfaces_table` (`port`);--> statement-breakpoint
 CREATE TABLE `one_time_links_table` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`id` integer PRIMARY KEY NOT NULL,
 	`one_time_link` text NOT NULL,
 	`expires_at` text NOT NULL,
-	`client_id` integer NOT NULL,
 	`created_at` text DEFAULT (CURRENT_TIMESTAMP) NOT NULL,
 	`updated_at` text DEFAULT (CURRENT_TIMESTAMP) NOT NULL,
-	FOREIGN KEY (`client_id`) REFERENCES `clients_table`(`id`) ON UPDATE cascade ON DELETE cascade
+	FOREIGN KEY (`id`) REFERENCES `clients_table`(`id`) ON UPDATE cascade ON DELETE cascade
 );
 --> statement-breakpoint
 CREATE UNIQUE INDEX `one_time_links_table_one_time_link_unique` ON `one_time_links_table` (`one_time_link`);--> statement-breakpoint
@@ -1,7 +1,7 @@
 {
  "version": "6",
  "dialect": "sqlite",
-  "id": "b1dde023-d141-4eab-9226-89a832b2ed2b",
+  "id": "8c2af02b-c4bd-4880-a9ad-b38805636208",
  "prevId": "00000000-0000-0000-0000-000000000000",
  "tables": {
    "clients_table": {
@@ -42,6 +42,38 @@
          "notNull": true,
          "autoincrement": false
        },
+        "pre_up": {
+          "name": "pre_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_up": {
+          "name": "post_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "pre_down": {
+          "name": "pre_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_down": {
+          "name": "post_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
        "private_key": {
          "name": "private_key",
          "type": "text",
@@ -74,7 +106,7 @@
          "name": "allowed_ips",
          "type": "text",
          "primaryKey": false,
-          "notNull": true,
+          "notNull": false,
          "autoincrement": false
        },
        "server_allowed_ips": {
@@ -102,7 +134,7 @@
          "name": "dns",
          "type": "text",
          "primaryKey": false,
-          "notNull": true,
+          "notNull": false,
          "autoincrement": false
        },
        "enabled": {
@@ -420,7 +452,7 @@
          "type": "integer",
          "primaryKey": true,
          "notNull": true,
-          "autoincrement": true
+          "autoincrement": false
        },
        "one_time_link": {
          "name": "one_time_link",
@@ -436,13 +468,6 @@
          "notNull": true,
          "autoincrement": false
        },
-        "client_id": {
-          "name": "client_id",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
        "created_at": {
          "name": "created_at",
          "type": "text",
@@ -470,12 +495,12 @@
        }
      },
      "foreignKeys": {
-        "one_time_links_table_client_id_clients_table_id_fk": {
-          "name": "one_time_links_table_client_id_clients_table_id_fk",
+        "one_time_links_table_id_clients_table_id_fk": {
+          "name": "one_time_links_table_id_clients_table_id_fk",
          "tableFrom": "one_time_links_table",
          "tableTo": "clients_table",
          "columnsFrom": [
-            "client_id"
+            "id"
          ],
          "columnsTo": [
            "id"
@@ -1,6 +1,6 @@
 {
-  "id": "720d420c-361f-4427-a45b-db0ca613934d",
-  "prevId": "b1dde023-d141-4eab-9226-89a832b2ed2b",
+  "id": "a61263b1-9af1-4d2e-99e9-80d08127b545",
+  "prevId": "8c2af02b-c4bd-4880-a9ad-b38805636208",
  "version": "6",
  "dialect": "sqlite",
  "tables": {
@@ -42,6 +42,38 @@
          "notNull": true,
          "autoincrement": false
        },
+        "pre_up": {
+          "name": "pre_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_up": {
+          "name": "post_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "pre_down": {
+          "name": "pre_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_down": {
+          "name": "post_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
        "private_key": {
          "name": "private_key",
          "type": "text",
@@ -74,7 +106,7 @@
          "name": "allowed_ips",
          "type": "text",
          "primaryKey": false,
-          "notNull": true,
+          "notNull": false,
          "autoincrement": false
        },
        "server_allowed_ips": {
@@ -102,7 +134,7 @@
          "name": "dns",
          "type": "text",
          "primaryKey": false,
-          "notNull": true,
+          "notNull": false,
          "autoincrement": false
        },
        "enabled": {
@@ -420,7 +452,7 @@
          "type": "integer",
          "primaryKey": true,
          "notNull": true,
-          "autoincrement": true
+          "autoincrement": false
        },
        "one_time_link": {
          "name": "one_time_link",
@@ -436,13 +468,6 @@
          "notNull": true,
          "autoincrement": false
        },
-        "client_id": {
-          "name": "client_id",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
        "created_at": {
          "name": "created_at",
          "type": "text",
@@ -470,11 +495,11 @@
        }
      },
      "foreignKeys": {
-        "one_time_links_table_client_id_clients_table_id_fk": {
-          "name": "one_time_links_table_client_id_clients_table_id_fk",
+        "one_time_links_table_id_clients_table_id_fk": {
+          "name": "one_time_links_table_id_clients_table_id_fk",
          "tableFrom": "one_time_links_table",
          "columnsFrom": [
-            "client_id"
+            "id"
          ],
          "tableTo": "clients_table",
          "columnsTo": [
@@ -5,14 +5,14 @@
    {
      "idx": 0,
      "version": "6",
-      "when": 1739266828300,
+      "when": 1741355094140,
      "tag": "0000_short_skin",
      "breakpoints": true
    },
    {
      "idx": 1,
      "version": "6",
-      "when": 1739266837347,
+      "when": 1741355098159,
      "tag": "0001_classy_the_stranger",
      "breakpoints": true
    }
@@ -3,6 +3,8 @@ import { int, sqliteTable, text } from 'drizzle-orm/sqlite-core';

 import { oneTimeLink, user } from '../../schema';

+/** null means use value from userConfig */
+
 export const client = sqliteTable('clients_table', {
  id: int().primaryKey({ autoIncrement: true }),
  userId: int('user_id')
@@ -14,17 +16,21 @@ export const client = sqliteTable('clients_table', {
  name: text().notNull(),
  ipv4Address: text('ipv4_address').notNull().unique(),
  ipv6Address: text('ipv6_address').notNull().unique(),
+  preUp: text('pre_up').default('').notNull(),
+  postUp: text('post_up').default('').notNull(),
+  preDown: text('pre_down').default('').notNull(),
+  postDown: text('post_down').default('').notNull(),
  privateKey: text('private_key').notNull(),
  publicKey: text('public_key').notNull(),
  preSharedKey: text('pre_shared_key').notNull(),
  expiresAt: text('expires_at'),
-  allowedIps: text('allowed_ips', { mode: 'json' }).$type<string[]>().notNull(),
+  allowedIps: text('allowed_ips', { mode: 'json' }).$type<string[]>(),
  serverAllowedIps: text('server_allowed_ips', { mode: 'json' })
    .$type<string[]>()
    .notNull(),
  persistentKeepalive: int('persistent_keepalive').notNull(),
  mtu: int().notNull(),
-  dns: text({ mode: 'json' }).$type<string[]>().notNull(),
+  dns: text({ mode: 'json' }).$type<string[]>(),
  enabled: int({ mode: 'boolean' }).notNull(),
  createdAt: text('created_at')
    .notNull()
@@ -38,7 +44,7 @@ export const client = sqliteTable('clients_table', {
 export const clientsRelations = relations(client, ({ one }) => ({
  oneTimeLink: one(oneTimeLink, {
    fields: [client.id],
-    references: [oneTimeLink.clientId],
+    references: [oneTimeLink.id],
  }),
  user: one(user, {
    fields: [client.userId],
@@ -1,5 +1,5 @@
 import { eq, sql } from 'drizzle-orm';
-import { parseCidr } from 'cidr-tools';
+import { containsCidr, parseCidr } from 'cidr-tools';
 import { client } from './schema';
 import type {
  ClientCreateFromExistingType,
@@ -115,8 +115,6 @@ export class ClientService {
          ipv4Address,
          ipv6Address,
          mtu: clientConfig.defaultMtu,
-          allowedIps: clientConfig.defaultAllowedIps,
-          dns: clientConfig.defaultDns,
          persistentKeepalive: clientConfig.defaultPersistentKeepalive,
          serverAllowedIps: [],
          enabled: true,
@@ -134,7 +132,27 @@ export class ClientService {
  }

  update(id: ID, data: UpdateClientType) {
-    return this.#db.update(client).set(data).where(eq(client.id, id)).execute();
+    return this.#db.transaction(async (tx) => {
+      const clientInterface = await tx.query.wgInterface
+        .findFirst({
+          where: eq(wgInterface.name, 'wg0'),
+        })
+        .execute();
+
+      if (!clientInterface) {
+        throw new Error('WireGuard interface not found');
+      }
+
+      if (!containsCidr(clientInterface.ipv4Cidr, data.ipv4Address)) {
+        throw new Error('IPv4 address is not within the CIDR range');
+      }
+
+      if (!containsCidr(clientInterface.ipv6Cidr, data.ipv6Address)) {
+        throw new Error('IPv6 address is not within the CIDR range');
+      }
+
+      await tx.update(client).set(data).where(eq(client.id, id)).execute();
+    });
  }

  async createFromExisting({
@@ -57,11 +57,15 @@ export const ClientUpdateSchema = schemaForType<UpdateClientType>()(
    expiresAt: expiresAt,
    ipv4Address: address4,
    ipv6Address: address6,
-    allowedIps: AllowedIpsSchema,
+    preUp: HookSchema,
+    postUp: HookSchema,
+    preDown: HookSchema,
+    postDown: HookSchema,
+    allowedIps: AllowedIpsSchema.nullable(),
    serverAllowedIps: serverAllowedIps,
    mtu: MtuSchema,
    persistentKeepalive: PersistentKeepaliveSchema,
-    dns: DnsSchema,
+    dns: DnsSchema.nullable(),
  })
 );

@@ -4,6 +4,7 @@ import { sqliteTable, text } from 'drizzle-orm/sqlite-core';
 import { wgInterface } from '../../schema';

 export const hooks = sqliteTable('hooks_table', {
+  /** same as `wgInterface.name` */
  id: text()
    .primaryKey()
    .references(() => wgInterface.name, {
@@ -6,13 +6,11 @@ export type HooksType = InferSelectModel<typeof hooks>;

 export type HooksUpdateType = Omit<HooksType, 'id' | 'createdAt' | 'updatedAt'>;

-const hook = z.string({ message: t('zod.hook') }).pipe(safeStringRefine);
-
 export const HooksUpdateSchema = schemaForType<HooksUpdateType>()(
  z.object({
-    preUp: hook,
-    postUp: hook,
-    preDown: hook,
-    postDown: hook,
+    preUp: HookSchema,
+    postUp: HookSchema,
+    preDown: HookSchema,
+    postDown: HookSchema,
  })
 );
@@ -1,4 +1,3 @@
-import isCidr from 'is-cidr';
 import { eq, sql } from 'drizzle-orm';
 import { parseCidr } from 'cidr-tools';
 import { wgInterface } from './schema';
@@ -58,10 +57,18 @@ export class InterfaceService {
  }

  updateCidr(data: InterfaceCidrUpdateType) {
-    if (!isCidr(data.ipv4Cidr) || !isCidr(data.ipv6Cidr)) {
-      throw new Error('Invalid CIDR');
-    }
    return this.#db.transaction(async (tx) => {
+      const oldCidr = await tx.query.wgInterface
+        .findFirst({
+          where: eq(wgInterface.name, 'wg0'),
+          columns: { ipv4Cidr: true, ipv6Cidr: true },
+        })
+        .execute();
+
+      if (!oldCidr) {
+        throw new Error('Interface not found');
+      }
+
      await tx
        .update(wgInterface)
        .set(data)
@@ -74,8 +81,17 @@ export class InterfaceService {
        // TODO: optimize
        const clients = await tx.query.client.findMany().execute();

-        const nextIpv4 = nextIP(4, parseCidr(data.ipv4Cidr), clients);
-        const nextIpv6 = nextIP(6, parseCidr(data.ipv6Cidr), clients);
+        // only calculate ip if cidr has changed
+
+        let nextIpv4 = client.ipv4Address;
+        if (data.ipv4Cidr !== oldCidr.ipv4Cidr) {
+          nextIpv4 = nextIP(4, parseCidr(data.ipv4Cidr), clients);
+        }
+
+        let nextIpv6 = client.ipv6Address;
+        if (data.ipv6Cidr !== oldCidr.ipv6Cidr) {
+          nextIpv6 = nextIP(6, parseCidr(data.ipv6Cidr), clients);
+        }

        await tx
          .update(clientSchema)
@@ -1,5 +1,6 @@
 import type { InferSelectModel } from 'drizzle-orm';
 import z from 'zod';
+import isCidr from 'is-cidr';
 import type { wgInterface } from './schema';

 export type InterfaceType = InferSelectModel<typeof wgInterface>;
@@ -22,6 +23,7 @@ const device = z
 const cidr = z
  .string({ message: t('zod.interface.cidr') })
  .min(1, { message: t('zod.interface.cidr') })
+  .refine((value) => isCidr(value), { message: t('zod.interface.cidrValid') })
  .pipe(safeStringRefine);

 export const InterfaceUpdateSchema = schemaForType<InterfaceUpdateType>()(
@@ -4,12 +4,15 @@ import { int, sqliteTable, text } from 'drizzle-orm/sqlite-core';
 import { client } from '../../schema';

 export const oneTimeLink = sqliteTable('one_time_links_table', {
-  id: int().primaryKey({ autoIncrement: true }),
+  /** same as `client.id` */
+  id: int()
+    .primaryKey()
+    .references(() => client.id, {
+      onDelete: 'cascade',
+      onUpdate: 'cascade',
+    }),
  oneTimeLink: text('one_time_link').notNull().unique(),
  expiresAt: text('expires_at').notNull(),
-  clientId: int('client_id')
-    .notNull()
-    .references(() => client.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
  createdAt: text('created_at')
    .notNull()
    .default(sql`(CURRENT_TIMESTAMP)`),
@@ -21,7 +24,7 @@ export const oneTimeLink = sqliteTable('one_time_links_table', {

 export const oneTimeLinksRelations = relations(oneTimeLink, ({ one }) => ({
  client: one(client, {
-    fields: [oneTimeLink.clientId],
+    fields: [oneTimeLink.id],
    references: [client.id],
  }),
 }));
@@ -12,7 +12,7 @@ function createPreparedStatement(db: DBType) {
    create: db
      .insert(oneTimeLink)
      .values({
-        clientId: sql.placeholder('id'),
+        id: sql.placeholder('id'),
        oneTimeLink: sql.placeholder('oneTimeLink'),
        expiresAt: sql.placeholder('expiresAt'),
      })
@@ -20,7 +20,12 @@ function createPreparedStatement(db: DBType) {
    erase: db
      .update(oneTimeLink)
      .set({ expiresAt: sql.placeholder('expiresAt') as never as string })
-      .where(eq(oneTimeLink.clientId, sql.placeholder('id')))
+      .where(eq(oneTimeLink.id, sql.placeholder('id')))
+      .prepare(),
+    findByOneTimeLink: db.query.oneTimeLink
+      .findFirst({
+        where: eq(oneTimeLink.oneTimeLink, sql.placeholder('oneTimeLink')),
+      })
      .prepare(),
  };
 }
@@ -36,6 +41,10 @@ export class OneTimeLinkService {
    return this.#statements.delete.execute({ id });
  }

+  getByOtl(oneTimeLink: string) {
+    return this.#statements.findByOneTimeLink.execute({ oneTimeLink });
+  }
+
  generate(id: ID) {
    const key = `${id}-${Math.floor(Math.random() * 1000)}`;
    const oneTimeLink = Math.abs(CRC32.str(key)).toString(16);
@@ -45,7 +54,7 @@ export class OneTimeLinkService {
  }

  erase(id: ID) {
-    const expiresAt = Date.now() + 10 * 1000;
+    const expiresAt = new Date(Date.now() + 10 * 1000).toISOString();
    return this.#statements.erase.execute({ id, expiresAt });
  }
 }
@@ -26,10 +26,15 @@ export const UserLoginSchema = z.object({
  remember: remember,
 });

-export const UserSetupSchema = z.object({
+export const UserSetupSchema = z
+  .object({
    username: username,
    password: password,
-});
+    confirmPassword: password,
+  })
+  .refine((val) => val.password === val.confirmPassword, {
+    message: t('zod.user.passwordMatch'),
+  });

 const name = z
  .string({ message: t('zod.user.name') })
@@ -5,6 +5,7 @@ import { wgInterface } from '../../schema';

 // default* means clients store it themselves
 export const userConfig = sqliteTable('user_configs_table', {
+  /** same as `wgInterface.name` */
  id: text()
    .primaryKey()
    .references(() => wgInterface.name, {
@@ -1,6 +1,7 @@
 import { eq, sql } from 'drizzle-orm';
 import { userConfig } from './schema';
 import type { UserConfigUpdateType } from './types';
+import { wgInterface } from '#db/schema';
 import type { DBType } from '#db/sqlite';

 function createPreparedStatement(db: DBType) {
@@ -8,14 +9,6 @@ function createPreparedStatement(db: DBType) {
    get: db.query.userConfig
      .findFirst({ where: eq(userConfig.id, sql.placeholder('interface')) })
      .prepare(),
-    updateHostPort: db
-      .update(userConfig)
-      .set({
-        host: sql.placeholder('host') as never as string,
-        port: sql.placeholder('port') as never as number,
-      })
-      .where(eq(userConfig.id, sql.placeholder('interface')))
-      .prepare(),
  };
 }

@@ -38,11 +31,26 @@ export class UserConfigService {
    return userConfig;
  }

+  // TODO: wrap ipv6 host in square brackets
+
+  /**
+   * sets host of user config
+   *
+   * sets port of user config and interface
+   */
  updateHostPort(host: string, port: number) {
-    return this.#statements.updateHostPort.execute({
-      interface: 'wg0',
-      host,
-      port,
+    return this.#db.transaction(async (tx) => {
+      await tx
+        .update(userConfig)
+        .set({ host, port })
+        .where(eq(userConfig.id, 'wg0'))
+        .execute();
+
+      await tx
+        .update(wgInterface)
+        .set({ port })
+        .where(eq(wgInterface.name, 'wg0'))
+        .execute();
    });
  }

@@ -19,7 +19,13 @@ const db = drizzle({ client, schema });

 export async function connect() {
  await migrate();
-  return new DBService(db);
+  const dbService = new DBService(db);
+
+  if (WG_INITIAL_ENV.ENABLED) {
+    await initialSetup(dbService);
+  }
+
+  return dbService;
 }

 class DBService {
@@ -58,3 +64,47 @@ async function migrate() {
    }
  }
 }
+
+async function initialSetup(db: DBServiceType) {
+  const setup = await db.general.getSetupStep();
+
+  if (setup.done) {
+    DB_DEBUG('Setup already done. Skiping initial setup.');
+    return;
+  }
+
+  if (WG_INITIAL_ENV.IPV4_CIDR && WG_INITIAL_ENV.IPV6_CIDR) {
+    DB_DEBUG('Setting initial CIDR...');
+    await db.interfaces.updateCidr({
+      ipv4Cidr: WG_INITIAL_ENV.IPV4_CIDR,
+      ipv6Cidr: WG_INITIAL_ENV.IPV6_CIDR,
+    });
+  }
+
+  if (WG_INITIAL_ENV.DNS) {
+    DB_DEBUG('Setting initial DNS...');
+    const userConfig = await db.userConfigs.get();
+    await db.userConfigs.update({
+      ...userConfig,
+      defaultDns: WG_INITIAL_ENV.DNS,
+    });
+  }
+
+  if (
+    WG_INITIAL_ENV.USERNAME &&
+    WG_INITIAL_ENV.PASSWORD &&
+    WG_INITIAL_ENV.HOST &&
+    WG_INITIAL_ENV.PORT
+  ) {
+    DB_DEBUG('Creating initial user...');
+    await db.users.create(WG_INITIAL_ENV.USERNAME, WG_INITIAL_ENV.PASSWORD);
+
+    DB_DEBUG('Setting initial host and port...');
+    await db.userConfigs.updateHostPort(
+      WG_INITIAL_ENV.HOST,
+      WG_INITIAL_ENV.PORT
+    );
+
+    await db.general.setSetupStep(0);
+  }
+}
@@ -5,20 +5,28 @@ export default defineEventHandler(async (event) => {
    event,
    validateZod(OneTimeLinkGetSchema, event)
  );
-  const clients = await WireGuard.getAllClients();
-  // TODO: filter on the database level
-  const client = clients.find(
-    (client) => client.oneTimeLink?.oneTimeLink === oneTimeLink
-  );
+
+  const otl = await Database.oneTimeLinks.getByOtl(oneTimeLink);
+  if (!otl) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Invalid One Time Link',
+    });
+  }
+
+  const client = await Database.clients.get(otl.id);
  if (!client) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Invalid One Time Link',
    });
  }
-  const clientId = client.id;
-  const config = await WireGuard.getClientConfiguration({ clientId });
-  await Database.oneTimeLinks.erase(clientId);
+
+  const config = await WireGuard.getClientConfiguration({
+    clientId: client.id,
+  });
+  await Database.oneTimeLinks.erase(otl.id);
+
  setHeader(
    event,
    'Content-Disposition',
@@ -193,6 +193,11 @@ class WireGuard {
    await wg.down(wgInterface.name).catch(() => {});
  }

+  async Restart() {
+    const wgInterface = await Database.interfaces.get();
+    await wg.restart(wgInterface.name);
+  }
+
  async cronJob() {
    const clients = await Database.clients.getAll();
    // Expires Feature
@@ -212,8 +217,8 @@ class WireGuard {
        client.oneTimeLink !== null &&
        new Date() > new Date(client.oneTimeLink.expiresAt)
      ) {
-        WG_DEBUG(`Client ${client.id} One Time Link expired.`);
-        await Database.oneTimeLinks.delete(client.oneTimeLink.id);
+        WG_DEBUG(`OneTimeLink for Client ${client.id} expired.`);
+        await Database.oneTimeLinks.delete(client.id);
      }
    }

@@ -222,11 +227,10 @@ class WireGuard {
 }

 if (OLD_ENV.PASSWORD || OLD_ENV.PASSWORD_HASH) {
-  // TODO: change url before release
  throw new Error(
    `
 You are using an invalid Configuration for wg-easy
-Please follow the instructions on https://wg-easy.github.io/wg-easy/ to migrate
+Please follow the instructions on https://wg-easy.github.io/wg-easy/latest/advanced/migrate/from-14-to-15/ to migrate
 `
  );
 }
@@ -0,0 +1,29 @@
+type Opts = {
+  /**
+   * Expiry time in milliseconds
+   */
+  expiry: number;
+};
+
+/**
+ * Cache function for 1 hour
+ */
+export function cacheFunction<T>(fn: () => T, { expiry }: Opts): () => T {
+  let cache: { value: T; expiry: number } | null = null;
+
+  return (): T => {
+    const now = Date.now();
+
+    if (cache && cache.expiry > now) {
+      return cache.value;
+    }
+
+    const result = fn();
+    cache = {
+      value: result,
+      expiry: now + expiry,
+    };
+
+    return result;
+  };
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Bernd Storath	a9a51337da	Bump version to 15.0.0-beta.9	2025-03-14 12:22:43 +01:00
Bernd Storath	bbee7e04ed	Feat: add ability to restart interface (#1740 ) add ability to restart interface	2025-03-14 12:19:26 +01:00
Bernd Storath	198b240755	Feat: Suggest IP or Hostname (#1739 ) * get ip and hostnames * use heroicons * add host field * get private info * unstyled prototype * styled select * add to setup * fix types	2025-03-14 10:33:02 +01:00
Bernd Storath	86bdbe4c3d	Feat: Initial Setup through env vars (#1736 ) * initial support for initial setup * improve setup * improve mobile view * move base admin route * admin panel mobile view * set initial host and port * add docs * properly setup everything, use for dev env * change userconfig and interface port on setup, note users afterwards	2025-03-13 11:28:05 +01:00
Bernd Storath	4890bb28e5	Bump version to 15.0.0-beta.8	2025-03-12 13:47:46 +01:00
Bernd Storath	c3dbd3a815	Fix: Add ui port to template (#1735 ) * add ui port to template * update changelog	2025-03-12 13:44:45 +01:00
Bernd Storath	fc480df910	Fix: Update ip outside of cidr (#1733 ) * update packages * check if ip is included on update * update package manager	2025-03-12 12:47:12 +01:00
dependabot[bot]	b3bd2502af	build(deps): bump nuxt from 3.15.4 to 3.16.0 in /src (#1727 ) Bumps [nuxt](https://github.com/nuxt/nuxt/tree/HEAD/packages/nuxt) from 3.15.4 to 3.16.0. - [Release notes](https://github.com/nuxt/nuxt/releases) - [Commits](https://github.com/nuxt/nuxt/commits/v3.16.0/packages/nuxt) --- updated-dependencies: - dependency-name: nuxt dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-03-10 12:26:21 +01:00
dependabot[bot]	eb5ad91022	build(deps-dev): bump eslint from 9.21.0 to 9.22.0 in /src (#1726 ) Bumps [eslint](https://github.com/eslint/eslint) from 9.21.0 to 9.22.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.21.0...v9.22.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-03-10 08:11:31 +01:00
dependabot[bot]	f2955a1278	build(deps): bump @nuxtjs/i18n from 9.2.1 to 9.3.1 in /src (#1728 ) Bumps [@nuxtjs/i18n](https://github.com/nuxt-modules/i18n) from 9.2.1 to 9.3.1. - [Release notes](https://github.com/nuxt-modules/i18n/releases) - [Changelog](https://github.com/nuxt-modules/i18n/blob/main/CHANGELOG.md) - [Commits](https://github.com/nuxt-modules/i18n/compare/v9.2.1...v9.3.1) --- updated-dependencies: - dependency-name: "@nuxtjs/i18n" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-03-10 07:34:37 +01:00
dependabot[bot]	1b76c066e0	build(deps-dev): bump @nuxt/eslint from 1.1.0 to 1.2.0 in /src (#1729 ) Bumps [@nuxt/eslint](https://github.com/nuxt/eslint/tree/HEAD/packages/module) from 1.1.0 to 1.2.0. - [Release notes](https://github.com/nuxt/eslint/releases) - [Commits](https://github.com/nuxt/eslint/commits/v1.2.0/packages/module) --- updated-dependencies: - dependency-name: "@nuxt/eslint" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-03-10 07:27:29 +01:00
Bernd Storath	5b68cc7311	Feat: Confirm setup password (#1722 ) confirm setup password	2025-03-07 16:05:40 +01:00
Bernd Storath	0597470f4c	Bump version to 15.0.0-beta.7	2025-03-07 15:00:12 +01:00
Bernd Storath	159a51cff4	Feat: Global config override (#1720 ) * be able to change dns. implement global override * link donate to readme * implement global config for allowed ips * change translations, fix generation * improve docs	2025-03-07 14:59:06 +01:00
Bernd Storath	9fc6ebafb3	Bump version to 15.0.0-beta.6	2025-03-07 12:02:03 +01:00
Bernd Storath	9a029eeb23	improve docs, add version script	2025-03-07 12:02:02 +01:00
Bernd Storath	e5fb6ff3a6	Fix: OneTimeLinks (#1719 ) * fix otls * one otl per client * revert some code * revert some more code, add comments * adjust migration	2025-03-07 09:16:24 +01:00
杨黄林	fcb5049dab	Add PreUp, PostUp, PreDown, PostDown for client (#1714 ) * Fix create client popup background is not white * Fix no Add button when client Allowed Ips or Server Allowed Ips is empty * Add preUp preDown postUp postDown for client * Add description of hooks for client config * Move hooks's label text into 'hooks' in en.json --------- Co-authored-by: yanghuanglin <yanghuanglin@qq.com> Co-authored-by: Bernd Storath <999999bst@gmail.com>	2025-03-07 08:17:33 +01:00
Bernd Storath	93db67bab6	fix: only require metrics password if set (#1715 )	2025-03-06 11:45:03 +01:00
Bernd Storath	842475f799	Fix: Cidr Change (#1712 ) * only calculate ip if cidr changed if the cidr did not change, the ip will not change to prevent ip shifts * fix lint	2025-03-06 10:04:49 +01:00