Initial plan

from around 700mb to 400mb

.editorconfig

@@ -1,23 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-# The JSON files contain newlines inconsistently
-[*.json]
-insert_final_newline = ignore
-
-# Minified JavaScript files shouldn't be changed
-[**.min.js]
-indent_style = ignore
-insert_final_newline = ignore
-
-[*.md]
-trim_trailing_whitespace = false
-

.github/workflows/codeql.yml

@@ -27,17 +27,17 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: ${{ matrix.language }}
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v4
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/deploy-development.yml

@@ -4,21 +4,38 @@ on:
   workflow_dispatch:
 
 jobs:
-  docker:
-    name: Build & Deploy Docker
-    runs-on: ubuntu-latest
+  docker-build:
+    name: Build Docker
+    runs-on: ${{ matrix.arch.os }}
     if: github.repository_owner == 'wg-easy'
     permissions:
       packages: write
-      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        arch:
+          - platform: linux/amd64
+            os: ubuntu-latest
+          - platform: linux/arm64
+            os: ubuntu-24.04-arm
+          # - platform: linux/arm/v7
+          #   os: ubuntu-24.04-arm
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+      - name: Prepare
+        run: |
+          platform=${{ matrix.arch.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ghcr.io/wg-easy/wg-easy
+          flavor: |
+            latest=false
 
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v3
@@ -27,15 +44,91 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build & Publish Docker Image
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push by digest
+        id: build
         uses: docker/build-push-action@v6
         with:
           context: .
-          push: true
-          platforms: linux/amd64,linux/arm64
-          tags: ghcr.io/wg-easy/wg-easy:development
-          cache-from: type=gha
-          cache-to: type=gha,mode=min
+          platforms: ${{ matrix.arch.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          tags: ghcr.io/wg-easy/wg-easy
+          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=build-${{ env.PLATFORM_PAIR }}
+          cache-to: type=gha,mode=min,scope=build-${{ env.PLATFORM_PAIR }}
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v6
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  docker-merge:
+    name: Merge & Deploy Docker
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'wg-easy'
+    permissions:
+      packages: write
+    needs: docker-build
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v7
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Login to Codeberg
+        uses: docker/login-action@v3
+        with:
+          registry: codeberg.org
+          username: ${{ secrets.CODEBERG_USER }}
+          password: ${{ secrets.CODEBERG_PASS }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ghcr.io/wg-easy/wg-easy
+            codeberg.org/wg-easy/wg-easy
+          flavor: |
+            latest=false
+          tags: |
+            type=raw,value=development
+
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf 'ghcr.io/wg-easy/wg-easy@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ghcr.io/wg-easy/wg-easy:${{ steps.meta.outputs.version }}
 
   docs:
     name: Build & Deploy Docs
@@ -43,12 +136,12 @@ jobs:
     if: github.repository_owner == 'wg-easy'
     permissions:
       contents: write
-    needs: docker
+    needs: docker-merge
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: 3.11.9
           cache: "pip"

.github/workflows/deploy-edge.yml

@@ -0,0 +1,175 @@
+name: Edge
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  docker-build:
+    name: Build Docker
+    runs-on: ${{ matrix.arch.os }}
+    if: github.repository_owner == 'wg-easy'
+    permissions:
+      packages: write
+    strategy:
+      fail-fast: false
+      matrix:
+        arch:
+          - platform: linux/amd64
+            os: ubuntu-latest
+          - platform: linux/arm64
+            os: ubuntu-24.04-arm
+          # - platform: linux/arm/v7
+          #   os: ubuntu-24.04-arm
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: master
+
+      - name: Prepare
+        run: |
+          platform=${{ matrix.arch.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ghcr.io/wg-easy/wg-easy
+          flavor: |
+            latest=false
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ matrix.arch.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          tags: ghcr.io/wg-easy/wg-easy
+          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=build-${{ env.PLATFORM_PAIR }}
+          cache-to: type=gha,mode=min,scope=build-${{ env.PLATFORM_PAIR }}
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v6
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  docker-merge:
+    name: Merge & Deploy Docker
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'wg-easy'
+    permissions:
+      packages: write
+    needs: docker-build
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v7
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Login to Codeberg
+        uses: docker/login-action@v3
+        with:
+          registry: codeberg.org
+          username: ${{ secrets.CODEBERG_USER }}
+          password: ${{ secrets.CODEBERG_PASS }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ghcr.io/wg-easy/wg-easy
+            codeberg.org/wg-easy/wg-easy
+          flavor: |
+            latest=false
+          tags: |
+            type=raw,value=edge
+
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf 'ghcr.io/wg-easy/wg-easy@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ghcr.io/wg-easy/wg-easy:${{ steps.meta.outputs.version }}
+
+  docs:
+    name: Build & Deploy Docs
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'wg-easy'
+    permissions:
+      contents: write
+    needs: docker-merge
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: master
+
+      - name: Setup Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: 3.11.9
+          cache: "pip"
+          cache-dependency-path: docs/requirements.txt
+
+      - name: Install Dependencies
+        run: |
+          pip install -r docs/requirements.txt
+
+      - name: Setup Git User
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+
+      - name: Build Docs Website
+        run: |
+          cd docs
+          git fetch origin gh-pages --depth=1 || true
+
+          mike deploy --push --update-aliases edge

.github/workflows/deploy-nightly.yml

@@ -1,77 +0,0 @@
-name: Nightly
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "0 0 * * *"
-
-jobs:
-  docker:
-    name: Build & Deploy Docker
-    runs-on: ubuntu-latest
-    if: github.repository_owner == 'wg-easy'
-    permissions:
-      packages: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: master
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build & Publish Docker Image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64,linux/arm64
-          tags: ghcr.io/wg-easy/wg-easy:nightly
-          cache-from: type=gha
-          cache-to: type=gha,mode=min
-
-  docs:
-    name: Build & Deploy Docs
-    runs-on: ubuntu-latest
-    if: github.repository_owner == 'wg-easy'
-    permissions:
-      contents: write
-    needs: docker
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: master
-
-      - name: Setup Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: 3.11.9
-          cache: "pip"
-          cache-dependency-path: docs/requirements.txt
-
-      - name: Install Dependencies
-        run: |
-          pip install -r docs/requirements.txt
-
-      - name: Setup Git User
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-
-      - name: Build Docs Website
-        run: |
-          cd docs
-          git fetch origin gh-pages --depth=1 || true
-
-          mike deploy --push --update-aliases nightly

.github/workflows/deploy-pr.yml

@@ -11,13 +11,25 @@ concurrency:
 jobs:
   docker:
     name: Build Docker
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.arch.os }}
     if: github.repository_owner == 'wg-easy'
-    permissions:
-      packages: write
-      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        arch:
+          - platform: linux/amd64
+            os: ubuntu-latest
+          - platform: linux/arm64
+            os: ubuntu-24.04-arm
+          # - platform: linux/arm/v7
+          #   os: ubuntu-24.04-arm
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - name: Prepare
+        run: |
+          platform=${{ matrix.arch.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -37,7 +49,7 @@ jobs:
         with:
           context: .
           push: false
-          platforms: linux/amd64,linux/arm64
+          platforms: ${{ matrix.arch.platform }}
           tags: ghcr.io/wg-easy/wg-easy:pr
           cache-from: type=gha
-          cache-to: type=gha,mode=min
+          cache-to: type=gha,mode=min,scope=build-${{ env.PLATFORM_PAIR }}

.github/workflows/deploy.yml

@@ -10,20 +10,110 @@ on:
 # as this will break the latest and major tags
 
 jobs:
-  docker:
-    name: Build & Deploy Docker
+  docker-build:
+    name: Build Docker
+    runs-on: ${{ matrix.arch.os }}
+    if: |
+      github.repository_owner == 'wg-easy' &&
+      startsWith(github.ref, 'refs/tags/v')
+    permissions:
+      packages: write
+    strategy:
+      fail-fast: false
+      matrix:
+        arch:
+          - platform: linux/amd64
+            os: ubuntu-latest
+          - platform: linux/arm64
+            os: ubuntu-24.04-arm
+          # - platform: linux/arm/v7
+          #   os: ubuntu-24.04-arm
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Prepare
+        run: |
+          platform=${{ matrix.arch.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ghcr.io/wg-easy/wg-easy
+          flavor: |
+            latest=false
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ matrix.arch.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          tags: ghcr.io/wg-easy/wg-easy
+          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=build-${{ env.PLATFORM_PAIR }}
+          cache-to: type=gha,mode=min,scope=build-${{ env.PLATFORM_PAIR }}
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v6
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  docker-merge:
+    name: Merge & Deploy Docker
     runs-on: ubuntu-latest
     if: |
       github.repository_owner == 'wg-easy' &&
       startsWith(github.ref, 'refs/tags/v')
     permissions:
       packages: write
-      contents: read
+    needs: docker-build
     steps:
-      - uses: actions/checkout@v4
+      - name: Download digests
+        uses: actions/download-artifact@v7
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Login to Codeberg
+        uses: docker/login-action@v3
+        with:
+          registry: codeberg.org
+          username: ${{ secrets.CODEBERG_USER }}
+          password: ${{ secrets.CODEBERG_PASS }}
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -34,6 +124,7 @@ jobs:
         with:
           images: |
             ghcr.io/wg-easy/wg-easy
+            codeberg.org/wg-easy/wg-easy
           flavor: |
             latest=false
           tags: |
@@ -41,23 +132,15 @@ jobs:
             type=semver,pattern={{major}}
             type=semver,pattern={{major}}.{{minor}}
 
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf 'ghcr.io/wg-easy/wg-easy@sha256:%s ' *)
 
-      - name: Build & Publish Docker Image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64,linux/arm64
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=min
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ghcr.io/wg-easy/wg-easy:${{ steps.meta.outputs.version }}
 
   docs:
     name: Build & Deploy Docs
@@ -67,12 +150,12 @@ jobs:
       startsWith(github.ref, 'refs/tags/v')
     permissions:
       contents: write
-    needs: docker
+    needs: docker-merge
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: 3.11.9
           cache: "pip"

.github/workflows/lint.yml

@@ -7,9 +7,36 @@ on:
   pull_request:
 
 jobs:
+  docs:
+    name: Check Docs
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'wg-easy'
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: "lts/jod"
+          check-latest: true
+          cache: "pnpm"
+
+      - name: Check docs formatting
+        run: |
+          pnpm install
+          pnpm format:check:docs
+
   lint:
     name: Lint
     runs-on: ubuntu-latest
+    needs: docs
     if: github.repository_owner == 'wg-easy'
 
     strategy:
@@ -20,7 +47,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -28,9 +55,9 @@ jobs:
           run_install: false
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: "lts/*"
+          node-version: "lts/jod"
           check-latest: true
           cache: "pnpm"
 

.github/workflows/stale.yml

@@ -15,13 +15,16 @@ jobs:
     runs-on: ubuntu-latest
     if: github.repository_owner == 'wg-easy'
     permissions:
+      actions: write
       issues: write
       pull-requests: write
 
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         with:
+          # Stale after 30 days of inactivity
           days-before-issue-stale: 30
+          # Close after 14 days of being stale
           days-before-issue-close: 14
           stale-issue-label: "stale"
           stale-issue-message: "This issue is stale because it has been open for 30 days with no activity."
@@ -32,3 +35,9 @@ jobs:
           close-pr-message: "This PR was closed because it has been inactive for 14 days since being marked as stale."
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           operations-per-run: 100
+          # Ignore Feature requests (https://github.com/actions/stale/issues/1293)
+          only-issue-types: "Bug"
+          # Ignore confirmed bugs
+          exempt-issue-labels: "status: confirmed"
+          # Ignore PRs with milestones
+          exempt-all-pr-milestones: true

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 *.swp
+node_modules

.vscode/extensions.json

@@ -3,12 +3,11 @@
     "aaron-bond.better-comments",
     "dbaeumer.vscode-eslint",
     "antfu.goto-alias",
-    "visualstudioexptteam.vscodeintellicode",
-    "Nuxtr.nuxtr-vscode",
     "esbenp.prettier-vscode",
     "yoavbls.pretty-ts-errors",
     "bradlc.vscode-tailwindcss",
     "vue.volar",
-    "lokalise.i18n-ally"
+    "lokalise.i18n-ally",
+    "DavidAnson.vscode-markdownlint"
   ]
 }

.vscode/settings.json

@@ -3,9 +3,6 @@
   "editor.useTabStops": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "nuxtr.vueFiles.style.addStyleTag": false,
-  "nuxtr.piniaFiles.defaultTemplate": "setup",
-  "nuxtr.monorepoMode.DirectoryName": "src",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always"
   },
@@ -18,6 +15,11 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 4,
+    "editor.useTabStops": false
+  },
   "typescript.tsdk": "./src/node_modules/typescript/lib",
   "i18n-ally.enabledFrameworks": ["vue"],
   "i18n-ally.localesPaths": ["src/i18n/locales"],

CHANGELOG.md

@@ -7,14 +7,97 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [15.2.2] - 2026-02-06
+
+### Added
+
+- Added Userspace WireGuard support (https://github.com/wg-easy/wg-easy/pull/2419)
+
+### Fixed
+
+- LangSelector overlapping with Buttons (https://github.com/wg-easy/wg-easy/pull/2434)
+- AmnzeziaWG config parameters (https://github.com/wg-easy/wg-easy/pull/2440)
+- OpenMetrics help string format (https://github.com/wg-easy/wg-easy/pull/2453)
+- Reset 2fa when resetting admin password (https://github.com/wg-easy/wg-easy/pull/2461)
+
+### Docs
+
+- Replace Watchtower with maintained fork (https://github.com/wg-easy/wg-easy/pull/2456)
+
+## [15.2.1] - 2026-01-14
+
+### Fixed
+
+- Icon in Searchbar (https://github.com/wg-easy/wg-easy/commit/458f66818a400f181e2c6326ede077c8793d71f2)
+- Interface save not working (https://github.com/wg-easy/wg-easy/commit/48f3fbd715a889e2425702a8a46332f2752aef91)
+- Error Messages in Setup (https://github.com/wg-easy/wg-easy/commit/32a055093a76342c40858d8dcf563b0700a8bd48)
+
+## [15.2.0] - 2026-01-12
+
+### Added
+
+- AmneziaWG integration (https://github.com/wg-easy/wg-easy/pull/2102, https://github.com/wg-easy/wg-easy/pull/2226)
+- Search / filter box (https://github.com/wg-easy/wg-easy/pull/2170)
+- `INIT_ALLOWED_IPS` env var (https://github.com/wg-easy/wg-easy/pull/2164)
+- Show client endpoint (https://github.com/wg-easy/wg-easy/pull/2058)
+- Add option to view and copy config (https://github.com/wg-easy/wg-easy/pull/2289)
+
+### Fixed
+
+- Fix download as conf.txt (https://github.com/wg-easy/wg-easy/pull/2269)
+- Clean filename for OTL download (https://github.com/wg-easy/wg-easy/pull/2253)
+- Text color in admin menu in light mode (https://github.com/wg-easy/wg-easy/pull/2307)
+
+### Changed
+
+- Allow lower MTU (https://github.com/wg-easy/wg-easy/pull/2228)
+- Use /32 and /128 for client Cidr (https://github.com/wg-easy/wg-easy/pull/2217)
+- Return client id on create (https://github.com/wg-easy/wg-easy/pull/2190)
+- Publish on Codeberg (https://github.com/wg-easy/wg-easy/pull/2160)
+- Allow empty DNS (https://github.com/wg-easy/wg-easy/pull/2052, https://github.com/wg-easy/wg-easy/pull/2057)
+- Don't include keys in API responses (https://github.com/wg-easy/wg-easy/pull/2015)
+- Try all QR ecc levels (https://github.com/wg-easy/wg-easy/pull/2288)
+- Update OneTimeLink expiry on reuse (https://github.com/wg-easy/wg-easy/pull/2370)
+- Removed ARMv7 support (https://github.com/wg-easy/wg-easy/pull/2369)
+
+### Docs
+
+- Add AdGuard Home (https://github.com/wg-easy/wg-easy/pull/2175)
+- Add Routed (No NAT) docs (https://github.com/wg-easy/wg-easy/pull/2181, https://github.com/wg-easy/wg-easy/pull/2380)
+- Add AmneziaWG docs (https://github.com/wg-easy/wg-easy/pull/2108, https://github.com/wg-easy/wg-easy/pull/2292)
+
+## [15.1.0] - 2025-07-01
+
+### Added
+
+- Added Ukrainian language (#1906)
+- Add French language (#1924)
+- docs for caddy example (#1939)
+- add docs on how to add/update translation (be26db6)
+- Add german translations (#1889)
+- feat: Add Traditional Chinese (zh-HK) i18n Support (#1988)
+- Add Chinese Simplified (#1990)
+- Add option to disable ipv6 (#1951)
+
+### Fixed
+
+- Updated container launch commands (#1989)
+- update screenshot (962bfa2)
+
+### Changed
+
+- Updated dependencies
+
+## [15.0.0] - 2025-05-28
+
 We're super excited to announce v15!
 This update is an entire rewrite to make it even easier to set up your own VPN.
 
-## Breaking Changes
+### Breaking Changes
 
 As the whole setup has changed, we recommend to start from scratch. And import your existing configs.
 
-## Major Changes
+### Major Changes
 
 - Almost all Environment variables removed
 - New and Improved UI
@@ -27,11 +110,13 @@ As the whole setup has changed, we recommend to start from scratch. And import y
 - SQLite Database
 - Deprecated Dockerless Installations
 - Added Docker Volume Mount (`/lib/modules`)
-- Removed ARMv6 and ARMv7 support
+- Removed ARMv6 support
 - Connections over HTTP require setting the `INSECURE` env var
 - Changed license from CC BY-NC-SA 4.0 to AGPL-3.0-only
 - Added 2FA using TOTP
 - Improved mobile support
+- CLI
+- Replaced `nightly` with `edge`
 
 ## [14.0.0] - 2024-09-04
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM docker.io/library/node:lts-alpine AS build
+FROM docker.io/library/node:jod-alpine AS build
 WORKDIR /app
 
 # update corepack
@@ -14,9 +14,18 @@ RUN pnpm install
 COPY src ./
 RUN pnpm build
 
+# Build amneziawg-tools
+RUN apk add linux-headers build-base go git && \
+    git clone https://github.com/amnezia-vpn/amneziawg-tools.git && \
+    git clone https://github.com/amnezia-vpn/amneziawg-go && \
+    cd amneziawg-go && \
+    make && \
+    cd ../amneziawg-tools/src && \
+    make
+
 # Copy build result to a new image.
 # This saves a lot of disk space.
-FROM docker.io/library/node:lts-alpine
+FROM docker.io/library/node:jod-alpine
 WORKDIR /app
 
 HEALTHCHECK --interval=1m --timeout=5s --retries=3 CMD /usr/bin/timeout 5s /bin/sh -c "/usr/bin/wg show | /bin/grep -q interface || exit 1"
@@ -25,8 +34,20 @@ HEALTHCHECK --interval=1m --timeout=5s --retries=3 CMD /usr/bin/timeout 5s /bin/
 COPY --from=build /app/.output /app
 # Copy migrations
 COPY --from=build /app/server/database/migrations /app/server/database/migrations
-# libsql
-RUN cd /app/server && npm install --no-save libsql
+# libsql (https://github.com/nitrojs/nitro/issues/3328)
+RUN cd /app/server && \
+    npm install --no-save --omit=dev libsql && \
+    npm cache clean --force
+# cli
+COPY --from=build /app/cli/cli.sh /usr/local/bin/cli
+RUN chmod +x /usr/local/bin/cli
+# Copy amneziawg-go
+COPY --from=build /app/amneziawg-go/amneziawg-go /usr/bin/amneziawg-go
+RUN chmod +x /usr/bin/amneziawg-go
+# Copy amneziawg-tools
+COPY --from=build /app/amneziawg-tools/src/wg /usr/bin/awg
+COPY --from=build /app/amneziawg-tools/src/wg-quick/linux.bash /usr/bin/awg-quick
+RUN chmod +x /usr/bin/awg /usr/bin/awg-quick
 
 # Install Linux packages
 RUN apk add --no-cache \
@@ -37,8 +58,12 @@ RUN apk add --no-cache \
     nftables \
     kmod \
     iptables-legacy \
+    wireguard-go \
     wireguard-tools
 
+RUN mkdir -p /etc/amnezia
+RUN ln -s /etc/wireguard /etc/amnezia/amneziawg
+
 # Use iptables-legacy
 RUN update-alternatives --install /usr/sbin/iptables iptables /usr/sbin/iptables-legacy 10 --slave /usr/sbin/iptables-restore iptables-restore /usr/sbin/iptables-legacy-restore --slave /usr/sbin/iptables-save iptables-save /usr/sbin/iptables-legacy-save
 RUN update-alternatives --install /usr/sbin/ip6tables ip6tables /usr/sbin/ip6tables-legacy 10 --slave /usr/sbin/ip6tables-restore ip6tables-restore /usr/sbin/ip6tables-legacy-restore --slave /usr/sbin/ip6tables-save ip6tables-save /usr/sbin/ip6tables-legacy-save
@@ -49,6 +74,7 @@ ENV PORT=51821
 ENV HOST=0.0.0.0
 ENV INSECURE=false
 ENV INIT_ENABLED=false
+ENV DISABLE_IPV6=false
 
 LABEL org.opencontainers.image.source=https://github.com/wg-easy/wg-easy
 

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM docker.io/library/node:lts-alpine
+FROM docker.io/library/node:jod-alpine
 WORKDIR /app
 
 # update corepack
@@ -16,6 +16,7 @@ RUN apk add --no-cache \
     ip6tables \
     kmod \
     iptables-legacy \
+    wireguard-go \
     wireguard-tools
 
 # Use iptables-legacy
@@ -28,6 +29,7 @@ ENV PORT=51821
 ENV HOST=0.0.0.0
 ENV INSECURE=true
 ENV INIT_ENABLED=false
+ENV DISABLE_IPV6=false
 
 # Install Dependencies
 COPY src/package.json src/pnpm-lock.yaml ./
@@ -36,3 +38,4 @@ RUN pnpm install
 # Copy Project
 COPY src ./
 
+ENTRYPOINT [ "pnpm", "run" ]

README.md

@@ -7,18 +7,12 @@
 [![GitHub Release](https://img.shields.io/github/v/release/wg-easy/wg-easy)](https://github.com/wg-easy/wg-easy/releases/latest)
 [![Image Pulls](https://img.shields.io/badge/image_pulls-12M+-blue)](https://github.com/wg-easy/wg-easy/pkgs/container/wg-easy)
 
-<!-- TODO: remove after release -->
-
-> [!WARNING]
-> You are viewing the README of the pre-release of v15.
-> If you want to setup wg-easy right now. Read the README in the production branch here: [README](https://github.com/wg-easy/wg-easy/tree/production) or here for the last nightly: [README](https://github.com/wg-easy/wg-easy/tree/c6dce0f6fb2e28e7e40ddac1498bd67e9bb17cba)
-
 You have found the easiest way to install & manage WireGuard on any Linux host!
 
 <!-- TOOD: update screenshot -->
 
 <p align="center">
-  <img src="./assets/screenshot.png" width="802" />
+  <img src="./assets/screenshot.png" width="802" alt="wg-easy Screenshot" />
 </p>
 
 ## Features
@@ -43,11 +37,6 @@ 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/)
@@ -79,11 +68,11 @@ And log in again.
 
 The easiest way to run WireGuard Easy is with Docker Compose.
 
-Just download [`docker-compose.yml`](docker-compose.yml) and execute `sudo docker compose up -d`.
+Just follow [these steps](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/basic-installation/) in the detailed documentation.
 
-Now setup a reverse proxy to be able to access the Web UI from the internet.
+You can also install WireGuard Easy with the [docker run command](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/docker-run/) or via [podman](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/podman-nft/).
 
-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
+Now [setup a reverse proxy](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/basic-installation/#setup-reverse-proxy) to be able to access the Web UI securely from the internet. This step is optional, just make sure to follow the guide [here](https://wg-easy.github.io/wg-easy/latest/examples/tutorials/reverse-proxyless/) if you decide not to do it.
 
 ## Donate
 
@@ -116,6 +105,15 @@ If you add something that should be auto-importable and VSCode complains, run:
 ```shell
 cd src
 pnpm install
+cd ..
+```
+
+### Test Cli
+
+This starts the cli with docker
+
+```shell
+pnpm cli:dev
 ```
 
 ## License

docker-compose.dev.yml

@@ -2,7 +2,7 @@ services:
   wg-easy:
     build:
       dockerfile: ./Dockerfile.dev
-    command: pnpm run dev
+    command: dev
     volumes:
       - ./src/:/app/
       - temp:/app/.nuxt/

docker-compose.yml

@@ -25,7 +25,7 @@ services:
     cap_add:
       - NET_ADMIN
       - SYS_MODULE
-      # - NET_RAW # ⚠️ Uncomment if using Podman Compose
+      # - NET_RAW # ⚠️ Uncomment if using Podman
     sysctls:
       - net.ipv4.ip_forward=1
       - net.ipv4.conf.all.src_valid_mark=1

docs/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

docs/content/advanced/api.md

@@ -2,6 +2,11 @@
 title: API
 ---
 
+/// warning | Breaking Changes
+
+This API is not yet stable and may change in the future. The API is currently in development and is subject to change without notice. The API is not yet documented, but we will add documentation as the API stabilizes.
+///
+
 You can use the API to interact with the application programmatically. The API is available at `/api` and supports both GET and POST requests. The API is designed to be simple and easy to use, with a focus on providing a consistent interface for all endpoints.
 
 There is no documentation for the API yet, but this will be added as the underlying library supports it.

docs/content/advanced/config/amnezia.md

@@ -0,0 +1,79 @@
+---
+title: AmneziaWG
+---
+
+## Introduction
+
+**AmneziaWG** is a modified version of the WireGuard protocol with enhanced traffic obfuscation capabilities. AmneziaWG's primary goal is to counter deep packet inspection (DPI) systems and bypass VPN blocking.
+
+AmneziaWG adds multi-level transport-layer obfuscation by:
+
+- Modifying packet headers
+- Randomizing handshake message sizes
+- Disguising traffic to resemble popular UDP protocols
+
+These measures make it harder for third parties to analyze or identify your traffic, enhancing both privacy and security.
+
+## Activating AmneziaWG
+
+You must install the [AmneziaWG kernel module](https://github.com/amnezia-vpn/amneziawg-linux-kernel-module) on the host system.
+
+Experimental support for AmneziaWG can be enabled by setting the `EXPERIMENTAL_AWG` environment variable to `true`. Starting from wg-easy version 16, this setting will be enabled by default. This feature is still under development and may change in future releases.
+
+When enabled, wg-easy will automatically detect whether the AmneziaWG kernel module is available. If it is not, the system will fall back to the standard WireGuard module.
+
+To override this automatic detection, set the `OVERRIDE_AUTO_AWG` environment variable. By default, this variable is unset.
+
+Possible values:
+
+- `awg` — Force use of AmneziaWG
+- `wg` — Force use of standard WireGuard
+
+## AmneziaWG Parameters
+
+Parameter descriptions can be found in the [AmneziaWG documentation](https://docs.amnezia.org/documentation/amnezia-wg) and on the [kernel module page](https://github.com/amnezia-vpn/amneziawg-linux-kernel-module).
+
+All parameters except I1-I5 will be set at first startup. For information on how to set I1-I5 parameters, refer to the [AmneziaWG documentation](https://docs.amnezia.org/documentation/instructions/new-amneziawg-selfhosted/#how-to-extract-a-protocol-signature-for-amneziawg-15-manually).
+
+If a parameter is not set, it will not be added to the configuration. If all AmneziaWG-specific parameters are absent, AmneziaWG will be fully compatible with standard WireGuard.
+
+### Parameter Compatibility Table
+
+| Parameter | Can differ between server and client | Configurable on server | Configurable on client  |
+| --------- | ------------------------------------ | ---------------------- | ----------------------- |
+| Jc        | ✅ Yes                               | ✅                     | ✅                      |
+| Jmin      | ✅ Yes                               | ✅                     | ✅                      |
+| Jmax      | ✅ Yes                               | ✅                     | ✅                      |
+| S1-S4     | ❌ No, must match                    | ✅                     | ❌ (copied from server) |
+| H1-H4     | ❌ No, must match                    | ✅                     | ❌ (copied from server) |
+| I1-I5     | ✅ Yes                               | ✅                     | ✅                      |
+
+## Client Applications
+
+To be able to connect to wg-easy if AmneziaWG is enabled, you must have an AmneziaWG-compatible client. Where an AmneziaWG app is available for your platform, it is recommended to use it rather than Amnezia VPN.
+
+Android:
+
+- [AmneziaWG](https://play.google.com/store/apps/details?id=org.amnezia.awg) - AmneziaWG Official Client
+- [WG Tunnel](https://play.google.com/store/apps/details?id=com.zaneschepke.wireguardautotunnel) - Third Party Client
+- [Amnezia VPN](https://play.google.com/store/apps/details?id=org.amnezia.vpn) - Amnezia VPN Official Client
+
+iOS and macOS:
+
+- [AmneziaWG](https://apps.apple.com/us/app/amneziawg/id6478942365) - AmneziaWG Official Client
+- [Amnezia VPN](https://apps.apple.com/us/app/amneziavpn/id1600529900) - Amnezia VPN Official Client
+
+Windows:
+
+- [AmneziaWG](https://github.com/amnezia-vpn/amneziawg-windows-client/releases) - AmneziaWG Official Client (Requires building from source code)
+- [Amnezia VPN](https://amnezia.org/downloads) - Amnezia VPN Official Client
+
+Linux:
+
+- [Amnezia VPN](https://amnezia.org/downloads) - Amnezia VPN Official Client
+- [amneziawg-tools](https://github.com/amnezia-vpn/amneziawg-tools) - AmneziaWG Tools
+
+OpenWRT:
+
+- [AmneziaWG OpenWRT](https://github.com/Slava-Shchipunov/awg-openwrt) - AmneziaWG OpenWRT Packages
+- [AmneziaWG OpenWRT](https://github.com/lolo6oT/awg-openwrt) - AmneziaWG OpenWRT Packages

docs/content/advanced/config/experimental-config.md

@@ -0,0 +1,9 @@
+---
+title: Experimental Configuration
+---
+
+There are several experimental features that can be enabled by setting the appropriate environment variables. These features are not guaranteed to be stable and may change in future releases.
+
+| Env              | Default | Example | Description                            | Notes                                   | More Info                |
+| ---------------- | ------- | ------- | -------------------------------------- | --------------------------------------- | ------------------------ |
+| EXPERIMENTAL_AWG | false   | true    | Enables experimental AmneziaWG support | Planned to be enabled by default in v16 | [See here](./amnezia.md) |

docs/content/advanced/config/optional-config.md

@@ -5,7 +5,18 @@ title: Optional Configuration
 You can set these environment variables to configure the container. They are not required, but can be useful in some cases.
 
 | 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     |
+| `DISABLE_IPV6` | `false`   | `true`      | If IPv6 support should be disabled |
+
+/// note | IPv6 Caveats
+
+Disabling IPv6 will disable the creation of the default IPv6 firewall rules and won't add a IPv6 address to the interface and clients.
+
+You will however still see a IPv6 address in the Web UI, but it won't be used.
+
+This option can be removed in the future, as more devices support IPv6.
+
+///

docs/content/advanced/config/unattended-setup.md

@@ -7,7 +7,7 @@ If you want to run the setup without any user interaction, e.g. with a tool like
 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     |
@@ -16,8 +16,9 @@ These will only be used during the first start of the container. After that, the
 | `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     |
+| `INIT_ALLOWED_IPS` | `10.8.0.0/24,2001:0DB8::/32` | Sets global Allowed IPs                                   | 4     |
 
-/// warning | Variables have to be used together
+/// 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`.
 

docs/content/advanced/metrics/prometheus.md

@@ -16,15 +16,15 @@ You need to add a scrape config to your Prometheus configuration file. Here is a
 
 ```yaml
 scrape_configs:
-  - job_name: "wg-easy"
+    - job_name: 'wg-easy'
       scrape_interval: 30s
       metrics_path: /metrics/prometheus
       static_configs:
           - targets:
-          - "localhost:51821"
+                - 'localhost:51821'
       authorization:
           type: Bearer
-      credentials: "SuperSecurePassword"
+          credentials: 'SuperSecurePassword'
 ```
 
 ## Grafana Dashboard

docs/content/advanced/migrate/from-14-to-15.md

@@ -6,22 +6,24 @@ This guide will help you migrate from `v14` to version `v15` of `wg-easy`.
 
 ## Changes
 
-- This is a complete rewrite of the `wg-easy` project. Therefore the configuration files and the way you interact with the project have changed.
-- If you use armv6 or armv7, you can't migrate to `v15` yet. We are working on it.
-- If you are connecting to the web ui via HTTP, you need to set the `INSECURE` environment variable to `true` in the new container.
+- This is a complete rewrite of the `wg-easy` project, therefore the configuration files and the way you interact with the project have changed.
+- If you use armv6 or armv7, you unfortunately won't be able to migrate to `v15`.
+- If you are connecting to the Web UI via HTTP, you need to set the `INSECURE` environment variable to `true` in the new container.
 
 ## Migration
 
 ### Backup
 
-Before you start the migration, make sure to backup your existing configuration files.
+Before you start the migration, make sure to back up your existing configuration files.
 
-Go into the Web Ui and click the Backup button, this should download a `wg0.json` file.
+Go into the Web UI and click the Backup button, this should download a `wg0.json` file.
 
 Or download the `wg0.json` file from your container volume to your pc.
 
 You will need this file for the migration
 
+You will also need to back up the old environment variables you set for the container, as they will not be automatically migrated.
+
 ### Remove old container
 
 1. Stop the running container
@@ -32,21 +34,25 @@ If you are using `docker run`
 docker stop wg-easy
 ```
 
-If you are using `docker-compose`
+If you are using `docker compose`
 
 ```shell
-docker-compose down
+docker compose down
 ```
 
 ### Start new container
 
 Follow the instructions in the [Getting Started][docs-getting-started] or [Basic Installation][docs-examples] guide to start the new container.
 
-In the setup wizard, select that you already already have a configuration file and upload the `wg0.json` file you downloaded in the backup step.
+In the setup wizard, select that you already have a configuration file and upload the `wg0.json` file you downloaded in the backup step.
 
 [docs-getting-started]: ../../getting-started.md
 [docs-examples]: ../../examples/tutorials/basic-installation.md
 
+### Environment Variables
+
+v15 does not use the same environment variables as v14, most of them have been moved to the Admin Panel in the Web UI.
+
 ### Done
 
 You have now successfully migrated to `v15` of `wg-easy`.

docs/content/contributing/general.md

@@ -12,7 +12,7 @@ When refactoring, writing or altering files, adhere to these rules:
 
 ## Documentation
 
-Make sure to select `nightly` in the dropdown menu at the top. Navigate to the page you would like to edit and click the edit button in the top right. This allows you to make changes and create a pull-request.
+Make sure to select `edge` in the dropdown menu at the top. Navigate to the page you would like to edit and click the edit button in the top right. This allows you to make changes and create a pull-request.
 
 Alternatively you can make the changes locally. For that you'll need to have Docker installed. Run
 

docs/content/contributing/issues-and-pull-requests.md

@@ -50,7 +50,7 @@ The development workflow is the following:
 3. Document your improvements if necessary
 4. [Commit][commit] (and [sign your commit][gpg]), push and create a pull-request to merge into `master`. Please **use the pull-request template** to provide a minimum of contextual information and make sure to meet the requirements of the checklist.
 
-Pull requests are automatically tested against the CI and will be reviewed when tests pass. When your changes are validated, your branch is merged. CI builds the new `:nightly` image every night and your changes will be includes in the next version release.
+Pull requests are automatically tested against the CI and will be reviewed when tests pass. When your changes are validated, your branch is merged. CI builds the new `:edge` image on every push to the `master` branch and your changes will be included in the next version release.
 
 [docs-latest]: https://wg-easy.github.io/wg-easy/latest
 [github-file-readme]: https://github.com/wg-easy/wg-easy/blob/master/README.md

docs/content/contributing/translation.md

@@ -0,0 +1,27 @@
+---
+title: Translation
+---
+
+This project supports multiple languages. If you would like to contribute a translation, please follow these steps:
+
+## Add new Translation
+
+Create a new file in `src/i18n/locales`. Name it `<locale_code>.json` (e.g. `fr.json` for French).
+
+Import and add the newly created file in `src/i18n/i18n.config.ts`.
+
+Add your language in the `src/nuxt.config.ts` file. You have to specify code, language and name.
+
+`code` is the name of the translation file without the extension (e.g. `fr` for `fr.json`).
+
+`language` is the BCP 47 language tag with region (e.g. `fr-FR` for French). See [www.lingoes.net](http://www.lingoes.net/en/translator/langcode.htm) for a list of language codes.
+
+`name` is the display name of the language (e.g. `Français` for French).
+
+## Update existing Translation
+
+If you need to update an existing translation, simply edit the corresponding `<locale_code>.json` file in `src/i18n/locales`.
+
+## Contribute changes
+
+See [Pull Requests](./issues-and-pull-requests.md#pull-requests) on how to contribute your translation.

docs/content/examples/tutorials/adguard.md

@@ -2,8 +2,176 @@
 title: AdGuard Home
 ---
 
-It seems like the Docs on how to setup AdGuard Home are not available yet.
+This tutorial is a follow-up to the official [Traefik tutorial](./traefik.md). It will guide you through integrating AdGuard Home with your existing `wg-easy` and Traefik setup to provide network-wide DNS ad-blocking.
 
-Feel free to create a PR and add them here.
+## Prerequisites
 
-<!-- TODO -->
+- A working [wg-easy](./basic-installation.md) and [Traefik](./traefik.md) setup from the previous guides.
+
+/// warning | Important: Following this guide will reset your WireGuard configuration.
+The process involves re-creating the `wg-easy` container and its data, which means **all existing WireGuard clients and settings will be deleted.**
+
+You will need to create your clients again after completing this guide.
+///
+
+## Add `adguard` configuration
+
+1. Create a directory for the configuration files:
+
+    ```shell
+    sudo mkdir -p /etc/docker/containers/adguard
+    ```
+
+2. Create volumes for persistent data:
+
+    ```shell
+    sudo mkdir -p /etc/docker/volumes/adguard/adguard_work
+    sudo mkdir -p /etc/docker/volumes/adguard/adguard_conf
+    sudo chmod -R 700 /etc/docker/volumes/adguard
+    ```
+
+3. Create the `docker-compose.yml` file.
+
+File: `/etc/docker/containers/adguard/docker-compose.yml`
+
+```yaml
+services:
+    adguard:
+        image: adguard/adguardhome:v0.107.64
+        container_name: adguard
+        restart: unless-stopped
+        volumes:
+            - /etc/docker/volumes/adguard/adguard_work:/opt/adguardhome/work
+            - /etc/docker/volumes/adguard/adguard_conf:/opt/adguardhome/conf
+        networks:
+            wg:
+                interface_name: eth0
+                ipv4_address: 10.42.42.43
+                ipv6_address: fdcc:ad94:bacf:61a3::2b
+            traefik:
+                interface_name: eth1
+        labels:
+            - 'traefik.enable=true'
+            - 'traefik.http.routers.adguard.rule=Host(`adguard.$example.com$`)'
+            - 'traefik.http.routers.adguard.entrypoints=websecure'
+            - 'traefik.http.routers.adguard.service=adguard'
+            - 'traefik.http.services.adguard.loadbalancer.server.port=3000'
+            - 'traefik.docker.network=traefik'
+
+networks:
+    wg:
+        external: true
+    traefik:
+        external: true
+```
+
+## Update `wg-easy` configuration
+
+Modify the corresponding sections of your existing `wg-easy` compose file to match the updated version below.
+
+File: `/etc/docker/containers/wg-easy/docker-compose.yml`
+
+```yaml
+services:
+  wg-easy:
+    ports:
+      - "51820:51820/udp"
+    ...
+    networks:
+      wg:
+        interface_name: eth0
+        ...
+      traefik:
+        interface_name: eth1
+      ...
+    ...
+    environment:
+      # Unattended Setup
+      - INIT_ENABLED=true
+      # Replace $username$ with your username
+      - INIT_USERNAME=$username$
+      # Replace $password$ with your unhashed password
+      - INIT_PASSWORD=$password$
+      # Replace $example.com$ with your domain
+      - INIT_HOST=wg-easy.$example.com$
+      - INIT_PORT=51820
+      - INIT_DNS=10.42.42.43,fdcc:ad94:bacf:61a3::2b
+      - INIT_IPV4_CIDR=10.8.0.0/24
+      - INIT_IPV6_CIDR=fd42:42:42::/64
+    ...
+
+networks:
+  wg:
+    # Prevents Docker Compose from prefixing the network name.
+    name: wg
+    ...
+  ...
+```
+
+## Setup Wireguard
+
+1. Restart `wg-easy`:
+
+    ```shell
+    cd /etc/docker/containers/wg-easy
+    sudo docker compose down -v
+    sudo docker compose up -d
+    ```
+
+2. Edit Wireguard's Hooks.
+
+    In the Admin Panel of your WireGuard server, go to the Hooks tab and replace it with:
+
+    **_PostUp_**
+
+    ```shell
+    iptables -A INPUT -p udp -m udp --dport {{port}} -j ACCEPT; ip6tables -A INPUT -p udp -m udp --dport {{port}} -j ACCEPT; iptables -t nat -A PREROUTING -i wg0 -p udp --dport 53 -j DNAT --to-destination 10.42.42.43; iptables -t nat -A PREROUTING -i wg0 -p tcp --dport 53 -j DNAT --to-destination 10.42.42.43; ip6tables -t nat -A PREROUTING -i wg0 -p udp --dport 53 -j DNAT --to-destination fdcc:ad94:bacf:61a3::2b; ip6tables -t nat -A PREROUTING -i wg0 -p tcp --dport 53 -j DNAT --to-destination fdcc:ad94:bacf:61a3::2b; iptables -A FORWARD -i wg0 -j ACCEPT; iptables -A FORWARD -o wg0 -j ACCEPT; ip6tables -A FORWARD -i wg0 -j ACCEPT; ip6tables -A FORWARD -o wg0 -j ACCEPT; iptables -t nat -A POSTROUTING -s {{ipv4Cidr}} -o {{device}} -j MASQUERADE; ip6tables -t nat -A POSTROUTING -s {{ipv6Cidr}} -o {{device}} -j MASQUERADE;
+    ```
+
+    **_PostDown_**
+
+    ```shell
+    iptables -D INPUT -p udp -m udp --dport {{port}} -j ACCEPT || true; ip6tables -D INPUT -p udp -m udp --dport {{port}} -j ACCEPT || true; iptables -t nat -D PREROUTING -i wg0 -p udp --dport 53 -j DNAT --to-destination 10.42.42.43 || true; iptables -t nat -D PREROUTING -i wg0 -p tcp --dport 53 -j DNAT --to-destination 10.42.42.43 || true; ip6tables -t nat -D PREROUTING -i wg0 -p udp --dport 53 -j DNAT --to-destination fdcc:ad94:bacf:61a3::2b || true; ip6tables -t nat -D PREROUTING -i wg0 -p tcp --dport 53 -j DNAT --to-destination fdcc:ad94:bacf:61a3::2b || true; iptables -D FORWARD -i wg0 -j ACCEPT || true; iptables -D FORWARD -o wg0 -j ACCEPT || true; ip6tables -D FORWARD -i wg0 -j ACCEPT || true; ip6tables -D FORWARD -o wg0 -j ACCEPT || true; iptables -t nat -D POSTROUTING -s {{ipv4Cidr}} -o {{device}} -j MASQUERADE || true; ip6tables -t nat -D POSTROUTING -s {{ipv6Cidr}} -o {{device}} -j MASQUERADE || true;
+    ```
+
+3. Restart `wg-easy` to apply changes:
+
+    ```shell
+    sudo docker restart wg-easy
+    ```
+
+## Setup Adguard Home
+
+1. Start `adguard` service:
+
+    ```shell
+    cd /etc/docker/containers/adguard
+    sudo docker compose up -d
+    ```
+
+2. Navigate to `https://adguard.$example.com$` to begin the AdGuard Home setup.
+
+/// warning | Important: Configure AdGuard Home Admin Web Interface Port
+During the initial AdGuard Home setup on the `Step 2/5` page, you **must** set the **Admin Web Interface Port** to **3000**. Do not use the default port 80, as it will not work with the Traefik configuration.
+
+After completing the setup, the AdGuard UI might appear unresponsive. This is expected. **Simply reload the page**, and the panel will display correctly.
+///
+
+> If you accidentally left it default (80), you will need to manually edit the `docker-compose.yml` file for AdGuard Home (`/etc/docker/containers/adguard/docker-compose.yml`) and change the line `traefik.http.services.adguard.loadbalancer.server.port=3000` to `traefik.http.services.adguard.loadbalancer.server.port=80`. After making this change, restart AdGuard Home by navigating to `/etc/docker/containers/adguard` and running `sudo docker compose up -d`.
+
+## Final System Checks
+
+### Firewall
+
+Ensure the ports `80/tcp`, `443/tcp`, `443/udp`, and `51820/udp` are open.
+
+### Optional: Optimizing UDP Buffer Sizes
+
+AdGuard Home, as a DNS server, handles a large volume of UDP packets. To ensure optimal performance, it is recommended to increase the system's UDP buffer sizes. You can apply these settings using your system's `sysctl` configuration (e.g., by creating a file in `/etc/sysctl.d/`).
+
+```shell
+net.core.rmem_max = 7500000
+net.core.wmem_max = 7500000
+```
+
+After adding these settings, remember to apply them (e.g., by running `sudo sysctl --system` or rebooting)

docs/content/examples/tutorials/auto-updates.md

@@ -20,7 +20,7 @@ File: `/etc/docker/containers/watchtower/docker-compose.yml`
 ```yaml
 services:
     watchtower:
-    image: containrrr/watchtower:latest
+        image: nickfedor/watchtower:latest
         volumes:
             - /var/run/docker.sock:/var/run/docker.sock
         env_file:

docs/content/examples/tutorials/basic-installation.md

@@ -33,7 +33,7 @@ Follow the Docs here: <https://docs.docker.com/engine/install/> and install Dock
 
     ```shell
      cd /etc/docker/containers/wg-easy
-    sudo docker-compose up -d
+     sudo docker compose up -d
     ```
 
 ## Setup Firewall
@@ -48,6 +48,7 @@ These ports can be changed, so if you change them you have to update your firewa
 
 - To setup traefik follow the instructions here: [Traefik](./traefik.md)
 - To setup caddy follow the instructions here: [Caddy](./caddy.md)
+- If you do not want to use a reverse proxy follow the instructions here: [No Reverse Proxy](./reverse-proxyless.md)
 
 ## Update `wg-easy`
 
@@ -55,8 +56,8 @@ To update `wg-easy` to the latest version, run:
 
 ```shell
 cd /etc/docker/containers/wg-easy
-sudo docker-compose pull
-sudo docker-compose up -d
+sudo docker compose pull
+sudo docker compose up -d
 ```
 
 ## Auto Update

docs/content/examples/tutorials/caddy.md

@@ -2,8 +2,101 @@
 title: Caddy
 ---
 
-It seems like the Docs on how to setup Caddy are not available yet.
+/// note | Opinionated
 
-Feel free to create a PR and add them here.
+This guide is opinionated. If you use other conventions or folder layouts, feel free to change the commands and paths.
+///
 
-<!-- TODO -->
+We're using [Caddy](https://caddyserver.com/) here as reverse proxy to serve `wg-easy` on [https://wg-easy.example.com](https://wg-easy.example.com) via TLS.
+
+## Create a docker composition for `caddy`
+
+```txt
+.
+├── compose.yml
+└── Caddyfile
+
+1 directory, 2 files
+```
+
+```yaml
+# compose.yml
+
+services:
+    caddy:
+        container_name: caddy
+        image: caddy:2.10.0-alpine
+        # publish everything you deem necessary
+        ports:
+            - '80:80/tcp'
+            - '443:443/tcp'
+            - '443:443/udp'
+        networks:
+            - caddy
+        restart: unless-stopped
+        volumes:
+            - './Caddyfile:/etc/caddy/Caddyfile:ro'
+            - config:/config
+            - data:/data
+
+networks:
+    caddy:
+        name: caddy
+
+volumes:
+    config:
+    data:
+```
+
+```txt
+# Caddyfile
+
+{
+        # setup your email address
+        email mail@example.com
+}
+
+wg-easy.example.com {
+        # since the container will share the network with wg-easy
+        # we can use the proper container name
+        reverse_proxy wg-easy:80
+        tls internal
+}
+```
+
+...and start it with:
+
+```shell
+sudo docker compose up -d
+```
+
+## Adapt the docker composition of `wg-easy`
+
+```yaml
+services:
+  wg-easy:
+    # sync container name and port according to Caddyfile
+    container_name: wg-easy
+    environment:
+      - PORT=80
+    # no need to publish the HTTP server anymore
+    ports:
+      - "51820:51820/udp"
+    # add to caddy network
+    networks:
+      caddy:
+    ...
+
+networks:
+  caddy:
+    external: true
+  ...
+```
+
+...and restart it with:
+
+```shell
+sudo docker compose up -d
+```
+
+You can now access `wg-easy` at [https://wg-easy.example.com](https://wg-easy.example.com) and start the setup.

docs/content/examples/tutorials/docker-run.md

@@ -7,9 +7,9 @@ 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 \
+  --subnet fdcc:ad94:bacf:61a3::/64 \
+   wg
 ```
 
 <!-- ref: major version -->

docs/content/examples/tutorials/reverse-proxyless.md

@@ -0,0 +1,29 @@
+---
+title: No Reverse Proxy
+---
+
+/// warning | Insecure
+
+This is insecure. You should use a reverse proxy to secure the connection.
+
+Only use this method if you know what you are doing.
+///
+
+If you only allow access to the web UI from your local network, you can skip the reverse proxy setup. This is not recommended, but it is possible.
+
+## Setup
+
+- Edit the `docker-compose.yml` file and uncomment `environment` and `INSECURE`
+
+- Set `INSECURE` to `true` to allow access to the web UI over a non-secure connection.
+
+- The `docker-compose.yml` file should look something like this:
+
+    ```yaml
+    environment:
+        - INSECURE=true
+    ```
+
+- Save the file and restart `wg-easy`.
+
+- Make sure that the Web UI is not accessible from outside your local network.

docs/content/examples/tutorials/routed.md

@@ -0,0 +1,111 @@
+---
+title: Routed setup (No NAT)
+---
+
+This guide shows how to run **wg-easy** with a routed setup, so packets are forwarded instead of NATed.
+
+In a routed design, each WireGuard client keeps its own IPv4/IPv6 address. That means you can identify clients by their real addresses instead of seeing everything as the WireGuard server’s IP.
+
+## Requirements
+
+1. You know how to add static routes on your router to the WireGuard server.
+
+## Docker setup
+
+To make use of our own IPv4/IPv6 addresses, run the container with the `network_mode: host` option.
+
+```yaml
+services:
+    wg-easy:
+        image: ghcr.io/wg-easy/wg-easy:15
+        container_name: wg-easy
+        network_mode: 'host'
+        volumes:
+            - ./config:/etc/wireguard
+            - /lib/modules:/lib/modules:ro
+        cap_add:
+            - NET_ADMIN
+            - SYS_MODULE
+        devices:
+            - /dev/net/tun:/dev/net/tun
+        restart: unless-stopped
+```
+
+Because we’re on the host network, remove any `ports:` and container `sysctls:` you might have had before.
+
+## Kernel parameters (on the host)
+
+With host networking, system sysctls must be set on the **host**. On your host, create `/etc/sysctl.d/90-wireguard.conf`:
+
+```txt
+net.ipv4.ip_forward=1
+net.ipv4.conf.all.src_valid_mark=1
+net.ipv6.conf.all.disable_ipv6=0
+net.ipv6.conf.all.forwarding=1
+net.ipv6.conf.default.forwarding=1
+```
+
+Apply and verify:
+
+```shell
+sysctl -p /etc/sysctl.d/90-wireguard.conf
+sysctl -n net.ipv4.ip_forward   # should print 1
+```
+
+## Add static routes on your router
+
+Pick an IPv4 and IPv6 subnet for your clients and add static routes on your router, pointing to the WireGuard server's LAN addresses.
+
+### Example
+
+/// note | 2001:db8::/32
+
+The _documentation prefix_ `2001:db8::/32` (RFC 3849) used in this example is not meant for production use, replace it with your own ISP-assigned IPv6 prefix (GUA) or local prefix (ULA)
+///
+
+I want my WireGuard clients in `192.168.0.0/24` and `2001:db8:abc:0::/64`.
+
+- Routed IPv4 subnet: `192.168.0.0/24`
+- Routed IPv6 prefix: `2001:db8:abc:0::/64`
+- WireGuard server IPs: `192.168.10.118` and `2001:db8:abc:10:216:3eff:fedb:949e`
+
+On your router:
+
+- Route `192.168.0.0/24` → next hop `192.168.10.118`
+- Route `2001:db8:abc:0::/64` → next hop `2001:db8:abc:10:216:3eff:fedb:949e`
+
+Don't forget to create the necessary firewall rules to allow these subnets to travel across your LAN. Some routers or servers may require specific Outbound NAT rules for the chosen IPv4 and IPv6 subnets to allow traffic to traverse your LAN.
+
+## `wg-easy` configuration
+
+In the Web UI → Admin → Interface, click Change CIDR and set the IPv4/IPv6 routed subnets you chose above. Save.
+
+Then go to Admin → Hooks and add:
+
+PostUp
+
+```shell
+iptables -A INPUT -p udp -m udp --dport {{port}} -j ACCEPT; iptables -A FORWARD -i wg0 -j ACCEPT; iptables -A FORWARD -o wg0 -j ACCEPT; ip6tables -A INPUT -p udp -m udp --dport {{port}} -j ACCEPT; ip6tables -A FORWARD -i wg0 -j ACCEPT; ip6tables -A FORWARD -o wg0 -j ACCEPT
+```
+
+PostDown
+
+```shell
+iptables -D INPUT -p udp -m udp --dport {{port}} -j ACCEPT; iptables -D FORWARD -i wg0 -j ACCEPT; iptables -D FORWARD -o wg0 -j ACCEPT; ip6tables -D INPUT -p udp -m udp --dport {{port}} -j ACCEPT; ip6tables -D FORWARD -i wg0 -j ACCEPT; ip6tables -D FORWARD -o wg0 -j ACCEPT
+```
+
+/// warning | Important: When using nftables use the following hooks instead.
+
+PostUp
+
+```shell
+nft add chain ip filter WG_EASY; nft add rule ip filter DOCKER-USER jump WG_EASY; nft add rule ip filter WG_EASY iifname {{device}} accept; nft add rule ip filter WG_EASY oifname {{device}} accept; nft add chain ip6 filter WG_EASY; nft add rule ip6 filter DOCKER-USER jump WG_EASY; nft add rule ip6 filter WG_EASY iifname {{device}} accept; nft add rule ip6 filter WG_EASY oifname {{device}} accept;
+```
+
+PostDown
+
+```shell
+nft delete rule ip filter DOCKER-USER handle $(nft -a list chain ip filter DOCKER-USER | awk '/jump WG_EASY/ {print $NF}'); nft flush chain ip filter WG_EASY; nft delete chain ip filter WG_EASY; nft delete rule ip6 filter DOCKER-USER handle $(nft -a list chain ip6 filter DOCKER-USER | awk '/jump WG_EASY/ {print $NF}'); nft flush chain ip6 filter WG_EASY; nft delete chain ip6 filter WG_EASY
+```
+
+///

docs/content/examples/tutorials/traefik.md

@@ -25,9 +25,9 @@ services:
         container_name: traefik
         restart: unless-stopped
         ports:
-      - "80:80"
-      - "443:443/tcp"
-      - "443:443/udp"
+            - '80:80'
+            - '443:443/tcp'
+            - '443:443/udp'
         volumes:
             - /var/run/docker.sock:/var/run/docker.sock
             - /etc/docker/volumes/traefik/traefik.yml:/traefik.yml:ro
@@ -51,14 +51,14 @@ log:
 
 entryPoints:
     web:
-    address: ":80/tcp"
+        address: ':80/tcp'
         http:
             redirections:
                 entryPoint:
                     to: websecure
                     scheme: https
     websecure:
-    address: ":443/tcp"
+        address: ':443/tcp'
         http:
             middlewares:
                 - compress@file
@@ -100,7 +100,7 @@ http:
         services:
             basicAuth:
                 users:
-          - "$username$:$password$"
+                    - '$username$:$password$'
         compress:
             compress: {}
         hsts:
@@ -141,10 +141,10 @@ sudo docker network create traefik
 ## Start traefik
 
 ```shell
-sudo docker-compose up -d
+sudo docker compose up -d
 ```
 
-You can no access the Traefik dashboard at `https://traefik.$example.com$` with the credentials you set in `traefik_dynamic.yml`.
+You can now access the Traefik dashboard at `https://traefik.$example.com$` with the credentials you set in `traefik_dynamic.yml`.
 
 ## Add Labels to `wg-easy`
 
@@ -166,6 +166,7 @@ services:
       - "traefik.http.routers.wg-easy.entrypoints=websecure"
       - "traefik.http.routers.wg-easy.service=wg-easy"
       - "traefik.http.services.wg-easy.loadbalancer.server.port=51821"
+      - "traefik.docker.network=traefik"
     ...
 
 networks:
@@ -178,7 +179,7 @@ networks:
 
 ```shell
 cd /etc/docker/containers/wg-easy
-sudo docker-compose up -d
+sudo docker compose up -d
 ```
 
 You can now access `wg-easy` at `https://wg-easy.$example.com$` and start the setup.

docs/content/faq.md

@@ -14,13 +14,13 @@ To resolve this issue, you can try the following steps:
 
 1. **Load the WireGuard kernel module**: If the WireGuard kernel module is not loaded, you can load it manually by running:
 
-   ```bash
+    ```shell
     sudo modprobe wireguard
     ```
 
 2. **Load the WireGuard kernel module on boot**: If you want to ensure that the WireGuard kernel module is loaded automatically on boot, you can add it to the `/etc/modules` file:
 
-   ```bash
+    ```shell
     echo "wireguard" | sudo tee -a /etc/modules
     ```
 
@@ -32,13 +32,13 @@ To resolve this issue, you can try the following steps:
 
 1. **Load the `nat` kernel module**: If the `nat` kernel module is not loaded, you can load it manually by running:
 
-   ```bash
+    ```shell
     sudo modprobe iptable_nat
     ```
 
 2. **Load the `nat` kernel module on boot**: If you want to ensure that the `nat` kernel module is loaded automatically on boot, you can add it to the `/etc/modules` file:
 
-   ```bash
+    ```shell
      echo "iptable_nat" | sudo tee -a /etc/modules
     ```
 
@@ -50,13 +50,13 @@ To resolve this issue, you can try the following steps:
 
 1. **Load the `nat` kernel module**: If the `nat` kernel module is not loaded, you can load it manually by running:
 
-   ```bash
+    ```shell
     sudo modprobe ip6table_nat
     ```
 
 2. **Load the `nat` kernel module on boot**: If you want to ensure that the `nat` kernel module is loaded automatically on boot, you can add it to the `/etc/modules` file:
 
-   ```bash
+    ```shell
      echo "ip6table_nat" | sudo tee -a /etc/modules
     ```
 
@@ -68,13 +68,13 @@ To resolve this issue, you can try the following steps:
 
 1. **Load the `filter` kernel module**: If the `filter` kernel module is not loaded, you can load it manually by running:
 
-   ```bash
+    ```shell
     sudo modprobe iptable_filter
     ```
 
 2. **Load the `filter` kernel module on boot**: If you want to ensure that the `filter` kernel module is loaded automatically on boot, you can add it to the `/etc/modules` file:
 
-   ```bash
+    ```shell
     echo "iptable_filter" | sudo tee -a /etc/modules
     ```
 
@@ -86,12 +86,12 @@ To resolve this issue, you can try the following steps:
 
 1. **Load the `filter` kernel module**: If the `filter` kernel module is not loaded, you can load it manually by running:
 
-   ```bash
+    ```shell
     sudo modprobe ip6table_filter
     ```
 
 2. **Load the `filter` kernel module on boot**: If you want to ensure that the `filter` kernel module is loaded automatically on boot, you can add it to the `/etc/modules` file:
 
-   ```bash
+    ```shell
      echo "ip6table_filter" | sudo tee -a /etc/modules
     ```

docs/content/getting-started.md

@@ -38,59 +38,37 @@ If you're using podman, make sure to read the related [documentation][docs-podma
 To understand which tags you should use, read this section carefully. [Our CI][github-ci] will automatically build, test and push new images to the following container registry:
 
 1. GitHub Container Registry ([`ghcr.io/wg-easy/wg-easy`][ghcr-image])
+2. Codeberg Container Registry ([`codeberg.org/wg-easy/wg-easy`][codeberg-image]) (IPv6 support)
 
 All workflows are using the tagging convention listed below. It is subsequently applied to all images.
 
 | tag           | Type                            | Example                                                       | Description                                                                   |
-| ------------- | ---------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `15`          | latest minor for that major tag                            | `ghcr.io/wg-easy/wg-easy:15`                                  | latest features for specific major versions, no breaking changes                                                                     |
-| `latest`      | latest tag                                                 | `ghcr.io/wg-easy/wg-easy:latest` or `ghcr.io/wg-easy/wg-easy` | stable as possible get bug fixes quickly when needed, see Releases for more information.                                             |
+| ------------- | ------------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `15`          | latest minor for that major tag | `ghcr.io/wg-easy/wg-easy:15`                                  | latest features for specific major versions, no breaking changes, recommended |
 | `15.0`        | latest patch for that minor tag | `ghcr.io/wg-easy/wg-easy:15.0`                                | latest patches for specific minor version                                     |
-| `15.0.0`      | specific tag                                               | `ghcr.io/wg-easy/wg-easy:15.0.0`                              | specific release, don't use this as this will not get updated                                                                        |
-| `nightly`     | [`master`](https://github.com/wg-easy/wg-easy/tree/master) | `ghcr.io/wg-easy/wg-easy:nightly`                             | mostly unstable gets frequent package and code updates, deployed against [`master`](https://github.com/wg-easy/wg-easy/tree/master). |
-| `development` | pull requests                                              | `ghcr.io/wg-easy/wg-easy:development`                         | used for development, testing code from PRs before landing into [`master`](https://github.com/wg-easy/wg-easy/tree/master).          |
+| `15.0.0`      | specific tag                    | `ghcr.io/wg-easy/wg-easy:15.0.0`                              | specific release, no updates                                                  |
+| `edge`        | push to `master`                | `ghcr.io/wg-easy/wg-easy:edge`                                | mostly unstable, gets frequent package and code updates                       |
+| `development` | pull requests                   | `ghcr.io/wg-easy/wg-easy:development`                         | used for development, testing code from PRs                                   |
+| `latest`      | latest tag                      | `ghcr.io/wg-easy/wg-easy:latest` or `ghcr.io/wg-easy/wg-easy` | points to the v14 release, should be avoided                                  |
 
-When publishing a tag we follow the [Semantic Versioning][semver] specification. The `latest` tag is always pointing to the latest stable release. If you want to avoid breaking changes, use the major version tag (e.g. `15`).
+<!-- ref: major version (check links too) -->
+
+When publishing a tag we follow the [Semantic Versioning][semver] specification. Pin to the latest major version to avoid breaking changes (e.g. `15`), avoid using the `latest` tag.
 
 [github-ci]: https://github.com/wg-easy/wg-easy/actions
 [ghcr-image]: https://github.com/wg-easy/wg-easy/pkgs/container/wg-easy
+[codeberg-image]: https://codeberg.org/wg-easy/-/packages/container/wg-easy/15
 [semver]: https://semver.org/
 
-### Get All Files
+### Follow tutorials
 
-Issue the following command to acquire the necessary file:
+- [Basic Installation with Docker Compose (Recommended)](./examples/tutorials/basic-installation.md)
+- [Simple Installation with Docker Run](./examples/tutorials/docker-run.md)
+- [Advanced Installation with Podman](./examples/tutorials/podman-nft.md)
 
-```shell
-wget "https://raw.githubusercontent.com/wg-easy/wg-easy/master/docker-compose.yml"
-```
-
-### Start the Container
-
-To start the container, issue the following command:
-
-```shell
-sudo docker compose up -d
-```
-
-### Configuration Steps
-
-Now follow the setup process in your web browser
-
-### Stopping the Container
-
-To stop the container, issue the following command:
-
-```shell
-sudo docker compose down
-```
-
-/// danger | Using the Correct Commands For Stopping and Starting `wg-easy`
+/// danger | Use the Correct Commands For Stopping and Starting `wg-easy`
 
 **Use `sudo docker compose up / down`, not `sudo docker compose start / stop`**. Otherwise, the container is not properly destroyed and you may experience problems during startup because of inconsistent state.
 ///
 
 **That's it! It really is that easy**.
-
-If you need more help you can read the [Basic Installation Tutorial][basic-installation].
-
-[basic-installation]: ./examples/tutorials/basic-installation.md

docs/content/guides/2fa.md

@@ -2,4 +2,25 @@
 title: 2FA
 ---
 
-TODO
+The user can enable 2FA from the Account page. The Account page is accessible from the dropdown menu in the top right corner of the application.
+
+## Enable TOTP
+
+- **Enable Two Factor Authentication**: Enable TOTP for the user.
+
+## Configure TOTP
+
+A QR code will be displayed. Scan the QR code with your TOTP application (e.g., Google Authenticator, Authy, etc.) to add the account.
+
+To verify that the TOTP key is working, the user must enter the TOTP code generated by the TOTP application.
+
+- **TOTP Key**: The TOTP key for the user. This key is used to generate the TOTP code.
+- **TOTP Code**: The current TOTP code for the user. This code is used to verify the TOTP key.
+- **Enable Two Factor Authentication**: Enable TOTP for the user.
+
+## Disable TOTP
+
+To disable TOTP, the user must enter the current password.
+
+- **Current Password**: The current password of the user.
+- **Disable Two Factor Authentication**: Disable TOTP for the user.

docs/content/guides/account.md

@@ -1,5 +0,0 @@
----
-title: Edit Account
----
-
-TODO

docs/content/guides/cli.md

@@ -0,0 +1,43 @@
+---
+title: CLI
+---
+
+If you want to use the CLI, you can run it with
+
+### Docker Compose
+
+```shell
+cd /etc/docker/containers/wg-easy
+docker compose exec -it wg-easy cli
+```
+
+### Docker Run
+
+```shell
+docker run --rm -it \
+    -v ~/.wg-easy:/etc/wireguard \
+    ghcr.io/wg-easy/wg-easy:15 \
+    cli
+```
+
+### Reset Password
+
+If you want to reset the password for the admin user, you can run the following command:
+
+#### By Prompt
+
+```shell
+cd /etc/docker/containers/wg-easy
+docker compose exec -it wg-easy cli db:admin:reset
+```
+
+You are asked to provide the new password
+
+#### By Argument
+
+```shell
+cd /etc/docker/containers/wg-easy
+docker compose exec -it wg-easy cli db:admin:reset --password <new_password>
+```
+
+This will reset the password for the admin user to the new password you provided. If you include special characters in the password, make sure to escape them properly.

docs/content/guides/clients.md

@@ -2,4 +2,49 @@
 title: Edit Client
 ---
 
-TODO
+## General
+
+- **Name**: The name of the client.
+- **Enabled**: Whether the client can connect to the VPN.
+- **Expire Date**: The date the client will be disabled.
+
+## Address
+
+- **IPv4**: The IPv4 address of the client.
+- **IPv6**: The IPv6 address of the client.
+
+## Allowed IPs
+
+Which IPs will be routed through the VPN.
+
+This will not prevent the user from modifying it locally and accessing IP ranges that they should not be able to access.
+
+Use firewall rules to prevent access to IP ranges that the user should not be able to access.
+
+## Server Allowed IPs
+
+Which IPs will be routed to the client.
+
+## DNS
+
+The DNS server that the client will use.
+
+## Advanced
+
+- **MTU**: The maximum transmission unit for the client.
+- **Persistent Keepalive**: The interval for sending keepalive packets to the server.
+
+## Hooks
+
+This can only be used for clients that use `wg-quick`. Setting this will throw a error when importing the config on other clients.
+
+- **PreUp**: Commands to run before the interface is brought up.
+- **PostUp**: Commands to run after the interface is brought up.
+- **PreDown**: Commands to run before the interface is brought down.
+- **PostDown**: Commands to run after the interface is brought down.
+
+## Actions
+
+- **Save**: Save the changes made in the form.
+- **Revert**: Revert the changes made in the form.
+- **Delete**: Delete the client.

docs/content/guides/login.md

@@ -1,5 +0,0 @@
----
-title: Login
----
-
-TODO

docs/content/guides/setup.md

@@ -2,4 +2,23 @@
 title: Setup
 ---
 
-TODO
+## User Setup
+
+- **Username**: The username of the user.
+- **Password**: The password of the user.
+- **Confirm Password**: The password of the user.
+
+## Existing Setup
+
+If you have the config from the previous version, you can import it by clicking "Yes". This currently expects a config from v14.
+
+If this is the first time you are using this, you can click "No" to create a new config.
+
+### No - Host Setup
+
+- **Host**: The host of the server. The clients will connect to this address. This can be a domain name or an IP address. Make sure to wrap it in brackets if it is an IPv6 address. For example: `[::1]` or `[2001:db8::1]`.
+- **Port**: The port of the server. The clients will connect to this port. The server will listen on this port.
+
+### Yes - Migration
+
+Select the `wg0.json` file from the previous version. Read [Migrate from v14 to v15](../advanced/migrate/from-14-to-15.md) for more information.

docs/content/index.md

@@ -8,7 +8,7 @@ hide:
 
 /// info | This Documentation is Versioned
 
-**Make sure** to select the correct version of this documentation! It should match the version of the image you are using. The default version corresponds to the `:latest` image tag - [the most recent stable release][docs-tagging].
+**Make sure** to select the correct version of this documentation! It should match the version of the image you are using. The default version corresponds to [the most recent stable release][docs-tagging].
 ///
 
 This documentation provides you not only with the basic setup and configuration of `wg-easy` but also with advanced configuration, elaborate usage scenarios, detailed examples, hints and more.

docs/mkdocs.yml

@@ -1,6 +1,6 @@
-site_name: "wg-easy"
-site_description: "The easiest way to run WireGuard VPN + Web-based Admin UI."
-site_author: "WireGuard Easy"
+site_name: 'wg-easy'
+site_description: 'The easiest way to run WireGuard VPN + Web-based Admin UI.'
+site_author: 'WireGuard Easy'
 copyright: >
     <p>
     &copy <a href="https://github.com/wg-easy"><em>Wireguard Easy</em></a><br/>
@@ -12,9 +12,9 @@ copyright: >
 repo_url: https://github.com/wg-easy/wg-easy
 repo_name: wg-easy
 
-edit_uri: "edit/master/docs/content"
+edit_uri: 'edit/master/docs/content'
 
-docs_dir: "content/"
+docs_dir: 'content/'
 
 site_url: https://wg-easy.github.io/wg-easy
 
@@ -34,7 +34,7 @@ theme:
         - content.code.annotate
     palette:
         # Light mode
-    - media: "(prefers-color-scheme: light)"
+        - media: '(prefers-color-scheme: light)'
           scheme: default
           primary: grey
           accent: red
@@ -42,7 +42,7 @@ theme:
               icon: material/weather-night
               name: Switch to dark mode
         # Dark mode
-    - media: "(prefers-color-scheme: dark)"
+        - media: '(prefers-color-scheme: dark)'
           scheme: slate
           primary: grey
           accent: red

package.json

@@ -2,10 +2,16 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "docker compose -f docker-compose.dev.yml up --build",
+    "dev": "docker compose -f docker-compose.dev.yml up wg-easy --build",
+    "cli:dev": "docker compose -f docker-compose.dev.yml run --build --rm -it wg-easy cli:dev",
     "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",
-    "scripts:version": "bash scripts/version.sh"
+    "scripts:version": "bash scripts/version.sh",
+    "scripts:i18n": "bash scripts/i18n.sh",
+    "format:check:docs": "prettier --check docs"
   },
-  "packageManager": "pnpm@10.8.0"
+  "devDependencies": {
+    "prettier": "^3.8.1"
+  },
+  "packageManager": "pnpm@10.29.2"
 }

pnpm-lock.yaml

@@ -6,4 +6,19 @@ settings:
 
 importers:
 
-  .: {}
+  .:
+    devDependencies:
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+
+packages:
+
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+snapshots:
+
+  prettier@3.8.1: {}

scripts/i18n.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+folder="src/i18n/locales"
+base_file="$folder/en.json"
+
+# Get all leaf keys from the English base file
+base_keys=$(jq -r 'paths(scalars) | map(tostring) | join(".")' "$base_file")
+total=$(echo "$base_keys" | wc -l)
+
+# Loop through all JSON files in the folder
+for file in "$folder"/*.json; do
+  name=$(basename "$file" .json)
+  translated_keys=$(jq -r 'paths(scalars) | map(tostring) | join(".")' "$file")
+  done=$(comm -12 <(echo "$base_keys" | sort) <(echo "$translated_keys" | sort) | wc -l)
+  percent=$((100 * done / total))
+  check="[ ]"
+  [ "$percent" -eq 100 ] && check="[x]"
+  printf "%s %s (%d%%)\n" "- $check" "$name" "$percent"
+done

scripts/version.sh

@@ -30,6 +30,7 @@ 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 "Make sure to stage any changes before proceeding (e.g. Changelog updates)."
 echo "----"
 
 echo "If you did everything press 'y' to commit the changes and create a new tag"

src/.gitignore

@@ -23,4 +23,6 @@ logs
 .env.*
 !.env.example
 
+coverage/
+
 wg-easy.db

src/.npmrc

@@ -1 +0,0 @@
-public-hoist-pattern[]=@libsql/linux*

src/.nuxtrc

@@ -0,0 +1 @@
+setups.@nuxt/test-utils="3.23.0"

src/app/components/Admin/CidrDialog.vue

@@ -10,12 +10,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('change', ipv4Cidr, ipv6Cidr)">
+        <BasePrimaryButton @click="$emit('change', ipv4Cidr, ipv6Cidr)">
           {{ $t('dialog.change') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>

src/app/components/Admin/RestartInterfaceDialog.vue

@@ -7,12 +7,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('restart')">
+        <BasePrimaryButton @click="$emit('restart')">
           {{ $t('admin.interface.restart') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>

src/app/components/Admin/SuggestDialog.vue

@@ -13,12 +13,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('change', selected)">
+        <BasePrimaryButton @click="$emit('change', selected)">
           {{ $t('dialog.change') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>

src/app/components/Base/Chart.vue

@@ -11,10 +11,10 @@
 </template>
 
 <script setup lang="ts">
-import type { VueApexChartsComponent } from 'vue3-apexcharts';
+import type { VueApexChartsComponentProps } from 'vue3-apexcharts';
 
 defineProps<{
-  options: VueApexChartsComponent['options'];
-  series: VueApexChartsComponent['series'];
+  options: VueApexChartsComponentProps['options'];
+  series: VueApexChartsComponentProps['series'];
 }>();
 </script>

src/app/components/Base/CodeBlock.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="overflow-x-auto rounded border-2 border-red-800 py-2">
+    <pre
+      class="mx-2 inline-block"
+      @click="selectCode"
+    ><code ref="codeBlock">{{ code }}</code></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  code: string;
+}>();
+
+const codeBlock = useTemplateRef('codeBlock');
+
+function selectCode() {
+  // TODO: keyboard support?
+  if (codeBlock.value) {
+    const range = document.createRange();
+    range.selectNodeContents(codeBlock.value);
+    const sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  }
+}
+</script>

src/app/components/Base/PrimaryButton.vue

@@ -0,0 +1,26 @@
+<template>
+  <component
+    :is="elementType"
+    role="button"
+    class="inline-flex items-center rounded border-2 border-red-800 bg-red-800 px-4 py-2 text-white transition hover:border-red-600 hover:bg-red-600"
+    v-bind="attrs"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'button',
+  },
+});
+
+const elementType = computed(() => props.as);
+
+const attrs = computed(() => {
+  const { as, ...attrs } = props;
+  return attrs;
+});
+</script>

src/app/components/Base/SecondaryButton.vue

@@ -20,7 +20,7 @@ const props = defineProps({
 const elementType = computed(() => props.as);
 
 const attrs = computed(() => {
-  const { as, ...attrs } = props;
-  return attrs;
+  const { as, ...rest } = props;
+  return rest;
 });
 </script>

src/app/components/ClientCard/ClientCard.vue

@@ -1,7 +1,7 @@
 <template>
   <ClientCardCharts :client="client" />
   <div
-    class="relative z-10 flex flex-col justify-between gap-3 px-3 py-3 sm:flex-row md:py-5"
+    class="relative flex flex-col justify-between gap-3 px-3 py-3 sm:flex-row md:py-5"
   >
     <div class="flex w-full items-center gap-3 md:gap-4">
       <ClientCardAvatar :client="client" />

src/app/components/Clients/ConfigDialog.vue

@@ -0,0 +1,74 @@
+<template>
+  <BaseDialog :trigger-class="triggerClass">
+    <template #trigger>
+      <slot />
+    </template>
+    <template #title>
+      {{ $t('client.config') }}
+    </template>
+    <template #description>
+      <div v-if="status === 'success'">
+        <BaseCodeBlock :code="config ?? ''" />
+      </div>
+      <div v-else>
+        <span>{{ $t('general.loading') }}</span>
+      </div>
+    </template>
+    <template #actions>
+      <DialogClose as-child>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
+      </DialogClose>
+      <DialogClose as-child>
+        <BasePrimaryButton @click="copyCode">
+          {{ $t('copy.copy') }}
+        </BasePrimaryButton>
+      </DialogClose>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ triggerClass?: string; clientId: number }>();
+
+const toast = useToast();
+const { copied, copy, isSupported } = useClipboard({
+  // fallback does not work
+  legacy: false,
+});
+
+const { data: config, status } = useFetch(
+  `/api/client/${props.clientId}/configuration`,
+  {
+    responseType: 'text',
+    server: false,
+  }
+);
+
+async function copyCode() {
+  if (status.value !== 'success') {
+    return;
+  }
+
+  if (!isSupported.value) {
+    toast.showToast({
+      type: 'error',
+      message: $t('copy.notSupported'),
+    });
+    return;
+  }
+
+  await copy(config.value ?? '');
+
+  if (copied.value) {
+    toast.showToast({
+      type: 'success',
+      message: $t('copy.copied'),
+    });
+  } else {
+    toast.showToast({
+      type: 'error',
+      message: $t('copy.failed'),
+    });
+  }
+}
+</script>

src/app/components/Clients/CreateDialog.vue

@@ -18,10 +18,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="createClient">{{ $t('client.create') }}</BaseButton>
+        <BasePrimaryButton @click="createClient">
+          {{ $t('client.create') }}
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>

src/app/components/Clients/DeleteDialog.vue

@@ -9,12 +9,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BasePrimaryButton>{{ $t('dialog.cancel') }}</BasePrimaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('delete')">{{
-          $t('client.deleteClient')
-        }}</BaseButton>
+        <BaseSecondaryButton @click="$emit('delete')">
+          {{ $t('client.deleteClient') }}
+        </BaseSecondaryButton>
       </DialogClose>
     </template>
   </BaseDialog>

src/app/components/Clients/Empty.vue

@@ -2,10 +2,10 @@
   <p class="m-10 text-center text-sm text-gray-400 dark:text-neutral-400">
     {{ $t('client.empty') }}<br /><br />
     <ClientsCreateDialog>
-      <BaseButton as="span">
+      <BaseSecondaryButton as="span">
         <IconsPlus class="w-4 md:mr-2" />
         <span class="text-sm">{{ $t('client.new') }}</span>
-      </BaseButton>
+      </BaseSecondaryButton>
     </ClientsCreateDialog>
   </p>
 </template>

src/app/components/Clients/New.vue

@@ -1,8 +1,8 @@
 <template>
   <ClientsCreateDialog>
-    <BaseButton as="span">
+    <BaseSecondaryButton as="span">
       <IconsPlus class="w-4 md:mr-2" />
       <span class="text-sm max-md:hidden">{{ $t('client.newShort') }}</span>
-    </BaseButton>
+    </BaseSecondaryButton>
   </ClientsCreateDialog>
 </template>

src/app/components/Clients/QRCodeDialog.vue

@@ -9,8 +9,8 @@
       </div>
     </template>
     <template #actions>
-      <DialogClose>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+      <DialogClose as-child>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
     </template>
   </BaseDialog>

src/app/components/Clients/Search.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="relative w-60 md:mr-2">
+    <div class="relative flex h-full items-center">
+      <IconsMagnifyingGlass
+        class="absolute left-2.5 h-4 w-4 text-gray-400 dark:text-neutral-500"
+      />
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="$t('client.search')"
+        class="w-full rounded bg-white px-8 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-gray-300 transition-all placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-red-600 dark:bg-neutral-800 dark:text-white dark:ring-neutral-700 dark:placeholder:text-neutral-500 dark:focus:ring-red-700"
+        @input="updateSearch"
+      />
+      <button
+        v-if="searchQuery"
+        class="absolute right-2 flex h-5 w-5 items-center justify-center rounded-full bg-gray-200 text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600 dark:hover:text-neutral-100"
+        aria-label="Clear search"
+        @click="clearSearch"
+      >
+        <IconsClose class="h-3 w-3" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const clientsStore = useClientsStore();
+const searchQuery = ref('');
+
+const updateSearch = useDebounceFn(() => {
+  clientsStore.setSearchQuery(searchQuery.value);
+}, 300);
+
+function clearSearch() {
+  searchQuery.value = '';
+  clientsStore.setSearchQuery('');
+}
+</script>

src/app/components/Clients/Sort.vue

@@ -1,12 +1,12 @@
 <template>
-  <BaseButton @click="toggleSort">
+  <BasePrimaryButton @click="toggleSort">
     <IconsArrowDown
       v-if="globalStore.sortClient === true"
       class="w-4 md:mr-2"
     />
     <IconsArrowUp v-else class="w-4 md:mr-2" />
     <span class="text-sm max-md:hidden"> {{ $t('client.sort') }}</span>
-  </BaseButton>
+  </BasePrimaryButton>
 </template>
 
 <script setup lang="ts">

src/app/components/Form/ArrayField.vue

@@ -12,7 +12,7 @@
           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
+        <BaseSecondaryButton
           as="input"
           type="button"
           class="rounded-lg"
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="mt-2">
-      <BaseButton
+      <BasePrimaryButton
         as="input"
         type="button"
         class="rounded-lg"

src/app/components/Form/HostField.vue

@@ -7,7 +7,7 @@
       <IconsInfo class="size-4" />
     </BaseTooltip>
   </div>
-  <div class="flex">
+  <div class="flex gap-1">
     <BaseInput
       :id="id"
       v-model.trim="data"
@@ -18,12 +18,14 @@
     />
     <ClientOnly>
       <AdminSuggestDialog :url="url" @change="data = $event">
-        <BaseButton as="span">
+        <BasePrimaryButton as="span">
           <div class="flex items-center gap-3">
             <IconsSparkles class="w-4" />
-            <span>{{ $t('admin.config.suggest') }}</span>
+            <span class="whitespace-nowrap">
+              {{ $t('admin.config.suggest') }}
+            </span>
           </div>
-        </BaseButton>
+        </BasePrimaryButton>
       </AdminSuggestDialog>
     </ClientOnly>
   </div>

src/app/components/Form/InfoField.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex items-center">
+    <FormLabel :for="id">
+      {{ label }}
+    </FormLabel>
+    <BaseTooltip v-if="description" :text="description">
+      <IconsInfo class="size-4" />
+    </BaseTooltip>
+  </div>
+  <span :id="id" class="flex flex-col justify-center">{{ data }}</span>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  id: string;
+  label: string;
+  description?: string;
+  data?: string;
+}>();
+</script>

src/app/components/Form/NullArrayField.vue

@@ -12,7 +12,7 @@
           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
+        <BaseSecondaryButton
           as="input"
           type="button"
           class="rounded-lg"
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="mt-2">
-      <BaseButton
+      <BasePrimaryButton
         as="input"
         type="button"
         class="rounded-lg"

src/app/components/Form/NullNumberField.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex items-center">
+    <FormLabel :for="id">
+      {{ label }}
+    </FormLabel>
+    <BaseTooltip v-if="description" :text="description">
+      <IconsInfo class="size-4" />
+    </BaseTooltip>
+  </div>
+  <BaseInput :id="id" v-model.number="data" :name="id" type="number" />
+</template>
+
+<script lang="ts" setup>
+defineProps<{ id: string; label: string; description?: string }>();
+
+const data = defineModel<number | null>({
+  set(value) {
+    const temp = value ?? null;
+    if (temp === 0) {
+      return null;
+    }
+    if ((temp as string | null) === '') {
+      return null;
+    }
+    return temp;
+  },
+});
+</script>

src/app/components/Form/PrimaryActionField.vue

@@ -0,0 +1,16 @@
+<template>
+  <input
+    :value="label"
+    :type="type ?? 'button'"
+    class="col-span-2 rounded-lg border-2 border-red-800 bg-red-800 py-2 text-white hover:border-red-600 hover:bg-red-600 focus:border-red-800 focus:outline-0 focus:ring-0"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { InputTypeHTMLAttribute } from 'vue';
+
+defineProps<{
+  label: string;
+  type?: InputTypeHTMLAttribute;
+}>();
+</script>

src/app/components/Icons/MagnifyingGlass.vue

@@ -0,0 +1,7 @@
+<template>
+  <MagnifyingGlassIcon />
+</template>
+
+<script lang="ts" setup>
+import MagnifyingGlassIcon from '@heroicons/vue/24/outline/esm/MagnifyingGlassIcon';
+</script>

src/app/components/Panel/head/Boat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-shrink-0 space-x-1 md:block">
+  <div class="flex flex-shrink-0 items-center space-x-2">
     <slot />
   </div>
 </template>

src/app/components/Ui/Footer.vue

@@ -7,7 +7,7 @@
         href="https://github.com/wg-easy/wg-easy"
         >WireGuard Easy</a
       >
-      ({{ globalStore.information?.currentRelease }}) © 2021-2025 by
+      ({{ globalStore.information?.currentRelease }}) © 2021-2026 by
       <a
         class="hover:underline"
         target="_blank"

src/app/middleware/auth.global.ts

@@ -4,25 +4,27 @@ export default defineNuxtRouteMiddleware(async (to) => {
     return;
   }
 
+  const event = useRequestEvent();
+
   const authStore = useAuthStore();
-  const userData = await authStore.getSession();
+  authStore.userData = await authStore.getSession(event);
 
   // skip login if already logged in
   if (to.path === '/login') {
-    if (userData?.username) {
+    if (authStore.userData?.username) {
       return navigateTo('/', { redirectCode: 302 });
     }
     return;
   }
 
   // Require auth for every page other than Login
-  if (!userData?.username) {
+  if (!authStore.userData?.username) {
     return navigateTo('/login', { redirectCode: 302 });
   }
 
   // Check for admin access
   if (to.path.startsWith('/admin')) {
-    if (!hasPermissions(userData, 'admin', 'any')) {
+    if (!hasPermissions(authStore.userData, 'admin', 'any')) {
       return abortNavigation('Not allowed to access Admin Panel');
     }
   }

src/app/pages/admin.vue

@@ -13,14 +13,15 @@
               v-for="(item, index) in menuItems"
               :key="index"
               :to="`/admin/${item.id}`"
-              active-class="bg-red-800 rounded"
+              class="group rounded"
+              active-class="bg-red-800 active"
             >
-              <BaseButton
+              <BaseSecondaryButton
                 as="span"
-                class="w-full cursor-pointer rounded p-2 font-medium transition-colors duration-200 hover:bg-red-800 dark:text-neutral-200"
+                class="w-full font-medium group-[.active]:text-white"
               >
                 {{ item.name }}
-              </BaseButton>
+              </BaseSecondaryButton>
             </NuxtLink>
           </div>
         </div>
@@ -37,25 +38,23 @@
 </template>
 
 <script setup lang="ts">
-const authStore = useAuthStore();
-authStore.update();
-
 const { t } = useI18n();
 
 const route = useRoute();
 
-const menuItems = [
+const menuItems = computed(() => [
   { 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}`) ?? defaultItem
+    menuItems.value.find((item) => route.path === `/admin/${item.id}`) ??
+    defaultItem
   );
 });
 </script>

src/app/pages/admin/config.vue

@@ -47,16 +47,73 @@
           :description="$t('admin.config.persistentKeepaliveDesc')"
         />
       </FormGroup>
+      <FormGroup v-if="globalStore.information?.isAwg">
+        <FormHeading>{{ $t('awg.obfuscationParameters') }}</FormHeading>
+
+        <FormNullNumberField
+          id="jC"
+          v-model="data.defaultJC"
+          :label="$t('awg.jCLabel')"
+          :description="$t('awg.jCDescription')"
+        />
+        <FormNullNumberField
+          id="jMin"
+          v-model="data.defaultJMin"
+          :label="$t('awg.jMinLabel')"
+          :description="$t('awg.jMinDescription')"
+        />
+        <FormNullNumberField
+          id="jMax"
+          v-model="data.defaultJMax"
+          :label="$t('awg.jMaxLabel')"
+          :description="$t('awg.jMaxDescription')"
+        />
+
+        <div class="col-span-full text-sm">* {{ $t('awg.mtuNote') }}</div>
+
+        <FormNullTextField
+          id="i1"
+          v-model="data.defaultI1"
+          :label="$t('awg.i1Label')"
+          :description="$t('awg.i1Description')"
+        />
+        <FormNullTextField
+          id="i2"
+          v-model="data.defaultI2"
+          :label="$t('awg.i2Label')"
+          :description="$t('awg.i2Description')"
+        />
+        <FormNullTextField
+          id="i3"
+          v-model="data.defaultI3"
+          :label="$t('awg.i3Label')"
+          :description="$t('awg.i3Description')"
+        />
+        <FormNullTextField
+          id="i4"
+          v-model="data.defaultI4"
+          :label="$t('awg.i4Label')"
+          :description="$t('awg.i4Description')"
+        />
+        <FormNullTextField
+          id="i5"
+          v-model="data.defaultI5"
+          :label="$t('awg.i5Label')"
+          :description="$t('awg.i5Description')"
+        />
+      </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>
 </template>
 
 <script lang="ts" setup>
+const globalStore = useGlobalStore();
+
 const { data: _data, refresh } = await useFetch(`/api/admin/userconfig`, {
   method: 'get',
 });

src/app/pages/admin/general.vue

@@ -32,8 +32,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/hooks.vue

@@ -25,8 +25,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/interface.vue

@@ -21,17 +21,120 @@
           :description="$t('admin.interface.deviceDesc')"
         />
       </FormGroup>
+      <FormGroup v-if="globalStore.information?.isAwg">
+        <FormHeading>{{ $t('awg.obfuscationParameters') }}</FormHeading>
+
+        <FormNullNumberField
+          id="jC"
+          v-model="data.jC"
+          :label="$t('awg.jCLabel')"
+          :description="$t('awg.jCDescription')"
+        />
+        <FormNullNumberField
+          id="jMin"
+          v-model="data.jMin"
+          :label="$t('awg.jMinLabel')"
+          :description="$t('awg.jMinDescription')"
+        />
+        <FormNullNumberField
+          id="jMax"
+          v-model="data.jMax"
+          :label="$t('awg.jMaxLabel')"
+          :description="$t('awg.jMaxDescription')"
+        />
+        <FormNullNumberField
+          id="s1"
+          v-model="data.s1"
+          :label="$t('awg.s1Label')"
+          :description="$t('awg.s1Description')"
+        />
+        <FormNullNumberField
+          id="s2"
+          v-model="data.s2"
+          :label="$t('awg.s2Label')"
+          :description="$t('awg.s2Description')"
+        />
+
+        <div class="col-span-full text-sm">* {{ $t('awg.mtuNote') }}</div>
+
+        <FormNullNumberField
+          id="s3"
+          v-model="data.s3"
+          :label="$t('awg.s3Label')"
+          :description="$t('awg.s3Description')"
+        />
+        <FormNullNumberField
+          id="s4"
+          v-model="data.s4"
+          :label="$t('awg.s4Label')"
+          :description="$t('awg.s4Description')"
+        />
+        <FormNullTextField
+          id="i1"
+          v-model="data.i1"
+          :label="$t('awg.i1Label')"
+          :description="$t('awg.i1Description')"
+        />
+        <FormNullTextField
+          id="i2"
+          v-model="data.i2"
+          :label="$t('awg.i2Label')"
+          :description="$t('awg.i2Description')"
+        />
+        <FormNullTextField
+          id="i3"
+          v-model="data.i3"
+          :label="$t('awg.i3Label')"
+          :description="$t('awg.i3Description')"
+        />
+        <FormNullTextField
+          id="i4"
+          v-model="data.i4"
+          :label="$t('awg.i4Label')"
+          :description="$t('awg.i4Description')"
+        />
+        <FormNullTextField
+          id="i5"
+          v-model="data.i5"
+          :label="$t('awg.i5Label')"
+          :description="$t('awg.i5Description')"
+        />
+        <FormNullNumberField
+          id="h1"
+          v-model="data.h1"
+          :label="$t('awg.h1Label')"
+          :description="$t('awg.h1Description')"
+        />
+        <FormNullNumberField
+          id="h2"
+          v-model="data.h2"
+          :label="$t('awg.h2Label')"
+          :description="$t('awg.h2Description')"
+        />
+        <FormNullNumberField
+          id="h3"
+          v-model="data.h3"
+          :label="$t('awg.h3Label')"
+          :description="$t('awg.h3Description')"
+        />
+        <FormNullNumberField
+          id="h4"
+          v-model="data.h4"
+          :label="$t('awg.h4Label')"
+          :description="$t('awg.h4Description')"
+        />
+      </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
         <AdminCidrDialog
           trigger-class="col-span-2"
           :ipv4-cidr="data.ipv4Cidr"
           :ipv6-cidr="data.ipv6Cidr"
           @change="changeCidr"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.changeCidr')"
             class="w-full"
             tabindex="-1"
@@ -41,7 +144,7 @@
           trigger-class="col-span-2"
           @restart="restartInterface"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.restart')"
             class="w-full"
             tabindex="-1"
@@ -53,6 +156,8 @@
 </template>
 
 <script setup lang="ts">
+const globalStore = useGlobalStore();
+
 const { t } = useI18n();
 
 const { data: _data, refresh } = await useFetch(`/api/admin/interface`, {

src/app/pages/clients/[id].vue

@@ -39,6 +39,12 @@
               v-model="data.ipv6Address"
               label="IPv6"
             />
+            <FormInfoField
+              id="endpoint"
+              :data="data.endpoint ?? $t('client.notConnected')"
+              :label="$t('client.endpoint')"
+              :description="$t('client.endpointDesc')"
+            />
           </FormGroup>
           <FormGroup>
             <FormHeading :description="$t('client.allowedIpsDesc')">
@@ -76,6 +82,61 @@
               :label="$t('general.persistentKeepalive')"
             />
           </FormGroup>
+          <FormGroup v-if="globalStore.information?.isAwg">
+            <FormHeading>{{ $t('awg.obfuscationParameters') }}</FormHeading>
+
+            <FormNullNumberField
+              id="jC"
+              v-model="data.jC"
+              :label="$t('awg.jCLabel')"
+              :description="$t('awg.jCDescription')"
+            />
+            <FormNullNumberField
+              id="Jmin"
+              v-model="data.jMin"
+              :label="$t('awg.jMinLabel')"
+              :description="$t('awg.jMinDescription')"
+            />
+            <FormNullNumberField
+              id="Jmax"
+              v-model="data.jMax"
+              :label="$t('awg.jMaxLabel')"
+              :description="$t('awg.jMaxDescription')"
+            />
+
+            <div class="col-span-full text-sm">* {{ $t('awg.mtuNote') }}</div>
+
+            <FormNullTextField
+              id="i1"
+              v-model="data.i1"
+              :label="$t('awg.i1Label')"
+              :description="$t('awg.i1Description')"
+            />
+            <FormNullTextField
+              id="i2"
+              v-model="data.i2"
+              :label="$t('awg.i2Label')"
+              :description="$t('awg.i2Description')"
+            />
+            <FormNullTextField
+              id="i3"
+              v-model="data.i3"
+              :label="$t('awg.i3Label')"
+              :description="$t('awg.i3Description')"
+            />
+            <FormNullTextField
+              id="i4"
+              v-model="data.i4"
+              :label="$t('awg.i4Label')"
+              :description="$t('awg.i4Description')"
+            />
+            <FormNullTextField
+              id="i5"
+              v-model="data.i5"
+              :label="$t('awg.i5Label')"
+              :description="$t('awg.i5Description')"
+            />
+          </FormGroup>
           <FormGroup>
             <FormHeading :description="$t('client.hooksDescription')">
               {{ $t('client.hooks') }}
@@ -107,21 +168,36 @@
           </FormGroup>
           <FormGroup>
             <FormHeading>{{ $t('form.actions') }}</FormHeading>
-            <FormActionField type="submit" :label="$t('form.save')" />
-            <FormActionField :label="$t('form.revert')" @click="revert" />
+            <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField
+              :label="$t('form.revert')"
+              @click="revert"
+            />
             <ClientsDeleteDialog
               trigger-class="col-span-2"
               :client-name="data.name"
               @delete="deleteClient"
             >
-              <FormActionField
-                label="Delete"
+              <FormSecondaryActionField
+                :label="$t('client.delete')"
                 class="w-full"
                 type="button"
                 tabindex="-1"
                 as="span"
               />
             </ClientsDeleteDialog>
+            <ClientsConfigDialog
+              trigger-class="col-span-2"
+              :client-id="data.id"
+            >
+              <FormSecondaryActionField
+                :label="$t('client.viewConfig')"
+                class="w-full"
+                type="button"
+                tabindex="-1"
+                as="span"
+              />
+            </ClientsConfigDialog>
           </FormGroup>
         </FormElement>
       </PanelBody>
@@ -130,8 +206,7 @@
 </template>
 
 <script lang="ts" setup>
-const authStore = useAuthStore();
-authStore.update();
+const globalStore = useGlobalStore();
 
 const route = useRoute();
 const id = route.params.id as string;

src/app/pages/index.vue

@@ -4,6 +4,7 @@
       <PanelHead>
         <PanelHeadTitle :text="$t('pages.clients')" />
         <PanelHeadBoat>
+          <ClientsSearch />
           <ClientsSort />
           <ClientsNew />
         </PanelHeadBoat>
@@ -28,9 +29,6 @@
 </template>
 
 <script setup lang="ts">
-const authStore = useAuthStore();
-authStore.update();
-
 const globalStore = useGlobalStore();
 const clientsStore = useClientsStore();
 

src/app/pages/login.vue

@@ -67,9 +67,6 @@
 </template>
 
 <script setup lang="ts">
-const authStore = useAuthStore();
-authStore.update();
-
 const toast = useToast();
 const { t } = useI18n();
 

src/app/pages/me.vue

@@ -18,7 +18,7 @@
               v-model="email"
               :label="$t('user.email')"
             />
-            <FormActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField type="submit" :label="$t('form.save')" />
           </FormGroup>
         </FormElement>
         <FormElement @submit.prevent="updatePassword">
@@ -42,7 +42,7 @@
               autocomplete="new-password"
               :label="$t('general.confirmPassword')"
             />
-            <FormActionField
+            <FormSecondaryActionField
               type="submit"
               :label="$t('general.updatePassword')"
             />
@@ -55,7 +55,10 @@
               v-if="!authStore.userData?.totpVerified && !twofa"
               class="col-span-2 flex flex-col"
             >
-              <FormActionField :label="$t('me.enable2fa')" @click="setup2fa" />
+              <FormSecondaryActionField
+                :label="$t('me.enable2fa')"
+                @click="setup2fa"
+              />
             </div>
             <div
               v-if="!authStore.userData?.totpVerified && twofa"
@@ -81,7 +84,7 @@
                   v-model="code"
                   :label="$t('general.2faCode')"
                 />
-                <FormActionField
+                <FormSecondaryActionField
                   :label="$t('me.enable2fa')"
                   @click="enable2fa"
                 />
@@ -101,7 +104,7 @@
                 type="password"
                 autocomplete="current-password"
               />
-              <FormActionField
+              <FormSecondaryActionField
                 :label="$t('me.disable2fa')"
                 @click="disable2fa"
               />
@@ -117,7 +120,6 @@
 import { encodeQR } from 'qr';
 
 const authStore = useAuthStore();
-authStore.update();
 
 const name = ref(authStore.userData?.name);
 const email = ref(authStore.userData?.email);

src/app/pages/setup/1.vue

@@ -4,7 +4,9 @@
       {{ $t('setup.welcomeDesc') }}
     </p>
     <NuxtLink to="/setup/2" class="mt-8">
-      <BaseButton as="span">{{ $t('general.continue') }}</BaseButton>
+      <BasePrimaryButton as="span">
+        {{ $t('general.continue') }}
+      </BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>

src/app/pages/setup/2.vue

@@ -29,7 +29,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('setup.createAccount') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('setup.createAccount') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>

src/app/pages/setup/3.vue

@@ -5,14 +5,14 @@
     </p>
     <div class="mt-4 flex justify-center gap-3">
       <NuxtLink to="/setup/4" class="w-20">
-        <BaseButton as="span" class="w-full justify-center">
+        <BasePrimaryButton as="span" class="w-full justify-center">
           {{ $t('general.no') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </NuxtLink>
       <NuxtLink to="/setup/migrate" class="w-20">
-        <BaseButton as="span" class="w-full justify-center">
+        <BaseSecondaryButton as="span" class="w-full justify-center">
           {{ $t('general.yes') }}
-        </BaseButton>
+        </BaseSecondaryButton>
       </NuxtLink>
     </div>
   </div>

src/app/pages/setup/4.vue

@@ -23,7 +23,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('general.continue') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>

src/app/pages/setup/migrate.vue

@@ -8,7 +8,9 @@
       <input id="migration" type="file" @change="onChangeFile" />
     </div>
     <div class="mt-4">
-      <BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton>
+      <BasePrimaryButton @click="submit">
+        {{ $t('setup.upload') }}
+      </BasePrimaryButton>
     </div>
   </div>
 </template>

src/app/pages/setup/success.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col items-center">
     <p>{{ $t('setup.successful') }}</p>
     <NuxtLink to="/login" class="mt-4">
-      <BaseButton as="span">{{ $t('login.signIn') }}</BaseButton>
+      <BasePrimaryButton as="span">{{ $t('login.signIn') }}</BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>

src/app/plugins/apexcharts.client.ts

@@ -1,5 +1,7 @@
 import VueApexCharts from 'vue3-apexcharts';
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(VueApexCharts);
+  // https://github.com/apexcharts/vue3-apexcharts/issues/141
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  nuxtApp.vueApp.use(VueApexCharts as any);
 });

src/app/stores/auth.ts

@@ -1,18 +1,25 @@
-export const useAuthStore = defineStore('Auth', () => {
-  const { data: userData, refresh: update } = useFetch('/api/session', {
-    method: 'get',
-  });
+import type { H3Event } from 'h3';
+import type { SharedPublicUser } from '~~/shared/utils/permissions';
 
-  async function getSession() {
+export const useAuthStore = defineStore('Auth', () => {
+  const userData = useState<SharedPublicUser | null>('user-data', () => null);
+
+  async function getSession(event?: H3Event) {
+    const fetch = event?.$fetch || $fetch;
     try {
-      const { data } = await useFetch('/api/session', {
+      const data = await fetch('/api/session', {
         method: 'get',
       });
-      return data.value;
+      return data;
     } catch {
       return null;
     }
   }
 
+  async function update() {
+    const data = await getSession();
+    userData.value = data;
+  }
+
   return { userData, update, getSession };
 });

src/app/stores/clients.ts

@@ -31,8 +31,13 @@ export const useClientsStore = defineStore('Clients', () => {
   const clients = ref<null | LocalClient[]>(null);
   const clientsPersist = ref<Record<string, ClientPersist>>({});
 
+  const searchParams = ref({
+    filter: undefined as string | undefined,
+  });
+
   const { data: _clients, refresh: _refresh } = useFetch('/api/client', {
     method: 'get',
+    params: searchParams,
   });
 
   // TODO: rewrite
@@ -61,10 +66,11 @@ export const useClientsStore = defineStore('Clients', () => {
       const clientPersist = clientsPersist.value[client.id]!;
 
       // Debug
-      // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
-      // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
-      // client.latestHandshakeAt = new Date();
-      // this.requiresPassword = true;
+      /* client.transferRx =
+        clientPersist.transferRxPrevious + Math.random() * 1000;
+      client.transferTx =
+        clientPersist.transferTxPrevious + Math.random() * 1000;
+      client.latestHandshakeAt = new Date().toISOString(); */
 
       clientPersist.transferRxCurrent =
         (client.transferRx ?? 0) - clientPersist.transferRxPrevious;
@@ -120,6 +126,7 @@ export const useClientsStore = defineStore('Clients', () => {
       };
     });
 
+    // TODO: move sort to backend
     if (transformedClients !== undefined) {
       transformedClients = sortByProperty(
         transformedClients,
@@ -130,5 +137,11 @@ export const useClientsStore = defineStore('Clients', () => {
 
     clients.value = transformedClients ?? null;
   }
-  return { clients, clientsPersist, refresh, _clients };
+
+  function setSearchQuery(filter: string) {
+    clients.value = null;
+    searchParams.value.filter = filter || undefined;
+  }
+
+  return { clients, clientsPersist, refresh, _clients, setSearchQuery };
 });