fix default peer creation on login (#189)

Bumps [gorm.io/driver/mysql](https://github.com/go-gorm/mysql) from 1.5.2 to 1.5.6.
- [Commits](https://github.com/go-gorm/mysql/compare/v1.5.2...v1.5.6)

---
updated-dependencies:
- dependency-name: gorm.io/driver/mysql
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.circleci/config.yml

@@ -1,55 +1,67 @@
 version: 2.1
+
 jobs:
-  build:
-    working_directory: ~/repo
-    docker:
-      - image: circleci/golang:1.16.7
+  build-latest:
     steps:
       - checkout
       - restore_cache:
           keys:
-            - go-mod-v4-{{ checksum "go.sum" }}
+            - go-mod-latest-v4-{{ checksum "go.sum" }}
+      - run:
+          name: Build Frontend
+          command: |
+            make frontend
       - run:
           name: Install Dependencies
           command: |
-            make dep
+            make build-dependencies
       - save_cache:
-          key: go-mod-v4-{{ checksum "go.sum" }}
+          key: go-mod-latest-v4-{{ checksum "go.sum" }}
           paths:
-            - "/go/pkg/mod"
+            - "~/go/pkg/mod"
       - run:
           name: Build AMD64
           command: |
             VERSION=$CIRCLE_BRANCH
             if [ ! -z "${CIRCLE_TAG}" ]; then VERSION=$CIRCLE_TAG; fi
-            make ENV_BUILD_IDENTIFIER=$VERSION ENV_BUILD_VERSION=$(echo $CIRCLE_SHA1 | cut -c1-7) build
+            make ENV_BUILD_IDENTIFIER=$VERSION ENV_BUILD_VERSION=$(echo $CIRCLE_SHA1 | cut -c1-7) build-amd64
       - run:
           name: Install Cross-Platform Dependencies
           command: |
-            sudo -E apt-get -yq --no-install-suggests --no-install-recommends --force-yes install gcc-arm-linux-gnueabi libc6-dev-armel-cross gcc-arm-linux-gnueabihf libc6-dev-armhf-cross gcc-aarch64-linux-gnu libc6-dev-arm64-cross
+            sudo apt-get update
+            sudo -E apt-get -yq --no-install-suggests --no-install-recommends --force-yes install gcc-aarch64-linux-gnu libc6-dev-arm64-cross
+            sudo -E apt-get -yq --no-install-suggests --no-install-recommends --force-yes install gcc-arm-linux-gnueabi libc6-dev-armel-cross gcc-arm-linux-gnueabihf libc6-dev-armhf-cross
             sudo ln -s /usr/include/asm-generic /usr/include/asm
+      - run:
+          name: Build ARM64
+          command: |
+            VERSION=$CIRCLE_BRANCH
+            if [ ! -z "${CIRCLE_TAG}" ]; then VERSION=$CIRCLE_TAG; fi
+            make ENV_BUILD_IDENTIFIER=$VERSION ENV_BUILD_VERSION=$(echo $CIRCLE_SHA1 | cut -c1-7) build-arm64
       - run:
           name: Build ARM
           command: |
             VERSION=$CIRCLE_BRANCH
             if [ ! -z "${CIRCLE_TAG}" ]; then VERSION=$CIRCLE_TAG; fi
-            make ENV_BUILD_IDENTIFIER=$VERSION ENV_BUILD_VERSION=$(echo $CIRCLE_SHA1 | cut -c1-7) build-cross-plat
+            make ENV_BUILD_IDENTIFIER=$VERSION ENV_BUILD_VERSION=$(echo $CIRCLE_SHA1 | cut -c1-7) build-arm
       - store_artifacts:
           path: ~/repo/dist
       - run:
           name: "Publish Release on GitHub"
           command: |
             if [ ! -z "${CIRCLE_TAG}" ]; then
-               go get github.com/tcnksm/ghr
+               go install github.com/tcnksm/ghr@latest
                ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} -replace $CIRCLE_TAG ~/repo/dist
             fi
+    working_directory: ~/repo
+    docker:
+      - image: cimg/go:1.21-node
 
 workflows:
   build-and-release:
     jobs:
       #--------------- BUILD ---------------#
-      - build:
-          name: build
+      - build-latest:
           filters:
             tags:
               only: /^v.*/

.dockerignore

@@ -0,0 +1,5 @@
+.github/
+**/.vscode/
+docs/
+frontend/node_modules/
+internal/app/api/core/frontend-dist

.github/dependabot.yml

@@ -0,0 +1,20 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+    groups:
+      actions:
+        patterns:
+          - "*"
+
+  - package-ecosystem: gomod
+    directory: /
+    schedule:
+      interval: weekly

.github/workflows/codeql-analysis.yml

@@ -24,22 +24,25 @@ jobs:
   analyze:
     name: Analyze
     runs-on: ubuntu-latest
+    permissions:
+      # required for all workflows
+      security-events: write
 
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'go', 'javascript' ]
+        language: [ 'go', 'javascript-typescript' ]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +53,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -64,4 +67,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v3

.github/workflows/docker-publish.yml

@@ -1,123 +1,79 @@
 name: Docker
 
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
 on:
+  pull_request:
+    branches: [master]
   push:
-    branches: [ master ]
+    branches: [master, stable]
     # Publish vX.X.X tags as releases.
-    tags: [ 'v*.*.*' ]
-
-env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
+    tags: ["v*.*.*"]
 
+permissions:
+  contents: read
+  packages: write
 
 jobs:
-  build-dockerhub:
-    name: Push Docker image to Docker Hub
+  build-n-push:
+    name: Build and Push
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
 
       - name: Get Version
         shell: bash
-        run: |
-          echo "::set-output name=identifier::$(echo ${GITHUB_REF##*/})"
-          echo "::set-output name=hash::$(echo ${GITHUB_SHA} | cut -c1-7)"
-        id: get_version
+        run: echo "BUILD_VERSION=${GITHUB_REF_NAME}-${GITHUB_SHA::7}" >> $GITHUB_ENV
 
-      - name: Log in to Docker Hub
+      - name: Login to Docker Hub
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v3
-        with:
-          images: h44z/wg-portal
-          flavor: |
-            latest=true
-            prefix=
-            suffix=
-          tags: |
-            type=ref,event=branch
-            type=ref,event=tag
-            type=semver,pattern={{version}}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          build-args: |
-            BUILD_IDENTIFIER=${{ steps.get_version.outputs.identifier }}
-            BUILD_VERSION=${{ steps.get_version.outputs.hash }}
-
-  build-github:
-    name: Push Docker image to Github Container Registry
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      - name: Get Version
-        shell: bash
-        run: |
-          echo "::set-output name=identifier::$(echo ${GITHUB_REF##*/})"
-          echo "::set-output name=hash::$(echo ${GITHUB_SHA} | cut -c1-7)"
-        id: get_version
-
-      # Login against a Docker registry except on PR
-      # https://github.com/docker/login-action
-      - name: Log into registry ${{ env.REGISTRY }}
+      - name: Login to GitHub Container Registry
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
-          registry: ${{ env.REGISTRY }}
+          registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
+      - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v5
         with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          images: |
+            wgportal/wg-portal
+            ghcr.io/${{ github.repository }}
           flavor: |
-            latest=true
+            latest=auto
             prefix=
             suffix=
           tags: |
-            type=ref,event=branch
             type=ref,event=tag
+            type=ref,event=branch
+            type=ref,event=pr
             type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern=v{{major}}
+            # set latest tag for default branch
+            type=raw,value=latest,enable={{is_default_branch}}
 
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
       - name: Build and push Docker image
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v5
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          annotations: ${{ steps.meta.outputs.annotations }}
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
           build-args: |
-            BUILD_IDENTIFIER=${{ steps.get_version.outputs.identifier }}
-            BUILD_VERSION=${{ steps.get_version.outputs.hash }}
+            BUILD_VERSION=${{ env.BUILD_VERSION }}

.github/workflows/pages.yml

@@ -0,0 +1,22 @@
+name: github-pages
+on:
+  push:
+    branches:
+      - master
+permissions:
+  contents: write
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: 3.x
+      - uses: actions/cache@v4
+        with:
+          key: ${{ github.ref }}
+          path: .cache
+      - run: pip install mkdocs-material
+      - run: pip install pillow cairosvg
+      - run: mkdocs gh-deploy --force

.gitignore

@@ -31,6 +31,12 @@ data/
 ssh.key
 .testCoverage.txt
 wg_portal.db
+sqlite.db
 swagger.json
 swagger.yaml
-/config.yml
+/config.yml
+/config/
+venv/
+.cache/
+# ignore local frontend dist directory
+internal/app/api/core/frontend-dist

.run/swag_build_tool.run.xml

@@ -0,0 +1,11 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="swag_build_tool" type="GoApplicationRunConfiguration" factoryName="Go Application">
+    <module name="wg-portal" />
+    <working_directory value="$PROJECT_DIR$" />
+    <kind value="PACKAGE" />
+    <package value="github.com/h44z/wg-portal/cmd/api_build_tool" />
+    <directory value="$PROJECT_DIR$" />
+    <filePath value="$PROJECT_DIR$/internal/ports/api/build_tool/main.go" />
+    <method v="2" />
+  </configuration>
+</component>

.run/wg-portal-migrate.run.xml

@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="wg-portal-migrate" type="GoApplicationRunConfiguration" factoryName="Go Application">
+    <module name="wg-portal" />
+    <working_directory value="$PROJECT_DIR$" />
+    <parameters value="-migrateFrom=wg_portal.db" />
+    <envs>
+      <env name="SESSION_SECRET" value="extremlybad" />
+      <env name="LOG_LEVEL" value="trace" />
+    </envs>
+    <sudo value="true" />
+    <kind value="PACKAGE" />
+    <package value="github.com/h44z/wg-portal/cmd/wg-portal" />
+    <directory value="$PROJECT_DIR$" />
+    <filePath value="$PROJECT_DIR$/cmd/wg-portal/main.go" />
+    <method v="2" />
+  </configuration>
+</component>

.run/wg-portal.run.xml

@@ -0,0 +1,16 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="wg-portal" type="GoApplicationRunConfiguration" factoryName="Go Application">
+    <module name="wg-portal" />
+    <working_directory value="$PROJECT_DIR$" />
+    <envs>
+      <env name="SESSION_SECRET" value="extremlybad" />
+      <env name="LOG_LEVEL" value="trace" />
+    </envs>
+    <sudo value="true" />
+    <kind value="PACKAGE" />
+    <package value="github.com/h44z/wg-portal/cmd/wg-portal" />
+    <directory value="$PROJECT_DIR$" />
+    <filePath value="$PROJECT_DIR$/cmd/wg-portal/main.go" />
+    <method v="2" />
+  </configuration>
+</component>

Dockerfile

@@ -1,59 +1,60 @@
 # Dockerfile References: https://docs.docker.com/engine/reference/builder/
 # This dockerfile uses a multi-stage build system to reduce the image footprint.
 
-######-
-# Start from the latest golang base image as builder image (only used to compile the code)
-######-
-FROM golang:1.16 as builder
-
-ARG BUILD_IDENTIFIER
-ENV ENV_BUILD_IDENTIFIER=$BUILD_IDENTIFIER
-
-ARG BUILD_VERSION
-ENV ENV_BUILD_VERSION=$BUILD_VERSION
-
-RUN mkdir /build
-
-# Copy the source from the current directory to the Working Directory inside the container
-ADD . /build/
-
-# Set the Current Working Directory inside the container
+######
+# Build frontend
+######
+FROM --platform=${BUILDPLATFORM} node:lts-alpine as frontend
+# Set the working directory
 WORKDIR /build
-
-# Workaround for failing travis-ci builds
-RUN rm -rf ~/go; rm -rf go.sum
-
 # Download dependencies
-RUN curl -L https://git.prolicht.digital/pub/healthcheck/-/releases/v1.0.1/downloads/binaries/hc -o /build/hc; \
-    chmod +rx /build/hc; \
-    echo "Building version: $ENV_BUILD_IDENTIFIER-$ENV_BUILD_VERSION"
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci
+# Set dist output directory
+ENV DIST_OUT_DIR="dist"
+# Copy the sources to the working directory
+COPY frontend .
+# Build the frontend
+RUN npm run build
 
-# Build the Go app
-RUN go clean -modcache; go mod tidy; make build-docker
-
-######-
-# Here starts the main image
-######-
-FROM scratch
+######
+# Build backend
+######
+FROM --platform=${BUILDPLATFORM} golang:1.21-alpine as builder
+# Set the working directory
+WORKDIR /build
+# Download dependencies
+COPY go.mod go.sum ./
+RUN go mod download
+# Copy the sources to the working directory
+COPY . .
+# Copy the frontend build result
+COPY --from=frontend /build/dist/ ./internal/app/api/core/frontend-dist/
+# Set the build version from arguments
+ARG BUILD_VERSION
+# Split to cross-platform build
+ARG TARGETARCH
+# Build the application
+RUN CGO_ENABLED=0 GOARCH=${TARGETARCH} go build -o /build/dist/wg-portal \
+  -ldflags "-w -s -extldflags '-static' -X 'github.com/h44z/wg-portal/internal.Version=${BUILD_VERSION}'" \
+  -tags netgo \
+  cmd/wg-portal/main.go
 
+######
+# Final image
+######
+FROM alpine:3.19
+# Install OS-level dependencies
+RUN apk add --no-cache bash curl iptables nftables openresolv
 # Setup timezone
 ENV TZ=Europe/Vienna
-
-# Import linux stuff from builder.
-COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/
-COPY --from=builder /etc/passwd /etc/passwd
-COPY --from=builder /etc/group /etc/group
-
-# Import healthcheck binary
-COPY --from=builder /build/hc /app/hc
-
 # Copy binaries
-COPY --from=builder /build/dist/wgportal /app/wgportal
-
+COPY --from=builder /build/dist/wg-portal /app/wg-portal
 # Set the Current Working Directory inside the container
 WORKDIR /app
-
+# by default, the web-portal is reachable on port 8888
+EXPOSE 8888/tcp
+# the database and config file can be mounted from the host
+VOLUME [ "/app/data", "/app/config" ]
 # Command to run the executable
-CMD [ "/app/wgportal" ]
-
-HEALTHCHECK --interval=30s --timeout=5s --start-period=30s --retries=3 CMD [ "/app/hc", "http://localhost:11223/health" ]
+ENTRYPOINT [ "/app/wg-portal" ]

LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2020 Christoph Haas
+Copyright (c) 2020-2023 Christoph Haas
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

Makefile

@@ -5,63 +5,126 @@ GOFILES:=$(shell go list ./... | grep -v /vendor/)
 BUILDDIR=dist
 BINARIES=$(subst cmd/,,$(wildcard cmd/*))
 IMAGE=h44z/wg-portal
+NPMCMD=npm
 
-.PHONY: all test clean phony
+all: help
 
-all: dep build
+.PHONY: help
+help:
+	@echo "Usage:"
+	@sed -n 's/^#>//p' ${MAKEFILE_LIST} | column -t -s ':' |  sed -e 's/^/ /'  # user commands (#>)
+	@echo ""
+	@echo "Advanced commands:"
+	@sed -n 's/^#<//p' ${MAKEFILE_LIST} | column -t -s ':' |  sed -e 's/^/ /'  # internal commands (#<)
 
-build: dep $(addsuffix -amd64,$(addprefix $(BUILDDIR)/,$(BINARIES)))
-	cp scripts/wg-portal.service $(BUILDDIR)
-	cp scripts/wg-portal.env $(BUILDDIR)
+########################################################################################
+##
+## DEVELOPER / USER TARGETS
+##
+########################################################################################
 
-build-cross-plat: dep build $(addsuffix -arm,$(addprefix $(BUILDDIR)/,$(BINARIES))) $(addsuffix -arm64,$(addprefix $(BUILDDIR)/,$(BINARIES)))
-	cp scripts/wg-portal.service $(BUILDDIR)
-	cp scripts/wg-portal.env $(BUILDDIR)
-
-build-docker: dep
-	CGO_ENABLED=1 GOOS=linux GOARCH=amd64 $(GOCMD) build -o $(BUILDDIR)/wgportal -ldflags "-w -s -linkmode external -extldflags \"-static\" -X github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}" -tags netgo cmd/wg-portal/main.go
-
-dep:
-	$(GOCMD) mod download
-
-validate: dep
-	$(GOCMD) fmt $(GOFILES)
-	$(GOCMD) vet $(GOFILES)
-	$(GOCMD) test -race $(GOFILES)
-
-coverage: dep
-	$(GOCMD) fmt $(GOFILES)
-	$(GOCMD) test $(GOFILES) -v -coverprofile .testCoverage.txt
-	$(GOCMD) tool cover -func=.testCoverage.txt  # use total:\s+\(statements\)\s+(\d+.\d+\%) as Gitlab CI regextotal:\s+\(statements\)\s+(\d+.\d+\%)
-
-coverage-html: coverage
-	$(GOCMD) tool cover -html=.testCoverage.txt
-
-test: dep
-	$(GOCMD) test $(MODULENAME)/... -v -count=1
-
-clean:
-	$(GOCMD) clean $(GOFILES)
-	rm -rf .testCoverage.txt
-	rm -rf $(BUILDDIR)
-
-docker-build:
-	docker build -t $(IMAGE) .
-
-docker-push:
-	docker push $(IMAGE)
-
-api-docs:
-	cd internal/server; swag init --parseDependency --parseInternal --generalInfo api.go
+#> codegen: Re-generate autogenerated files (like API docs)
+.PHONY: codegen
+codegen: $(SUBDIRS)
+	cd internal; swag init --propertyStrategy pascalcase --parseInternal --generalInfo server/api.go --output server/docs/
 	$(GOCMD) fmt internal/server/docs/docs.go
 
-$(BUILDDIR)/%-amd64: cmd/%/main.go dep phony
-	GOOS=linux GOARCH=amd64 $(GOCMD) build -ldflags "-X github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}" -o $@ $<
+#> update: Update all dependencies
+.PHONY: update
+update:
+	@ $(GOCMD) get -u ./...
+	@ $(GOCMD) mod tidy
 
-# On arch-linux install aarch64-linux-gnu-gcc to crosscompile for arm64
-$(BUILDDIR)/%-arm64: cmd/%/main.go dep phony
-	CGO_ENABLED=1 CC=aarch64-linux-gnu-gcc GOOS=linux GOARCH=arm64 $(GOCMD) build -ldflags "-linkmode external -extldflags \"-static\" -X github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}" -o $@ $<
+#> format: Re-format the code
+.PHONY: format
+format:
+	@echo "Formatting code..."
+	@ $(GOCMD) fmt $(GOFILES)
 
-# On arch-linux install arm-linux-gnueabihf-gcc to crosscompile for arm
-$(BUILDDIR)/%-arm: cmd/%/main.go dep phony
-	CGO_ENABLED=1 CC=arm-linux-gnueabi-gcc GOOS=linux GOARCH=arm GOARM=7 $(GOCMD) build -ldflags "-linkmode external -extldflags \"-static\" -X github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}" -o $@ $<
+########################################################################################
+##
+## TESTING / CODE QUALITY TARGETS
+##
+########################################################################################
+
+#> test: Run all kinds of tests, except for integration tests
+.PHONY: test
+test: test-vet test-race
+
+#< test-vet: Static code analysis
+.PHONY: test-vet
+test-vet: build-dependencies
+	@$(GOCMD) vet $(GOFILES)
+
+#< test-race: Race condition test
+.PHONY: test-race
+test-race: build-dependencies
+	@$(GOCMD) test -race -short $(GOFILES)
+
+########################################################################################
+##
+## CI TARGETS
+##
+########################################################################################
+
+#< clean: Delete all generated executables and test files
+.PHONY: clean
+clean:
+	@rm -rf $(BUILDDIR)
+
+#< build: Build all executables (architecture depends on build system)
+.PHONY: build
+build: build-dependencies
+	CGO_ENABLED=0 $(GOCMD) build -o $(BUILDDIR)/wg-portal \
+	 -ldflags "-w -s -extldflags \"-static\" -X 'github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}'" \
+	 -tags netgo \
+	 cmd/wg-portal/main.go
+
+#< build-amd64: Build all executables for AMD64
+.PHONY: build-amd64
+build-amd64: build-dependencies
+	CGO_ENABLED=0 $(GOCMD) build -o $(BUILDDIR)/wg-portal-amd64 \
+	 -ldflags "-w -s -extldflags \"-static\" -X 'github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}'" \
+	 -tags netgo \
+	 cmd/wg-portal/main.go
+
+#< build-arm64: Build all executables for ARM64
+.PHONY: build-arm64
+build-arm64: build-dependencies
+	CGO_ENABLED=0 CC=aarch64-linux-gnu-gcc GOOS=linux GOARCH=arm64 $(GOCMD) build -o $(BUILDDIR)/wg-portal-arm64 \
+	 -ldflags "-w -s -extldflags \"-static\" -X 'github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}'" \
+	 -tags netgo \
+	 cmd/wg-portal/main.go
+
+#< build-arm: Build all executables for ARM32
+.PHONY: build-arm
+build-arm: build-dependencies
+	CGO_ENABLED=0 CC=arm-linux-gnueabi-gcc GOOS=linux GOARCH=arm GOARM=7 $(GOCMD) build -o $(BUILDDIR)/wg-portal-arm \
+	 -ldflags "-w -s -extldflags \"-static\" -X 'github.com/h44z/wg-portal/internal/server.Version=${ENV_BUILD_IDENTIFIER}-${ENV_BUILD_VERSION}'" \
+	 -tags netgo \
+	 cmd/wg-portal/main.go
+
+#< build-dependencies: Generate the output directory for compiled executables and download dependencies
+.PHONY: build-dependencies
+build-dependencies:
+	@$(GOCMD) mod download -x
+	@mkdir -p $(BUILDDIR)
+	cp scripts/wg-portal.service $(BUILDDIR)
+
+#< frontend: Build Vue.js frontend
+frontend: frontend-dependencies
+	cd frontend; $(NPMCMD) run build
+
+#< frontend-dependencies: Generate the output directory for compiled executables and download frontend dependencies
+.PHONY: frontend-dependencies
+frontend-dependencies:
+	@mkdir -p $(BUILDDIR)
+	cd frontend; $(NPMCMD) install
+
+#< build-docker: Build a docker image on the current host system
+.PHONY: build-docker
+build-docker:
+	docker build --progress=plain \
+	--build-arg BUILD_IDENTIFIER=${ENV_BUILD_IDENTIFIER} --build-arg BUILD_VERSION=${ENV_BUILD_VERSION} \
+ 	--build-arg TARGETPLATFORM=unknown . \
+	-t h44z/wg-portal:local

README-RASPBERRYPI.md

@@ -1,46 +0,0 @@
-# WireGuard Portal on Raspberry Pi
-
-This readme only contains a detailed explanation of how to set up the WireGuard Portal service on a raspberry pi (>= 3).
-
-## Setup
-
-You can download prebuild binaries from the [release page](https://github.com/h44z/wg-portal/releases). If you want to build the binary yourself,
-use the following instructions:
-
-### Building
-This section describes how to build the WireGuard Portal code.
-To compile the final binary, use the Makefile provided in the repository.
-As WireGuard Portal is written in Go, **golang >= 1.16** must be installed prior to building.
-
-```
-make build-cross-plat
-```
-
-The compiled binary and all necessary assets will be located in the dist folder.
-
-### Service setup
-
- - Copy the contents from the dist folder (or from the downloaded zip file) to `/opt/wg-portal`. You can choose a different path as well, but make sure to update the systemd service file accordingly.
- - Update the provided systemd `wg-portal.service` file:
-   - Make sure that the binary matches the system architecture. 
-     - There are three pre-build binaries available: wg-portal-**amd64**, wg-portal-**arm64** and wg-portal-**arm**.
-     - For a raspberry pi use the arm binary if you are using armv7l architecture. If armv8 is used, the arm64 version should work.
-   - Make sure that the paths to the binary and the working directory are set correctly (defaults to /opt/wg-portal/wg-portal-amd64):
-     - ConditionPathExists
-     - WorkingDirectory
-     - ExecStart
-     - EnvironmentFile
-   - Update environment variables in the `wg-portal.env` file to fit your needs
- - Make sure that the binary application file is executable
-   - `sudo chmod +x /opt/wg-portal/wg-portal-*`
- - Link the system service file to the correct folder:
-   - `sudo ln -s /opt/wg-portal/wg-portal.service /etc/systemd/system/wg-portal.service`
- - Reload the systemctl daemon:
-   - `sudo systemctl daemon-reload`
-    
-### Manage the service
-Once the service has been setup, you can simply manage the service using `systemctl`:
- - Enable on startup: `systemctl enable wg-portal.service`
- - Start: `systemctl start wg-portal.service`
- - Stop: `systemctl stop wg-portal.service`
- - Status: `systemctl status wg-portal.service`

README.md

@@ -1,4 +1,4 @@
-# WireGuard Portal
+# WireGuard Portal (v2 - testing)
 
 [![Build Status](https://travis-ci.com/h44z/wg-portal.svg?token=q4pSqaqT58Jzpxdx62xk&branch=master)](https://travis-ci.com/h44z/wg-portal)
 [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](https://opensource.org/licenses/MIT)
@@ -6,217 +6,204 @@
 [![Go Report Card](https://goreportcard.com/badge/github.com/h44z/wg-portal)](https://goreportcard.com/report/github.com/h44z/wg-portal)
 ![GitHub go.mod Go version](https://img.shields.io/github/go-mod/go-version/h44z/wg-portal)
 ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/h44z/wg-portal)
-[![Docker Pulls](https://img.shields.io/docker/pulls/h44z/wg-portal.svg)](https://hub.docker.com/r/h44z/wg-portal/)
+[![Docker Pulls](https://img.shields.io/docker/pulls/h44z/wg-portal.svg)](https://hub.docker.com/r/wgportal/wg-portal/)
 
-A simple, web based configuration portal for [WireGuard](https://wireguard.com). 
-The portal uses the WireGuard [wgctrl](https://github.com/WireGuard/wgctrl-go) library to manage existing VPN 
-interfaces. This allows for seamless activation or deactivation of new users, without disturbing existing VPN 
+> :warning: **IMPORTANT** Version 2 is currently under development and may contain bugs. It is currently not advised to use this version
+in production. Use version [v1](https://github.com/h44z/wg-portal/tree/stable) instead.
+
+Since the project was accepted by the Docker-Sponsored Open Source Program, the Docker image location has moved to: https://hub.docker.com/r/wgportal/wg-portal.
+Please update the Docker image from **h44z/wg-portal** to **wgportal/wg-portal**.
+
+A simple, web based configuration portal for [WireGuard](https://wireguard.com).
+The portal uses the WireGuard [wgctrl](https://github.com/WireGuard/wgctrl-go) library to manage existing VPN
+interfaces. This allows for seamless activation or deactivation of new users, without disturbing existing VPN
 connections.
 
-The configuration portal currently supports using SQLite and MySQL as a user source for authentication and profile data.
-It also supports LDAP (Active Directory or OpenLDAP) as authentication provider.
+The configuration portal supports using a database (SQLite, MySQL, MsSQL or Postgres), OAuth or LDAP (Active Directory or OpenLDAP) as a user source for authentication and profile data.
+
 
 ## Features
- * Self-hosted and web based
+ * Self-hosted - the whole application is a single binary
+ * Responsive web UI written in Vue.JS
  * Automatically select IP from the network pool assigned to client
  * QR-Code for convenient mobile client configuration
  * Sent email to client with QR-code and client config
  * Enable / Disable clients seamlessly
- * Generation of `wgX.conf` after any modification
+ * Generation of wg-quick configuration file (`wgX.conf`) if required
+ * User authentication (database, OAuth or LDAP) 
  * IPv6 ready
- * User authentication (SQLite/MySQL and LDAP)
- * Dockerized
- * Responsive template
- * One single binary
+ * Docker ready
  * Can be used with existing WireGuard setups
  * Support for multiple WireGuard interfaces
- * REST API for management and client deployment
- 
+ * Peer Expiry Feature
+ * Handle route and DNS settings like wg-quick does
+ * ~~REST API for management and client deployment~~ (coming soon)
+
 ![Screenshot](screenshot.png)
 
-## Setup
-Make sure that your host system has at least one WireGuard interface (for example wg0) available. 
-If you did not start up a WireGuard interface yet, take a look at [wg-quick](https://manpages.debian.org/unstable/wireguard-tools/wg-quick.8.en.html) in order to get started.
-
-### Docker
-The easiest way to run WireGuard Portal is to use the Docker image provided.
-
-HINT: the *latest* tag always refers to the master branch and might contain unstable or incompatible code!
-
-Docker Compose snippet with some sample configuration values:
-```
-version: '3.6'
-services:
-  wg-portal:
-    image: h44z/wg-portal:latest
-    container_name: wg-portal
-    restart: unless-stopped
-    cap_add:
-      - NET_ADMIN
-    network_mode: "host"
-    volumes:
-      - /etc/wireguard:/etc/wireguard
-      - ./data:/app/data
-    ports:
-      - '8123:8123'
-    environment:
-      # WireGuard Settings
-      - WG_DEVICES=wg0
-      - WG_DEFAULT_DEVICE=wg0
-      - WG_CONFIG_PATH=/etc/wireguard
-      # Core Settings
-      - EXTERNAL_URL=https://vpn.company.com
-      - WEBSITE_TITLE=WireGuard VPN
-      - COMPANY_NAME=Your Company Name
-      - ADMIN_USER=admin@domain.com
-      - ADMIN_PASS=supersecret
-      # Mail Settings
-      - MAIL_FROM=WireGuard VPN <noreply+wireguard@company.com>
-      - EMAIL_HOST=10.10.10.10
-      - EMAIL_PORT=25
-      # LDAP Settings
-      - LDAP_ENABLED=true
-      - LDAP_URL=ldap://srv-ad01.company.local:389
-      - LDAP_BASEDN=DC=COMPANY,DC=LOCAL
-      - LDAP_USER=ldap_wireguard@company.local
-      - LDAP_PASSWORD=supersecretldappassword
-      - LDAP_ADMIN_GROUP=CN=WireGuardAdmins,OU=Users,DC=COMPANY,DC=LOCAL
-```
-Please note that mapping ```/etc/wireguard``` to ```/etc/wireguard``` inside the docker, will erase your host's current configuration.
-If needed, please make sure to back up your files from ```/etc/wireguard```.
-For a full list of configuration options take a look at the source file [internal/server/configuration.go](internal/server/configuration.go#L56).
-
-### Standalone
-For a standalone application, use the Makefile provided in the repository to build the application. Go version 1.16 or higher has to be installed to build WireGuard Portal.
-
-```
-make
-
-# To build for arm architecture as well use:
-make build-cross-plat
-```
-
-The compiled binary will be located in the dist folder.
-A detailed description for using this software with a raspberry pi can be found in the [README-RASPBERRYPI.md](README-RASPBERRYPI.md).
 
 ## Configuration
-You can configure WireGuard Portal using either environment variables or a yaml configuration file.
-The filepath of the yaml configuration file defaults to **config.yml** in the working directory of the executable.
-It is possible to override the configuration filepath using the environment variable **CONFIG_FILE**.
-For example: `CONFIG_FILE=/home/test/config.yml ./wg-portal-amd64`.
+You can configure WireGuard Portal using a yaml configuration file.
+The filepath of the yaml configuration file defaults to **config/config.yml** in the working directory of the executable.
+It is possible to override the configuration filepath using the environment variable **WG_PORTAL_CONFIG**.
+For example: `WG_PORTAL_CONFIG=/home/test/config.yml ./wg-portal-amd64`.
+
+By default, WireGuard Portal uses a SQLite database. The database is stored in **data/sqlite.db** in the working directory of the executable.
 
 ### Configuration Options
 The following configuration options are available:
 
-| environment           | yaml              | yaml_parent | default_value                                   | description                                                                                                                          |
-|-----------------------|-------------------|-------------|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------|
-| LISTENING_ADDRESS     | listeningAddress  | core        | :8123                                           | The address on which the web server is listening. Optional IP address and port, e.g.: 127.0.0.1:8080.                                |
-| EXTERNAL_URL          | externalUrl       | core        | http://localhost:8123                           | The external URL where the web server is reachable. This link is used in emails that are created by the WireGuard Portal.            |
-| WEBSITE_TITLE         | title             | core        | WireGuard VPN                                   | The website title.                                                                                                                   |
-| COMPANY_NAME          | company           | core        | WireGuard Portal                                | The company name (for branding).                                                                                                     |
-| MAIL_FROM             | mailFrom          | core        | WireGuard VPN <noreply@company.com>             | The email address from which emails are sent.                                                                                        |
-| ADMIN_USER            | adminUser         | core        | admin@wgportal.local                            | The administrator user. Must be a valid email address.                                                                               |
-| ADMIN_PASS            | adminPass         | core        | wgportal                                        | The administrator password. If unchanged, a random password will be set on first startup.                                            |
-| EDITABLE_KEYS         | editableKeys      | core        | true                                            | Allow to edit key-pairs in the UI.                                                                                                   |
-| CREATE_DEFAULT_PEER   | createDefaultPeer | core        | false                                           | If an LDAP user logs in for the first time, a new WireGuard peer will be created on the WG_DEFAULT_DEVICE if this option is enabled. |
-| SELF_PROVISIONING     | selfProvisioning  | core        | false                                           | Allow registered users to automatically create peers via the RESTful API.                                                            |
-| LDAP_ENABLED          | ldapEnabled       | core        | false                                           | Enable or disable the LDAP backend.                                                                                                  |
-| SESSION_SECRET        | sessionSecret     | core        | secret                                          | Use a custom secret to encrypt session data.                                                                                         |
-| DATABASE_TYPE         | typ               | database    | sqlite                                          | Either mysql or sqlite.                                                                                                              |
-| DATABASE_HOST         | host              | database    |                                                 | The mysql server address.                                                                                                            |
-| DATABASE_PORT         | port              | database    |                                                 | The mysql server port.                                                                                                               |
-| DATABASE_NAME         | database          | database    | data/wg_portal.db                               | For sqlite database: the database file-path, otherwise the database name.                                                            |
-| DATABASE_USERNAME     | user              | database    |                                                 | The mysql user.                                                                                                                      |
-| DATABASE_PASSWORD     | password          | database    |                                                 | The mysql password.                                                                                                                  |
-| EMAIL_HOST            | host              | email       | 127.0.0.1                                       | The email server address.                                                                                                            |
-| EMAIL_PORT            | port              | email       | 25                                              | The email server port.                                                                                                               |
-| EMAIL_TLS             | tls               | email       | false                                           | Use STARTTLS. DEPRECATED: use EMAIL_ENCRYPTION instead.                                                                              |
-| EMAIL_ENCRYPTION      | encryption        | email       | none                                            | Either none, tls or starttls.                                                                                                        |
-| EMAIL_CERT_VALIDATION | certcheck         | email       | false                                           | Validate the email server certificate.                                                                                               |
-| EMAIL_USERNAME        | user              | email       |                                                 | An optional username for SMTP authentication.                                                                                        |
-| EMAIL_PASSWORD        | pass              | email       |                                                 | An optional password for SMTP authentication.                                                                                        |
-| EMAIL_AUTHTYPE        | auth              | email       | plain                                           | Either plain, login or crammd5. If username and password are empty, this value is ignored.                                           |
-| WG_DEVICES            | devices           | wg          | wg0                                             | A comma separated list of WireGuard devices.                                                                                         |
-| WG_DEFAULT_DEVICE     | defaultDevice     | wg          | wg0                                             | This device is used for auto-created peers (if CREATE_DEFAULT_PEER is enabled).                                                      |
-| WG_CONFIG_PATH        | configDirectory   | wg          | /etc/wireguard                                  | If set, interface configuration updates will be written to this path, filename: <devicename>.conf.                                   |
-| MANAGE_IPS            | manageIPAddresses | wg          | true                                            | Handle IP address setup of interface, only available on linux.                                                                       |
-| LDAP_URL              | url               | ldap        | ldap://srv-ad01.company.local:389               | The LDAP server url.                                                                                                                 |
-| LDAP_STARTTLS         | startTLS          | ldap        | true                                            | Use STARTTLS.                                                                                                                        |
-| LDAP_CERT_VALIDATION  | certcheck         | ldap        | false                                           | Validate the LDAP server certificate.                                                                                                |
-| LDAP_BASEDN           | dn                | ldap        | DC=COMPANY,DC=LOCAL                             | The base DN for searching users.                                                                                                     |
-| LDAP_USER             | user              | ldap        | company\\\\ldap_wireguard                       | The bind user.                                                                                                                       |
-| LDAP_PASSWORD         | pass              | ldap        | SuperSecret                                     | The bind password.                                                                                                                   |
-| LDAP_LOGIN_FILTER     | loginFilter       | ldap        | (&(objectClass=organizationalPerson)(mail={{login_identifier}})(!userAccountControl:1.2.840.113556.1.4.803:=2)) | {{login_identifier}} will be replaced with the login email address.  |
-| LDAP_SYNC_FILTER      | syncFilter        | ldap        | (&(objectClass=organizationalPerson)(!userAccountControl:1.2.840.113556.1.4.803:=2)(mail=*))                    | The filter string for the LDAP synchronization service.              |
-| LDAP_ADMIN_GROUP      | adminGroup        | ldap        | CN=WireGuardAdmins,OU=_O_IT,DC=COMPANY,DC=LOCAL | Users in this group are marked as administrators.                                                                                    |
-| LDAP_ATTR_EMAIL       | attrEmail         | ldap        | mail                                            | User email attribute.                                                                                                                |
-| LDAP_ATTR_FIRSTNAME   | attrFirstname     | ldap        | givenName                                       | User firstname attribute.                                                                                                            |
-| LDAP_ATTR_LASTNAME    | attrLastname      | ldap        | sn                                              | User lastname attribute.                                                                                                             |
-| LDAP_ATTR_PHONE       | attrPhone         | ldap        | telephoneNumber                                 | User phone number attribute.                                                                                                         |
-| LDAP_ATTR_GROUPS      | attrGroups        | ldap        | memberOf                                        | User groups attribute.                                                                                                               |
-| LOG_LEVEL             |                   |             | debug                                           | Specify log level, one of: trace, debug, info, off.                                                                                  |
-| LOG_JSON              |                   |             | false                                           | Format log output as JSON.                                                                                                           |
-| LOG_COLOR             |                   |             | true                                            | Colorize log output.                                                                                                                 |
-| CONFIG_FILE           |                   |             | config.yml                                      | The config file path.                                                                                                                |
+| configuration key               | parent key | default_value                              | description                                                                                                                             |
+|---------------------------------|------------|--------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| admin_user                      | core       | admin@wgportal.local                       | The administrator user. This user will be created as default admin if it does not yet exist.                                            |
+| admin_password                  | core       | wgportal                                   | The administrator password. If unchanged, a random password will be set on first startup.                                               |
+| editable_keys                   | core       | true                                       | Allow to edit key-pairs in the UI.                                                                                                      |
+| create_default_peer             | core       | false                                      | If an LDAP user logs in for the first time and has no peers associated, a new WireGuard peer will be created for all server interfaces. |
+| create_default_peer_on_creation | core       | false                                      | If an LDAP user is created (e.g. through LDAP sync), a new WireGuard peer will be created for all server interfaces.                    |
+| self_provisioning_allowed       | core       | false                                      | Allow registered users to automatically create peers via their profile page.                                                            |
+| import_existing                 | core       | true                                       | Import existing WireGuard interfaces and peers into WireGuard Portal.                                                                   |
+| restore_state                   | core       | true                                       | Restore the WireGuard interface state after WireGuard Portal has started.                                                               |
+| log_level                       | advanced   | warn                                       | The loglevel, can be one of: trace, debug, info, warn, error.                                                                           |
+| log_pretty                      | advanced   | false                                      | Uses pretty, colorized log messages.                                                                                                    |
+| log_json                        | advanced   | false                                      | Logs in JSON format.                                                                                                                    |
+| ldap_sync_interval              | advanced   | 15m                                        | The time interval after which users will be synchronized from LDAP.                                                                     |
+| start_listen_port               | advanced   | 51820                                      | The first port number that will be used as listening port for new interfaces.                                                           |
+| start_cidr_v4                   | advanced   | 10.11.12.0/24                              | The first IPv4 subnet that will be used for new interfaces.                                                                             |
+| start_cidr_v6                   | advanced   | fdfd:d3ad:c0de:1234::0/64                  | The first IPv6 subnet that will be used for new interfaces.                                                                             |
+| use_ip_v6                       | advanced   | true                                       | Enable IPv6 support.                                                                                                                    |
+| config_storage_path             | advanced   |                                            | If a wg-quick style configuration should be stored to the filesystem, specify a storage directory.                                      |
+| expiry_check_interval           | advanced   | 15m                                        | The interval after which existing peers will be checked if they expired.                                                                |
+| rule_prio_offset                | advanced   | 20000                                      | The default offset for ip route rule priorities.                                                                                        |
+| route_table_offset              | advanced   | 20000                                      | The default offset for ip route table id's.                                                                                             |
+| use_ping_checks                 | statistics | true                                       | If enabled, peers will be pinged periodically to check if they are still connected.                                                     |
+| ping_check_workers              | statistics | 10                                         | Number of parallel ping checks that will be executed.                                                                                   |
+| ping_unprivileged               | statistics | false                                      | If set to false, the ping checks will run without root permissions (BETA).                                                              |
+| ping_check_interval             | statistics | 1m                                         | The interval time between two ping check runs.                                                                                          |
+| data_collection_interval        | statistics | 10m                                        | The interval between the data collection cycles.                                                                                        |
+| collect_interface_data          | statistics | true                                       | A flag to enable interface data collection like bytes sent and received.                                                                |
+| collect_peer_data               | statistics | true                                       | A flag to enable peer data collection like bytes sent and received, last handshake and remote endpoint address.                         |
+| collect_audit_data              | statistics | true                                       | If enabled, some events, like portal logins, will be logged to the database.                                                            |
+| host                            | mail       | 127.0.0.1                                  | The mail-server address.                                                                                                                |
+| port                            | mail       | 25                                         | The mail-server SMTP port.                                                                                                              |
+| encryption                      | mail       | none                                       | SMTP encryption type, allowed values: none, tls, starttls.                                                                              |
+| cert_validation                 | mail       | false                                      | Validate the mail server certificate (if encryption tls is used).                                                                       |
+| username                        | mail       |                                            | The SMTP user name.                                                                                                                     |
+| password                        | mail       |                                            | The SMTP password.                                                                                                                      |
+| auth_type                       | mail       | plain                                      | SMTP authentication type, allowed values: plain, login, crammd5.                                                                        |
+| from                            | mail       | Wireguard Portal <noreply@wireguard.local> | The address that is used to send mails.                                                                                                 |
+| link_only                       | mail       | false                                      | Only send links to WireGuard Portal instead of the full configuration.                                                                  |
+| callback_url_prefix             | auth       | /api/v0                                    | OAuth callback URL prefix. The full callback URL will look like: https://wg.portal.local/callback_url_prefix/provider_name/callback     |
+| oidc                            | auth       | Empty Array - no providers configured      | A list of OpenID Connect providers. See auth/oidc properties to setup a new provider.                                                   |
+| oauth                           | auth       | Empty Array - no providers configured      | A list of plain OAuth providers. See auth/oauth properties to setup a new provider.                                                     |
+| ldap                            | auth       | Empty Array - no providers configured      | A list of LDAP providers. See auth/ldap properties to setup a new provider.                                                             |
+| provider_name                   | auth/oidc  |                                            | A unique provider name. This name must be unique throughout all authentication providers (even other types).                            |
+| display_name                    | auth/oidc  |                                            | The display name is shown at the login page (the login button).                                                                         |
+| base_url                        | auth/oidc  |                                            | The base_url is the URL identifier for the service. For example: "https://accounts.google.com".                                         |
+| client_id                       | auth/oidc  |                                            | The OAuth client id.                                                                                                                    |
+| client_secret                   | auth/oidc  |                                            | The OAuth client secret.                                                                                                                |
+| extra_scopes                    | auth/oidc  |                                            | Extra scopes that should be used in the OpenID Connect authentication flow.                                                             |
+| field_map                       | auth/oidc  |                                            | Mapping of user fields. Internal fields: user_identifier, email, firstname, lastname, phone, department and is_admin.                   |
+| registration_enabled            | auth/oidc  |                                            | If registration is enabled, new user accounts will created in WireGuard Portal.                                                         |
+| provider_name                   | auth/oauth |                                            | A unique provider name. This name must be unique throughout all authentication providers (even other types).                            |
+| display_name                    | auth/oauth |                                            | The display name is shown at the login page (the login button).                                                                         |
+| base_url                        | auth/oauth |                                            | The base_url is the URL identifier for the service. For example: "https://accounts.google.com".                                         |
+| client_id                       | auth/oauth |                                            | The OAuth client id.                                                                                                                    |
+| client_secret                   | auth/oauth |                                            | The OAuth client secret.                                                                                                                |
+| auth_url                        | auth/oauth |                                            | The URL for the authentication endpoint.                                                                                                |
+| token_url                       | auth/oauth |                                            | The URL for the token endpoint.                                                                                                         |
+| redirect_url                    | auth/oauth |                                            | The redirect URL.                                                                                                                       |
+| user_info_url                   | auth/oauth |                                            | The URL for the user information endpoint.                                                                                              |
+| scopes                          | auth/oauth |                                            | OAuth scopes.                                                                                                                           |
+| field_map                       | auth/oauth |                                            | Mapping of user fields. Internal fields: user_identifier, email, firstname, lastname, phone, department and is_admin.                   |
+| registration_enabled            | auth/oauth |                                            | If registration is enabled, new user accounts will created in WireGuard Portal.                                                         |
+| url                             | auth/ldap  |                                            | The LDAP server url. For example: ldap://srv-ad01.company.local:389	                                                                    |
+| start_tls                       | auth/ldap  |                                            | Use STARTTLS to encrypt LDAP requests.                                                                                                  |
+| cert_validation                 | auth/ldap  |                                            | Validate the LDAP server certificate.                                                                                                   |
+| tls_certificate_path            | auth/ldap  |                                            | A path to the TLS certificate.                                                                                                          |
+| tls_key_path                    | auth/ldap  |                                            | A path to the TLS key.                                                                                                                  |
+| base_dn                         | auth/ldap  |                                            | The base DN for searching users. For example: DC=COMPANY,DC=LOCAL	                                                                      |
+| bind_user                       | auth/ldap  |                                            | The bind user. For example: company\\ldap_wireguard	                                                                                    |
+| bind_pass                       | auth/ldap  |                                            | The bind password.                                                                                                                      |
+| field_map                       | auth/ldap  |                                            | Mapping of user fields. Internal fields: user_identifier, email, firstname, lastname, phone, department and memberof.                   |
+| login_filter                    | auth/ldap  |                                            | LDAP filters for users that should be allowed to log in. {{login_identifier}} will be replaced with the login username.                 |
+| admin_group                     | auth/ldap  |                                            | Users in this group are marked as administrators.                                                                                       |
+| synchronize                     | auth/ldap  |                                            | Periodically synchronize users (name, department, phone, status, ...) to the WireGuard Portal database.                                 |
+| disable_missing                 | auth/ldap  |                                            | If synchronization is enabled, missing LDAP users will be disabled in WireGuard Portal.                                                 |
+| sync_filter                     | auth/ldap  |                                            | LDAP filters for users that should be synchronized to WireGuard Portal.                                                                 |
+| registration_enabled            | auth/ldap  |                                            | If registration is enabled, new user accounts will created in WireGuard Portal.                                                         |
+| debug                           | database   | false                                      | Debug database statements (log each statement).                                                                                         |
+| slow_query_threshold            | database   |                                            | A threshold for slow database queries. If the threshold is exceeded, a warning message will be logged.                                  |
+| type                            | database   | sqlite                                     | The database type. Allowed values: sqlite, mssql, mysql or postgres.                                                                    |
+| dsn                             | database   | data/sqlite.db                             | The database DSN. For example: user:pass@tcp(1.2.3.4:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local                              |
+| request_logging                 | web        | false                                      | Log all HTTP requests.                                                                                                                  |
+| external_url                    | web        | http://localhost:8888                      | The URL where a client can access WireGuard Portal.                                                                                     |
+| listening_address               | web        | :8888                                      | The listening port of the web server.                                                                                                   |
+| session_identifier              | web        | wgPortalSession                            | The session identifier for the web frontend.                                                                                            |
+| session_secret                  | web        | very_secret                                | The session secret for the web frontend.                                                                                                |
+| csrf_secret                     | web        | extremely_secret                           | The CSRF secret.                                                                                                                        |
+| site_title                      | web        | WireGuard Portal                           | The title that is shown in the web frontend.                                                                                            |
+| site_company_name               | web        | WireGuard Portal                           | The company name that is shown at the bottom of the web frontend.                                                                       |
 
-### Sample yaml configuration
-config.yml:
-```yaml
-core:
-  listeningAddress: :8123
-  externalUrl: https://wg-test.test.com
-  adminUser: test@test.com
-  adminPass: test
-  editableKeys: true
-  createDefaultPeer: false
-  ldapEnabled: true
-  mailFrom: WireGuard VPN <noreply@test.com>
-ldap:
-  url: ldap://10.10.10.10:389
-  dn: DC=test,DC=test
-  startTLS: false
-  user: wireguard@test.test
-  pass: test
-  adminGroup: CN=WireGuardAdmins,CN=Users,DC=test,DC=test
-database:
-  typ: sqlite
-  database: data/wg_portal.db
-email:
-  host: smtp.gmail.com
-  port: 587
-  tls: true
-  user: test@gmail.com
-  pass: topsecret
-wg:
-  devices: 
-    - wg0
-    - wg1
-  defaultDevice: wg0
-  configDirectory: /etc/wireguard
-  manageIPAddresses: true
+
+## Upgrading from V1
+
+> :warning: Before upgrading from V1, make sure that you have a backup of your currently working configuration files and database!
+
+To start the upgrade process, start the wg-portal binary with the **-migrateFrom** parameter. 
+The configuration (config.yml) for WireGuard Portal must be updated and valid before starting the upgrade.
+
+To upgrade from a previous SQLite database, start wg-portal like:
+
+```shell
+./wg-portal-amd64 -migrateFrom=old_wg_portal.db
 ```
 
-### RESTful API
-WireGuard Portal offers a RESTful API to interact with. 
-The API is documented using OpenAPI 2.0, the Swagger UI can be found 
-under the URL `http://<your wg-portal ip/domain>/swagger/index.html`.
+You can also specify the database type using the parameter **-migrateFromType**, supported types: mysql, mssql, postgres or sqlite.
+For example:
+
+```shell
+./wg-portal-amd64 -migrateFromType=mysql -migrateFrom=user:pass@tcp(1.2.3.4:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local
+```
+
+The upgrade will transform the old, existing database and store the values in the new database specified in config.yml.
+Ensure that the new database does not contain any data!
+
+
+## V2 TODOs
+ * Public REST API
+ * Translations
+ * Documentation
+ * Audit UI
+
+
+## Building
+
+To build a standalone application, use the Makefile provided in the repository. 
+Go version 1.20 or higher has to be installed to build WireGuard Portal. 
+If you want to re-compile the frontend, NodeJS 18 and NPM >= 9 is required.
+
+```shell
+# build the frontend
+make frontend
+
+# build the binary
+make build
+```
 
 ## What is out of scope
- * Creating or removing WireGuard (wgX) interfaces.
- * Generation or application of any `iptables` or `nftables` rules.
- * Setting up or changing IP-addresses of the WireGuard interface on operating systems other than linux.
- * Importing private keys of an existing WireGuard setup.
- 
+ * Automatic generation or application of any `iptables` or `nftables` rules.
+ * Support for operating systems other than linux.
+ * Automatic import of private keys of an existing WireGuard setup.
+
+
 ## Application stack
 
- * [Gin, HTTP web framework written in Go](https://github.com/gin-gonic/gin)
- * [go-template, data-driven templates for generating textual output](https://golang.org/pkg/text/template/)
- * [Bootstrap, for the HTML templates](https://getbootstrap.com/)
- * [JQuery, for some nice JavaScript effects ;)](https://jquery.com/)
+ * [wgctrl-go](https://github.com/WireGuard/wgctrl-go) and [netlink](https://github.com/vishvananda/netlink) for interface handling
+ * [Gin](https://github.com/gin-gonic/gin), HTTP web framework written in Go
+ * [Bootstrap](https://getbootstrap.com/), for the HTML templates
+ * [Vue.JS](https://vuejs.org/), for the frontend
+
 
 ## License
 
  * MIT License. [MIT](LICENSE.txt) or https://opensource.org/licenses/MIT
- 
-
-This project was inspired by [wg-gen-web](https://github.com/vx3r/wg-gen-web).

assets/css/_bootswatch.scss

@@ -1,190 +0,0 @@
-// Lux 4.5.3
-// Bootswatch
-
-
-// Variables ===================================================================
-
-$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
-@import url($web-font-path);
-
-// Navbar ======================================================================
-
-.navbar {
-  font-size: $font-size-sm;
-  text-transform: uppercase;
-  font-weight: 600;
-
-  &-nav {
-    .nav-link {
-      padding-top: .715rem;
-      padding-bottom: .715rem;
-    }
-  }
-
-  &-brand {
-    margin-right: 2rem;
-  }
-}
-
-.bg-primary {
-  background-color: theme-color("primary") !important;
-}
-
-.bg-light {
-  border: 1px solid rgba(0, 0, 0, .1);
-
-  &.navbar-fixed-top {
-    border-width: 0 0 1px;
-  }
-
-  &.navbar-bottom-top {
-    border-width: 1px 0 0;
-  }
-}
-
-.nav-item {
-  margin-right: 2rem;
-}
-
-// Buttons =====================================================================
-
-.btn {
-  font-size: $font-size-sm;
-  text-transform: uppercase;
-
-  &-sm {
-    font-size: 10px;
-  }
-
-  &-warning {
-    &,
-    &:hover,
-    &:not([disabled]):not(.disabled):active,
-    &:focus {
-      color: $white;
-    }
-  }
-}
-
-.btn-outline-secondary {
-  border-color: $gray-600;
-  color: $gray-600;
-
-  &:not([disabled]):not(.disabled):hover,
-  &:not([disabled]):not(.disabled):focus,
-  &:not([disabled]):not(.disabled):active {
-    background-color: $gray-400;
-    border-color: $gray-400;
-    color: $white;
-  }
-
-  &:not([disabled]):not(.disabled):focus {
-    box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
-  }
-}
-
-[class*="btn-outline-"] {
-  border-width: 2px;
-}
-
-.border-secondary {
-  border: 1px solid $gray-400 !important;
-}
-
-// Typography ==================================================================
-
-body {
-  font-weight: 200;
-  letter-spacing: 1px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-transform: uppercase;
-  letter-spacing: 3px;
-}
-
-.text-secondary {
-  color: $body-color !important;
-}
-
-// Tables ======================================================================
-
-th {
-  font-size: $font-size-sm;
-  text-transform: uppercase;
-}
-
-.table {
-  th,
-  td {
-    padding: 1.5rem;
-  }
-
-  &-sm {
-    th,
-    td {
-      padding: .75rem;
-    }
-  }
-}
-
-// Forms =======================================================================
-
-.custom-switch {
-  .custom-control-label {
-    &::after {
-      top: add(.15625rem, 2px);
-      left: add(-2.25rem, 2px);
-      width: subtract(1rem, 4px);
-      height: subtract(1rem, 4px);
-    }
-  }
-}
-
-// Navs ========================================================================
-
-.dropdown-menu {
-  font-size: $font-size-sm;
-  text-transform: none;
-}
-
-// Indicators ==================================================================
-
-.badge {
-  padding-top: .28rem;
-
-  &-pill {
-    border-radius: 10rem;
-  }
-}
-
-// Containers ==================================================================
-
-.list-group-item {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .h1,
-  .h2,
-  .h3,
-  .h4,
-  .h5,
-  .h6 {
-    color: inherit;
-  }
-}
-
-.card {
-  &-title,
-  &-header {
-    color: inherit;
-  }
-}

assets/css/_variables.scss

@@ -1,106 +0,0 @@
-// Lux 4.5.3
-// Bootswatch
-
-//
-// Color system
-//
-
-$white:    #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #f7f7f9 !default;
-$gray-300: #eceeef !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #919aa1 !default;
-$gray-700: #55595c !default;
-$gray-800: #343a40 !default;
-$gray-900: #1a1a1a !default;
-$black:    #000 !default;
-
-$blue:    #007bff !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #e83e8c !default;
-$red:     #d9534f !default;
-$orange:  #fd7e14 !default;
-$yellow:  #f0ad4e !default;
-$green:   #4bbf73 !default;
-$teal:    #20c997 !default;
-$cyan:    #1f9bcf !default;
-
-$primary:       $gray-900 !default;
-$secondary:     $white !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $white !default;
-$dark:          $gray-800 !default;
-
-$yiq-contrasted-threshold:  185 !default;
-
-// Options
-
-$enable-rounded:            false !default;
-
-// Body
-
-$body-color:                $gray-700 !default;
-
-// Fonts
-
-// stylelint-disable-next-line value-keyword-case
-$font-family-sans-serif:      "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-size-base:              .875rem !default;
-$h1-font-size:                2rem !default;
-$h2-font-size:                1.75rem !default;
-$h3-font-size:                1.5rem !default;
-$h4-font-size:                1.25rem !default;
-$h5-font-size:                1rem !default;
-$h6-font-size:                .75rem !default;
-$headings-font-weight:        600 !default;
-$headings-color:              $gray-900 !default;
-
-// Tables
-
-$table-border-color:          rgba(0, 0, 0, .05) !default;
-
-// Buttons + Forms
-
-$input-btn-border-width:      0 !default;
-
-// Buttons
-
-$btn-line-height:             1.5rem !default;
-$input-btn-padding-y:         .75rem !default;
-$input-btn-padding-x:         1.5rem !default;
-$input-btn-padding-y-sm:      .5rem !default;
-$input-btn-padding-x-sm:      1rem !default;
-$input-btn-padding-y-lg:      2rem !default;
-$input-btn-padding-x-lg:      2rem !default;
-$btn-font-weight:             600 !default;
-
-// Forms
-
-$input-line-height:                     1.5 !default;
-$input-bg:                              $gray-200 !default;
-$input-disabled-bg:                     $gray-300 !default;
-$input-group-addon-bg:                  $gray-300 !default;
-
-// Navbar
-
-$navbar-padding-y:                  1.5rem !default;
-$navbar-dark-hover-color:           $white !default;
-$navbar-light-color:                rgba($black, .3) !default;
-$navbar-light-hover-color:          $gray-900 !default;
-$navbar-light-active-color:         $gray-900 !default;
-
-// Pagination
-
-$pagination-border-color:           transparent !default;
-$pagination-hover-border-color:     $pagination-border-color !default;
-$pagination-disabled-border-color:  $pagination-border-color !default;
-
-// Breadcrumbs
-
-$breadcrumb-bg:                     transparent !default;

assets/css/bootstrap-tokenfield.min.css

@@ -1,5 +0,0 @@
-/*!
- * bootstrap-tokenfield
- * https://github.com/sliptree/bootstrap-tokenfield
- * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
- */@-webkit-keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}@-moz-keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}@keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}.tokenfield{height:auto;min-height:34px;padding-bottom:0}.tokenfield.focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.tokenfield .token{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;border:1px solid #d9d9d9;background-color:#ededed;white-space:nowrap;margin:-1px 5px 5px 0;height:22px;vertical-align:top;cursor:default}.tokenfield .token:hover{border-color:#b9b9b9}.tokenfield .token.active{border-color:#52a8ec;border-color:rgba(82,168,236,.8)}.tokenfield .token.duplicate{border-color:#ebccd1;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.tokenfield .token.invalid{background:0 0;border:1px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-bottom:1px dotted #d9534f}.tokenfield .token.invalid.active{background:#ededed;border:1px solid #ededed;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.tokenfield .token .token-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;padding-left:4px;vertical-align:top}.tokenfield .token .close{font-family:Arial;display:inline-block;line-height:100%;font-size:1.1em;line-height:1.49em;margin-left:5px;float:none;height:100%;vertical-align:top;padding-right:4px}.tokenfield .token-input{background:0 0;width:60px;min-width:60px;border:0;height:20px;padding:0;margin-bottom:6px;-webkit-box-shadow:none;box-shadow:none}.tokenfield .token-input:focus{border-color:transparent;outline:0;-webkit-box-shadow:none;box-shadow:none}.tokenfield.disabled{cursor:not-allowed;background-color:#eee}.tokenfield.disabled .token-input{cursor:not-allowed}.tokenfield.disabled .token:hover{cursor:not-allowed;border-color:#d9d9d9}.tokenfield.disabled .token:hover .close{cursor:not-allowed;opacity:.2;filter:alpha(opacity=20)}.has-warning .tokenfield.focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-error .tokenfield.focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-success .tokenfield.focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.tokenfield.input-sm,.input-group-sm .tokenfield{min-height:30px;padding-bottom:0}.input-group-sm .token,.tokenfield.input-sm .token{height:20px;margin-bottom:4px}.input-group-sm .token-input,.tokenfield.input-sm .token-input{height:18px;margin-bottom:5px}.tokenfield.input-lg,.input-group-lg .tokenfield{height:auto;min-height:45px;padding-bottom:4px}.input-group-lg .token,.tokenfield.input-lg .token{height:25px}.input-group-lg .token-label,.tokenfield.input-lg .token-label{line-height:23px}.input-group-lg .token .close,.tokenfield.input-lg .token .close{line-height:1.3em}.input-group-lg .token-input,.tokenfield.input-lg .token-input{height:23px;line-height:23px;margin-bottom:6px;vertical-align:top}.tokenfield.rtl{direction:rtl;text-align:right}.tokenfield.rtl .token{margin:-1px 0 5px 5px}.tokenfield.rtl .token .token-label{padding-left:0;padding-right:4px}

assets/css/custom.css

@@ -1,103 +0,0 @@
-/* THEME STYLE */
-pre{background:#f7f7f9}iframe{overflow:hidden;border:none}@media (min-width: 768px){body>.navbar-transparent{box-shadow:none}body>.navbar-transparent .navbar-nav>.open>a{box-shadow:none}}#home,#help{font-size:.9rem}#home .navbar,#help .navbar{background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);transition:box-shadow 200ms ease-in}#home .navbar-transparent,#help .navbar-transparent{background:none !important;box-shadow:none}#home .navbar-brand .nav-link,#help .navbar-brand .nav-link{display:inline-block;margin-right:-30px}#home .nav-link,#help .nav-link{text-transform:uppercase;font-weight:500;color:#fff}#home{padding-top:0}#home .btn{padding:.6rem .55rem .5rem;box-shadow:none;font-size:.7rem;font-weight:500}.bs-docs-section{margin-top:4em}.bs-docs-section .page-header h1{padding:2rem 0;font-size:3rem}.dropdown-menu.show[aria-labelledby="themes"]{display:-ms-flexbox;display:flex;width:420px;-ms-flex-wrap:wrap;flex-wrap:wrap}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item{width:33.333%}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item:first-child{width:100%}.bs-component{position:relative}.bs-component+.bs-component{margin-top:1rem}.bs-component .card{margin-bottom:1rem}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}.source-button{display:none;position:absolute;top:0;right:0;z-index:100;font-weight:700}.source-button:hover{cursor:pointer}.bs-component:hover .source-button{display:block}#source-modal pre{max-height:calc(100vh - 11rem);background-color:rgba(0,0,0,0.7);color:rgba(255,255,255,0.7)}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}#footer{margin:5em 0}#footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}#footer p{clear:left;margin-bottom:0}.splash{padding:12em 0 6em;background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em;color:#fff}.splash #social{margin:2em 0 3em}.splash .alert{margin:2em 0;border:none}.splash .sponsor a{color:#fff}.section-tout{padding:6em 0 1em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1;text-align:center}.section-tout .icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:80px;height:80px;margin:0 auto 1rem;background:#349aed;background:linear-gradient(145deg, #3b9cea 50%, #3db8eb 100%);border-radius:50%;font-size:2rem;color:rgba(0,0,0,0.5)}.section-tout p{margin-bottom:5em}.section-preview{padding:4em 0}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}.sponsor #carbonads{max-width:240px;margin:0 auto}.sponsor .carbon-text{display:block;margin-top:1em;font-size:12px}.sponsor .carbon-poweredby{float:right;margin-top:1em;font-size:10px}@media (max-width: 767px){.splash{padding-top:8em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}}
-
-/* CUSTOM STYLE */
-
-/* Start collapsable table
--------------------------------------------------- */
-
-.hiddenRow, .hiddenCell {
-    padding: 0px!important;
-    border-top: 0px!important;
-}
-
-.collapsedRow .col-md-6{
-    display:inline-block;
-}
-
-.collapsedRow {
-    padding: 10px 0px;
-    border-top: 1px solid lightgray;
-    margin-left: 0px;
-    margin-right: 0px;
-}
-
-.collapse-indicator {
-    text-decoration: none;
-}
-
-.collapse-indicator:after {
-    font-weight: 900;
-    font-family: "Font Awesome 5 Free";
-    content: "\f056";
-}
-.collapse-indicator.collapsed:after {
-    font-weight: 900;
-    font-family: "Font Awesome 5 Free";
-    content: "\f055";
-}
-
-/* --------------------------------------------------
- End collapsable table*/
-
-.jumbotron-home {
-    padding: 1rem 1rem;
-}
-
-@media (min-width: 576px) {
-    .jumbotron-home {
-        padding: 2rem 2rem;
-    }
-}
-
-@media (min-width: 1440px) {
-    .container, .container-lg, .container-md, .container-sm, .container-xl {
-        max-width: 1400px;
-    }
-}
-
-.device-status-table {
-    font-size: small;
-}
-
-.navbar {
-    padding: 0.5rem 1rem;
-}
-
-.disabled-peer {
-    color: #d03131;
-}
-
-.tokenfield .token {
-    border-radius: 0px;
-    border: 1px solid #1a1a1a;
-    color: #1a1a1a;
-    background-color: #f7f7f9;
-    margin: -4px 5px 5px 0;
-    height: 22px;
-}
-
-.form-group.required label:after {
-    content:"*";
-    color:red;
-}
-
-a.advanced-settings:before {
-    content: "Hide";
-}
-
-a.advanced-settings.collapsed:before {
-    content: "Show";
-}
-
-.form-group.global-config label:after, .custom-control.global-config label:after {
-    content: "g";
-    color: #0057bb;
-    font-size: xx-small;
-    top: -5px;
-    position: absolute;
-}
-
-.text-blue {
-    color: #0057bb;
-}

assets/css/signin.css

@@ -1,3 +0,0 @@
-.navbar {
-    padding: 0.5rem 1rem;
-}

assets/css/tokenfield-typeahead.min.css

@@ -1,5 +0,0 @@
-/*!
- * bootstrap-tokenfield
- * https://github.com/sliptree/bootstrap-tokenfield
- * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
- */.twitter-typeahead{width:100%;position:relative;vertical-align:top}.twitter-typeahead .tt-input,.twitter-typeahead .tt-hint{margin:0;width:100%;vertical-align:middle;background-color:#fff}.twitter-typeahead .tt-hint{color:#999;z-index:1;border:1px solid transparent}.twitter-typeahead .tt-input{color:#555;z-index:2}.twitter-typeahead .tt-input,.twitter-typeahead .tt-hint{height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429}.twitter-typeahead .input-sm.tt-input,.twitter-typeahead .hint-sm.tt-hint{border-radius:3px}.twitter-typeahead .input-lg.tt-input,.twitter-typeahead .hint-lg.tt-hint{border-radius:6px}.input-group .twitter-typeahead:first-child .tt-input,.input-group .twitter-typeahead:first-child .tt-hint{border-radius:4px 0 0 4px!important}.input-group .twitter-typeahead:last-child .tt-input,.input-group .twitter-typeahead:last-child .tt-hint{border-radius:0 4px 4px 0!important}.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint{border-radius:3px 0 0 3px!important}.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint{border-radius:0 3px 3px 0!important}.input-sm.tt-input,.hint-sm.tt-hint,.input-group.input-group-sm .tt-input,.input-group.input-group-sm .tt-hint{height:30px;padding:5px 10px;font-size:12px;line-height:1.5}.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint{border-radius:6px 0 0 6px!important}.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint{border-radius:0 6px 6px 0!important}.input-lg.tt-input,.hint-lg.tt-hint,.input-group.input-group-lg .tt-input,.input-group.input-group-lg .tt-hint{height:45px;padding:10px 16px;font-size:18px;line-height:1.33}.tt-dropdown-menu{width:100%;min-width:160px;margin-top:2px;padding:5px 0;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);*border-right-width:2px;*border-bottom-width:2px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.tt-suggestion{display:block;padding:3px 20px}.tt-suggestion.tt-cursor{color:#262626;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)}.tt-suggestion.tt-cursor a{color:#fff}.tt-suggestion p{margin:0}.tokenfield .twitter-typeahead{width:auto}.tokenfield .twitter-typeahead .tt-hint{padding:0;height:20px}.tokenfield.input-sm .twitter-typeahead .tt-input,.tokenfield.input-sm .twitter-typeahead .tt-hint{height:18px;font-size:12px;line-height:1.5}.tokenfield.input-lg .twitter-typeahead .tt-input,.tokenfield.input-lg .twitter-typeahead .tt-hint{height:23px;font-size:18px;line-height:1.33}.tokenfield .twitter-typeahead .tt-suggestions{font-size:14px}

assets/js/custom.js

@@ -1,39 +0,0 @@
-(function($) {
-    "use strict"; // Start of use strict
-
-    // Smooth scrolling using jQuery easing
-    $(document).on('click', 'a.scroll-to-top', function(e) {
-        var $anchor = $(this);
-        $('html, body').stop().animate({
-            scrollTop: ($($anchor.attr('href')).offset().top)
-        }, 1000, 'easeInOutExpo');
-        e.preventDefault();
-    });
-
-    $(function () {
-        $('[data-toggle="tooltip"]').tooltip()
-    });
-
-    $(".online-status").each(function(){
-        const onlineStatusID = "#" + $(this).attr('id');
-        $.get( "/user/status?pkey=" + encodeURIComponent($(this).attr('data-pkey')), function( data ) {
-            console.log(onlineStatusID + " " + data)
-            if(data === true) {
-                $(onlineStatusID).html('<i class="fas fa-link text-success"></i>');
-            } else {
-                $(onlineStatusID).html('<i class="fas fa-unlink"></i>');
-            }
-        });
-    });
-    $(function() {
-        $('select.device-selector').change(function() {
-            this.form.submit();
-        });
-    });
-    $('[data-toggle=confirmation]').confirmation({
-        rootSelector: '[data-toggle=confirmation]',
-        // other options
-    });
-})(jQuery); // End of use strict
-
-

assets/tpl/admin_create_clients.html

@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Admin</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/jquery-ui.min.css">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/bootstrap-tokenfield.min.css">
-    <link rel="stylesheet" href="/css/tokenfield-typeahead.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-5">
-        <h1>Create new clients</h1>
-        <h2>Enter valid user email addresses to quickly create new accounts.</h2>
-        {{template "prt_flashes.html" .}}
-        <form method="post" enctype="multipart/form-data">
-            <input type="hidden" name="_csrf" value="{{.Csrf}}">
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="inputEmail">Email Addresses</label>
-                    <input type="text" name="email" class="form-control" id="inputEmail" value="{{.FormData.Emails}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="inputIdentifier">Client Friendly Name (will be added as suffix to the name of the user)</label>
-                    <input type="text" name="identifier" class="form-control" id="inputIdentifier" value="{{.FormData.Identifier}}" required>
-                </div>
-            </div>
-
-            <button type="submit" class="btn btn-primary">Create</button>
-            <a href="/admin" class="btn btn-secondary">Cancel</a>
-        </form>
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/bootstrap-tokenfield.min.js"></script>
-    <script src="/js/custom.js"></script>
-    <script>$('#inputEmail').on('tokenfield:createdtoken', function (e) {
-            // Über-simplistic e-mail validation
-            var re = /\S+@\S+\.\S+/
-            var valid = re.test(e.attrs.value)
-            if (!valid) {
-                $(e.relatedTarget).addClass('invalid')
-            }
-        }).on('tokenfield:createtoken', function (e) {
-            var existingTokens = $(this).tokenfield('getTokens');
-            $.each(existingTokens, function(index, token) {
-                if (token.value === e.attrs.value)
-                    e.preventDefault();
-            });
-        }).tokenfield({
-            autocomplete: {
-                source: [{{range $i, $u :=.Users}}{{if ne $i 0}},{{end}}'{{$u.Email}}'{{end}}],
-                delay: 100
-            },
-            inputType: 'email',
-            createTokensOnBlur: true,
-            showAutocompleteOnFocus: false
-        })</script>
-</body>
-
-</html>

assets/tpl/admin_edit_client.html

@@ -1,213 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Admin</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-5">
-        {{template "prt_flashes.html" .}}
-
-        <!-- server mode -->
-        {{if eq .Device.Type "server"}}
-        {{if .Peer.IsNew}}
-            <h1>Create a new client</h1>
-        {{else}}
-            <h1>Edit client: <strong>{{.Peer.Identifier}}</strong></h1>
-        {{end}}
-
-        <form method="post" enctype="multipart/form-data">
-            <input type="hidden" name="_csrf" value="{{.Csrf}}">
-            <input type="hidden" name="uid" value="{{.Peer.UID}}">
-            <input type="hidden" name="devicetype" value="{{.Device.Type}}">
-            <input type="hidden" name="device" value="{{.Device.DeviceName}}">
-            <input type="hidden" name="endpoint" value="{{.Peer.Endpoint}}">
-            {{if .EditableKeys}}
-                <div class="form-row">
-                    <div class="form-group col-md-12">
-                        <label for="server_PrivateKey">Private Key</label>
-                        <input type="text" name="privkey" class="form-control" id="server_PrivateKey" value="{{.Peer.PrivateKey}}">
-                    </div>
-                </div>
-                <div class="form-row">
-                    <div class="form-group required col-md-12">
-                        <label for="server_PublicKey">Public Key</label>
-                        <input type="text" name="pubkey" class="form-control" id="server_PublicKey" value="{{.Peer.PublicKey}}" required>
-                    </div>
-                </div>
-                <div class="form-row">
-                    <div class="form-group col-md-12">
-                        <label for="server_PresharedKey">Preshared Key</label>
-                        <input type="text" name="presharedkey" class="form-control" id="server_PresharedKey" value="{{.Peer.PresharedKey}}" required>
-                    </div>
-                </div>
-            {{else}}
-                <input type="hidden" name="privkey" value="{{.Peer.PrivateKey}}">
-                <input type="hidden" name="presharedkey" value="{{.Peer.PresharedKey}}">
-                <div class="form-row">
-                    <div class="form-group col-md-12">
-                        <label for="server_ro_PublicKey">Public Key</label>
-                        <input type="text" name="pubkey" readonly class="form-control" id="server_ro_PublicKey" value="{{.Peer.PublicKey}}">
-                    </div>
-                </div>
-            {{end}}
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="server_Identifier">Client Friendly Name</label>
-                    <input type="text" name="identifier" class="form-control" id="server_Identifier" value="{{.Peer.Identifier}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="server_Email">Client Email Address</label>
-                    <input type="email" name="mail" class="form-control" id="server_Email" value="{{.Peer.Email}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="server_IP">Client IP Address</label>
-                    <input type="text" name="ip" class="form-control" id="server_IP" value="{{.Peer.IPsStr}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12 global-config">
-                    <label for="server_AllowedIP">Allowed IPs</label>
-                    <input type="text" name="allowedip" class="form-control" id="server_AllowedIP" value="{{.Peer.AllowedIPsStr}}">
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12">
-                    <label for="server_AllowedIPSrv">Extra Allowed IPs (Server sided)</label>
-                    <input type="text" name="allowedipSrv" class="form-control" id="server_AllowedIPSrv" value="{{.Peer.AllowedIPsSrvStr}}">
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12 global-config">
-                    <label for="server_DNS">Client DNS Servers</label>
-                    <input type="text" name="dns" class="form-control" id="server_DNS" value="{{.Peer.DNSStr}}">
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-6 global-config">
-                    <label for="server_PersistentKeepalive">Persistent Keepalive (0 = off)</label>
-                    <input type="number" name="keepalive" class="form-control" id="server_PersistentKeepalive" placeholder="16" value="{{.Peer.PersistentKeepalive}}">
-                </div>
-                <div class="form-group col-md-6 global-config">
-                    <label for="server_MTU">Client MTU (0 = default)</label>
-                    <input type="number" name="mtu" class="form-control" id="server_MTU" placeholder="" value="{{.Peer.Mtu}}">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group col-md-12">
-                    <div class="custom-control custom-switch">
-                        <input class="custom-control-input" name="isdisabled" type="checkbox" value="true" id="server_Disabled" {{if .Peer.DeactivatedAt}}checked{{end}}>
-                        <label class="custom-control-label" for="server_Disabled">
-                            Disabled
-                        </label>
-                    </div>
-                    <div class="custom-control custom-switch">
-                        <input class="custom-control-input" name="ignoreglobalsettings" type="checkbox" value="true" id="server_IgnoreGlobalSettings" {{if .Peer.IgnoreGlobalSettings}}checked{{end}}>
-                        <label class="custom-control-label" for="server_IgnoreGlobalSettings">
-                            Ignore global settings (<span class="text-blue">g</span>)
-                        </label>
-                    </div>
-                </div>
-            </div>
-
-
-            <button type="submit" class="btn btn-primary">Save</button>
-            <a href="/admin" class="btn btn-secondary">Cancel</a>
-        </form>
-        {{end}}
-
-        <!-- client mode -->
-        {{if eq .Device.Type "client"}}
-        {{if .Peer.IsNew}}
-        <h1>Create a new remote endpoint</h1>
-        {{else}}
-        <h1>Edit remote endpoint: <strong>{{.Peer.Identifier}}</strong></h1>
-        {{end}}
-
-        <form method="post" enctype="multipart/form-data">
-            <input type="hidden" name="_csrf" value="{{.Csrf}}">
-            <input type="hidden" name="uid" value="{{.Peer.UID}}">
-            <input type="hidden" name="mail" value="{{.AdminEmail}}">
-            <input type="hidden" name="devicetype" value="{{.Device.Type}}">
-            <input type="hidden" name="device" value="{{.Device.DeviceName}}">
-            <input type="hidden" name="privkey" value="{{.Peer.PrivateKey}}">
-                        <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="client_Identifier">Endpoint Friendly Name</label>
-                    <input type="text" name="identifier" class="form-control" id="client_Identifier" value="{{.Peer.Identifier}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="client_Endpoint">Endpoint Address</label>
-                    <input type="text" name="endpoint" class="form-control" id="client_Endpoint" value="{{.Peer.Endpoint}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="client_PublicKey">Endpoint Public Key</label>
-                    <input type="text" name="pubkey" class="form-control" id="client_PublicKey" value="{{.Peer.PublicKey}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12">
-                    <label for="client_PresharedKey">Preshared Key</label>
-                    <input type="text" name="presharedkey" class="form-control" id="client_PresharedKey" value="{{.Peer.PresharedKey}}">
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12">
-                    <label for="client_AllowedIP">Allowed IPs</label>
-                    <input type="text" name="allowedip" class="form-control" id="client_AllowedIP" value="{{.Peer.AllowedIPsStr}}">
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-6">
-                    <label for="client_PersistentKeepalive">Persistent Keepalive (0 = off)</label>
-                    <input type="number" name="keepalive" class="form-control" id="client_PersistentKeepalive" placeholder="16" value="{{.Peer.PersistentKeepalive}}">
-                </div>
-                <div class="form-group col-md-6">
-                    <label for="client_IP">Ping-Check IP Address</label>
-                    <input type="text" name="ip" class="form-control" id="client_IP" value="{{.Peer.IPsStr}}">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group col-md-12">
-                    <div class="custom-control custom-switch">
-                        <input class="custom-control-input" name="isdisabled" type="checkbox" value="true" id="client_Disabled" {{if .Peer.DeactivatedAt}}checked{{end}}>
-                        <label class="custom-control-label" for="client_Disabled">
-                            Disabled
-                        </label>
-                    </div>
-                </div>
-            </div>
-
-
-            <button type="submit" class="btn btn-primary">Save</button>
-            <a href="/admin" class="btn btn-secondary">Cancel</a>
-        </form>
-        {{end}}
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_edit_interface.html

@@ -1,263 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Admin</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-5 main-app">
-        <h1>Edit interface <strong>{{.Device.DeviceName}}</strong></h1>
-        {{template "prt_flashes.html" .}}
-
-        <ul class="nav nav-tabs">
-            <li class="nav-item">
-                <a class="nav-link {{if eq .Device.Type "server"}}active{{end}}" data-toggle="tab" href="#server">Server Mode</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link {{if eq .Device.Type "client"}}active{{end}}" data-toggle="tab" href="#client">Client Mode</a>
-            </li>
-        </ul>
-
-        <div id="configContent" class="tab-content">
-            <!-- server mode -->
-            <div class="tab-pane fade {{if eq .Device.Type "server"}}active show{{end}}" id="server">
-                <form method="post" enctype="multipart/form-data">
-                    <input type="hidden" name="_csrf" value="{{.Csrf}}">
-                    <input type="hidden" name="device" value="{{.Device.DeviceName}}">
-                    <input type="hidden" name="devicetype" value="server">
-                    <h3>Server's interface configuration</h3>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="server_DisplayName">Display Name</label>
-                            <input type="text" name="displayname" class="form-control" id="server_DisplayName" value="{{.Device.DisplayName}}">
-                        </div>
-                    </div>
-                    {{if .EditableKeys}}
-                    <div class="form-row">
-                        <div class="form-group required col-md-12">
-                            <label for="server_PrivateKey">Private Key</label>
-                            <input type="text" name="privkey" class="form-control" id="server_PrivateKey" value="{{.Device.PrivateKey}}" required>
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group required col-md-12">
-                            <label for="server_PublicKey">Public Key</label>
-                            <input type="text" name="pubkey" class="form-control" id="server_PublicKey" value="{{.Device.PublicKey}}" required>
-                        </div>
-                    </div>
-                    {{else}}
-                    <input type="hidden" name="privkey" value="{{.Device.PrivateKey}}">
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="server_ro_PublicKey">Public Key</label>
-                            <input type="text" name="pubkey" readonly class="form-control" id="server_ro_PublicKey" value="{{.Device.PublicKey}}">
-                        </div>
-                    </div>
-                    {{end}}
-                    <div class="form-row">
-                        <div class="form-group required col-md-6">
-                            <label for="server_ListenPort">Listen port</label>
-                            <input type="number" name="port" class="form-control" id="server_ListenPort" placeholder="51820" value="{{.Device.ListenPort}}" required>
-                        </div>
-                        <div class="form-group required col-md-6">
-                            <label for="server_IPs">Server IP address</label>
-                            <input type="text" name="ip" class="form-control" id="server_IPs" placeholder="10.6.6.1/24" value="{{.Device.IPsStr}}" required>
-                        </div>
-                    </div>
-                    <h3>Client's global configuration (<span class="text-blue">g</span>)</h3>
-                    <div class="form-row">
-                        <div class="form-group required col-md-12">
-                            <label for="server_PublicEndpoint">Public Endpoint for Clients</label>
-                            <input type="text" name="endpoint" class="form-control" id="server_PublicEndpoint" placeholder="vpn.company.com:51820" value="{{.Device.DefaultEndpoint}}" required>
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label for="server_DNS">DNS Servers</label>
-                            <input type="text" name="dns" class="form-control" id="server_DNS" placeholder="1.1.1.1" value="{{.Device.DNSStr}}">
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="server_AllowedIP">Default allowed IPs</label>
-                            <input type="text" name="allowedip" class="form-control" id="server_AllowedIP" placeholder="10.6.6.0/24" value="{{.Device.DefaultAllowedIPsStr}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label for="server_MTU">MTU (also used for the server interface, 0 = default)</label>
-                            <input type="number" name="mtu" class="form-control" id="server_MTU" placeholder="" value="{{.Device.Mtu}}">
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="server_PersistentKeepalive">Persistent Keepalive (0 = off)</label>
-                            <input type="number" name="keepalive" class="form-control" id="server_PersistentKeepalive" placeholder="16" value="{{.Device.DefaultPersistentKeepalive}}">
-                        </div>
-                    </div>
-                    <h3>Interface configuration hooks</h3>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="server_PreUp">Pre Up</label>
-                            <input type="text" name="preup" class="form-control" id="server_PreUp" value="{{.Device.PreUp}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="server_PostUp">Post Up</label>
-                            <input type="text" name="postup" class="form-control" id="server_PostUp" value="{{.Device.PostUp}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="server_PreDown">Pre Down</label>
-                            <input type="text" name="predown" class="form-control" id="server_PreDown" value="{{.Device.PreDown}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="server_PostDown">Post Down</label>
-                            <input type="text" name="postdown" class="form-control" id="server_PostDown" value="{{.Device.PostDown}}">
-                        </div>
-                    </div>
-
-                    <div class="form-row">
-                        <div class="d-flex align-items-center">
-                            <a href="#" class="advanced-settings btn btn-link collapsed" data-toggle="collapse" data-target="#collapseAdvancedServer" aria-expanded="false" aria-controls="collapseAdvancedServer">
-                                Advanced Settings
-                            </a>
-                        </div>
-                    </div>
-                    <div id="collapseAdvancedServer" class="collapse" aria-labelledby="collapseAdvancedServer">
-                        <div class="form-row">
-                            <div class="form-group col-md-6">
-                                <label for="server_FirewallMark">Firewall Mark (0 = default or off)</label>
-                                <input type="number" name="firewallmark" class="form-control" id="server_FirewallMark" placeholder="" value="{{.Device.FirewallMark}}">
-                            </div>
-                            <div class="form-group col-md-6">
-                                <label for="server_RoutingTable">Routing Table (empty = default or auto)</label>
-                                <input type="text" name="routingtable" class="form-control" id="server_RoutingTable" placeholder="auto" value="{{.Device.RoutingTable}}">
-                            </div>
-                        </div>
-                        <div class="form-row">
-                            <div class="form-group col-md-12">
-                                <div class="custom-control custom-switch">
-                                    <input class="custom-control-input" name="saveconfig" type="checkbox" value="true" id="server_SaveConfig" {{if .Peer.SaveConfig}}checked{{end}}>
-                                    <label class="custom-control-label" for="server_SaveConfig">
-                                        Save Configuration (if interface was edited via WireGuard configuration tool)
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <button type="submit" class="btn btn-primary">Save</button>
-                    <a href="/admin" class="btn btn-secondary">Cancel</a>
-                    <a href="/admin/device/applyglobals" class="btn btn-dark float-right">Apply Global Settings (<span class="text-blue">g</span>) to clients</a>
-                </form>
-            </div>
-
-            <!-- client mode -->
-            <div class="tab-pane fade {{if eq .Device.Type "client"}}active show{{end}}" id="client">
-                <form method="post" enctype="multipart/form-data">
-                    <input type="hidden" name="_csrf" value="{{.Csrf}}">
-                    <input type="hidden" name="device" value="{{.Device.DeviceName}}">
-                    <input type="hidden" name="devicetype" value="client">
-                    <h3>Client's interface configuration</h3>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="client_DisplayName">Display Name</label>
-                            <input type="text" name="displayname" class="form-control" id="client_DisplayName" value="{{.Device.DisplayName}}">
-                        </div>
-                    </div>
-                    {{if .EditableKeys}}
-                    <div class="form-row">
-                        <div class="form-group required col-md-12">
-                            <label for="client_PrivateKey">Private Key</label>
-                            <input type="text" name="privkey" class="form-control" id="client_PrivateKey" value="{{.Device.PrivateKey}}" required>
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group required col-md-12">
-                            <label for="client_PublicKey">Public Key</label>
-                            <input type="text" name="pubkey" class="form-control" id="client_PublicKey" value="{{.Device.PublicKey}}" required>
-                        </div>
-                    </div>
-                    {{else}}
-                    <input type="hidden" name="privkey" value="{{.Device.PrivateKey}}">
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="client_ro_PublicKey">Public Key</label>
-                            <input type="text" name="pubkey" readonly class="form-control" id="client_ro_PublicKey" value="{{.Device.PublicKey}}">
-                        </div>
-                    </div>
-                    {{end}}
-                    <div class="form-row">
-                        <div class="form-group required col-md-6">
-                            <label for="client_IPs">Client IP address</label>
-                            <input type="text" name="ip" class="form-control" id="client_IPs" placeholder="10.6.6.1/24" value="{{.Device.IPsStr}}" required>
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="client_DNS">DNS Servers</label>
-                            <input type="text" name="dns" class="form-control" id="client_DNS" placeholder="1.1.1.1" value="{{.Device.DNSStr}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-4">
-                            <label for="client_MTU">MTU (0 = default)</label>
-                            <input type="number" name="mtu" class="form-control" id="client_MTU" placeholder="" value="{{.Device.Mtu}}">
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="client_FirewallMark">Firewall Mark (0 = default or off)</label>
-                            <input type="number" name="firewallmark" class="form-control" id="client_FirewallMark" placeholder="" value="{{.Device.FirewallMark}}">
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="client_RoutingTable">Routing Table (empty = default or auto)</label>
-                            <input type="text" name="routingtable" class="form-control" id="client_RoutingTable" placeholder="auto" value="{{.Device.RoutingTable}}">
-                        </div>
-                    </div>
-                    <h3>Interface configuration hooks</h3>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="client_PreUp">Pre Up</label>
-                            <input type="text" name="preup" class="form-control" id="client_PreUp" value="{{.Device.PreUp}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="client_PostUp">Post Up</label>
-                            <input type="text" name="postup" class="form-control" id="client_PostUp" value="{{.Device.PostUp}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="client_PreDown">Pre Down</label>
-                            <input type="text" name="predown" class="form-control" id="client_PreDown" value="{{.Device.PreDown}}">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <label for="client_PostDown">Post Down</label>
-                            <input type="text" name="postdown" class="form-control" id="client_PostDown" value="{{.Device.PostDown}}">
-                        </div>
-                    </div>
-
-                    <button type="submit" class="btn btn-primary">Save</button>
-                    <a href="/admin" class="btn btn-secondary">Cancel</a>
-                </form>
-            </div>
-        </div>
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_edit_user.html

@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Users</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-5">
-        {{if eq .User.CreatedAt .Epoch}}
-        <h1>Create a new user</h1>
-        {{else}}
-        <h1>Edit user <strong>{{.User.Email}}</strong></h1>
-        {{end}}
-
-        {{template "prt_flashes.html" .}}
-
-        <form method="post" enctype="multipart/form-data">
-            <input type="hidden" name="_csrf" value="{{.Csrf}}">
-            {{if eq .User.CreatedAt .Epoch}}
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="inputEmail">Email</label>
-                    <input type="text" name="email" class="form-control" id="inputEmail" value="{{.User.Email}}" required>
-                </div>
-            </div>
-            {{else}}
-            <input type="hidden" name="email" value="{{.User.Email}}">
-            {{end}}
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="inputFirstname">Firstname</label>
-                    <input type="text" name="firstname" class="form-control" id="inputFirstname" value="{{.User.Firstname}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group required col-md-12">
-                    <label for="inputLastname">Lastname</label>
-                    <input type="text" name="lastname" class="form-control" id="inputLastname" value="{{.User.Lastname}}" required>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12">
-                    <label for="inputPhone">Phone</label>
-                    <input type="text" name="phone" class="form-control" id="inputPhone" value="{{.User.Phone}}">
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12 {{if eq .User.CreatedAt .Epoch}}required{{end}}">
-                    <label for="inputPassword">Password</label>
-                    <input type="password" name="password" class="form-control" id="inputPassword" {{if eq .User.CreatedAt .Epoch}}required{{end}}>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-12">
-                    <div class="custom-control custom-switch">
-                        <input class="custom-control-input" name="isadmin" type="checkbox" value="true" id="inputAdmin" {{if .User.IsAdmin}}checked{{end}}>
-                        <label class="custom-control-label" for="inputAdmin">
-                            Administrator
-                        </label>
-                    </div>
-                    <div class="custom-control custom-switch">
-                        <input class="custom-control-input" name="isdisabled" type="checkbox" value="true" id="inputDisabled" {{if .User.DeletedAt.Valid}}checked{{end}}>
-                        <label class="custom-control-label" for="inputDisabled">
-                            Disabled
-                        </label>
-                    </div>
-                </div>
-            </div>
-
-            <button type="submit" class="btn btn-primary">Save</button>
-            <a href="/admin/users/" class="btn btn-secondary">Cancel</a>
-        </form>
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_index.html

@@ -1,272 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Admin</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-5">
-        <h1>WireGuard VPN Administration</h1>
-        {{template "prt_flashes.html" .}}
-        <div class="card">
-            <div class="card-header">
-                <div class="d-flex align-items-center">
-                    <span class="mr-auto">Interface status for <strong>{{.Device.DeviceName}}</strong> {{if eq $.Device.Type "server"}}(server mode){{end}}{{if eq $.Device.Type "client"}}(client mode){{end}}</span>
-                    <a href="/admin/device/write?dev={{.Device.DeviceName}}" title="Write interface configuration"><i class="fas fa-save"></i></a>
-                    &nbsp;&nbsp;&nbsp;
-                    <a href="/admin/device/download?dev={{.Device.DeviceName}}" title="Download interface configuration"><i class="fas fa-download"></i></a>
-                    &nbsp;&nbsp;&nbsp;
-                    <a href="/admin/device/edit?dev={{.Device.DeviceName}}" title="Edit interface settings"><i class="fas fa-cog"></i></a>
-                </div>
-            </div>
-            <div class="card-body">
-                <div class="row">
-                    {{if eq $.Device.Type "server"}}
-                    <div class="col-sm-6">
-                        <table class="table table-sm table-borderless device-status-table">
-                            <tbody>
-                            <tr>
-                                <td>Public Key:</td>
-                                <td>{{.Device.PublicKey}}</td>
-                            </tr>
-                            <tr>
-                                <td>Public Endpoint:</td>
-                                <td>{{.Device.DefaultEndpoint}}</td>
-                            </tr>
-                            <tr>
-                                <td>Listening Port:</td>
-                                <td>{{.Device.ListenPort}}</td>
-                            </tr>
-                            <tr>
-                                <td>Enabled Peers:</td>
-                                <td>{{len .Device.Interface.Peers}}</td>
-                            </tr>
-                            <tr>
-                                <td>Total Peers:</td>
-                                <td>{{.TotalPeers}}</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="col-sm-6">
-                        <table class="table table-sm table-borderless device-status-table">
-                            <tbody>
-                            <tr>
-                                <td>IP Address:</td>
-                                <td>{{.Device.IPsStr}}</td>
-                            </tr>
-                            <tr>
-                                <td>Default allowed IP's:</td>
-                                <td>{{.Device.DefaultAllowedIPsStr}}</td>
-                            </tr>
-                            <tr>
-                                <td>Default DNS servers:</td>
-                                <td>{{.Device.DNSStr}}</td>
-                            </tr>
-                            <tr>
-                                <td>Default MTU:</td>
-                                <td>{{.Device.Mtu}}</td>
-                            </tr>
-                            <tr>
-                                <td>Default Keepalive Interval:</td>
-                                <td>{{.Device.DefaultPersistentKeepalive}}</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    {{end}}
-                    {{if eq $.Device.Type "client"}}
-                    <div class="col-sm-6">
-                        <table class="table table-sm table-borderless device-status-table">
-                            <tbody>
-                            <tr>
-                                <td>Public Key:</td>
-                                <td>{{.Device.PublicKey}}</td>
-                            </tr>
-                            <tr>
-                                <td>Enabled Endpoints:</td>
-                                <td>{{len .Device.Interface.Peers}}</td>
-                            </tr>
-                            <tr>
-                                <td>Total Endpoints:</td>
-                                <td>{{.TotalPeers}}</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="col-sm-6">
-                        <table class="table table-sm table-borderless device-status-table">
-                            <tbody>
-                            <tr>
-                                <td>IP Address:</td>
-                                <td>{{.Device.IPsStr}}</td>
-                            </tr>
-                            <tr>
-                                <td>DNS servers:</td>
-                                <td>{{.Device.DNSStr}}</td>
-                            </tr>
-                            <tr>
-                                <td>Default MTU:</td>
-                                <td>{{.Device.Mtu}}</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    {{end}}
-                </div>
-
-            </div>
-        </div>
-        <div class="mt-4 row">
-            <div class="col-sm-8 col-12">
-                {{if eq $.Device.Type "server"}}
-                <h2 class="mt-2">Current VPN Peers</h2>
-                {{end}}
-                {{if eq $.Device.Type "client"}}
-                <h2 class="mt-2">Current VPN Endpoints</h2>
-                {{end}}
-            </div>
-            <div class="col-sm-4 col-12 text-right">
-                <a href="/admin/peer/emailall" data-toggle="confirmation" data-title="Send mail to all peers?" title="Send mail to all peers" class="btn btn-light"><i class="fa fa-fw fa-paper-plane"></i></a>
-                {{if eq $.Device.Type "server"}}
-                <a href="/admin/peer/createldap" title="Add multiple peers" class="btn btn-primary"><i class="fa fa-fw fa-plus"></i><i class="fa fa-fw fa-users"></i></a>
-                {{end}}
-                <a href="/admin/peer/create" title="Add a peer" class="btn btn-primary"><i class="fa fa-fw fa-plus"></i><i class="fa fa-fw fa-user"></i></a>
-            </div>
-        </div>
-        <div class="mt-2 table-responsive">
-            <table class="table table-sm" id="userTable">
-                <thead>
-                <tr>
-                    <th scope="col" class="list-image-cell"></th><!-- Status and expand -->
-                    <th scope="col"><a href="?sort=id">Identifier <i class="fa fa-fw {{.Session.GetSortIcon "peers" "id"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=pubKey">Public Key <i class="fa fa-fw {{.Session.GetSortIcon "peers" "pubKey"}}"></i></a></th>
-                    {{if eq $.Device.Type "server"}}
-                    <th scope="col"><a href="?sort=mail">E-Mail <i class="fa fa-fw {{.Session.GetSortIcon "peers" "mail"}}"></i></a></th>
-                    {{end}}
-                    {{if eq $.Device.Type "server"}}
-                    <th scope="col"><a href="?sort=ip">IP's <i class="fa fa-fw {{.Session.GetSortIcon "peers" "ip"}}"></i></a></th>
-                    {{end}}
-                    {{if eq $.Device.Type "client"}}
-                    <th scope="col"><a href="?sort=endpoint">Endpoint <i class="fa fa-fw {{.Session.GetSortIcon "peers" "endpoint"}}"></i></a></th>
-                    {{end}}
-                    <th scope="col"><a href="?sort=handshake">Handshake <i class="fa fa-fw {{.Session.GetSortIcon "peers" "handshake"}}"></i></a></th>
-                    <th scope="col"></th><!-- Actions -->
-                </tr>
-                </thead>
-                <tbody>
-                {{range $i, $p :=.Peers}}
-                    {{$peerUser:=(userForEmail $.Users $p.Email)}}
-                    <tr id="user-pos-{{$i}}" {{if $p.DeactivatedAt}}class="disabled-peer"{{end}}>
-                        <th scope="row" class="list-image-cell">
-                            <a href="#{{$p.UID}}" data-toggle="collapse" class="collapse-indicator collapsed"></a>
-                            <!-- online check -->
-                            <span title="Online status" class="online-status" id="online-{{$p.UID}}" data-pkey="{{$p.PublicKey}}"><i class="fas fa-unlink"></i></span>
-                        </th>
-                        <td>{{$p.Identifier}}</td>
-                        <td>{{$p.PublicKey}}</td>
-                        {{if eq $.Device.Type "server"}}
-                        <td>{{$p.Email}}</td>
-                        {{end}}
-                        {{if eq $.Device.Type "server"}}
-                        <td>{{$p.IPsStr}}</td>
-                        {{end}}
-                        {{if eq $.Device.Type "client"}}
-                        <td>{{$p.Endpoint}}</td>
-                        {{end}}
-                        <td><span data-toggle="tooltip" data-placement="left" title="" data-original-title="{{$p.LastHandshakeTime}}">{{$p.LastHandshake}}</span></td>
-                        <td>
-                            {{if eq $.Session.IsAdmin true}}
-                                <a href="/admin/peer/edit?pkey={{$p.PublicKey}}" title="Edit peer"><i class="fas fa-cog"></i></a>
-                            {{end}}
-                        </td>
-                    </tr>
-                    <tr class="hiddenRow">
-                        <td colspan="7" class="hiddenCell" style="white-space:nowrap">
-                            <div class="collapse" id="{{$p.UID}}" data-parent="#userTable">
-                                <div class="row collapsedRow">
-                                    <div class="col-md-6 leftBorder">
-                                        <ul class="nav nav-tabs">
-                                            <li class="nav-item">
-                                                <a class="nav-link active" data-toggle="tab" href="#t1{{$p.UID}}">Personal</a>
-                                            </li>
-                                            {{if eq $.Device.Type "server"}}
-                                            <li class="nav-item">
-                                                <a class="nav-link" data-toggle="tab" href="#t2{{$p.UID}}">Configuration</a>
-                                            </li>
-                                            {{end}}
-                                            <li class="nav-item">
-                                                <a class="nav-link" data-toggle="tab" href="#t3{{$p.UID}}">Danger Zone</a>
-                                            </li>
-                                        </ul>
-                                        <div class="tab-content" id="tabContent{{$p.UID}}">
-                                            <div id="t1{{$p.UID}}" class="tab-pane fade active show">
-                                                <h4>User details</h4>
-                                                {{if not $peerUser}}
-                                                    <p>No user information available...</p>
-                                                {{else}}
-                                                    <ul>
-                                                        <li>Firstname: {{$peerUser.Firstname}}</li>
-                                                        <li>Lastname: {{$peerUser.Lastname}}</li>
-                                                        <li>Phone: {{$peerUser.Phone}}</li>
-                                                        <li>Mail: {{$peerUser.Email}}</li>
-                                                    </ul>
-                                                {{end}}
-                                                <h4>Connection / Traffic</h4>
-                                                {{if not $p.Peer}}
-                                                    <p>No Traffic data available...</p>
-                                                {{else}}
-                                                    <p class="ml-4">{{if $p.DeactivatedAt}}-{{else}}<i class="fas fa-network-wired" title="Last Endpoint"></i> {{$p.Peer.Endpoint}}{{end}}</p>
-                                                    <p class="ml-4">{{if $p.DeactivatedAt}}-{{else}}<i class="fas fa-long-arrow-alt-down" title="Download"></i> {{formatBytes $p.Peer.ReceiveBytes}} / <i class="fas fa-long-arrow-alt-up" title="Upload"></i> {{formatBytes $p.Peer.TransmitBytes}}{{end}}</p>
-                                                {{end}}
-                                            </div>
-                                            {{if eq $.Device.Type "server"}}
-                                            <div id="t2{{$p.UID}}" class="tab-pane fade">
-                                                <pre>{{$p.Config}}</pre>
-                                            </div>
-                                            {{end}}
-                                            <div id="t3{{$p.UID}}" class="tab-pane fade">
-                                                <a href="/admin/peer/delete?pkey={{$p.PublicKey}}" class="btn btn-danger" title="Delete peer">Delete</a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col-md-3">
-                                        {{if eq $.Device.Type "server"}}
-                                        <img class="list-image-large" src="/user/qrcode?pkey={{$p.PublicKey}}"/>
-                                        {{end}}
-                                    </div>
-                                    <div class="col-md-3">
-                                        {{if eq $.Device.Type "server"}}
-                                        <div class="float-right mt-5">
-                                        <a href="/admin/peer/download?pkey={{$p.PublicKey}}" class="btn btn-primary" title="Download configuration">Download</a>
-                                        <a href="/admin/peer/email?pkey={{$p.PublicKey}}" class="btn btn-primary" title="Send configuration via Email">Email</a>
-                                        </div>
-                                        {{end}}
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-                {{end}}
-                </tbody>
-            </table>
-            <p>Currently listed peers: <strong>{{len .Peers}}</strong></p>
-        </div>
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_user_index.html

@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Users</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-5">
-        <h1>WireGuard VPN Users</h1>
-        {{template "prt_flashes.html" .}}
-        <div class="mt-4 row">
-            <div class="col-sm-10 col-12">
-                <h2 class="mt-2">All Users</h2>
-            </div>
-            <div class="col-sm-2 col-12 text-right">
-                <a href="/admin/users/create" title="Add a user" class="btn btn-primary"><i class="fa fa-fw fa-plus"></i>M</a>
-            </div>
-        </div>
-        <div class="mt-2 table-responsive">
-            <table class="table table-sm" id="userTable">
-                <thead>
-                <tr>
-                    <th scope="col"><a href="?sort=email">E-Mail <i class="fa fa-fw {{.Session.GetSortIcon "users" "email"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=lastname">Lastname <i class="fa fa-fw {{.Session.GetSortIcon "users" "lastname"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=firstname">Firstname <i class="fa fa-fw {{.Session.GetSortIcon "users" "firstname"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=source">Source <i class="fa fa-fw {{.Session.GetSortIcon "users" "source"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=admin">Is Admin <i class="fa fa-fw {{.Session.GetSortIcon "users" "admin"}}"></i></a></th>
-                    <th scope="col"></th><!-- Actions -->
-                </tr>
-                </thead>
-                <tbody>
-                {{range $i, $u :=.Users}}
-                    <tr id="user-pos-{{$i}}" {{if $u.DeletedAt.Valid}}class="disabled-peer"{{end}}>
-                        <td>{{$u.Email}}</td>
-                        <td>{{$u.Lastname}}</td>
-                        <td>{{$u.Firstname}}</td>
-                        <td>{{$u.Source}}</td>
-                        <td>{{if $u.IsAdmin}}True{{else}}False{{end}}</td>
-                        <td>
-                            {{if eq $.Session.IsAdmin true}}
-                            {{if eq $u.Source "db"}}
-                                <a href="/admin/users/edit?pkey={{$u.Email}}" title="Edit user"><i class="fas fa-cog"></i></a>
-                            {{end}}
-                            {{end}}
-                        </td>
-                    </tr>
-                {{end}}
-                </tbody>
-            </table>
-            <p>Currently listed users: <strong>{{len .Users}}</strong></p>
-        </div>
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/error.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Error</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top">
-    {{template "prt_nav.html" .}}
-    <div class="container">
-        <div class="text-center mt-5">
-            <div class="error mx-auto" data-text="{{.Data.Code}}">
-                <p class="m-0">{{.Data.Code}}</p>
-            </div>
-            <p class="text-dark mb-5 lead">{{.Data.Message}}</p>
-            <p class="text-black-50 mb-0">{{.Data.Details}}</p><a href="/">← Back to Dashboard</a>
-        </div>
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/index.html

@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<!-- Theme: https://bootswatch.com/lux/ -->
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }}</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-2">
-        <div class="page-header">
-            <h1>WireGuard VPN Portal</h1>
-        </div>
-        {{template "prt_flashes.html" .}}
-        <p class="lead">WireGuard® is an extremely simple yet fast and modern VPN that utilizes state-of-the-art cryptography. It aims to be faster, simpler, leaner, and more useful than IPsec, while avoiding the massive headache. It intends to be considerably more performant than OpenVPN. </p>
-        <h3 class="mt-3">More Information</h3>
-        <div class="row">
-            <div class="col-lg-4">
-                <div class="card border-secondary mb-4" style="min-height: 15rem;">
-                    <div class="card-header">WireGuard Installation</div>
-                    <div class="card-body">
-                        <h4 class="card-title">Installation</h4>
-                        <p class="card-text">Installation instructions for client software can be found on the official WireGuard website.</p>
-                        <a href="https://www.wireguard.com/install/" title="WireGuard Installation" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm">Open Instructions</a>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4">
-                <div class="card border-secondary mb-4" style="min-height: 15rem;">
-                    <div class="card-header">About WireGuard</div>
-                    <div class="card-body">
-                        <h4 class="card-title">About</h4>
-                        <p class="card-text">WireGuard® is an extremely simple yet fast and modern VPN that utilizes state-of-the-art cryptography.</p>
-                        <a href="https://www.wireguard.com/" title="WireGuard" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm">More details</a>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4">
-                <div class="card border-secondary mb-4" style="min-height: 15rem;">
-                    <div class="card-header">About WireGuard Portal</div>
-                    <div class="card-body">
-                        <h4 class="card-title">WireGuard Portal</h4>
-                        <p class="card-text">WireGuard Portal is a simple, web based configuration portal for WireGuard.</p>
-                        <a href="https://github.com/h44z/wg-portal/" title="WireGuard Portal" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm">More details</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="jumbotron jumbotron-home">
-            <h2 class="display-5">VPN Profiles</h2>
-            <p class="lead">You can access and download your personal VPN configurations via your Userprofile.</p>
-            <hr class="my-4">
-            <p>To find all your configured profiles click on the button below.</p>
-            <p class="lead">
-                <a href="/user/profile" class="btn btn-primary btn-lg" title="User-Profile">Open My Profile</a>
-            </p>
-        </div>
-
-        {{with eq $.Session.LoggedIn true}}{{with eq $.Session.IsAdmin true}}
-        <div class="jumbotron jumbotron-home">
-            <h2 class="display-5">Administration Area</h2>
-            <p class="lead">In the administration area you can manage WireGuard peers and the server interface as well as users that are allowed to log in to the WireGuard Portal.</p>
-            <hr class="my-4">
-            <p>To find all your configured profiles click on the button below.</p>
-            <p class="lead">
-                <a href="/admin/" class="btn btn-primary btn-lg" title="WireGuard Administration">Open WireGuard Administration</a>
-                <a href="/admin/users/" class="btn btn-primary btn-lg" title="User Administration">Open User Administration</a>
-            </p>
-        </div>
-        {{end}}{{end}}
-
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/login.html

@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .static.WebsiteTitle }} - Login</title>
-    <meta name="description" content="{{ .static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/fonts/font-awesome.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome5-overrides.min.css">
-    <link rel="stylesheet" href="/css/signin.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <a class="navbar-brand" href="/"><img src="{{$.static.WebsiteLogo}}" alt="{{$.static.CompanyName}}"/></a>
-        <div id="topNavbar" class="navbar-collapse collapse">
-        </div><!--/.navbar-collapse -->
-    </nav>
-    <div class="container mt-1">
-        <div class="card mt-5">
-            <div class="card-header">Please sign in</div>
-            <div class="card-body">
-                <form class="form-signin" method="post">
-                    <input type="hidden" name="_csrf" value="{{.Csrf}}">
-                    <div class="form-group">
-                        <label for="inputUsername">Email</label>
-                        <input type="text" name="username" class="form-control" id="inputUsername" aria-describedby="usernameHelp" placeholder="Enter email">
-                    </div>
-                    <div class="form-group">
-                        <label for="inputPassword">Password</label>
-                        <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Password">
-                    </div>
-                    <button class="btn btn-lg btn-primary btn-block mt-5" type="submit">Sign in</button>
-
-                    {{ if eq .error true }}
-                        <div class="alert alert-danger mt-3" role="alert">
-                            {{.message}}
-                        </div>
-                    {{end}}
-                </form>
-
-                <div class="card o-hidden border-0 my-5">
-                    <div class="card-body p-0">
-                        <a href="/" class="btn btn-white btn-block text-primary btn-user">Go Home</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        {{template "prt_flashes.html" .}}
-    </div>
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/prt_flashes.html

@@ -1,5 +0,0 @@
-{{range $flash := $.Alerts}}
-    <div class="alert alert-{{$flash.Type}}" role="alert">
-        {{$flash.Message}}
-    </div>
-{{end}}

assets/tpl/prt_footer.html

@@ -1,5 +0,0 @@
-<footer class="page-footer mt-auto">
-    <div class="container mt-3">
-        <p class="text-muted">Copyright © {{ $.Static.CompanyName }} {{$.Static.Year}}, version {{$.Static.Version}} <a class="float-right scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a></p>
-    </div>
-</footer>

assets/tpl/prt_nav.html

@@ -1,61 +0,0 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <a class="navbar-brand" href="/"><img src="{{$.Static.WebsiteLogo}}" alt="{{$.Static.CompanyName}}"/></a>
-    <div id="topNavbar" class="navbar-collapse collapse">
-        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
-            <li class="nav-spacer"></li>
-            {{with eq $.Session.LoggedIn true}}{{with eq $.Session.IsAdmin true}}
-            {{with eq $.Route "/admin/"}}
-            <form class="form-inline my-2 my-lg-0" method="get">
-                <input class="form-control mr-sm-2" name="search" type="search" placeholder="Search" aria-label="Search" value="{{index $.Session.Search "peers"}}">
-                <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
-            </form>
-            {{end}}
-            {{with eq $.Route "/admin/users/"}}
-            <form class="form-inline my-2 my-lg-0" method="get">
-                <input class="form-control mr-sm-2" name="search" type="search" placeholder="Search" aria-label="Search" value="{{index $.Session.Search "users"}}">
-                <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
-            </form>
-            {{end}}
-            {{end}}{{end}}
-        </ul>
-        {{with eq $.Session.LoggedIn true}}{{with eq $.Session.IsAdmin true}}
-        {{with startsWith $.Route "/admin/"}}
-        <form class="form-inline my-2 my-lg-0" method="get">
-            <div class="form-group mr-sm-2">
-                <select name="device" id="inputDevice" class="form-control device-selector">
-                    {{range $d, $dn := $.DeviceNames}}
-                    <option value="{{$d}}" {{if eq $d $.Session.DeviceName}}selected{{end}}>{{$d}} {{if and (ne $dn "") (ne $d $dn)}}({{$dn}}){{end}}</option>
-                    {{end}}
-                </select>
-            </div>
-        </form>
-        {{end}}
-        {{end}}{{end}}
-        {{if eq $.Session.LoggedIn true}}
-            <div class="nav-item dropdown">
-                <a href="#" class="navbar-text dropdown-toggle" data-toggle="dropdown">{{$.Session.Firstname}} {{$.Session.Lastname}} <span class="caret"></span></a>
-                <div class="dropdown-menu">
-                    {{with eq $.Session.LoggedIn true}}{{with eq $.Session.IsAdmin true}}
-                        <a class="dropdown-item" href="/admin/"><i class="fas fa-cogs"></i> Administration</a>
-                        <a class="dropdown-item" href="/admin/users/"><i class="fas fa-users-cog"></i> User Management</a>
-                        <div class="dropdown-divider"></div>
-                    {{end}}{{end}}
-                    <a class="dropdown-item" href="/user/profile"><i class="fas fa-user"></i> Profile</a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="/auth/logout"><i class="fas fa-sign-out-alt"></i> Logout</a>
-                </div>
-            </div>
-        {{else}}
-            <a href="/auth/login" class="navbar-text"><i class="fas fa-sign-in-alt fa-sm fa-fw mr-2 text-gray-400"></i> Login</a></li>
-        {{end}}
-    </div><!--/.navbar-collapse -->
-</nav>
-{{if not $.Device.IsValid}}
-<div class="container">
-    <div class="alert alert-danger">Warning: WireGuard Interface {{$.Device.DeviceName}} is not fully configured! Configurations may be incomplete and non functional!</div>
-</div>
-{{end}}

assets/tpl/user_index.html

@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .Static.WebsiteTitle }} - Profile</title>
-    <meta name="description" content="{{ .Static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top" class="d-flex flex-column min-vh-100">
-    {{template "prt_nav.html" .}}
-    <div class="container mt-5">
-        <h1>WireGuard VPN User-Portal</h1>
-
-        <h2 class="mt-4">Your VPN Profiles</h2>
-        <div class="mt-2 table-responsive">
-            <table class="table table-sm" id="userTable">
-                <thead>
-                <tr>
-                    <th scope="col" class="list-image-cell"></th><!-- Status and expand -->
-                    <th scope="col"><a href="?sort=id">Identifier <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "id"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=pubKey">Public Key <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "pubKey"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=mail">E-Mail <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "mail"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=ip">IP's <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "ip"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=handshake">Handshake <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "handshake"}}"></i></a></th>
-                </tr>
-                </thead>
-                <tbody>
-                {{range $i, $p :=.Peers}}
-                    {{$peerUser:=(userForEmail $.Users $p.Email)}}
-                    <tr id="user-pos-{{$i}}" {{if $p.DeactivatedAt}}class="disabled-peer"{{end}}>
-                        <th scope="row" class="list-image-cell">
-                            <a href="#{{$p.UID}}" data-toggle="collapse" class="collapse-indicator collapsed"></a>
-                            <!-- online check -->
-                            <span class="online-status" id="online-{{$p.UID}}" data-pkey="{{$p.PublicKey}}"><i class="fas fa-unlink"></i></span>
-                        </th>
-                        <td>{{$p.Identifier}}</td>
-                        <td>{{$p.PublicKey}}</td>
-                        <td>{{$p.Email}}</td>
-                        <td>{{$p.IPsStr}}</td>
-                        <td><span data-toggle="tooltip" data-placement="left" title="" data-original-title="{{$p.LastHandshakeTime}}">{{$p.LastHandshake}}</span></td>
-                    </tr>
-                    <tr class="hiddenRow">
-                        <td colspan="6" class="hiddenCell" style="white-space:nowrap">
-                            <div class="collapse" id="{{$p.UID}}" data-parent="#userTable">
-                                <div class="row collapsedRow">
-                                    <div class="col-md-6 leftBorder">
-                                        <ul class="nav nav-tabs">
-                                            <li class="nav-item">
-                                                <a class="nav-link active" data-toggle="tab" href="#t1{{$p.UID}}">Personal</a>
-                                            </li>
-                                            <li class="nav-item">
-                                                <a class="nav-link" data-toggle="tab" href="#t2{{$p.UID}}">Configuration</a>
-                                            </li>
-                                        </ul>
-                                        <div class="tab-content" id="tabContent{{$p.UID}}">
-                                            <div id="t1{{$p.UID}}" class="tab-pane fade active show">
-                                                <h4>User details</h4>
-                                                {{if not $peerUser}}
-                                                    <p>No user information available...</p>
-                                                {{else}}
-                                                    <ul>
-                                                        <li>Firstname: {{$peerUser.Firstname}}</li>
-                                                        <li>Lastname: {{$peerUser.Lastname}}</li>
-                                                        <li>Phone: {{$peerUser.Phone}}</li>
-                                                        <li>Mail: {{$peerUser.Email}}</li>
-                                                    </ul>
-                                                {{end}}
-                                                <h4>Traffic</h4>
-                                                {{if not $p.Peer}}
-                                                    <p>No Traffic data available...</p>
-                                                {{else}}
-                                                    <p>{{if $p.DeactivatedAt}}-{{else}}<i class="fas fa-long-arrow-alt-down"></i></i> {{formatBytes $p.Peer.ReceiveBytes}} / <i class="fas fa-long-arrow-alt-up"></i> {{formatBytes $p.Peer.TransmitBytes}}{{end}}</p>
-                                                {{end}}
-                                            </div>
-                                            <div id="t2{{$p.UID}}" class="tab-pane fade">
-                                                <pre>{{$p.Config}}</pre>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <img class="list-image-large" src="/user/qrcode?pkey={{$p.PublicKey}}"/>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <div class="float-right mt-5">
-                                        <a href="/user/download?pkey={{$p.PublicKey}}" class="btn btn-primary" title="Download configuration">Download</a>
-                                        <a href="/user/email?pkey={{$p.PublicKey}}" class="btn btn-primary" title="Send configuration via Email">Email</a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-                {{end}}
-                </tbody>
-            </table>
-            <p>Currently listed peers: <strong>{{len .Peers}}</strong></p>
-        </div>
-    </div>
-    {{template "prt_footer.html" .}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/popper.min.js"></script>
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    <script src="/js/bootstrap-confirmation.min.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

cmd/api_build_tool/main.go

@@ -0,0 +1,70 @@
+package main
+
+import (
+	"fmt"
+	"log"
+	"os"
+	"path/filepath"
+	"strings"
+
+	"github.com/sirupsen/logrus"
+	"github.com/swaggo/swag"
+	"github.com/swaggo/swag/gen"
+)
+
+// this replaces the call to: swag init --propertyStrategy pascalcase --parseDependency --parseInternal --generalInfo base.go
+func main() {
+	wd, err := os.Getwd() // should be the project root
+	if err != nil {
+		panic(err)
+	}
+
+	apiBasePath := filepath.Join(wd, "/internal/app/api")
+	apis := []string{"v0"}
+
+	hasError := false
+	for _, apiVersion := range apis {
+		apiPath := filepath.Join(apiBasePath, apiVersion, "handlers")
+
+		apiVersion = strings.TrimLeft(apiVersion, "api-")
+		log.Println("")
+		log.Println("Generate swagger docs for API", apiVersion)
+		log.Println("Api path:", apiPath)
+
+		err := generateApi(apiBasePath, apiPath, apiVersion)
+		if err != nil {
+			hasError = true
+			logrus.Errorf("failed to generate API docs for %s: %v", apiVersion, err)
+		}
+
+		log.Println("Generated swagger docs for API", apiVersion)
+	}
+
+	if hasError {
+		os.Exit(1)
+	}
+}
+
+func generateApi(basePath, apiPath, version string) error {
+	err := gen.New().Build(&gen.Config{
+		SearchDir:           apiPath,
+		Excludes:            "",
+		MainAPIFile:         "base.go",
+		PropNamingStrategy:  swag.PascalCase,
+		OutputDir:           filepath.Join(basePath, "core/assets/doc"),
+		OutputTypes:         []string{"json", "yaml"},
+		ParseVendor:         false,
+		ParseDependency:     3,
+		MarkdownFilesDir:    "",
+		ParseInternal:       true,
+		GeneratedTime:       false,
+		CodeExampleFilesDir: "",
+		ParseDepth:          3,
+		InstanceName:        version,
+	})
+	if err != nil {
+		return fmt.Errorf("swag failed: %w", err)
+	}
+
+	return nil
+}

cmd/wg-portal/main.go

@@ -2,101 +2,144 @@ package main
 
 import (
 	"context"
-	"io/ioutil"
+	"github.com/h44z/wg-portal/internal/app/api/core"
+	handlersV0 "github.com/h44z/wg-portal/internal/app/api/v0/handlers"
+	"github.com/h44z/wg-portal/internal/app/audit"
+	"github.com/h44z/wg-portal/internal/app/auth"
+	"github.com/h44z/wg-portal/internal/app/configfile"
+	"github.com/h44z/wg-portal/internal/app/mail"
+	"github.com/h44z/wg-portal/internal/app/route"
+	"github.com/h44z/wg-portal/internal/app/users"
+	"github.com/h44z/wg-portal/internal/app/wireguard"
 	"os"
-	"os/signal"
+	"strings"
 	"syscall"
 	"time"
 
-	"git.prolicht.digital/pub/healthcheck"
-	"github.com/h44z/wg-portal/internal/server"
+	"github.com/h44z/wg-portal/internal"
+	"github.com/h44z/wg-portal/internal/adapters"
+	"github.com/h44z/wg-portal/internal/app"
+	"github.com/h44z/wg-portal/internal/config"
 	"github.com/sirupsen/logrus"
+	evbus "github.com/vardius/message-bus"
 )
 
+// main entry point for WireGuard Portal
 func main() {
-	_ = setupLogger(logrus.StandardLogger())
+	ctx := internal.SignalAwareContext(context.Background(), syscall.SIGHUP, syscall.SIGINT, syscall.SIGTERM)
 
-	c := make(chan os.Signal, 1)
-	signal.Notify(c, syscall.SIGINT, syscall.SIGTERM, syscall.SIGHUP)
+	logrus.Infof("Starting WireGuard Portal V2...")
+	logrus.Infof("WireGuard Portal version: %s", internal.Version)
 
-	logrus.Infof("starting WireGuard Portal Server [%s]...", server.Version)
+	cfg, err := config.GetConfig()
+	internal.AssertNoError(err)
+	setupLogging(cfg)
 
-	// Context for clean shutdown
-	ctx, cancel := context.WithCancel(context.Background())
-	defer cancel()
+	cfg.LogStartupValues()
 
-	// start health check service on port 11223
-	healthcheck.New(healthcheck.WithContext(ctx)).Start()
+	rawDb, err := adapters.NewDatabase(cfg.Database)
+	internal.AssertNoError(err)
 
-	service := server.Server{}
-	if err := service.Setup(ctx); err != nil {
-		logrus.Fatalf("setup failed: %v", err)
+	database, err := adapters.NewSqlRepository(rawDb)
+	internal.AssertNoError(err)
+
+	wireGuard := adapters.NewWireGuardRepository()
+
+	wgQuick := adapters.NewWgQuickRepo()
+
+	mailer := adapters.NewSmtpMailRepo(cfg.Mail)
+
+	cfgFileSystem, err := adapters.NewFileSystemRepository(cfg.Advanced.ConfigStoragePath)
+	internal.AssertNoError(err)
+
+	shouldExit, err := app.HandleProgramArgs(cfg, rawDb)
+	switch {
+	case shouldExit && err == nil:
+		return
+	case shouldExit && err != nil:
+		logrus.Errorf("Failed to process program args: %v", err)
+		os.Exit(1)
+	case !shouldExit:
+		internal.AssertNoError(err)
 	}
 
-	// Attach signal handlers to context
-	go func() {
-		osCall := <-c
-		logrus.Tracef("received system call: %v", osCall)
-		cancel() // cancel the context
-	}()
+	queueSize := 100
+	eventBus := evbus.New(queueSize)
 
-	// Start main process in background
-	go service.Run()
+	userManager, err := users.NewUserManager(cfg, eventBus, database, database)
+	internal.AssertNoError(err)
 
-	<-ctx.Done() // Wait until the context gets canceled
+	authenticator, err := auth.NewAuthenticator(&cfg.Auth, eventBus, userManager)
+	internal.AssertNoError(err)
 
-	// Give goroutines some time to stop gracefully
-	logrus.Info("stopping WireGuard Portal Server...")
-	time.Sleep(2 * time.Second)
+	wireGuardManager, err := wireguard.NewWireGuardManager(cfg, eventBus, wireGuard, wgQuick, database)
+	internal.AssertNoError(err)
 
-	logrus.Infof("stopped WireGuard Portal Server...")
-	logrus.Exit(0)
+	statisticsCollector, err := wireguard.NewStatisticsCollector(cfg, database, wireGuard)
+	internal.AssertNoError(err)
+
+	cfgFileManager, err := configfile.NewConfigFileManager(cfg, eventBus, database, database, cfgFileSystem)
+	internal.AssertNoError(err)
+
+	mailManager, err := mail.NewMailManager(cfg, mailer, cfgFileManager, database, database)
+	internal.AssertNoError(err)
+
+	auditRecorder, err := audit.NewAuditRecorder(cfg, eventBus, database)
+	internal.AssertNoError(err)
+	auditRecorder.StartBackgroundJobs(ctx)
+
+	routeManager, err := route.NewRouteManager(cfg, eventBus, database)
+	internal.AssertNoError(err)
+	routeManager.StartBackgroundJobs(ctx)
+
+	backend, err := app.New(cfg, eventBus, authenticator, userManager, wireGuardManager,
+		statisticsCollector, cfgFileManager, mailManager)
+	internal.AssertNoError(err)
+	err = backend.Startup(ctx)
+	internal.AssertNoError(err)
+
+	apiFrontend := handlersV0.NewRestApi(cfg, backend)
+
+	webSrv, err := core.NewServer(cfg, apiFrontend)
+	internal.AssertNoError(err)
+
+	go webSrv.Run(ctx, cfg.Web.ListeningAddress)
+
+	// wait until context gets cancelled
+	<-ctx.Done()
+
+	logrus.Infof("Stopping WireGuard Portal")
+
+	time.Sleep(5 * time.Second) // wait for (most) goroutines to finish gracefully
+
+	logrus.Infof("Stopped WireGuard Portal")
 }
 
-func setupLogger(logger *logrus.Logger) error {
-	// Check environment variables for logrus settings
-	level, ok := os.LookupEnv("LOG_LEVEL")
-	if !ok {
-		level = "debug" // Default logrus level
-	}
-
-	useJSON, ok := os.LookupEnv("LOG_JSON")
-	if !ok {
-		useJSON = "false" // Default use human readable logging
-	}
-
-	useColor, ok := os.LookupEnv("LOG_COLOR")
-	if !ok {
-		useColor = "true"
-	}
-
-	switch level {
-	case "off":
-		logger.SetOutput(ioutil.Discard)
-	case "info":
-		logger.SetLevel(logrus.InfoLevel)
-	case "debug":
-		logger.SetLevel(logrus.DebugLevel)
+func setupLogging(cfg *config.Config) {
+	switch strings.ToLower(cfg.Advanced.LogLevel) {
 	case "trace":
-		logger.SetLevel(logrus.TraceLevel)
+		logrus.SetLevel(logrus.TraceLevel)
+	case "debug":
+		logrus.SetLevel(logrus.DebugLevel)
+	case "info", "information":
+		logrus.SetLevel(logrus.InfoLevel)
+	case "warn", "warning":
+		logrus.SetLevel(logrus.WarnLevel)
+	case "error":
+		logrus.SetLevel(logrus.ErrorLevel)
+	default:
+		logrus.SetLevel(logrus.WarnLevel)
 	}
 
-	var formatter logrus.Formatter
-	if useJSON == "false" {
-		f := new(logrus.TextFormatter)
-		f.TimestampFormat = "2006-01-02 15:04:05"
-		f.FullTimestamp = true
-		if useColor == "true" {
-			f.ForceColors = true
-		}
-		formatter = f
-	} else {
-		f := new(logrus.JSONFormatter)
-		f.TimestampFormat = "2006-01-02 15:04:05"
-		formatter = f
+	switch {
+	case cfg.Advanced.LogJson:
+		logrus.SetFormatter(&logrus.JSONFormatter{
+			PrettyPrint: cfg.Advanced.LogPretty,
+		})
+	case cfg.Advanced.LogPretty:
+		logrus.SetFormatter(&logrus.TextFormatter{
+			ForceColors:   true,
+			DisableColors: false,
+		})
 	}
-
-	logger.SetFormatter(formatter)
-
-	return nil
 }

config.yml.sample

@@ -0,0 +1,49 @@
+advanced:
+  log_level: trace
+
+core:
+  admin_user: test@test.de
+  admin_password: secret
+  create_default_peer: true
+  create_default_peer_on_creation: false
+
+web:
+  external_url: http://localhost:8888
+  request_logging: true
+
+auth:
+  callback_url_prefix: http://localhost:8888/api/v0
+  ldap:
+    - id: ldap1
+      provider_name: company ldap
+      display_name: Login with</br>LDAP
+      url: ldap://ldap.yourcompany.local:389
+      bind_user: ldap_wireguard@yourcompany.local
+      bind_pass: super_Secret_PASSWORD
+      base_dn: DC=YOURCOMPANY,DC=LOCAL
+      login_filter: (&(objectClass=organizationalPerson)(mail={{login_identifier}})(!userAccountControl:1.2.840.113556.1.4.803:=2))
+      admin_group: CN=WireGuardAdmins,OU=it,DC=YOURCOMPANY,DC=LOCAL
+      synchronize: false
+      sync_filter: (&(objectClass=organizationalPerson)(!userAccountControl:1.2.840.113556.1.4.803:=2)(mail=*))
+      registration_enabled: true
+  oidc:
+    - id: oidc1
+      provider_name: google
+      display_name: Login with</br>Google
+      base_url: https://accounts.google.com
+      client_id: the-client-id-1234.apps.googleusercontent.com
+      client_secret: A_CLIENT_SECRET
+      extra_scopes:
+        - https://www.googleapis.com/auth/userinfo.email
+        - https://www.googleapis.com/auth/userinfo.profile
+      registration_enabled: true
+    - id: oidc2
+      provider_name: google2
+      display_name: Login with</br>Google2
+      base_url: https://accounts.google.com
+      client_id: another-client-id-1234.apps.googleusercontent.com
+      client_secret: A_CLIENT_SECRET
+      extra_scopes:
+        - https://www.googleapis.com/auth/userinfo.email
+        - https://www.googleapis.com/auth/userinfo.profile
+      registration_enabled: true

docker-compose.yml

@@ -1,16 +1,21 @@
+---
 version: '3.6'
 services:
   wg-portal:
-    image: h44z/wg-portal:1.0.6
+    image: wgportal/wg-portal:v2
     container_name: wg-portal
     restart: unless-stopped
+    logging:
+      options:
+        max-size: "10m"
+        max-file: "3"
     cap_add:
       - NET_ADMIN
     network_mode: "host"
     volumes:
       - /etc/wireguard:/etc/wireguard
       - ./data:/app/data
-    ports:
-      - '8123:8123'
-    environment:
-      - EXTERNAL_URL=http://localhost:8123
+      - ./config:/app/config
+#    restart: no
+#    command: ["-migrateFrom=/app/data/wg_portal.db"]
+

docs/CNAME

@@ -0,0 +1 @@
+wgportal.org

docs/assets/images/logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>WireGuard icon</title><path d="M23.98 11.645S24.533 0 11.735 0C.418 0 .064 11.17.064 11.17S-1.6 24 11.997 24C25.04 24 23.98 11.645 23.98 11.645zM8.155 7.576c2.4-1.47 5.469-.571 6.618 1.638.218.419.246 1.063.108 1.503-.477 1.516-1.601 2.366-3.145 2.728.455-.39.817-.832.933-1.442a2.112 2.112 0 0 0-.364-1.677 2.14 2.14 0 0 0-2.465-.75c-.95.36-1.47 1.228-1.377 2.294.087.99.839 1.632 2.245 1.876-.21.111-.372.193-.53.281a5.113 5.113 0 0 0-1.644 1.43c-.143.192-.24.208-.458.075-2.827-1.729-3.009-6.067.078-7.956zM6.04 18.258c-.455.116-.895.286-1.359.438.227-1.532 2.021-2.943 3.539-2.782a3.91 3.91 0 0 0-.74 2.072c-.504.093-.98.155-1.44.272zM15.703 3.3c.448.017.898.01 1.347.02a2.324 2.324 0 0 1 .334.047 3.249 3.249 0 0 1-.34.434c-.16.15-.341.296-.573.069-.055-.055-.187-.042-.283-.044-.447-.005-.894-.02-1.34-.003a8.323 8.323 0 0 0-1.154.118c-.072.013-.178.25-.146.338.078.207.191.435.359.567.619.49 1.277.928 1.9 1.413.604.472 1.167.99 1.51 1.7.446.928.46 1.9.267 2.877-.322 1.63-1.147 2.98-2.483 3.962-.538.395-1.205.62-1.821.903-.543.25-1.1.465-1.644.712-.98.446-1.53 1.51-1.369 2.615.149 1.015 1.04 1.862 2.059 2.037 1.223.21 2.486-.586 2.785-1.83.336-1.397-.423-2.646-1.845-3.024l-.256-.066c.38-.17.708-.291 1.012-.458q.793-.437 1.558-.925c.15-.096.231-.096.36.014.977.846 1.56 1.898 1.724 3.187.27 2.135-.74 4.096-2.646 5.101-2.948 1.555-6.557-.215-7.208-3.484-.558-2.8 1.418-5.34 3.797-5.83 1.023-.211 1.958-.637 2.685-1.425.47-.508.697-.944.775-1.141a3.165 3.165 0 0 0 .217-1.158 2.71 2.71 0 0 0-.237-.992c-.248-.566-1.2-1.466-1.435-1.656l-2.24-1.754c-.079-.065-.168-.06-.36-.047-.23.016-.815.048-1.067-.018.204-.155.76-.38 1-.56-.726-.49-1.554-.314-2.315-.46.176-.328 1.046-.831 1.541-.888a7.323 7.323 0 0 0-.135-.822c-.03-.111-.154-.22-.263-.283-.262-.154-.541-.281-.843-.434a1.755 1.755 0 0 1 .906-.28 3.385 3.385 0 0 1 .908.088c.54.123.97.042 1.399-.324-.338-.136-.676-.26-1.003-.407a9.843 9.843 0 0 1-.942-.493c.85.118 1.671.437 2.54.32l.022-.118-2.018-.47c1.203-.11 2.323-.128 3.384.388.299.146.61.266.897.432.14.08.233.24.348.365.09.098.164.23.276.29.424.225.89.234 1.366.223l.01-.16c.479.15 1.017.702 1.017 1.105-.776 0-1.55-.003-2.325.004-.083 0-.165.061-.247.094.078.046.155.128.235.131z M14.703 2.153a.118.118 0 0 0-.016.19.179.179 0 0 0 .246.065c.075-.038.148-.078.238-.125-.072-.062-.13-.114-.19-.163-.106-.087-.193-.032-.278.033z"/></svg>

docs/documentation/getting-started/building.md

@@ -0,0 +1,11 @@
+To build a standalone application, use the Makefile provided in the repository.
+Go version **1.21** or higher has to be installed to build WireGuard Portal.
+If you want to re-compile the frontend, NodeJS **18** and NPM >= **9** is required.
+
+```shell
+# build the frontend (optional)
+make frontend
+
+# build the binary
+make build
+```

docs/documentation/getting-started/docker.md

@@ -0,0 +1,81 @@
+## Image Usage
+
+The preferred way to start WireGuard Portal as Docker container is to use Docker Compose.
+
+A sample docker-compose.yml:
+
+```yaml
+version: '3.6'
+services:
+  wg-portal:
+    image: wgportal/wg-portal:v2
+    restart: unless-stopped
+    cap_add:
+      - NET_ADMIN
+    network_mode: "host"
+    ports:
+      - "8888:8888"
+    volumes:
+      - /etc/wireguard:/etc/wireguard
+      - ./data:/app/data
+      - ./config:/app/config
+```
+
+By default, the webserver is listening on port **8888**.
+
+Volumes for `/app/data` and `/app/config` should be used ensure data persistence across container restarts.
+
+## Image Versioning
+
+All images are hosted on Docker Hub at [https://hub.docker.com/r/wgportal/wg-portal](https://hub.docker.com/r/wgportal/wg-portal).
+There are three types of tags in the repository:
+
+#### Semantic versioned tags
+For example, `1.0.19`.
+
+These are official releases of WireGuard Portal. They correspond to the GitHub tags that we make, and you can see the release notes for them here: [https://github.com/h44z/wg-portal/releases](https://github.com/h44z/wg-portal/releases).
+
+Once these tags show up in this repository, they will never change.
+
+For production deployments of WireGuard Portal, we strongly recommend using one of these tags, e.g. **wgportal/wg-portal:1.0.19**, instead of the latest or canary tags.
+
+If you only want to stay at the same major or major+minor version, use either `v[MAJOR]` or `[MAJOR].[MINOR]` tags. For example `v1` or `1.0`.
+
+Version **1** is currently **stable**, version **2** is in **development**.
+
+#### latest
+This is the most recent build to master! It changes a lot and is very unstable.
+
+We recommend that you don't use it except for development purposes.
+
+#### Branch tags
+For each commit in the master and the stable branch, a corresponding Docker image is build. These images use the `master` or `stable` tags.
+
+
+
+## Configuration
+You can configure WireGuard Portal using a yaml configuration file.
+The filepath of the yaml configuration file defaults to `/app/config/config.yml`.
+It is possible to override the configuration filepath using the environment variable **WG_PORTAL_CONFIG**.
+
+By default, WireGuard Portal uses a SQLite database. The database is stored in `/app/data/sqlite.db`.
+
+You should mount those directories as a volume:
+- /app/data
+- /app/config
+
+### Configuration Options
+All available YAML configuration options are available [here](https://github.com/h44z/wg-portal#configuration).
+
+A very basic example:
+
+```yaml
+core:
+  admin_user: test@wg-portal.local
+  admin_password: secret
+
+web:
+  external_url: http://localhost:8888
+  request_logging: true
+```
+

docs/documentation/getting-started/upgrade.md

@@ -0,0 +1,25 @@
+For production deployments of WireGuard Portal, we strongly recommend using version 1. 
+If you want to use version 2, please be aware that it is still in beta and not feature complete.
+
+## Upgrade from v1 to v2
+
+> :warning: Before upgrading from V1, make sure that you have a backup of your currently working configuration files and database!
+
+To start the upgrade process, start the wg-portal binary with the **-migrateFrom** parameter.
+The configuration (config.yml) for WireGuard Portal must be updated and valid before starting the upgrade.
+
+To upgrade from a previous SQLite database, start wg-portal like:
+
+```shell
+./wg-portal-amd64 -migrateFrom=old_wg_portal.db
+```
+
+You can also specify the database type using the parameter **-migrateFromType**, supported types: mysql, mssql, postgres or sqlite.
+For example:
+
+```shell
+./wg-portal-amd64 -migrateFromType=mysql -migrateFrom=user:pass@tcp(1.2.3.4:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local
+```
+
+The upgrade will transform the old, existing database and store the values in the new database specified in the **config.yml** configuration file.
+Ensure that the new database does not contain any data!

docs/documentation/overview.md

@@ -0,0 +1,29 @@
+**WireGuard Portal** is a simple, web based configuration portal for [WireGuard](https://wireguard.com).
+The portal uses the WireGuard [wgctrl](https://github.com/WireGuard/wgctrl-go) library to manage existing VPN
+interfaces. This allows for seamless activation or deactivation of new users, without disturbing existing VPN
+connections.
+
+The configuration portal supports using a database (SQLite, MySQL, MsSQL or Postgres), OAuth or LDAP 
+(Active Directory or OpenLDAP) as a user source for authentication and profile data.
+
+## Features
+* Self-hosted - the whole application is a single binary
+* Responsive web UI written in Vue.JS
+* Automatically select IP from the network pool assigned to client
+* QR-Code for convenient mobile client configuration
+* Sent email to client with QR-code and client config
+* Enable / Disable clients seamlessly
+* Generation of wg-quick configuration file (`wgX.conf`) if required
+* User authentication (database, OAuth or LDAP)
+* IPv6 ready
+* Docker ready
+* Can be used with existing WireGuard setups
+* Support for multiple WireGuard interfaces
+* Peer Expiry Feature
+* Handle route and DNS settings like wg-quick does
+* ~~REST API for management and client deployment~~ (coming soon)
+
+## Quick-Start
+
+The easiest way to get started is to use the provided [Docker image](./getting-started/docker.md).
+

docs/index.md

@@ -0,0 +1,4 @@
+---
+template: layouts/home.html
+title: WireGuard Portal
+---

docs/stylesheets/extra.css

@@ -0,0 +1,49 @@
+/* This file is used for extra styles that are not part of the theme */
+
+span.title {
+  font-weight: bold;
+}
+
+span.em {
+  font-weight: bold;
+}
+
+.separator {
+  border-bottom: 1px solid #e3e8ee;
+}
+
+a.field {
+  font-weight: 600;
+  /* color: #3c4257; */
+  font-size: .8rem;
+}
+
+span.parent-field {
+  font-weight: 600;
+  color:#a3acb9;
+  font-size: .85em;
+}
+
+span.type {
+  color: #8792a2;
+  font-size: .7rem;
+  margin-right: 4px;
+}
+
+span.version {
+  color: #8792a2;
+  font-size: .7rem;
+  float: right;
+}
+
+span.faint {
+  color: #8792a2;
+}
+
+.md-social__link svg {
+  fill: rgb(61, 61, 61);
+}
+
+.md-tabs__link {
+  font-size: 0.8rem;
+}

docs/theme-overrides/layouts/home.html

@@ -0,0 +1,433 @@
+
+{% extends "main.html" %}
+
+<!-- Render hero under tabs -->
+{% block tabs %}
+  {{ super() }}
+
+  <!-- Additional styles for landing page -->
+<style>
+
+/* Apply box shadow on smaller screens that don't display tabs */
+@media only screen and (max-width: 1220px) {
+  .md-header {
+    box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2);
+    transition: color 250ms,background-color 250ms,box-shadow 250ms;
+  }
+}
+
+/* Hide main content for now */
+.md-content {
+  display: none;
+}
+
+/* Hide table of contents */
+@media screen and (min-width: 60em) {
+  .md-sidebar--secondary {
+    display: none;
+  }
+}
+
+/* Hide navigation */
+@media screen and (min-width: 76.25em) {
+  .md-sidebar--primary {
+    display: none;
+  }
+}
+
+/* Get started button */
+.md-typeset .md-button--primary {
+    color: var(--md-primary-fg-color);
+    background-color: var(--md-primary-bg-color);
+    border-color: var(--md-primary-bg-color);
+}
+.md-typeset .md-button--primary:hover {
+  color: var(--md-primary-bg-color);
+  background-color: var(--md-primary-fg-color);
+  border-color: var(--md-primary-bg-color);
+}
+
+.tx-hero {
+  max-width: 700px;
+  display: flex;
+  padding: .4rem;
+  margin: 0 auto;
+  text-align: center;
+}
+.tx-hero h1 {
+  font-weight: 700;
+  font-size: 38px;
+  line-height: 46px;
+  color: rgb(38, 38, 38);
+}
+.tx-hero p {
+  color: rgb(92, 92, 92);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 32px;
+}
+.tx-hero__image {
+  max-width: 1000px;
+  min-width: 600px;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: flex;
+  align-items: stretch;
+}
+
+.tx-hero__image img {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}
+
+/* Secondary content styles */
+.secondary-section {
+  background: rgb(245, 245, 245) none repeat scroll 0% 0%;
+  border-top: 1px solid rgb(222, 222, 222);
+  border-bottom: 1px solid rgb(222, 222, 222)
+}
+@media screen and (max-width: 1012px) {
+  .secondary-section {
+    display: block;
+  }
+}
+
+.secondary-section .g {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0px 40px;
+  max-width: 1280px;
+}
+
+.secondary-section .g .section {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: normal;
+  padding: 88px 0px 116px;
+}
+
+.secondary-section .g .section.follow {
+  padding-top: 0px;
+}
+
+
+.secondary-section .g .section .component-wrapper {
+  display: flex;
+  -moz-box-align: center;
+  align-items: center;
+}
+
+@media screen and (max-width: 1012px) {
+  .secondary-section .g .section .component-wrapper {
+    display: block;
+  }
+}
+
+.secondary-section .g .section .component-wrapper h3 {
+  color: rgb(38, 38, 38);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 46px;
+  letter-spacing: normal;
+  margin-bottom: 12px;
+}
+
+.secondary-section .g .section .component-wrapper h4 {
+  color: rgb(38, 38, 38);
+}
+
+.secondary-section .g .section .component-wrapper p {
+  color: rgb(92, 92, 92);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+}
+
+.secondary-section .g .section .component-wrapper .image-wrapper {
+  margin-bottom: 12px;
+  overflow: hidden;
+  border-radius: 8px;
+  margin-top: 48px;
+  border: 1px solid rgb(222, 222, 222);
+  box-shadow: rgba(202, 202, 202, 0.15) 0px 0px 0px 6px;
+  max-width: 600px;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: flex;
+  align-items: stretch;
+}
+
+.image-wrapper img {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}
+
+.secondary-section .g .section .component-wrapper .first-column {
+  padding-right: 100px;
+  flex: 0 1 auto;
+  height: auto;
+  width: 50%;
+}
+
+@media screen and (max-width: 1012px) {
+  .secondary-section .g .section .component-wrapper .first-column {
+    padding-right: 0px;
+    width: 100%;
+    margin-bottom: 32px;
+  }
+}
+
+.secondary-section .g .section .component-wrapper .second-column {
+  flex: 0 1 auto;
+  height: auto;
+  width: 50%;
+}
+@media screen and (max-width: 1012px) {
+  .secondary-section .g .section .component-wrapper .second-column {
+    width: 100%;
+    margin-bottom: 32px;
+  }
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 2rem;
+}
+@media screen and (min-width: 64rem) {
+  .secondary-section .g .section .component-wrapper .responsive-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid a.card-wrapper {
+  text-decoration: none;
+  transition: none;
+  background: none;
+  padding: 0;
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid .card {
+  position: relative;
+  background-color:  #fff none repeat scroll 0% 0%;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: row;
+  -moz-box-align: center;
+  align-items: center;
+  height: 100%;
+  -moz-box-pack: start;
+  justify-content: flex-start;
+  box-shadow: rgba(0, 0, 0, 0.09) 0.3125rem 0.3125rem 0px -0.0625rem, rgba(0, 0, 0, 0.15) 0px 0.25rem 0.5rem 0px;
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+}
+.secondary-section .g .section .component-wrapper .responsive-grid .card:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0.3125rem 0.3125rem 0px -0.0625rem, rgba(0, 0, 0, 0.26) 0px 0.25rem 0.5rem 0px;
+}
+
+@media screen and (min-width: 75rem) {
+  .secondary-section .g .section .component-wrapper .responsive-grid .card {
+    padding: 2rem 2.5rem;
+  }
+}
+@media screen and (min-width: 36rem) {
+  .secondary-section .g .section .component-wrapper .responsive-grid .card {
+    padding: 1rem 1.5rem;
+  }
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid .card .logo {
+  margin-right: 0.75rem;
+  width: 1.2rem;
+  min-width: 1.2rem;
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  width: 100%;
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content h5 {
+  color: rgb(61, 61, 61);
+  margin: 0;
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content p {
+  margin-top: 0.25em;
+  margin-bottom: 0;
+  color: rgb(92, 92, 92);
+  font-size: 0.65rem;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content code {
+  background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+
+.component-wrapper span.em {
+  color: rgb(61, 61, 61);
+}
+
+.component-wrapper a {
+  transition: color 125ms;
+  color: rgb(61, 61, 61);
+  background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
+  padding: 2px 6px;
+  margin: 0px 1px;
+  border-radius: 4px;
+  display: inline;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.component-wrapper a:hover {
+  color: var(--md-typeset-a-color);
+  background: var(--md-accent-fg-color--transparent);
+}
+
+</style>
+
+  <!-- Hero for landing page -->
+  <div class="md-container tx-hero">
+    <div class="md-grid md-typeset">
+      <div class="md-main__inner">
+        <div>
+          <h1>A beautiful and simple UI to manage your WireGuard peers and interfaces</h1>
+          <p>WireGuard Portal is an open source web-based user interface that makes it easy to setup and manage
+            WireGuard VPN connections. It's built on top of WireGuard's official <span class="em">wgctrl</span> library.</p>
+          </p>
+          <a
+            href="documentation/overview/"
+            title="Get Started"
+            class="md-button md-button--primary"
+          >
+            Get started
+            <svg width="11" height="10" viewBox="0 0 11 10" fill="none" style="margin-left:2px"><path d="M1 5.16772H9.5M9.5 5.16772L6.5 1.66772M9.5 5.16772L6.5 8.66772" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="md-container">
+    <div class="tx-hero__image">
+      <img
+        src="{{config.site_url}}assets/images/screenshot.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+  </div>
+
+  <div class="md-container secondary-section">
+    <div class="g">
+      <!-- Architecture as building blocks -->
+      <div class="section">
+        <div class="component-wrapper">
+          <div class="first-column">
+            <h3>More information about WireGuard</h3>
+            <p>
+              WireGuard® is an extremely <span class="em">simple</span> yet <span class="em">fast</span> and modern
+              VPN that utilizes <span class="em">state-of-the-art cryptography</span>.
+            </p>
+            <p>
+              WireGuard uses state-of-the-art <a href="https://www.wireguard.com/protocol/">cryptography</a> and still
+              manages to be as easy to configure and deploy as SSH.
+              A combination of extremely high-speed cryptographic primitives and the fact that WireGuard lives inside
+              the Linux kernel means that secure networking can be very high-speed.
+              It is suitable for both small embedded devices like smartphones and fully loaded backbone routers.
+            </p>
+          </div>
+          <div class="second-column">
+            <div class="image-wrapper">
+              <img
+                src="{{config.site_url}}assets/images/wg-tool.png"
+                alt=""
+                draggable="false"
+              >
+            </div>
+          </div>
+        </div>
+        <div class="component-wrapper" style="display: block;">
+          <h4>Explore official documentation</h4>
+
+          <!-- Arch as code -->
+          <div class="responsive-grid">
+            <a class="card-wrapper" href="https://www.wireguard.com/">
+              <div class="card">
+                <div class="logo">
+                  <span class="twemoji">
+                    {% include ".icons/octicons/file-code-24.svg" %}
+                  </span>
+                </div>
+                <div class="card-content">
+                  <h5>Official Website</h5>
+                  <p>
+                    If you'd like a general conceptual overview of what WireGuard is about, read onward here.
+                  </p>
+                </div>
+              </div>
+            </a>
+
+            <!-- Networking -->
+            <a class="card-wrapper" href="https://www.wireguard.com/protocol/">
+              <div class="card">
+                <div class="logo">
+                  <span class="twemoji">
+                    {% include ".icons/fontawesome/solid/network-wired.svg" %}
+                  </span>
+                </div>
+                <div class="card-content">
+                  <h5>Protocol & Cryptography</h5>
+                  <p>
+                    WireGuard uses state-of-the-art cryptography, like the Noise protocol framework, Curve25519, ChaCha20, Poly1305, BLAKE2, SipHash24, HKDF, and secure trusted constructions.
+                  </p>
+                </div>
+              </div>
+            </a>
+
+            <!-- Customize -->
+            <a class="card-wrapper" href="https://www.wireguard.com/install/">
+              <div class="card">
+                <div class="logo">
+                  <span class="twemoji">
+                    {% include ".icons/fontawesome/solid/puzzle-piece.svg" %}
+                  </span>
+                </div>
+                <div class="card-content">
+                  <h5>Client Installation</h5>
+                  <p>
+                    You may progress to installation and reading the quickstart instructions on how to use it.
+                  </p>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
+<!-- Content -->
+{% block content %}{% endblock %}
+
+<!-- Application footer -->
+{% block footer %}
+  {{ super() }}
+{% endblock %}

docs/theme-overrides/main.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+{% if page and page.meta and page.meta.title %}
+<meta property="og:title" content="{{ page.meta.title }}" />
+{% endif %}
+{% if page and page.meta and page.meta.image %}
+<meta property="og:image" content="{{ page.meta.image }}" />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:width" content="{{ page.meta.image_width }}" />
+<meta property="og:image:height" content="{{ page.meta.image_height }}" />
+<meta property="twitter:card" content="summary" />
+<meta property="twitter:title" content="{{ page.meta.twitter_title }}" />
+<meta property="twitter:image" content="{{ page.meta.image }}" />
+<meta property="twitter:image:alt" content="{{ page.meta.image_alt }}" />
+{% endif %}
+{% endblock %}

docs/theme-overrides/partials/footer.html

@@ -0,0 +1,32 @@
+{% import "partials/language.html" as lang with context %}
+
+<!-- Application footer -->
+<footer class="md-footer">
+  <!-- Further information -->
+  <div class="md-footer-meta md-typeset" style="background-color: #fff;">
+    <div class="md-footer-meta__inner md-grid" style="background-color: #fff;">
+
+      <!-- Copyright and theme information -->
+      <div class="md-footer-copyright">
+        {% if config.copyright %}
+          <div class="md-footer-copyright__highlight" style="color: rgb(38, 38, 38);">
+            {{ config.copyright }}
+          </div>
+        {% endif %}
+        <div style="color: rgb(38, 38, 38);">
+          Made with
+          <a
+                  href="https://squidfunk.github.io/mkdocs-material/"
+                  target="_blank" rel="noopener"
+                  style="color: black;"
+          >
+            Material for MkDocs
+          </a>
+        </div>
+      </div>
+
+      <!-- Social links -->
+      {% include "partials/social.html" %}
+    </div>
+  </div>
+</footer>

efs.go

@@ -1,12 +0,0 @@
-package wg_portal
-
-import "embed"
-
-//go:embed assets/tpl/*
-var Templates embed.FS
-
-//go:embed assets/css/*
-//go:embed assets/fonts/*
-//go:embed assets/img/*
-//go:embed assets/js/*
-var Statics embed.FS

frontend/.env.development

@@ -0,0 +1 @@
+VITE_SOME_EXAMPLE_VAR=http://localhost:5000 (can be used internally like: import.meta.env.VITE_SOME_EXAMPLE_VAR)

frontend/.env.production

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://wgportal.server.com

frontend/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/extensions.json
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
+}

frontend/README.md

@@ -0,0 +1,29 @@
+# frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

frontend/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link href="/favicon.ico" rel="icon" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>WireGuard Portal</title>
+    <meta content="WireGuard VPN Management Portal" name="description">
+    <script>
+      // global config, will be overridden by backend if available
+      let WGPORTAL_BACKEND_BASE_URL="http://localhost:5000/api/v0";
+      let WGPORTAL_VERSION="unknown";
+      let WGPORTAL_SITE_TITLE="WireGuard Portal";
+      let WGPORTAL_SITE_COMPANY_NAME="WireGuard Portal";
+    </script>
+    <script src="/api/v0/config/frontend.js"></script>
+  </head>
+  <body class="d-flex flex-column min-vh-100">
+    <noscript>
+      <strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+
+    <!-- vue teleport will add toasts here -->
+    <div id="toasts"></div>
+
+    <!-- main application -->
+    <div id="app"></div>
+
+    <!-- vue teleport will add modals and dialogs here -->
+    <div id="modals"></div>
+    <div id="dialogs"></div>
+
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build-dev": "vite build --mode development --base=/app/",
+    "build": "vite build --base=/app/",
+    "preview": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@kyvg/vue3-notification": "^3.1.3",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.2",
+    "bootswatch": "^5.3.2",
+    "flag-icons": "^7.1.0",
+    "is-cidr": "^5.0.3",
+    "is-ip": "^5.0.1",
+    "pinia": "^2.1.7",
+    "prismjs": "^1.29.0",
+    "vue": "^3.3.13",
+    "vue-i18n": "^9.8.0",
+    "vue-prism-component": "github:h44z/vue-prism-component",
+    "vue-router": "^4.2.5",
+    "vue3-tags-input": "^1.0.12"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "vite": "^5.0.10"
+  }
+}

frontend/src/App.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+import { computed, getCurrentInstance, onMounted, ref } from "vue";
+import { authStore } from "./stores/auth";
+import { securityStore } from "./stores/security";
+import { settingsStore } from "@/stores/settings";
+
+const appGlobal = getCurrentInstance().appContext.config.globalProperties
+const auth = authStore()
+const sec = securityStore()
+const settings = settingsStore()
+
+onMounted(async () => {
+  console.log("Starting WireGuard Portal frontend...");
+
+  await sec.LoadSecurityProperties();
+  await auth.LoadProviders();
+
+  let wasLoggedIn = auth.IsAuthenticated;
+  try {
+    await auth.LoadSession();
+    await settings.LoadSettings(); // only logs errors, does not throw
+
+    console.log("WireGuard Portal session is valid");
+  } catch (e) {
+    if (wasLoggedIn) {
+      console.log("WireGuard Portal invalid - logging out");
+      await auth.Logout();
+    }
+  }
+
+  console.log("WireGuard Portal ready!");
+})
+
+const switchLanguage = function (lang) {
+  if (appGlobal.$i18n.locale !== lang) {
+    localStorage.setItem('wgLang', lang);
+    appGlobal.$i18n.locale = lang;
+  }
+}
+
+const languageFlag = computed(() => {
+  // `this` points to the component instance
+  let lang = appGlobal.$i18n.locale.toLowerCase();
+  if (lang === "en") {
+    lang = "us";
+  }
+  return "fi-" + lang;
+})
+
+const companyName = ref(WGPORTAL_SITE_COMPANY_NAME);
+const wgVersion = ref(WGPORTAL_VERSION);
+const currentYear = ref(new Date().getFullYear())
+
+</script>
+
+<template>
+  <notifications :duration="3000" :ignore-duplicates="true" position="top right" />
+
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/"><img alt="WireGuard Portal" src="/img/header-logo.png" /></a>
+      <button aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
+        data-bs-target="#navbarTop" data-bs-toggle="collapse" type="button">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div id="navbarTop" class="collapse navbar-collapse">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item">
+            <RouterLink :to="{ name: 'home' }" class="nav-link">{{ $t('menu.home') }}</RouterLink>
+          </li>
+          <li v-if="auth.IsAuthenticated && auth.IsAdmin" class="nav-item">
+            <RouterLink :to="{ name: 'interfaces' }" class="nav-link">{{ $t('menu.interfaces') }}</RouterLink>
+          </li>
+          <li v-if="auth.IsAuthenticated && auth.IsAdmin" class="nav-item">
+            <RouterLink :to="{ name: 'users' }" class="nav-link">{{ $t('menu.users') }}</RouterLink>
+          </li>
+        </ul>
+
+        <div class="navbar-nav d-flex justify-content-end">
+          <div v-if="auth.IsAuthenticated" class="nav-item dropdown">
+            <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+              href="#" role="button">{{ auth.User.Firstname }} {{ auth.User.Lastname }}</a>
+            <div class="dropdown-menu">
+              <RouterLink :to="{ name: 'profile' }" class="dropdown-item"><i class="fas fa-user"></i> {{ $t('menu.profile') }}</RouterLink>
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" href="#" @click.prevent="auth.Logout"><i class="fas fa-sign-out-alt"></i> {{ $t('menu.logout') }}</a>
+            </div>
+          </div>
+          <div v-if="!auth.IsAuthenticated" class="nav-item">
+            <RouterLink :to="{ name: 'login' }" class="nav-link"><i class="fas fa-sign-in-alt fa-sm fa-fw me-2"></i>{{ $t('menu.login') }}</RouterLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <div class="container mt-5 flex-shrink-0">
+    <RouterView />
+  </div>
+
+  <footer class="page-footer mt-auto">
+    <div class="container mt-5">
+      <div class="row align-items-center">
+        <div class="col-6">Copyright © {{ companyName }} {{ currentYear }} <span v-if="auth.IsAuthenticated"> - version {{ wgVersion }}</span></div>
+        <div class="col-6 text-end">
+          <div :aria-label="$t('menu.lang')" class="btn-group" role="group">
+            <div class="btn-group" role="group">
+              <button aria-expanded="false" aria-haspopup="true" class="btn btn btn-secondary pe-0"
+                data-bs-toggle="dropdown" type="button"><span :class="languageFlag" class="fi"></span></button>
+              <div aria-labelledby="btnGroupDrop3" class="dropdown-menu" style="">
+                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('en')"><span class="fi fi-us"></span>English</a>
+                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('de')"><span class="fi fi-de"></span>Deutsch</a>
+                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('ru')"><span class="fi fi-ru"></span>Русский</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer></template>
+
+<style></style>

frontend/src/assets/base.css

@@ -0,0 +1,5 @@
+a.disabled {
+    pointer-events: none;
+    cursor: default;
+    color: #888888;
+}

frontend/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

frontend/src/components/Confirmation.vue

@@ -0,0 +1,54 @@
+<script setup>
+import {ref} from "vue";
+import {useI18n} from "vue-i18n";
+
+const { t } = useI18n()
+
+const title = ref("Default Title")
+const question = ref("Default Question")
+const visible = ref(true)
+
+const emit = defineEmits(['no', 'yes'])
+
+function showDialog(titleStr, questionStr) {
+  visible.value = true
+  title.value = titleStr
+  question.value = questionStr
+}
+
+function yes() {
+  visible.value = false
+  emit('yes')
+}
+
+function no() {
+  visible.value = false
+  emit('no')
+}
+</script>
+
+<template>
+  <Teleport to="#dialogs">
+    <div v-if="visible" class="modal-backdrop fade show">
+      <div class="modal fade show" tabindex="-1">
+        <div class="modal-dialog modal-dialog-scrollable" @click.stop="">
+          <div class="modal-content" ref="body">
+            <div class="modal-header">
+              <h5 class="modal-title">{{ title }}</h5>
+            </div>
+            <div class="modal-body">
+              {{ question }}
+            </div>
+            <div class="modal-footer pt-0 border-top-0">
+              <button type="button" class="btn btn-primary" @click="no">{{ $t('general.no') }}</button>
+              <button type="button" class="btn btn-success" @click="yes">{{ $t('general.yes') }}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+</style>

frontend/src/components/InterfaceEditModal.vue

@@ -0,0 +1,513 @@
+<script setup>
+import Modal from "./Modal.vue";
+import {interfaceStore} from "@/stores/interfaces";
+import {computed, ref, watch} from "vue";
+import { useI18n } from 'vue-i18n';
+import { notify } from "@kyvg/vue3-notification";
+import Vue3TagsInput from 'vue3-tags-input';
+import { validateCIDR, validateIP, validateDomain } from '@/helpers/validators';
+import isCidr from "is-cidr";
+import {isIP} from 'is-ip';
+import { freshInterface } from '@/helpers/models';
+import {peerStore} from "@/stores/peers";
+
+const { t } = useI18n()
+
+const interfaces = interfaceStore()
+const peers = peerStore()
+
+const props = defineProps({
+  interfaceId: String,
+  visible: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+const selectedInterface = computed(() => {
+  return interfaces.Find(props.interfaceId)
+})
+
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+
+  if (selectedInterface.value) {
+    return t("modals.interface-edit.headline-edit") + " " + selectedInterface.value.Identifier
+  }
+  return t("modals.interface-edit.headline-new")
+})
+
+const formData = ref(freshInterface())
+
+// functions
+
+watch(() => props.visible, async (newValue, oldValue) => {
+      if (oldValue === false && newValue === true) { // if modal is shown
+        console.log(selectedInterface.value)
+        if (!selectedInterface.value) {
+          await interfaces.PrepareInterface()
+
+          // fill form data
+          formData.value.Identifier = interfaces.Prepared.Identifier
+          formData.value.DisplayName = interfaces.Prepared.DisplayName
+          formData.value.Mode = interfaces.Prepared.Mode
+
+          formData.value.PublicKey = interfaces.Prepared.PublicKey
+          formData.value.PrivateKey = interfaces.Prepared.PrivateKey
+
+          formData.value.ListenPort = interfaces.Prepared.ListenPort
+          formData.value.Addresses = interfaces.Prepared.Addresses
+          formData.value.Dns = interfaces.Prepared.Dns
+          formData.value.DnsSearch = interfaces.Prepared.DnsSearch
+
+          formData.value.Mtu = interfaces.Prepared.Mtu
+          formData.value.FirewallMark = interfaces.Prepared.FirewallMark
+          formData.value.RoutingTable = interfaces.Prepared.RoutingTable
+
+          formData.value.PreUp = interfaces.Prepared.PreUp
+          formData.value.PostUp = interfaces.Prepared.PostUp
+          formData.value.PreDown = interfaces.Prepared.PreDown
+          formData.value.PostDown = interfaces.Prepared.PostDown
+
+          formData.value.SaveConfig = interfaces.Prepared.SaveConfig
+
+          formData.value.PeerDefNetwork = interfaces.Prepared.PeerDefNetwork
+          formData.value.PeerDefDns = interfaces.Prepared.PeerDefDns
+          formData.value.PeerDefDnsSearch = interfaces.Prepared.PeerDefDnsSearch
+          formData.value.PeerDefEndpoint = interfaces.Prepared.PeerDefEndpoint
+          formData.value.PeerDefAllowedIPs = interfaces.Prepared.PeerDefAllowedIPs
+          formData.value.PeerDefMtu = interfaces.Prepared.PeerDefMtu
+          formData.value.PeerDefPersistentKeepalive = interfaces.Prepared.PeerDefPersistentKeepalive
+          formData.value.PeerDefFirewallMark = interfaces.Prepared.PeerDefFirewallMark
+          formData.value.PeerDefRoutingTable = interfaces.Prepared.PeerDefRoutingTable
+          formData.value.PeerDefPreUp = interfaces.Prepared.PeerDefPreUp
+          formData.value.PeerDefPostUp = interfaces.Prepared.PeerDefPostUp
+          formData.value.PeerDefPreDown = interfaces.Prepared.PeerDefPreDown
+          formData.value.PeerDefPostDown = interfaces.Prepared.PeerDefPostDown
+        } else { // fill existing userdata
+          formData.value.Disabled = selectedInterface.value.Disabled
+          formData.value.Identifier = selectedInterface.value.Identifier
+          formData.value.DisplayName = selectedInterface.value.DisplayName
+          formData.value.Mode = selectedInterface.value.Mode
+
+          formData.value.PublicKey = selectedInterface.value.PublicKey
+          formData.value.PrivateKey = selectedInterface.value.PrivateKey
+
+          formData.value.ListenPort = selectedInterface.value.ListenPort
+          formData.value.Addresses = selectedInterface.value.Addresses
+          formData.value.Dns = selectedInterface.value.Dns
+          formData.value.DnsSearch = selectedInterface.value.DnsSearch
+
+          formData.value.Mtu = selectedInterface.value.Mtu
+          formData.value.FirewallMark = selectedInterface.value.FirewallMark
+          formData.value.RoutingTable = selectedInterface.value.RoutingTable
+
+          formData.value.PreUp = selectedInterface.value.PreUp
+          formData.value.PostUp = selectedInterface.value.PostUp
+          formData.value.PreDown = selectedInterface.value.PreDown
+          formData.value.PostDown = selectedInterface.value.PostDown
+
+          formData.value.SaveConfig = selectedInterface.value.SaveConfig
+
+          formData.value.PeerDefNetwork = selectedInterface.value.PeerDefNetwork
+          formData.value.PeerDefDns = selectedInterface.value.PeerDefDns
+          formData.value.PeerDefDnsSearch = selectedInterface.value.PeerDefDnsSearch
+          formData.value.PeerDefEndpoint = selectedInterface.value.PeerDefEndpoint
+          formData.value.PeerDefAllowedIPs = selectedInterface.value.PeerDefAllowedIPs
+          formData.value.PeerDefMtu = selectedInterface.value.PeerDefMtu
+          formData.value.PeerDefPersistentKeepalive = selectedInterface.value.PeerDefPersistentKeepalive
+          formData.value.PeerDefFirewallMark = selectedInterface.value.PeerDefFirewallMark
+          formData.value.PeerDefRoutingTable = selectedInterface.value.PeerDefRoutingTable
+          formData.value.PeerDefPreUp = selectedInterface.value.PeerDefPreUp
+          formData.value.PeerDefPostUp = selectedInterface.value.PeerDefPostUp
+          formData.value.PeerDefPreDown = selectedInterface.value.PeerDefPreDown
+          formData.value.PeerDefPostDown = selectedInterface.value.PeerDefPostDown
+
+        }
+      }
+    }
+)
+
+function close() {
+  formData.value = freshInterface()
+  emit('close')
+}
+
+function handleChangeAddresses(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if(isCidr(tag) === 0) {
+      validInput = false
+      notify({
+        title: "Invalid CIDR",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if(validInput) {
+    formData.value.Addresses = tags
+  }
+}
+
+function handleChangeDns(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if(!isIP(tag)) {
+      validInput = false
+      notify({
+        title: "Invalid IP",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if(validInput) {
+    formData.value.Dns = tags
+  }
+}
+
+function handleChangeDnsSearch(tags) {
+  formData.value.DnsSearch = tags
+}
+
+function handleChangePeerDefNetwork(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if(isCidr(tag) === 0) {
+      validInput = false
+      notify({
+        title: "Invalid CIDR",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if(validInput) {
+    formData.value.PeerDefNetwork = tags
+  }
+}
+
+function handleChangePeerDefAllowedIPs(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if(isCidr(tag) === 0) {
+      validInput = false
+      notify({
+        title: "Invalid CIDR",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if(validInput) {
+    formData.value.PeerDefAllowedIPs = tags
+  }
+}
+
+function handleChangePeerDefDns(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if(!isIP(tag)) {
+      validInput = false
+      notify({
+        title: "Invalid IP",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if(validInput) {
+    formData.value.PeerDefDns = tags
+  }
+}
+
+function handleChangePeerDefDnsSearch(tags) {
+  formData.value.PeerDefDnsSearch = tags
+}
+
+async function save() {
+  try {
+    if (props.interfaceId!=='#NEW#') {
+      await interfaces.UpdateInterface(selectedInterface.value.Identifier, formData.value)
+    } else {
+      await interfaces.CreateInterface(formData.value)
+    }
+    close()
+  } catch (e) {
+    console.log(e)
+    notify({
+      title: "Failed to save interface!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+async function applyPeerDefaults() {
+  if (props.interfaceId==='#NEW#') {
+    return; // do nothing for new interfaces
+  }
+
+  try {
+    await interfaces.ApplyPeerDefaults(selectedInterface.value.Identifier, formData.value)
+
+    notify({
+      title: "Peer Defaults Applied",
+      text: "Applied current peer defaults to all available peers.",
+      type: 'success',
+    })
+
+    await peers.LoadPeers(selectedInterface.value.Identifier) // reload all peers after applying the defaults
+  } catch (e) {
+    console.log(e)
+    notify({
+      title: "Failed to apply peer defaults!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+async function del() {
+  try {
+    await interfaces.DeleteInterface(selectedInterface.value.Identifier)
+    close()
+  } catch (e) {
+    console.log(e)
+    notify({
+      title: "Failed to delete interface!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+</script>
+
+<template>
+  <Modal :title="title" :visible="visible" @close="close">
+    <template #default>
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a class="nav-link active" data-bs-toggle="tab" href="#interface">{{ $t('modals.interface-edit.tab-interface') }}</a>
+        </li>
+        <li v-if="formData.Mode==='server'" class="nav-item">
+          <a class="nav-link" data-bs-toggle="tab" href="#peerdefaults">{{ $t('modals.interface-edit.tab-peerdef') }}</a>
+        </li>
+      </ul>
+      <div id="interfaceTabs" class="tab-content">
+        <div id="interface" class="tab-pane fade active show">
+          <fieldset>
+            <legend class="mt-4">{{ $t('modals.interface-edit.header-general') }}</legend>
+            <div v-if="props.interfaceId==='#NEW#'" class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.identifier.label') }}</label>
+              <input v-model="formData.Identifier" class="form-control" :placeholder="$t('modals.interface-edit.identifier.placeholder')" type="text">
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.mode.label') }}</label>
+              <select v-model="formData.Mode" class="form-select">
+                <option value="server">{{ $t('modals.interface-edit.mode.server') }}</option>
+                <option value="client">{{ $t('modals.interface-edit.mode.client') }}</option>
+                <option value="any">{{ $t('modals.interface-edit.mode.any') }}</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.display-name.label') }}</label>
+              <input v-model="formData.DisplayName" class="form-control" :placeholder="$t('modals.interface-edit.display-name.placeholder')" type="text">
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend class="mt-4">{{ $t('modals.interface-edit.header-crypto') }}</legend>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.private-key.label') }}</label>
+              <input v-model="formData.PrivateKey" class="form-control" :placeholder="$t('modals.interface-edit.private-key.placeholder')" required type="email">
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.public-key.label') }}</label>
+              <input v-model="formData.PublicKey" class="form-control" :placeholder="$t('modals.interface-edit.public-key.placeholder')" required type="email">
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend class="mt-4">{{ $t('modals.interface-edit.header-network') }}</legend>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.ip.label') }}</label>
+              <vue3-tags-input class="form-control" :tags="formData.Addresses"
+                               :placeholder="$t('modals.interface-edit.ip.placeholder')"
+                               :add-tag-on-keys="[13, 188, 32, 9]"
+                               :validate="validateCIDR"
+                               @on-tags-changed="handleChangeAddresses"/>
+            </div>
+            <div v-if="formData.Mode==='server'" class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.listen-port.label') }}</label>
+              <input v-model="formData.ListenPort" class="form-control" :placeholder="$t('modals.interface-edit.listen-port.placeholder')" type="number">
+            </div>
+            <div v-if="formData.Mode!=='server'" class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.dns.label') }}</label>
+              <vue3-tags-input class="form-control" :tags="formData.Dns"
+                               :placeholder="$t('modals.interface-edit.dns.placeholder')"
+                               :add-tag-on-keys="[13, 188, 32, 9]"
+                               :validate="validateIP"
+                               @on-tags-changed="handleChangeDns"/>
+            </div>
+            <div v-if="formData.Mode!=='server'" class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.dns-search.label') }}</label>
+              <vue3-tags-input class="form-control" :tags="formData.DnsSearch"
+                               :placeholder="$t('modals.interface-edit.dns-search.placeholder')"
+                               :add-tag-on-keys="[13, 188, 32, 9]"
+                               :validate="validateDomain"
+                               @on-tags-changed="handleChangeDnsSearch"/>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.mtu.label') }}</label>
+                <input v-model="formData.Mtu" class="form-control" :placeholder="$t('modals.interface-edit.mtu.placeholder')" type="number">
+              </div>
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.firewall-mark.label') }}</label>
+                <input v-model="formData.FirewallMark" class="form-control" :placeholder="$t('modals.interface-edit.firewall-mark.placeholder')" type="number">
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.routing-table.label') }}</label>
+                <input v-model="formData.RoutingTable" aria-describedby="routingTableHelp" class="form-control" :placeholder="$t('modals.interface-edit.routing-table.placeholder')" type="text">
+                <small id="routingTableHelp" class="form-text text-muted">{{ $t('modals.interface-edit.routing-table.description') }}</small>
+              </div>
+              <div class="form-group col-md-6">
+              </div>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend class="mt-4">{{ $t('modals.interface-edit.header-hooks') }}</legend>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.pre-up.label') }}</label>
+              <textarea v-model="formData.PreUp" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.pre-up.placeholder')"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.post-up.label') }}</label>
+              <textarea v-model="formData.PostUp" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.post-up.placeholder')"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.pre-down.label') }}</label>
+              <textarea v-model="formData.PreDown" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.pre-down.placeholder')"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.post-down.label') }}</label>
+              <textarea v-model="formData.PostDown" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.post-down.placeholder')"></textarea>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend class="mt-4">{{ $t('modals.interface-edit.header-state') }}</legend>
+            <div class="form-check form-switch">
+              <input v-model="formData.Disabled" class="form-check-input" type="checkbox">
+              <label class="form-check-label">{{ $t('modals.interface-edit.disabled.label') }}</label>
+            </div>
+            <div class="form-check form-switch">
+              <input v-model="formData.SaveConfig" checked="" class="form-check-input" type="checkbox">
+              <label class="form-check-label">{{ $t('modals.interface-edit.save-config.label') }}</label>
+            </div>
+          </fieldset>
+        </div>
+        <div id="peerdefaults" class="tab-pane fade">
+          <fieldset>
+            <legend class="mt-4">{{ $t('modals.interface-edit.header-network') }}</legend>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.endpoint.label') }}</label>
+              <input v-model="formData.PeerDefEndpoint" class="form-control" :placeholder="$t('modals.interface-edit.defaults.endpoint.placeholder')" type="text">
+              <small class="form-text text-muted">{{ $t('modals.interface-edit.defaults.endpoint.description') }}</small>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.networks.label') }}</label>
+              <vue3-tags-input class="form-control" :tags="formData.PeerDefNetwork"
+                               :placeholder="$t('modals.interface-edit.defaults.networks.placeholder')"
+                               :add-tag-on-keys="[13, 188, 32, 9]"
+                               :validate="validateCIDR"
+                               @on-tags-changed="handleChangePeerDefNetwork"/>
+              <small class="form-text text-muted">{{ $t('modals.interface-edit.defaults.networks.description') }}</small>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.allowed-ip.label') }}</label>
+              <vue3-tags-input class="form-control" :tags="formData.PeerDefAllowedIPs"
+                               :placeholder="$t('modals.interface-edit.defaults.allowed-ip.placeholder')"
+                               :add-tag-on-keys="[13, 188, 32, 9]"
+                               :validate="validateCIDR"
+                               @on-tags-changed="handleChangePeerDefAllowedIPs"/>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.dns.label') }}</label>
+              <vue3-tags-input class="form-control" :tags="formData.PeerDefDns"
+                               :placeholder="$t('modals.interface-edit.dns.placeholder')"
+                               :add-tag-on-keys="[13, 188, 32, 9]"
+                               :validate="validateIP"
+                               @on-tags-changed="handleChangePeerDefDns"/>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.dns-search.label') }}</label>
+              <vue3-tags-input class="form-control" :tags="formData.PeerDefDnsSearch"
+                               :placeholder="$t('modals.interface-edit.dns-search.placeholder')"
+                               :add-tag-on-keys="[13, 188, 32, 9]"
+                               :validate="validateDomain"
+                               @on-tags-changed="handleChangePeerDefDnsSearch"/>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.mtu.label') }}</label>
+                <input v-model="formData.PeerDefMtu" class="form-control" :placeholder="$t('modals.interface-edit.defaults.mtu.placeholder')" type="number">
+              </div>
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.firewall-mark.label') }}</label>
+                <input v-model="formData.PeerDefFirewallMark" class="form-control" :placeholder="$t('modals.interface-edit.firewall-mark.placeholder')" type="number">
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.routing-table.label') }}</label>
+                <input v-model="formData.PeerDefRoutingTable" class="form-control" :placeholder="$t('modals.interface-edit.routing-table.placeholder')" type="number">
+              </div>
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.keep-alive.label') }}</label>
+                <input v-model="formData.PeerDefPersistentKeepalive" class="form-control" :placeholder="$t('modals.interface-edit.defaults.keep-alive.placeholder')" type="number">
+              </div>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend class="mt-4">{{ $t('modals.interface-edit.header-peer-hooks') }}</legend>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.pre-up.label') }}</label>
+              <textarea v-model="formData.PeerDefPreUp" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.pre-up.placeholder')"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.post-up.label') }}</label>
+              <textarea v-model="formData.PeerDefPostUp" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.post-up.placeholder')"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.pre-down.label') }}</label>
+              <textarea v-model="formData.PeerDefPreDown" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.pre-down.placeholder')"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label mt-4">{{ $t('modals.interface-edit.post-down.label') }}</label>
+              <textarea v-model="formData.PeerDefPostDown" class="form-control" rows="2" :placeholder="$t('modals.interface-edit.post-down.placeholder')"></textarea>
+            </div>
+          </fieldset>
+          <fieldset v-if="props.interfaceId!=='#NEW#'" class="text-end">
+            <hr class="mt-4">
+            <button class="btn btn-primary me-1" type="button" @click.prevent="applyPeerDefaults">{{ $t('modals.interface-edit.button-apply-defaults') }}</button>
+          </fieldset>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex-fill text-start">
+        <button v-if="props.interfaceId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{ $t('general.delete') }}</button>
+      </div>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
+    </template>
+  </Modal>
+</template>
+
+<style>
+
+</style>

frontend/src/components/InterfaceViewModal.vue

@@ -0,0 +1,60 @@
+<script setup>
+import Modal from "./Modal.vue";
+import {computed, ref, watch} from "vue";
+import { useI18n } from 'vue-i18n';
+import {interfaceStore} from "@/stores/interfaces";
+import Prism from 'vue-prism-component'
+import 'prismjs/components/prism-ini'
+
+const { t } = useI18n()
+
+const interfaces = interfaceStore()
+
+const props = defineProps({
+  interfaceId: String,
+  visible: Boolean,
+})
+
+const configString = ref("")
+
+const emit = defineEmits(['close'])
+
+const selectedInterface = computed(() => {
+  return interfaces.Find(props.interfaceId)
+})
+
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+
+  return t("modals.interface-view.headline") + " " + selectedInterface.value.Identifier
+})
+
+// functions
+
+watch(() => props.visible, async (newValue, oldValue) => {
+      if (oldValue === false && newValue === true) { // if modal is shown
+        console.log(selectedInterface.value)
+        await interfaces.LoadInterfaceConfig(selectedInterface.value.Identifier)
+        configString.value = interfaces.configuration
+      }
+    }
+)
+
+function close() {
+  emit('close')
+}
+
+</script>
+
+<template>
+  <Modal :title="title" :visible="visible" @close="close">
+    <template #default>
+      <Prism language="ini" :code="configString"></Prism>
+    </template>
+    <template #footer>
+      <button class="btn btn-primary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
+    </template>
+  </Modal>
+</template>

frontend/src/components/Modal.vue

@@ -0,0 +1,59 @@
+<template>
+  <Teleport to="#modals">
+    <div v-show="visible" class="modal-backdrop fade show" @click="closeBackdrop">
+      <div class="modal fade show" tabindex="-1">
+        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" @click.stop="">
+          <div class="modal-content" ref="body">
+            <div class="modal-header">
+              <h5 class="modal-title">{{ title }}</h5>
+              <button @click="closeModal" class="btn-close" aria-label="Close"></button>
+            </div>
+            <div class="modal-body col-md-12">
+              <slot></slot>
+            </div>
+            <div class="modal-footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+.modal.show {
+  display:block;
+}
+.modal.show {
+  opacity: 1;
+}
+.modal-backdrop {
+  background-color: rgba(0,0,0,0.6) !important;
+}
+.modal-backdrop.show {
+  opacity: 1 !important;
+}
+</style>
+
+<script setup>
+const props = defineProps({
+  title: String,
+  visible: Boolean,
+  closeOnBackdrop: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+function closeBackdrop() {
+  if(props.closeOnBackdrop) {
+    console.log("CLOSING BD")
+    emit('close')
+  }
+}
+
+function closeModal() {
+  console.log("CLOSING")
+  emit('close')
+}
+</script>

frontend/src/components/PeerEditModal.vue

@@ -0,0 +1,444 @@
+<script setup>
+import Modal from "./Modal.vue";
+import { peerStore } from "@/stores/peers";
+import { interfaceStore } from "@/stores/interfaces";
+import { computed, ref, watch } from "vue";
+import { useI18n } from 'vue-i18n';
+import { notify } from "@kyvg/vue3-notification";
+import Vue3TagsInput from "vue3-tags-input";
+import { validateCIDR, validateIP, validateDomain } from '@/helpers/validators';
+import isCidr from "is-cidr";
+import { isIP } from 'is-ip';
+import { freshPeer, freshInterface } from '@/helpers/models';
+import { profileStore } from "@/stores/profile";
+
+const { t } = useI18n()
+
+const peers = peerStore()
+const interfaces = interfaceStore()
+const profile = profileStore()
+
+const props = defineProps({
+  peerId: String,
+  visible: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+const selectedPeer = computed(() => {
+  let p = peers.Find(props.peerId)
+
+  if (!p) {
+    if (!!props.peerId || props.peerId.length) {
+      p = profile.peers.find((p) => p.Identifier === props.peerId)
+    } else {
+      p = freshPeer() // dummy peer to avoid 'undefined' exceptions
+    }
+  }
+  return p
+})
+
+const selectedInterface = computed(() => {
+  let i = interfaces.GetSelected;
+
+  if (!i) {
+    i = freshInterface() // dummy interface to avoid 'undefined' exceptions
+  }
+
+  return i
+})
+
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+  if (selectedInterface.value.Mode === "server") {
+    if (selectedPeer.value) {
+      return t("modals.peer-edit.headline-edit-peer") + " " + selectedPeer.value.Identifier
+    }
+    return t("modals.peer-edit.headline-new-peer")
+  } else {
+    if (selectedPeer.value) {
+      return t("modals.peer-edit.headline-edit-endpoint") + " " + selectedPeer.value.Identifier
+    }
+    return t("modals.peer-edit.headline-new-endpoint")
+  }
+})
+
+const formData = ref(freshPeer())
+
+// functions
+
+watch(() => props.visible, async (newValue, oldValue) => {
+  if (oldValue === false && newValue === true) { // if modal is shown
+    if (!selectedPeer.value) {
+      await peers.PreparePeer(selectedInterface.value.Identifier)
+
+      formData.value.Identifier = peers.Prepared.Identifier
+      formData.value.DisplayName = peers.Prepared.DisplayName
+      formData.value.UserIdentifier = peers.Prepared.UserIdentifier
+      formData.value.InterfaceIdentifier = peers.Prepared.InterfaceIdentifier
+      formData.value.Disabled = peers.Prepared.Disabled
+      formData.value.ExpiresAt = peers.Prepared.ExpiresAt
+      formData.value.Notes = peers.Prepared.Notes
+
+      formData.value.Endpoint = peers.Prepared.Endpoint
+      formData.value.EndpointPublicKey = peers.Prepared.EndpointPublicKey
+      formData.value.AllowedIPs = peers.Prepared.AllowedIPs
+      formData.value.ExtraAllowedIPs = peers.Prepared.ExtraAllowedIPs
+      formData.value.PresharedKey = peers.Prepared.PresharedKey
+      formData.value.PersistentKeepalive = peers.Prepared.PersistentKeepalive
+
+      formData.value.PrivateKey = peers.Prepared.PrivateKey
+      formData.value.PublicKey = peers.Prepared.PublicKey
+
+      formData.value.Mode = peers.Prepared.Mode
+
+      formData.value.Addresses = peers.Prepared.Addresses
+      formData.value.CheckAliveAddress = peers.Prepared.CheckAliveAddress
+      formData.value.Dns = peers.Prepared.Dns
+      formData.value.DnsSearch = peers.Prepared.DnsSearch
+      formData.value.Mtu = peers.Prepared.Mtu
+      formData.value.FirewallMark = peers.Prepared.FirewallMark
+      formData.value.RoutingTable = peers.Prepared.RoutingTable
+
+      formData.value.PreUp = peers.Prepared.PreUp
+      formData.value.PostUp = peers.Prepared.PostUp
+      formData.value.PreDown = peers.Prepared.PreDown
+      formData.value.PostDown = peers.Prepared.PostDown
+
+    } else { // fill existing data
+      formData.value.Identifier = selectedPeer.value.Identifier
+      formData.value.DisplayName = selectedPeer.value.DisplayName
+      formData.value.UserIdentifier = selectedPeer.value.UserIdentifier
+      formData.value.InterfaceIdentifier = selectedPeer.value.InterfaceIdentifier
+      formData.value.Disabled = selectedPeer.value.Disabled
+      formData.value.ExpiresAt = selectedPeer.value.ExpiresAt
+      formData.value.Notes = selectedPeer.value.Notes
+
+      formData.value.Endpoint = selectedPeer.value.Endpoint
+      formData.value.EndpointPublicKey = selectedPeer.value.EndpointPublicKey
+      formData.value.AllowedIPs = selectedPeer.value.AllowedIPs
+      formData.value.ExtraAllowedIPs = selectedPeer.value.ExtraAllowedIPs
+      formData.value.PresharedKey = selectedPeer.value.PresharedKey
+      formData.value.PersistentKeepalive = selectedPeer.value.PersistentKeepalive
+
+      formData.value.PrivateKey = selectedPeer.value.PrivateKey
+      formData.value.PublicKey = selectedPeer.value.PublicKey
+
+      formData.value.Mode = selectedPeer.value.Mode
+
+      formData.value.Addresses = selectedPeer.value.Addresses
+      formData.value.CheckAliveAddress = selectedPeer.value.CheckAliveAddress
+      formData.value.Dns = selectedPeer.value.Dns
+      formData.value.DnsSearch = selectedPeer.value.DnsSearch
+      formData.value.Mtu = selectedPeer.value.Mtu
+      formData.value.FirewallMark = selectedPeer.value.FirewallMark
+      formData.value.RoutingTable = selectedPeer.value.RoutingTable
+
+      formData.value.PreUp = selectedPeer.value.PreUp
+      formData.value.PostUp = selectedPeer.value.PostUp
+      formData.value.PreDown = selectedPeer.value.PreDown
+      formData.value.PostDown = selectedPeer.value.PostDown
+
+      if (!formData.value.Endpoint.Overridable ||
+        !formData.value.EndpointPublicKey.Overridable ||
+        !formData.value.AllowedIPs.Overridable ||
+        !formData.value.PersistentKeepalive.Overridable ||
+        !formData.value.Dns.Overridable ||
+        !formData.value.DnsSearch.Overridable ||
+        !formData.value.Mtu.Overridable ||
+        !formData.value.FirewallMark.Overridable ||
+        !formData.value.RoutingTable.Overridable ||
+        !formData.value.PreUp.Overridable ||
+        !formData.value.PostUp.Overridable ||
+        !formData.value.PreDown.Overridable ||
+        !formData.value.PostDown.Overridable) {
+        formData.value.IgnoreGlobalSettings = true
+      }
+    }
+  }
+}
+)
+
+watch(() => formData.value.IgnoreGlobalSettings, async (newValue, oldValue) => {
+  formData.value.Endpoint.Overridable = !newValue
+  formData.value.EndpointPublicKey.Overridable = !newValue
+  formData.value.AllowedIPs.Overridable = !newValue
+  formData.value.PersistentKeepalive.Overridable = !newValue
+  formData.value.Dns.Overridable = !newValue
+  formData.value.DnsSearch.Overridable = !newValue
+  formData.value.Mtu.Overridable = !newValue
+  formData.value.FirewallMark.Overridable = !newValue
+  formData.value.RoutingTable.Overridable = !newValue
+  formData.value.PreUp.Overridable = !newValue
+  formData.value.PostUp.Overridable = !newValue
+  formData.value.PreDown.Overridable = !newValue
+  formData.value.PostDown.Overridable = !newValue
+}
+)
+
+watch(() => formData.value.Disabled, async (newValue, oldValue) => {
+  if (oldValue && !newValue && formData.value.ExpiresAt) {
+    formData.value.ExpiresAt = "" // reset expiry date
+  }
+}
+)
+
+function close() {
+  formData.value = freshPeer()
+  emit('close')
+}
+
+function handleChangeAddresses(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if (isCidr(tag) === 0) {
+      validInput = false
+      notify({
+        title: "Invalid CIDR",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if (validInput) {
+    formData.value.Addresses = tags
+  }
+}
+
+function handleChangeAllowedIPs(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if (isCidr(tag) === 0) {
+      validInput = false
+      notify({
+        title: "Invalid CIDR",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if (validInput) {
+    formData.value.AllowedIPs.Value = tags
+  }
+}
+
+function handleChangeExtraAllowedIPs(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if (isCidr(tag) === 0) {
+      validInput = false
+      notify({
+        title: "Invalid CIDR",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if (validInput) {
+    formData.value.ExtraAllowedIPs = tags
+  }
+}
+
+function handleChangeDns(tags) {
+  let validInput = true
+  tags.forEach(tag => {
+    if (!isIP(tag)) {
+      validInput = false
+      notify({
+        title: "Invalid IP",
+        text: tag + " is not a valid IP address",
+        type: 'error',
+      })
+    }
+  })
+  if (validInput) {
+    formData.value.Dns.Value = tags
+  }
+}
+
+function handleChangeDnsSearch(tags) {
+  formData.value.DnsSearch.Value = tags
+}
+
+async function save() {
+  try {
+    if (props.peerId !== '#NEW#') {
+      await peers.UpdatePeer(selectedPeer.value.Identifier, formData.value)
+    } else {
+      await peers.CreatePeer(selectedInterface.value.Identifier, formData.value)
+    }
+    close()
+  } catch (e) {
+    // console.log(e)
+    notify({
+      title: "Failed to save peer!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+async function del() {
+  try {
+    await peers.DeletePeer(selectedPeer.value.Identifier)
+    close()
+  } catch (e) {
+    // console.log(e)
+    notify({
+      title: "Failed to delete peer!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+</script>
+
+<template>
+  <Modal :title="title" :visible="visible" @close="close">
+    <template #default>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-general') }}</legend>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.display-name.label') }}</label>
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.display-name.placeholder')"
+            v-model="formData.DisplayName">
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.linked-user.label') }}</label>
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.linked-user.placeholder')"
+            v-model="formData.UserIdentifier">
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-crypto') }}</legend>
+        <div class="form-group" v-if="selectedInterface.Mode === 'server'">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.private-key.label') }}</label>
+          <input type="email" class="form-control" :placeholder="$t('modals.peer-edit.private-key.placeholder')" required
+            v-model="formData.PrivateKey">
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.public-key.label') }}</label>
+          <input type="email" class="form-control" :placeholder="$t('modals.peer-edit.public-key.placeholder')" required
+            v-model="formData.PublicKey">
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.preshared-key.label') }}</label>
+          <input type="email" class="form-control" :placeholder="$t('modals.peer-edit.preshared-key.placeholder')"
+            v-model="formData.PresharedKey">
+        </div>
+        <div class="form-group" v-if="formData.Mode === 'client'">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.endpoint-public-key.label') }}</label>
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.endpoint-public-key.placeholder')"
+            v-model="formData.EndpointPublicKey.Value">
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-network') }}</legend>
+        <div class="form-group" v-if="selectedInterface.Mode === 'client'">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.endpoint.label') }}</label>
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-edit.endpoint.placeholder')"
+            v-model="formData.Endpoint.Value">
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.ip.label') }}</label>
+          <vue3-tags-input class="form-control" :tags="formData.Addresses"
+            :placeholder="$t('modals.peer-edit.ip.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
+            :validate="validateCIDR" @on-tags-changed="handleChangeAddresses" />
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.allowed-ip.label') }}</label>
+          <vue3-tags-input class="form-control" :tags="formData.AllowedIPs.Value"
+            :placeholder="$t('modals.peer-edit.allowed-ip.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
+            :validate="validateCIDR" @on-tags-changed="handleChangeAllowedIPs" />
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.extra-allowed-ip.label') }}</label>
+          <vue3-tags-input class="form-control" :tags="formData.ExtraAllowedIPs"
+            :placeholder="$t('modals.peer-edit.extra-allowed-ip.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
+            :validate="validateCIDR" @on-tags-changed="handleChangeExtraAllowedIPs" />
+          <small class="form-text text-muted">{{ $t('modals.peer-edit.extra-allowed-ip.description') }}</small>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.dns.label') }}</label>
+          <vue3-tags-input class="form-control" :tags="formData.Dns.Value"
+            :placeholder="$t('modals.peer-edit.dns.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
+            :validate="validateIP" @on-tags-changed="handleChangeDns" />
+        </div>
+        <div hidden class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.dns-search.label') }}</label>
+          <vue3-tags-input class="form-control" :tags="formData.DnsSearch.Value"
+            :placeholder="$t('modals.peer-edit.dns-search.label')" :add-tag-on-keys="[13, 188, 32, 9]"
+            :validate="validateDomain" @on-tags-changed="handleChangeDnsSearch" />
+        </div>
+        <div class="row">
+          <div class="form-group col-md-6">
+            <label class="form-label mt-4">{{ $t('modals.peer-edit.keep-alive.label') }}</label>
+            <input type="number" class="form-control" :placeholder="$t('modals.peer-edit.keep-alive.label')"
+              v-model="formData.PersistentKeepalive.Value">
+          </div>
+          <div class="form-group col-md-6">
+            <label class="form-label mt-4">{{ $t('modals.peer-edit.mtu.label') }}</label>
+            <input type="number" class="form-control" :placeholder="$t('modals.peer-edit.mtu.label')"
+              v-model="formData.Mtu.Value">
+          </div>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-hooks') }}</legend>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.pre-up.label') }}</label>
+          <textarea v-model="formData.PreUp.Value" class="form-control" rows="2"
+            :placeholder="$t('modals.peer-edit.pre-up.placeholder')"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.post-up.label') }}</label>
+          <textarea v-model="formData.PostUp.Value" class="form-control" rows="2"
+            :placeholder="$t('modals.peer-edit.post-up.placeholder')"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.pre-down.label') }}</label>
+          <textarea v-model="formData.PreDown.Value" class="form-control" rows="2"
+            :placeholder="$t('modals.peer-edit.pre-down.placeholder')"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-edit.post-down.label') }}</label>
+          <textarea v-model="formData.PostDown.Value" class="form-control" rows="2"
+            :placeholder="$t('modals.peer-edit.post-down.placeholder')"></textarea>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.peer-edit.header-state') }}</legend>
+        <div class="row">
+          <div class="form-group col-md-6">
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" v-model="formData.Disabled">
+              <label class="form-check-label">{{ $t('modals.peer-edit.disabled.label') }}</label>
+            </div>
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" v-model="formData.IgnoreGlobalSettings">
+              <label class="form-check-label">{{ $t('modals.peer-edit.ignore-global.label') }}</label>
+            </div>
+          </div>
+          <div class="form-group col-md-6">
+            <label class="form-label">{{ $t('modals.peer-edit.expires-at.label') }}</label>
+            <input type="date" pattern="\d{4}-\d{2}-\d{2}" class="form-control" min="2023-01-01"
+              v-model="formData.ExpiresAt">
+          </div>
+        </div>
+      </fieldset>
+    </template>
+    <template #footer>
+      <div class="flex-fill text-start">
+        <button v-if="props.peerId !== '#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{
+          $t('general.delete') }}</button>
+      </div>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
+    </template>
+  </Modal>
+</template>
+
+<style></style>

frontend/src/components/PeerMultiCreateModal.vue

@@ -0,0 +1,110 @@
+<script setup>
+import Modal from "./Modal.vue";
+import {peerStore} from "@/stores/peers";
+import {interfaceStore} from "@/stores/interfaces";
+import {computed, ref} from "vue";
+import { useI18n } from 'vue-i18n';
+import { notify } from "@kyvg/vue3-notification";
+import Vue3TagsInput from "vue3-tags-input";
+import { freshInterface } from '@/helpers/models';
+
+const { t } = useI18n()
+
+const peers = peerStore()
+const interfaces = interfaceStore()
+
+const props = defineProps({
+  visible: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+const selectedInterface = computed(() => {
+  let i = interfaces.GetSelected;
+
+  if (!i) {
+    i = freshInterface() // dummy interface to avoid 'undefined' exceptions
+  }
+
+  return i
+})
+
+function freshForm() {
+  return {
+    Identifiers: [],
+    Suffix: "",
+  }
+}
+
+const formData = ref(freshForm())
+
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+  if (selectedInterface.value.Mode === "server") {
+    return t("modals.peer-multi-create.headline-peer")
+  } else {
+    return t("modals.peer-multi-create.headline-endpoint")
+  }
+})
+
+function close() {
+  formData.value = freshForm()
+  emit('close')
+}
+
+function handleChangeUserIdentifiers(tags) {
+  formData.value.Identifiers = tags
+}
+
+async function save() {
+  if (formData.value.Identifiers.length === 0) {
+    notify({
+      title: "Missing Identifiers",
+      text: "At least one identifier is required to create a new peer.",
+      type: 'error',
+    })
+    return
+  }
+
+  try {
+    await peers.CreateMultiplePeers(selectedInterface.value.Identifier, formData.value)
+    close()
+  } catch (e) {
+    console.log(e)
+    notify({
+      title: "Failed to create peers!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+</script>
+
+<template>
+  <Modal :title="title" :visible="visible" @close="close">
+    <template #default>
+      <fieldset>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-multi-create.identifiers.label') }}</label>
+          <vue3-tags-input class="form-control" :tags="formData.Identifiers"
+                           :placeholder="$t('modals.peer-multi-create.identifiers.placeholder')"
+                           :add-tag-on-keys="[13, 188, 32, 9]"
+                           @on-tags-changed="handleChangeUserIdentifiers"/>
+          <small class="form-text text-muted">{{ $t('modals.peer-multi-create.identifiers.description') }}</small>
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.peer-multi-create.prefix.label') }}</label>
+          <input type="text" class="form-control" :placeholder="$t('modals.peer-multi-create.prefix.placeholder')" v-model="formData.Suffix">
+          <small class="form-text text-muted">{{ $t('modals.peer-multi-create.prefix.description') }}</small>
+        </div>
+      </fieldset>
+    </template>
+    <template #footer>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
+    </template>
+  </Modal>
+</template>

frontend/src/components/PeerViewModal.vue

@@ -0,0 +1,226 @@
+<script setup>
+import Modal from "./Modal.vue";
+import { peerStore } from "@/stores/peers";
+import { interfaceStore } from "@/stores/interfaces";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { freshInterface, freshPeer, freshStats } from '@/helpers/models';
+import Prism from "vue-prism-component";
+import { notify } from "@kyvg/vue3-notification";
+import { settingsStore } from "@/stores/settings";
+import { profileStore } from "@/stores/profile";
+import { base64_url_encode } from '@/helpers/encoding';
+import { apiWrapper } from "@/helpers/fetch-wrapper";
+
+const { t } = useI18n()
+
+const settings = settingsStore()
+const peers = peerStore()
+const interfaces = interfaceStore()
+const profile = profileStore()
+
+const props = defineProps({
+  peerId: String,
+  visible: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+function close() {
+  emit('close')
+}
+
+const configString = ref("")
+
+const selectedPeer = computed(() => {
+  let p = peers.Find(props.peerId)
+
+  if (!p) {
+    if (!!props.peerId || props.peerId.length) {
+      p = profile.peers.find((p) => p.Identifier === props.peerId)
+    } else {
+      p = freshPeer() // dummy peer to avoid 'undefined' exceptions
+    }
+  }
+  return p
+})
+
+const selectedStats = computed(() => {
+  let s = peers.Statistics(props.peerId)
+
+  if (!s) {
+    if (!!props.peerId || props.peerId.length) {
+      p = profile.Statistics(props.peerId)
+    } else {
+      s = freshStats() // dummy stats to avoid 'undefined' exceptions
+    }
+
+  }
+  return s
+})
+
+const selectedInterface = computed(() => {
+  let i = interfaces.GetSelected;
+
+  if (!i) {
+    i = freshInterface() // dummy interface to avoid 'undefined' exceptions
+  }
+  return i
+})
+
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+  if (selectedInterface.value.Mode === "server") {
+    return t("modals.peer-view.headline-peer") + " " + selectedPeer.value.DisplayName
+  } else {
+    return t("modals.peer-view.headline-endpoint") + " " + selectedPeer.value.DisplayName
+  }
+})
+
+watch(() => props.visible, async (newValue, oldValue) => {
+  if (oldValue === false && newValue === true) { // if modal is shown
+    await peers.LoadPeerConfig(selectedPeer.value.Identifier)
+    configString.value = peers.configuration
+  }
+}
+)
+
+function download() {
+  // credit: https://www.bitdegree.org/learn/javascript-download
+  let filename = 'WireGuard-Tunnel.conf'
+  if (selectedPeer.value.DisplayName) {
+    filename = selectedPeer.value.DisplayName
+      .replace(/ /g, "_")
+      .replace(/[^a-zA-Z0-9-_]/g, "")
+      .substring(0, 16)
+      + ".conf"
+  }
+  let text = configString.value
+
+  let element = document.createElement('a')
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+  element.setAttribute('download', filename)
+
+  element.style.display = 'none'
+  document.body.appendChild(element)
+
+  element.click()
+  document.body.removeChild(element)
+}
+
+function email() {
+  peers.MailPeerConfig(settings.Setting("MailLinkOnly"), [selectedPeer.value.Identifier]).catch(e => {
+    notify({
+      title: "Failed to send mail with peer configuration!",
+      text: e.toString(),
+      type: 'error',
+    })
+  })
+}
+
+function ConfigQrUrl() {
+  if (props.peerId.length) {
+    return apiWrapper.url(`/peer/config-qr/${base64_url_encode(props.peerId)}`)
+  }
+  return ''
+}
+
+</script>
+
+<template>
+  <Modal :title="title" :visible="visible" @close="close">
+    <template #default>
+      <div class="accordion" id="peerInformation">
+        <div class="accordion-item">
+          <h2 class="accordion-header">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDetails"
+              aria-expanded="true" aria-controls="collapseDetails">
+              {{ $t('modals.peer-view.section-info') }}
+            </button>
+          </h2>
+          <div id="collapseDetails" class="accordion-collapse collapse show" aria-labelledby="headingDetails"
+            data-bs-parent="#peerInformation" style="">
+            <div class="accordion-body">
+              <div class="row">
+                <div class="col-md-8">
+                  <ul>
+                    <li>{{ $t('modals.peer-view.identifier') }}: {{ selectedPeer.PublicKey }}</li>
+                    <li>{{ $t('modals.peer-view.ip') }}: <span v-for="ip in selectedPeer.Addresses" :key="ip"
+                        class="badge rounded-pill bg-light">{{ ip }}</span></li>
+                    <li>{{ $t('modals.peer-view.user') }}: {{ selectedPeer.UserIdentifier }}</li>
+                    <li v-if="selectedPeer.Notes">{{ $t('modals.peer-view.notes') }}: {{ selectedPeer.Notes }}</li>
+                    <li v-if="selectedPeer.ExpiresAt">{{ $t('modals.peer-view.expiry-status') }}: {{
+                      selectedPeer.ExpiresAt }}</li>
+                    <li v-if="selectedPeer.Disabled">{{ $t('modals.peer-view.disabled-status') }}: {{
+                      selectedPeer.DisabledReason }}</li>
+                  </ul>
+                </div>
+                <div class="col-md-4">
+                  <img class="config-qr-img" :src="ConfigQrUrl()" loading="lazy" alt="Configuration QR Code">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="headingStatus">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#collapseStatus" aria-expanded="false" aria-controls="collapseStatus">
+              {{ $t('modals.peer-view.section-status') }}
+            </button>
+          </h2>
+          <div id="collapseStatus" class="accordion-collapse collapse" aria-labelledby="headingStatus"
+            data-bs-parent="#peerInformation" style="">
+            <div class="accordion-body">
+              <div class="row">
+                <div class="col-md-12">
+                  <h4>{{ $t('modals.peer-view.traffic') }}</h4>
+                  <p><i class="fas fa-long-arrow-alt-down" :title="$t('modals.peer-view.download')"></i> {{
+                    selectedStats.BytesReceived }} Bytes / <i class="fas fa-long-arrow-alt-up"
+                      :title="$t('modals.peer-view.upload')"></i> {{ selectedStats.BytesTransmitted }} Bytes</p>
+                  <h4>{{ $t('modals.peer-view.connection-status') }}</h4>
+                  <ul>
+                    <li>{{ $t('modals.peer-view.pingable') }}: {{ selectedStats.IsPingable }}</li>
+                    <li>{{ $t('modals.peer-view.handshake') }}: {{ selectedStats.LastHandshake }}</li>
+                    <li>{{ $t('modals.peer-view.connected-since') }}: {{ selectedStats.LastSessionStart }}</li>
+                    <li>{{ $t('modals.peer-view.endpoint') }}: {{ selectedStats.EndpointAddress }}</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="selectedInterface.Mode === 'server'" class="accordion-item">
+          <h2 class="accordion-header" id="headingConfig">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#collapseConfig" aria-expanded="false" aria-controls="collapseConfig">
+              {{ $t('modals.peer-view.section-config') }}
+            </button>
+          </h2>
+          <div id="collapseConfig" class="accordion-collapse collapse" aria-labelledby="headingConfig"
+            data-bs-parent="#peerInformation" style="">
+            <div class="accordion-body">
+              <Prism language="ini" :code="configString"></Prism>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex-fill text-start">
+        <button @click.prevent="download" type="button" class="btn btn-primary me-1">{{
+          $t('modals.peer-view.button-download') }}</button>
+        <button @click.prevent="email" hidden type="button" class="btn btn-primary me-1">{{
+          $t('modals.peer-view.button-email') }}</button>
+      </div>
+      <button @click.prevent="close" type="button" class="btn btn-secondary">{{ $t('general.close') }}</button>
+
+
+  </template>
+</Modal></template>
+
+<style>.config-qr-img {
+  max-width: 100%;
+}</style>

frontend/src/components/UserEditModal.vue

@@ -0,0 +1,174 @@
+<script setup>
+import Modal from "./Modal.vue";
+import {userStore} from "@/stores/users";
+import {computed, ref, watch} from "vue";
+import { useI18n } from 'vue-i18n';
+import { notify } from "@kyvg/vue3-notification";
+import {freshUser} from "@/helpers/models";
+
+const { t } = useI18n()
+
+const users = userStore()
+
+const props = defineProps({
+  userId: String,
+  visible: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+const selectedUser = computed(() => {
+  return users.Find(props.userId)
+})
+
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+  if (selectedUser.value) {
+    return t("modals.user-edit.headline-edit") + " " + selectedUser.value.Identifier
+  }
+  return t("modals.user-edit.headline-new")
+})
+
+const formData = ref(freshUser())
+
+// functions
+
+watch(() => props.visible, async (newValue, oldValue) => {
+      if (oldValue === false && newValue === true) { // if modal is shown
+        if (!selectedUser.value) {
+          formData.value = freshUser()
+        } else { // fill existing userdata
+          formData.value.Identifier = selectedUser.value.Identifier
+          formData.value.Email = selectedUser.value.Email
+          formData.value.Source = selectedUser.value.Source
+          formData.value.IsAdmin = selectedUser.value.IsAdmin
+          formData.value.Firstname = selectedUser.value.Firstname
+          formData.value.Lastname = selectedUser.value.Lastname
+          formData.value.Phone = selectedUser.value.Phone
+          formData.value.Department = selectedUser.value.Department
+          formData.value.Notes = selectedUser.value.Notes
+          formData.value.Password = ""
+          formData.value.Disabled = selectedUser.value.Disabled
+        }
+      }
+    }
+)
+
+function close() {
+  formData.value = freshUser()
+  emit('close')
+}
+
+async function save() {
+  try {
+    if (props.userId!=='#NEW#') {
+      await users.UpdateUser(selectedUser.value.Identifier, formData.value)
+    } else {
+      await users.CreateUser(formData.value)
+    }
+    close()
+  } catch (e) {
+    notify({
+      title: "Failed to save user!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+async function del() {
+  try {
+    await users.DeleteUser(selectedUser.value.Identifier)
+    close()
+  } catch (e) {
+    notify({
+      title: "Failed to delete user!",
+      text: e.toString(),
+      type: 'error',
+    })
+  }
+}
+
+</script>
+
+<template>
+  <Modal :title="title" :visible="visible" @close="close">
+    <template #default>
+      <fieldset v-if="formData.Source==='db'">
+        <legend class="mt-4">{{ $t('modals.user-edit.header-general') }}</legend>
+        <div v-if="props.userId==='#NEW#'" class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.user-edit.identifier.label') }}</label>
+          <input v-model="formData.Identifier" class="form-control" :placeholder="$t('modals.user-edit.identifier.placeholder')" type="text">
+        </div>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.user-edit.source.label') }}</label>
+          <input v-model="formData.Source" class="form-control" disabled="disabled" :placeholder="$t('modals.user-edit.source.placeholder')" type="text">
+        </div>
+        <div v-if="formData.Source==='db'" class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.user-edit.password.label') }}</label>
+          <input v-model="formData.Password" aria-describedby="passwordHelp" class="form-control" :placeholder="$t('modals.user-edit.password.placeholder')" type="text">
+          <small v-if="props.userId!=='#NEW#'" id="passwordHelp" class="form-text text-muted">{{ $t('modals.user-edit.password.description') }}</small>
+        </div>
+      </fieldset>
+      <fieldset v-if="formData.Source==='db'">
+        <legend class="mt-4">{{ $t('modals.user-edit.header-personal') }}</legend>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.user-edit.email.label') }}</label>
+          <input v-model="formData.Email" class="form-control" :placeholder="$t('modals.user-edit.email.placeholder')" type="email">
+        </div>
+        <div class="row">
+          <div class="form-group col-md-6">
+            <label class="form-label mt-4">{{ $t('modals.user-edit.firstname.label') }}</label>
+            <input v-model="formData.Firstname" class="form-control" :placeholder="$t('modals.user-edit.firstname.placeholder')" type="text">
+          </div>
+          <div class="form-group col-md-6">
+            <label class="form-label mt-4">{{ $t('modals.user-edit.lastname.label') }}</label>
+            <input v-model="formData.Lastname" class="form-control" :placeholder="$t('modals.user-edit.lastname.placeholder')" type="text">
+          </div>
+        </div>
+        <div class="row">
+          <div class="form-group col-md-6">
+            <label class="form-label mt-4">{{ $t('modals.user-edit.phone.label') }}</label>
+            <input v-model="formData.Phone" class="form-control" :placeholder="$t('modals.user-edit.phone.placeholder')" type="text">
+          </div>
+          <div class="form-group col-md-6">
+            <label class="form-label mt-4">{{ $t('modals.user-edit.department.label') }}</label>
+            <input v-model="formData.Department" class="form-control" :placeholder="$t('modals.user-edit.department.placeholder')" type="text">
+          </div>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.user-edit.header-notes') }}</legend>
+        <div class="form-group">
+          <label class="form-label mt-4">{{ $t('modals.user-edit.notes.label') }}</label>
+          <textarea v-model="formData.Notes" class="form-control" rows="2"></textarea>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">{{ $t('modals.user-edit.header-state') }}</legend>
+        <div class="form-check form-switch">
+          <input v-model="formData.Disabled" class="form-check-input" type="checkbox">
+          <label class="form-check-label" >{{ $t('modals.user-edit.disabled.label') }}</label>
+        </div>
+        <div class="form-check form-switch">
+          <input v-model="formData.Locked" class="form-check-input" type="checkbox">
+          <label class="form-check-label" >{{ $t('modals.user-edit.locked.label') }}</label>
+        </div>
+        <div class="form-check form-switch" v-if="formData.Source==='db'">
+          <input v-model="formData.IsAdmin" checked="" class="form-check-input" type="checkbox">
+          <label class="form-check-label">{{ $t('modals.user-edit.admin.label') }}</label>
+        </div>
+      </fieldset>
+
+    </template>
+    <template #footer>
+      <div class="flex-fill text-start">
+        <button v-if="props.userId!=='#NEW#'&&formData.Source==='db'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{ $t('general.delete') }}</button>
+      </div>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
+    </template>
+  </Modal>
+</template>

frontend/src/components/UserViewModal.vue

@@ -0,0 +1,143 @@
+<script setup>
+import Modal from "./Modal.vue";
+import {userStore} from "../stores/users";
+import {computed, ref, watch} from "vue";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n()
+
+const users = userStore()
+
+const props = defineProps({
+  userId: String,
+  visible: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+const selectedUser = computed(() => {
+  let user = users.Find(props.userId)
+  if (user) {
+    return user
+  }
+
+  return {} // return empty object to avoid "undefined" access problems
+})
+
+const title = computed(() => {
+  if (!props.visible) {
+    return "" // otherwise interfaces.GetSelected will die...
+  }
+  return t("modals.user-view.headline") + " " + selectedUser.value.Identifier
+})
+
+const userPeers = computed(() => {
+  return users.Peers
+})
+
+// functions
+
+watch(() => props.visible, async (newValue, oldValue) => {
+      if (oldValue === false && newValue === true) { // if modal is shown
+        await users.LoadUserPeers(selectedUser.value.Identifier)
+      }
+    }
+)
+
+function close() {
+  emit('close')
+}
+
+</script>
+
+<template>
+  <Modal :title="title" :visible="visible" @close="close">
+    <template #default>
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a class="nav-link active" data-bs-toggle="tab" href="#user">{{ $t('modals.user-view.tab-user') }}</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" data-bs-toggle="tab" href="#peers">{{ $t('modals.user-view.tab-peers') }}</a>
+        </li>
+      </ul>
+      <div id="interfaceTabs" class="tab-content">
+        <div id="user" class="tab-pane fade active show">
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item">
+              <h4>{{ $t('modals.user-view.headline-info') }}</h4>
+              <table class="table table-sm table-borderless device-status-table">
+                <tbody>
+                <tr>
+                  <td>{{ $t('modals.user-view.email') }}:</td>
+                  <td>{{selectedUser.Email}}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('modals.user-view.firstname') }}:</td>
+                  <td>{{selectedUser.Firstname}}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('modals.user-view.lastname') }}:</td>
+                  <td>{{selectedUser.Lastname}}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('modals.user-view.phone') }}:</td>
+                  <td>{{selectedUser.Phone}}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('modals.user-view.department') }}:</td>
+                  <td>{{selectedUser.Department}}</td>
+                </tr>
+                <tr v-if="selectedUser.Disabled">
+                  <td>{{ $t('modals.user-view.disabled') }}:</td>
+                  <td>{{selectedUser.DisabledReason}}</td>
+                </tr>
+                <tr v-if="selectedUser.Locked">
+                  <td>{{ $t('modals.user-view.locked') }}:</td>
+                  <td>{{selectedUser.LockedReason}}</td>
+                </tr>
+                </tbody>
+              </table>
+            </li>
+            <li class="list-group-item" v-if="selectedUser.Notes">
+              <h4>{{ $t('modals.user-view.headline-notes') }}</h4>
+              <table class="table table-sm table-borderless device-status-table">
+                <tbody>
+                <tr><td>{{selectedUser.Notes}}</td></tr>
+                </tbody>
+              </table>
+            </li>
+          </ul>
+        </div>
+        <div id="peers" class="tab-pane fade">
+          <ul v-if="userPeers.length===0" class="list-group list-group-flush">
+            <li class="list-group-item">{{ $t('modals.user-view.no-peers') }}</li>
+          </ul>
+
+          <table v-if="userPeers.length!==0" id="peerTable" class="table table-sm">
+            <thead>
+            <tr>
+              <th scope="col">{{ $t('modals.user-view.peers.name') }}</th>
+              <th scope="col">{{ $t('modals.user-view.peers.interface') }}</th>
+              <th scope="col">{{ $t('modals.user-view.peers.ip') }}</th>
+              <th scope="col"></th><!-- Actions -->
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="peer in userPeers" :key="peer.Identifier">
+              <td>{{peer.DisplayName}}</td>
+              <td>{{peer.InterfaceIdentifier}}</td>
+              <td>
+                <span v-for="ip in peer.Addresses" :key="ip" class="badge pill bg-light">{{ ip }}</span>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <button class="btn btn-primary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
+    </template>
+  </Modal>
+</template>

frontend/src/components/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconDocumentation.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconEcosystem.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

frontend/src/helpers/encoding.js

@@ -0,0 +1,7 @@
+export function base64_url_encode(input) {
+  let output = btoa(input)
+  output = output.replace('+', '.')
+  output = output.replace('/', '_')
+  output = output.replace('=', '-')
+  return output
+}

frontend/src/helpers/fetch-wrapper.js

@@ -0,0 +1,95 @@
+import { authStore } from '@/stores/auth';
+import { securityStore } from '@/stores/security';
+
+export const fetchWrapper = {
+    url: apiUrl(),
+    get: request('GET'),
+    post: request('POST'),
+    put: request('PUT'),
+    delete: request('DELETE')
+};
+
+export const apiWrapper = {
+    url: apiUrl(),
+    get: apiRequest('GET'),
+    post: apiRequest('POST'),
+    put: apiRequest('PUT'),
+    delete: apiRequest('DELETE')
+};
+
+// request can be used to query arbitrary URLs
+function request(method) {
+    return (url, body = undefined) => {
+        const requestOptions = {
+            method,
+            headers: getHeaders(url)
+        };
+        if (body) {
+            requestOptions.headers['Content-Type'] = 'application/json';
+            requestOptions.body = JSON.stringify(body);
+        }
+        return fetch(url, requestOptions).then(handleResponse);
+    }
+}
+
+// apiRequest uses WGPORTAL_BACKEND_BASE_URL as base URL
+function apiRequest(method) {
+    return (path, body = undefined) => {
+        const url = WGPORTAL_BACKEND_BASE_URL + path
+        const requestOptions = {
+            method,
+            headers: getHeaders(method, url)
+        };
+        if (body) {
+            requestOptions.headers['Content-Type'] = 'application/json';
+            requestOptions.body = JSON.stringify(body);
+        }
+        return fetch(url, requestOptions).then(handleResponse);
+    }
+}
+
+// apiUrl uses WGPORTAL_BACKEND_BASE_URL as base URL
+function apiUrl() {
+    return (path) => {
+        return WGPORTAL_BACKEND_BASE_URL + path
+    }
+}
+
+// helper functions
+
+function getHeaders(method, url) {
+    // return auth header with jwt if user is logged in and request is to the api url
+    const auth = authStore();
+    const sec = securityStore();
+    const isApiUrl = url.startsWith(WGPORTAL_BACKEND_BASE_URL);
+
+    let headers = {};
+    if (isApiUrl && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)) {
+        headers["X-CSRF-TOKEN"] = sec.CsrfToken;
+    }
+    if (isApiUrl && auth.IsAuthenticated) {
+        headers["X-FRONTEND-UID"] = auth.UserIdentifier;
+    }
+
+    return headers;
+}
+
+function handleResponse(response) {
+    return response.text().then(text => {
+        const data = text && JSON.parse(text);
+
+        if (!response.ok) {
+            const auth = authStore();
+            if ([401, 403].includes(response.status) && auth.IsAuthenticated) {
+                console.log("automatic logout initiated...");
+                // auto logout if 401 Unauthorized or 403 Forbidden response returned from api
+                auth.Logout();
+            }
+
+            const error = (data && data.Message) || response.statusText;
+            return Promise.reject(error);
+        }
+
+        return data;
+    });
+}

frontend/src/helpers/models.js

@@ -0,0 +1,164 @@
+
+export function freshInterface() {
+  return {
+    Disabled: false,
+    DisplayName: "",
+    Identifier: "",
+    Mode: "server",
+
+    PublicKey: "",
+    PrivateKey: "",
+
+    ListenPort:  51820,
+    Addresses: [],
+    DnsStr: [],
+    DnsSearch: [],
+
+    Mtu: 0,
+    FirewallMark: 0,
+    RoutingTable: "",
+
+    PreUp: "",
+    PostUp: "",
+    PreDown: "",
+    PostDown: "",
+
+    SaveConfig: false,
+
+    // Peer defaults
+
+    PeerDefNetwork: [],
+    PeerDefDns: [],
+    PeerDefDnsSearch: [],
+    PeerDefEndpoint: "",
+    PeerDefAllowedIPs: [],
+    PeerDefMtu: 0,
+    PeerDefPersistentKeepalive: 0,
+    PeerDefFirewallMark: 0,
+    PeerDefRoutingTable: "",
+    PeerDefPreUp: "",
+    PeerDefPostUp: "",
+    PeerDefPreDown: "",
+    PeerDefPostDown: "",
+
+    TotalPeers: 0,
+    EnabledPeers: 0
+  }
+}
+
+export function freshPeer() {
+  return {
+    Identifier: "",
+    DisplayName: "",
+    UserIdentifier: "",
+    InterfaceIdentifier: "",
+    Disabled: false,
+    ExpiresAt: null,
+    Notes: "",
+
+    Endpoint: {
+      Value: "",
+      Overridable: true,
+    },
+    EndpointPublicKey: {
+      Value: "",
+      Overridable: true,
+    },
+    AllowedIPs: {
+      Value: [],
+      Overridable: true,
+    },
+    ExtraAllowedIPs: [],
+    PresharedKey: "",
+    PersistentKeepalive: {
+      Value: 0,
+      Overridable: true,
+    },
+
+    PrivateKey: "",
+    PublicKey: "",
+
+    Mode: "client",
+
+    Addresses: [],
+    CheckAliveAddress: "",
+    Dns: {
+      Value: [],
+      Overridable: true,
+    },
+    DnsSearch: {
+      Value: [],
+      Overridable: true,
+    },
+    Mtu: {
+      Value: 0,
+      Overridable: true,
+    },
+    FirewallMark: {
+      Value: 0,
+      Overridable: true,
+    },
+    RoutingTable: {
+      Value: "",
+      Overridable: true,
+    },
+
+    PreUp: {
+      Value: "",
+      Overridable: true,
+    },
+    PostUp: {
+      Value: "",
+      Overridable: true,
+    },
+    PreDown: {
+      Value: "",
+      Overridable: true,
+    },
+    PostDown: {
+      Value: "",
+      Overridable: true,
+    },
+
+    // Internal value
+    IgnoreGlobalSettings: false
+  }
+}
+
+export function freshUser() {
+  return {
+    Identifier: "",
+
+    Email: "",
+    Source: "db",
+    IsAdmin: false,
+
+    Firstname: "",
+    Lastname: "",
+    Phone: "",
+    Department: "",
+    Notes: "",
+
+    Password: "",
+
+    Disabled: false,
+    DisabledReason: "",
+    Locked: false,
+    LockedReason: "",
+
+    PeerCount: 0
+  }
+}
+
+export function freshStats() {
+  return {
+    IsConnected: false,
+    IsPingable: false,
+    LastHandshake: null,
+    LastPing: null,
+    LastSessionStart: null,
+    BytesTransmitted: 0,
+    BytesReceived: 0,
+    EndpointAddress: ""
+  }
+}

frontend/src/helpers/validators.js

@@ -0,0 +1,14 @@
+import isCidr from "is-cidr";
+import {isIP} from 'is-ip';
+
+export function validateCIDR(value) {
+  return isCidr(value) !== 0
+}
+
+export function validateIP(value) {
+  return isIP(value)
+}
+
+export function validateDomain(value) {
+  return true
+}

frontend/src/lang/index.js

@@ -0,0 +1,29 @@
+// src/lang/index.js
+import de from './translations/de.json';
+import ru from './translations/ru.json';
+import en from './translations/en.json';
+import {createI18n} from "vue-i18n";
+
+function getStoredLanguage() {
+  let initialLang = localStorage.getItem('wgLang');
+  if (!initialLang) {
+    initialLang = "en"
+  }
+  return initialLang
+}
+
+// Create i18n instance with options
+const i18n = createI18n({
+  legacy: false,
+  globalInjection: true,
+  allowComposition: true,
+  locale: getStoredLanguage(), // set locale
+  fallbackLocale: "en", // set fallback locale
+  messages: {
+    "de": de,
+    "ru": ru,
+    "en": en
+  }
+});
+
+export default i18n

frontend/src/lang/translations/de.json

@@ -0,0 +1,489 @@
+{
+  "general": {
+    "pagination": {
+      "size": "Anzahl an Elementen",
+      "all": "Alle (langsam)"
+    },
+    "search": {
+      "placeholder": "Suche...",
+      "button": "Suchen"
+    },
+    "select-all": "Alle auswählen",
+    "yes": "Ja",
+    "no": "Nein",
+    "cancel": "Abbrechen",
+    "close": "Schließen",
+    "save": "Speichern",
+    "delete": "Löschen"
+  },
+  "login": {
+    "headline": "Bitte melden Sie sich an",
+    "username": {
+      "label": "Benutzername",
+      "placeholder": "Bitte geben Sie Ihren Benutzernamen ein"
+    },
+    "password": {
+      "label": "Kennwort",
+      "placeholder": "Bitte geben Sie Ihr Passwort ein"
+    },
+    "button": "Anmelden"
+  },
+  "menu": {
+    "home": "Home",
+    "interfaces": "Schnittstellen",
+    "users": "Benutzer",
+    "lang": "Sprache ändern",
+    "profile": "Mein Profil",
+    "login": "Anmelden",
+    "logout": "Abmelden"
+  },
+  "home": {
+    "headline": "WireGuard® VPN Portal",
+    "info-headline": "Mehr Informationen",
+    "abstract": "WireGuard® ist ein extrem einfaches, aber dennoch schnelles und modernes VPN, das modernste Kryptographie nutzt. Es zielt darauf ab, schneller, einfacher, schlanker und nützlicher als IPsec zu sein, während es die massiven Kopfschmerzen vermeidet. Es soll wesentlich leistungsfähiger sein als OpenVPN.",
+    "installation": {
+      "box-header": "WireGuard Installation",
+      "headline": "Installation",
+      "content": "Die Installationsanweisungen für die Client-Software finden Sie auf der offiziellen WireGuard-Website.",
+      "button": "Anleitung öffnen"
+    },
+    "about-wg": {
+      "box-header": "Über WireGuard",
+      "headline": "Über",
+      "content": "WireGuard® ist ein extrem einfaches, aber schnelles und modernes VPN, das modernste Kryptographie verwendet.",
+      "button": "Details"
+    },
+    "about-portal": {
+      "box-header": "Über WireGuard Portal",
+      "headline": "WireGuard Portal",
+      "content": "WireGuard Portal ist ein einfaches, webbasiertes Konfigurationsportal für WireGuard.",
+      "button": "Details"
+    },
+    "profiles": {
+      "headline": "VPN Profile",
+      "abstract": "Über Ihr Benutzerprofil können Sie auf Ihre persönlichen VPN-Konfigurationen zugreifen und diese herunterladen.",
+      "content": "Um alle Ihre konfigurierten Profile zu finden, klicken Sie auf die Schaltfläche unten.",
+      "button": "Mein Profil öffnen"
+    },
+    "admin": {
+      "headline": "Verwaltungsbereich",
+      "abstract": "Im Administrationsbereich können Sie VPN-Zugänge und die Serverschnittstelle sowie die Benutzer, die sich am VPN-Portal anmelden dürfen, verwalten.",
+      "content": "",
+      "button-admin": "Schnittstellenverwaltung",
+      "button-user": "Benutzerverwaltung"
+    }
+  },
+  "interfaces": {
+    "headline": "Schnittstellenverwaltung",
+    "headline-peers": "Current VPN Peers",
+    "headline-endpoints": "Current Endpoints",
+    "no-interface": {
+      "default-selection": "No Interface available",
+      "headline": "No interfaces found...",
+      "abstract": "Click the plus button above to create a new WireGuard interface."
+    },
+    "no-peer": {
+      "headline": "No peers available",
+      "abstract": "Currently, there are no peers available for the selected WireGuard interface."
+    },
+    "table-heading": {
+      "name": "Name",
+      "user": "User",
+      "ip": "IP's",
+      "endpoint": "Endpoint",
+      "status": "Status"
+    },
+    "interface": {
+      "headline": "Interface status for",
+      "mode": "mode",
+      "key": "Public Key",
+      "endpoint": "Public Endpoint",
+      "port": "Listening Port",
+      "peers": "Enabled Peers",
+      "total-peers": "Total Peers",
+      "endpoints": "Enabled Endpoints",
+      "total-endpoints": "Total Endpoints",
+      "ip": "IP Address",
+      "default-allowed-ip": "Default allowed IPs",
+      "dns": "DNS Servers",
+      "mtu": "MTU",
+      "default-keep-alive": "Default Keepalive Interval",
+      "button-show-config": "Show configuration",
+      "button-download-config": "Download configuration",
+      "button-store-config": "Store configuration for wg-quick",
+      "button-edit": "Edit interface"
+    },
+    "button-add-interface": "Add Interface",
+    "button-add-peer": "Add Peer",
+    "button-add-peers": "Add Multiple Peers",
+    "button-show-peer": "Show Peer",
+    "button-edit-peer": "Edit Peer",
+    "peer-disabled": "Peer is disabled, reason:",
+    "peer-expiring": "Peer is expiring at",
+    "peer-connected": "Connected",
+    "peer-not-connected": "Not Connected",
+    "peer-handshake": "Last handshake:"
+  },
+  "users": {
+    "headline": "Benutzerverwaltung",
+    "table-heading": {
+      "id": "ID",
+      "email": "E-Mail",
+      "firstname": "Firstname",
+      "lastname": "Lastname",
+      "source": "Source",
+      "peers": "Peers",
+      "admin": "Admin"
+    },
+    "no-user": {
+      "headline": "No users available",
+      "abstract": "Currently, there are no users registered with WireGuard Portal."
+    },
+    "button-add-user": "Add User",
+    "button-show-user": "Show User",
+    "button-edit-user": "Edit User",
+    "user-disabled": "User is disabled, reason:",
+    "user-locked": "Account is locked, reason:",
+    "admin": "User has administrator privileges",
+    "no-admin": "User has no administrator privileges"
+  },
+  "profile": {
+    "headline": "Meine VPN-Konfigurationen",
+    "table-heading": {
+      "name": "Name",
+      "ip": "IP's",
+      "stats": "Status",
+      "interface": "Server Interface"
+    },
+    "no-peer": {
+      "headline": "No peers available",
+      "abstract": "Currently, there are no peers associated with your user profile."
+    },
+    "peer-connected": "Connected",
+    "button-add-peer": "Add Peer",
+    "button-show-peer": "Show Peer",
+    "button-edit-peer": "Edit Peer"
+  },
+  "modals": {
+    "user-view": {
+      "headline": "User Account:",
+      "tab-user": "Information",
+      "tab-peers": "Peers",
+      "headline-info": "User Information:",
+      "headline-notes": "Notes:",
+      "email": "E-Mail",
+      "firstname": "Firstname",
+      "lastname": "Lastname",
+      "phone": "Phone number",
+      "department": "Department",
+      "disabled": "Account Disabled",
+      "locked": "Account Locked",
+      "no-peers": "User has no associated peers.",
+      "peers": {
+        "name": "Name",
+        "interface": "Interface",
+        "ip": "IP's"
+      }
+    },
+    "user-edit": {
+      "headline-edit": "Edit user:",
+      "headline-new": "New user",
+      "header-general": "General",
+      "header-personal": "User Information",
+      "header-notes": "Notes",
+      "header-state": "State",
+      "identifier": {
+        "label": "Identifier",
+        "placeholder": "The unique user identifier"
+      },
+      "source": {
+        "label": "Source",
+        "placeholder": "The user source"
+      },
+      "password": {
+        "label": "Password",
+        "placeholder": "A super secret password",
+        "description": "Leave this field blank to keep current password."
+      },
+      "email": {
+        "label": "Email",
+        "placeholder": "The email address"
+      },
+      "phone": {
+        "label": "Phone",
+        "placeholder": "The phone number"
+      },
+      "department": {
+        "label": "Department",
+        "placeholder": "The department"
+      },
+      "firstname": {
+        "label": "Firstname",
+        "placeholder": "Firstname"
+      },
+      "lastname": {
+        "label": "Lastname",
+        "placeholder": "Lastname"
+      },
+      "notes": {
+        "label": "Notes",
+        "placeholder": ""
+      },
+      "disabled": {
+        "label": "Disabled (no WireGuard connection and no login possible)"
+      },
+      "locked": {
+        "label": "Locked (no login possible, WireGuard connections still work)"
+      },
+      "admin": {
+        "label": "Is Admin"
+      }
+    },
+    "interface-view": {
+      "headline": "Config for Interface:"
+    },
+    "interface-edit": {
+      "headline-edit": "Edit Interface:",
+      "headline-new": "New Interface",
+      "tab-interface": "Interface",
+      "tab-peerdef": "Peer Defaults",
+      "header-general": "General",
+      "header-network": "Network",
+      "header-crypto": "Cryptography",
+      "header-hooks": "Interface Hooks",
+      "header-peer-hooks": "Hooks",
+      "header-state": "State",
+      "identifier": {
+        "label": "Identifier",
+        "placeholder": "The unique interface identifier"
+      },
+      "mode": {
+        "label": "Interface Mode",
+        "server": "Server Mode",
+        "client": "Client Mode",
+        "any": "Unknown Mode"
+      },
+      "display-name": {
+        "label": "Display Name",
+        "placeholder": "The descriptive name for the interface"
+      },
+      "private-key": {
+        "label": "Private Key",
+        "placeholder": "The private key"
+      },
+      "public-key": {
+        "label": "Public Key",
+        "placeholder": "The public key"
+      },
+      "ip": {
+        "label": "IP Addresses",
+        "placeholder": "IP Addresses (CIDR format)"
+      },
+      "listen-port": {
+        "label": "Listen Port",
+        "placeholder": "The listening port"
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The interface MTU (0 = keep default)"
+      },
+      "firewall-mark": {
+        "label": "Firewall Mark",
+        "placeholder": "Firewall mark that is applied to outgoing traffic. (0 = automatic)"
+      },
+      "routing-table": {
+        "label": "Routing Table",
+        "placeholder": "The routing table ID",
+        "description": "Special cases: off = do not manage routes, 0 = automatic"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Interface Disabled"
+      },
+      "save-config": {
+        "label": "Automatically save wg-quick config"
+      },
+      "defaults": {
+        "endpoint": {
+          "label": "Endpoint Address",
+          "placeholder": "Endpoint Address",
+          "description": "The endpoint address that peers will connect to."
+        },
+        "networks": {
+          "label": "IP Networks",
+          "placeholder": "Network Addresses",
+          "description": "Peers will get IP addresses from those subnets."
+        },
+        "allowed-ip": {
+          "label": "Allowed IP Addresses",
+          "placeholder": "Default Allowed IP Addresses"
+        },
+        "mtu": {
+          "label": "MTU",
+          "placeholder": "The client MTU (0 = keep default)"
+        },
+        "keep-alive": {
+          "label": "Keep Alive Interval",
+          "placeholder": "Persistent Keepalive (0 = default)"
+        }
+      },
+
+      "button-apply-defaults": "Apply Peer Defaults"
+    },
+    "peer-view": {
+      "headline-peer": "Peer:",
+      "headline-endpoint": "Endpoint:",
+      "section-info": "Peer Information",
+      "section-status": "Current Status",
+      "section-config": "Configuration",
+      "identifier": "Identifier",
+      "ip": "IP Addresses",
+      "user": "Associated User",
+      "notes": "Notes",
+      "expiry-status": "Expires At",
+      "disabled-status": "Disabled At",
+      "traffic": "Traffic",
+      "connection-status": "Connection Stats",
+      "upload": "Uploaded Bytes (from Server to Peer)",
+      "download": "Downloaded Bytes (from Peer to Server)",
+      "pingable": "Is Pingable",
+      "handshake": "Last Handshake",
+      "connected-since": "Connected since",
+      "endpoint": "Endpoint",
+      "button-download": "Download configuration",
+      "button-email": "Send configuration via E-Mail"
+    },
+    "peer-edit": {
+      "headline-edit-peer": "Edit peer:",
+      "headline-edit-endpoint": "Edit endpoint:",
+      "headline-new-peer": "Create peer",
+      "headline-new-endpoint": "Create endpoint",
+      "header-general": "General",
+      "header-network": "Network",
+      "header-crypto": "Cryptography",
+      "header-hooks": "Hooks (Executed on Peer)",
+      "header-state": "State",
+      "display-name": {
+        "label": "Display Name",
+        "placeholder": "The descriptive name for the peer"
+      },
+      "linked-user": {
+        "label": "Linked User",
+        "placeholder": "The user account which owns this peer"
+      },
+      "private-key": {
+        "label": "Private Key",
+        "placeholder": "The private key"
+      },
+      "public-key": {
+        "label": "Public Key",
+        "placeholder": "The public key"
+      },
+      "preshared-key": {
+        "label": "Preshared Key",
+        "placeholder": "Optional pre-shared key"
+      },
+      "endpoint-public-key": {
+        "label": "Endpoint public Key",
+        "placeholder": "The public key of the remote endpoint"
+      },
+      "endpoint": {
+        "label": "Endpoint Address",
+        "placeholder": "The address of the remote endpoint"
+      },
+      "ip": {
+        "label": "IP Addresses",
+        "placeholder": "IP Addresses (CIDR format)"
+      },
+      "allowed-ip": {
+        "label": "Allowed IP Addresses",
+        "placeholder": "Allowed IP Addresses (CIDR format)"
+      },
+      "extra-allowed-ip": {
+        "label": "Extra allowed IP Addresses",
+        "placeholder": "Extra allowed IP's (Server Sided)",
+        "description": "Those IP's will be added on the remote WireGuard interface as allowed IP's."
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "keep-alive": {
+        "label": "Keep Alive Interval",
+        "placeholder": "Persistent Keepalive (0 = default)"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The client MTU (0 = keep default)"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Peer Disabled"
+      },
+      "ignore-global": {
+        "label": "Ignore global settings"
+      },
+      "expires-at": {
+        "label": "Expiry date"
+      }
+    },
+    "peer-multi-create": {
+      "headline-peer": "Create multiple peers",
+      "headline-endpoint": "Create multiple endpoints",
+      "identifiers": {
+        "label": "User Identifiers",
+        "placeholder": "User Identifiers",
+        "description": "A user identifier (the username) for which a peer should be created."
+      },
+      "prefix": {
+        "headline-peer": "Peer:",
+        "headline-endpoint": "Endpoint:",
+        "label": "Display Name Prefix",
+        "placeholder": "The prefix",
+        "description": "A prefix that is added to the peers display name."
+      }
+    }
+  }
+}

frontend/src/lang/translations/en.json

@@ -0,0 +1,489 @@
+{
+  "general": {
+    "pagination": {
+      "size": "Number of Elements",
+      "all": "All (slow)"
+    },
+    "search": {
+      "placeholder": "Search...",
+      "button": "Search"
+    },
+    "select-all": "Select all",
+    "yes": "Yes",
+    "no": "No",
+    "cancel": "Cancel",
+    "close": "Close",
+    "save": "Save",
+    "delete": "Delete"
+  },
+  "login": {
+    "headline": "Please sign in",
+    "username": {
+      "label": "Username",
+      "placeholder": "Please enter your username"
+    },
+    "password": {
+      "label": "Password",
+      "placeholder": "Please enter your password"
+    },
+    "button": "Sign in"
+  },
+  "menu": {
+    "home": "Home",
+    "interfaces": "Interfaces",
+    "users": "Users",
+    "lang": "Toggle Language",
+    "profile": "My Profile",
+    "login": "Login",
+    "logout": "Logout"
+  },
+  "home": {
+    "headline": "WireGuard® VPN Portal",
+    "info-headline": "More Information",
+    "abstract": "WireGuard® is an extremely simple yet fast and modern VPN that utilizes state-of-the-art cryptography. It aims to be faster, simpler, leaner, and more useful than IPsec, while avoiding the massive headache. It intends to be considerably more performant than OpenVPN.",
+    "installation": {
+      "box-header": "WireGuard Installation",
+      "headline": "Installation",
+      "content": "Installation instructions for client software can be found on the official WireGuard website.",
+      "button": "Open Instructions"
+    },
+    "about-wg": {
+      "box-header": "About WireGuard",
+      "headline": "About",
+      "content": "WireGuard® is an extremely simple yet fast and modern VPN that utilizes state-of-the-art cryptography.",
+      "button": "More"
+    },
+    "about-portal": {
+      "box-header": "About WireGuard Portal",
+      "headline": "WireGuard Portal",
+      "content": "WireGuard Portal is a simple, web based configuration portal for WireGuard.",
+      "button": "More"
+    },
+    "profiles": {
+      "headline": "VPN Profiles",
+      "abstract": "You can access and download your personal VPN configurations via your Userprofile.",
+      "content": "To find all your configured profiles click on the button below.",
+      "button": "Open my profile"
+    },
+    "admin": {
+      "headline": "Administration Area",
+      "abstract": "In the administration area you can manage WireGuard peers and the server interface as well as users that are allowed to log in to the WireGuard Portal.",
+      "content": "",
+      "button-admin": "Open Server Administration",
+      "button-user": "Open User Administration"
+    }
+  },
+  "interfaces": {
+    "headline": "Interface Administration",
+    "headline-peers": "Current VPN Peers",
+    "headline-endpoints": "Current Endpoints",
+    "no-interface": {
+      "default-selection": "No Interface available",
+      "headline": "No interfaces found...",
+      "abstract": "Click the plus button above to create a new WireGuard interface."
+    },
+    "no-peer": {
+      "headline": "No peers available",
+      "abstract": "Currently, there are no peers available for the selected WireGuard interface."
+    },
+    "table-heading": {
+      "name": "Name",
+      "user": "User",
+      "ip": "IP's",
+      "endpoint": "Endpoint",
+      "status": "Status"
+    },
+    "interface": {
+      "headline": "Interface status for",
+      "mode": "mode",
+      "key": "Public Key",
+      "endpoint": "Public Endpoint",
+      "port": "Listening Port",
+      "peers": "Enabled Peers",
+      "total-peers": "Total Peers",
+      "endpoints": "Enabled Endpoints",
+      "total-endpoints": "Total Endpoints",
+      "ip": "IP Address",
+      "default-allowed-ip": "Default allowed IPs",
+      "dns": "DNS Servers",
+      "mtu": "MTU",
+      "default-keep-alive": "Default Keepalive Interval",
+      "button-show-config": "Show configuration",
+      "button-download-config": "Download configuration",
+      "button-store-config": "Store configuration for wg-quick",
+      "button-edit": "Edit interface"
+    },
+    "button-add-interface": "Add Interface",
+    "button-add-peer": "Add Peer",
+    "button-add-peers": "Add Multiple Peers",
+    "button-show-peer": "Show Peer",
+    "button-edit-peer": "Edit Peer",
+    "peer-disabled": "Peer is disabled, reason:",
+    "peer-expiring": "Peer is expiring at",
+    "peer-connected": "Connected",
+    "peer-not-connected": "Not Connected",
+    "peer-handshake": "Last handshake:"
+  },
+  "users": {
+    "headline": "User Administration",
+    "table-heading": {
+      "id": "ID",
+      "email": "E-Mail",
+      "firstname": "Firstname",
+      "lastname": "Lastname",
+      "source": "Source",
+      "peers": "Peers",
+      "admin": "Admin"
+    },
+    "no-user": {
+      "headline": "No users available",
+      "abstract": "Currently, there are no users registered with WireGuard Portal."
+    },
+    "button-add-user": "Add User",
+    "button-show-user": "Show User",
+    "button-edit-user": "Edit User",
+    "user-disabled": "User is disabled, reason:",
+    "user-locked": "Account is locked, reason:",
+    "admin": "User has administrator privileges",
+    "no-admin": "User has no administrator privileges"
+  },
+  "profile": {
+    "headline": "My VPN Peers",
+    "table-heading": {
+      "name": "Name",
+      "ip": "IP's",
+      "stats": "Status",
+      "interface": "Server Interface"
+    },
+    "no-peer": {
+      "headline": "No peers available",
+      "abstract": "Currently, there are no peers associated with your user profile."
+    },
+    "peer-connected": "Connected",
+    "button-add-peer": "Add Peer",
+    "button-show-peer": "Show Peer",
+    "button-edit-peer": "Edit Peer"
+  },
+  "modals": {
+    "user-view": {
+      "headline": "User Account:",
+      "tab-user": "Information",
+      "tab-peers": "Peers",
+      "headline-info": "User Information:",
+      "headline-notes": "Notes:",
+      "email": "E-Mail",
+      "firstname": "Firstname",
+      "lastname": "Lastname",
+      "phone": "Phone number",
+      "department": "Department",
+      "disabled": "Account Disabled",
+      "locked": "Account Locked",
+      "no-peers": "User has no associated peers.",
+      "peers": {
+        "name": "Name",
+        "interface": "Interface",
+        "ip": "IP's"
+      }
+    },
+    "user-edit": {
+      "headline-edit": "Edit user:",
+      "headline-new": "New user",
+      "header-general": "General",
+      "header-personal": "User Information",
+      "header-notes": "Notes",
+      "header-state": "State",
+      "identifier": {
+        "label": "Identifier",
+        "placeholder": "The unique user identifier"
+      },
+      "source": {
+        "label": "Source",
+        "placeholder": "The user source"
+      },
+      "password": {
+        "label": "Password",
+        "placeholder": "A super secret password",
+        "description": "Leave this field blank to keep current password."
+      },
+      "email": {
+        "label": "Email",
+        "placeholder": "The email address"
+      },
+      "phone": {
+        "label": "Phone",
+        "placeholder": "The phone number"
+      },
+      "department": {
+        "label": "Department",
+        "placeholder": "The department"
+      },
+      "firstname": {
+        "label": "Firstname",
+        "placeholder": "Firstname"
+      },
+      "lastname": {
+        "label": "Lastname",
+        "placeholder": "Lastname"
+      },
+      "notes": {
+        "label": "Notes",
+        "placeholder": ""
+      },
+      "disabled": {
+        "label": "Disabled (no WireGuard connection and no login possible)"
+      },
+      "locked": {
+        "label": "Locked (no login possible, WireGuard connections still work)"
+      },
+      "admin": {
+        "label": "Is Admin"
+      }
+    },
+    "interface-view": {
+      "headline": "Config for Interface:"
+    },
+    "interface-edit": {
+      "headline-edit": "Edit Interface:",
+      "headline-new": "New Interface",
+      "tab-interface": "Interface",
+      "tab-peerdef": "Peer Defaults",
+      "header-general": "General",
+      "header-network": "Network",
+      "header-crypto": "Cryptography",
+      "header-hooks": "Interface Hooks",
+      "header-peer-hooks": "Hooks",
+      "header-state": "State",
+      "identifier": {
+        "label": "Identifier",
+        "placeholder": "The unique interface identifier"
+      },
+      "mode": {
+        "label": "Interface Mode",
+        "server": "Server Mode",
+        "client": "Client Mode",
+        "any": "Unknown Mode"
+      },
+      "display-name": {
+        "label": "Display Name",
+        "placeholder": "The descriptive name for the interface"
+      },
+      "private-key": {
+        "label": "Private Key",
+        "placeholder": "The private key"
+      },
+      "public-key": {
+        "label": "Public Key",
+        "placeholder": "The public key"
+      },
+      "ip": {
+        "label": "IP Addresses",
+        "placeholder": "IP Addresses (CIDR format)"
+      },
+      "listen-port": {
+        "label": "Listen Port",
+        "placeholder": "The listening port"
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The interface MTU (0 = keep default)"
+      },
+      "firewall-mark": {
+        "label": "Firewall Mark",
+        "placeholder": "Firewall mark that is applied to outgoing traffic. (0 = automatic)"
+      },
+      "routing-table": {
+        "label": "Routing Table",
+        "placeholder": "The routing table ID",
+        "description": "Special cases: off = do not manage routes, 0 = automatic"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Interface Disabled"
+      },
+      "save-config": {
+        "label": "Automatically save wg-quick config"
+      },
+      "defaults": {
+        "endpoint": {
+          "label": "Endpoint Address",
+          "placeholder": "Endpoint Address",
+          "description": "The endpoint address that peers will connect to."
+        },
+        "networks": {
+          "label": "IP Networks",
+          "placeholder": "Network Addresses",
+          "description": "Peers will get IP addresses from those subnets."
+        },
+        "allowed-ip": {
+          "label": "Allowed IP Addresses",
+          "placeholder": "Default Allowed IP Addresses"
+        },
+        "mtu": {
+          "label": "MTU",
+          "placeholder": "The client MTU (0 = keep default)"
+        },
+        "keep-alive": {
+          "label": "Keep Alive Interval",
+          "placeholder": "Persistent Keepalive (0 = default)"
+        }
+      },
+
+      "button-apply-defaults": "Apply Peer Defaults"
+    },
+    "peer-view": {
+      "headline-peer": "Peer:",
+      "headline-endpoint": "Endpoint:",
+      "section-info": "Peer Information",
+      "section-status": "Current Status",
+      "section-config": "Configuration",
+      "identifier": "Identifier",
+      "ip": "IP Addresses",
+      "user": "Associated User",
+      "notes": "Notes",
+      "expiry-status": "Expires At",
+      "disabled-status": "Disabled At",
+      "traffic": "Traffic",
+      "connection-status": "Connection Stats",
+      "upload": "Uploaded Bytes (from Server to Peer)",
+      "download": "Downloaded Bytes (from Peer to Server)",
+      "pingable": "Is Pingable",
+      "handshake": "Last Handshake",
+      "connected-since": "Connected since",
+      "endpoint": "Endpoint",
+      "button-download": "Download configuration",
+      "button-email": "Send configuration via E-Mail"
+    },
+    "peer-edit": {
+      "headline-edit-peer": "Edit peer:",
+      "headline-edit-endpoint": "Edit endpoint:",
+      "headline-new-peer": "Create peer",
+      "headline-new-endpoint": "Create endpoint",
+      "header-general": "General",
+      "header-network": "Network",
+      "header-crypto": "Cryptography",
+      "header-hooks": "Hooks (Executed on Peer)",
+      "header-state": "State",
+      "display-name": {
+        "label": "Display Name",
+        "placeholder": "The descriptive name for the peer"
+      },
+      "linked-user": {
+        "label": "Linked User",
+        "placeholder": "The user account which owns this peer"
+      },
+      "private-key": {
+        "label": "Private Key",
+        "placeholder": "The private key"
+      },
+      "public-key": {
+        "label": "Public Key",
+        "placeholder": "The public key"
+      },
+      "preshared-key": {
+        "label": "Preshared Key",
+        "placeholder": "Optional pre-shared key"
+      },
+      "endpoint-public-key": {
+        "label": "Endpoint public Key",
+        "placeholder": "The public key of the remote endpoint"
+      },
+      "endpoint": {
+        "label": "Endpoint Address",
+        "placeholder": "The address of the remote endpoint"
+      },
+      "ip": {
+        "label": "IP Addresses",
+        "placeholder": "IP Addresses (CIDR format)"
+      },
+      "allowed-ip": {
+        "label": "Allowed IP Addresses",
+        "placeholder": "Allowed IP Addresses (CIDR format)"
+      },
+      "extra-allowed-ip": {
+        "label": "Extra allowed IP Addresses",
+        "placeholder": "Extra allowed IP's (Server Sided)",
+        "description": "Those IP's will be added on the remote WireGuard interface as allowed IP's."
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "keep-alive": {
+        "label": "Keep Alive Interval",
+        "placeholder": "Persistent Keepalive (0 = default)"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The client MTU (0 = keep default)"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Peer Disabled"
+      },
+      "ignore-global": {
+        "label": "Ignore global settings"
+      },
+      "expires-at": {
+        "label": "Expiry date"
+      }
+    },
+    "peer-multi-create": {
+      "headline-peer": "Create multiple peers",
+      "headline-endpoint": "Create multiple endpoints",
+      "identifiers": {
+        "label": "User Identifiers",
+        "placeholder": "User Identifiers",
+        "description": "A user identifier (the username) for which a peer should be created."
+      },
+      "prefix": {
+        "headline-peer": "Peer:",
+        "headline-endpoint": "Endpoint:",
+        "label": "Display Name Prefix",
+        "placeholder": "The prefix",
+        "description": "A prefix that is added to the peers display name."
+      }
+    }
+  }
+}

frontend/src/lang/translations/ru.json

@@ -0,0 +1,489 @@
+{
+  "general": {
+    "pagination": {
+      "size": "Количество элементов",
+      "all": "Все (медленно)"
+    },
+    "search": {
+      "placeholder": "Поиск...",
+      "button": "Поиск"
+    },
+    "select-all": "Выбрать все",
+    "yes": "Да",
+    "no": "Нет",
+    "cancel": "Отмена",
+    "close": "Закрыть",
+    "save": "Сохранить",
+    "delete": "Удалить"
+  },
+  "login": {
+    "headline": "Пожалуйста, войдите в систему",
+    "username": {
+      "label": "Имя пользователя",
+      "placeholder": "Пожалуйста, введите ваше имя пользователя"
+    },
+    "password": {
+      "label": "Пароль",
+      "placeholder": "Пожалуйста, введите ваш пароль"
+    },
+    "button": "Войти"
+  },
+  "menu": {
+    "home": "Главная",
+    "interfaces": "Интерфейсы",
+    "users": "Пользователи",
+    "lang": "Сменить язык",
+    "profile": "Мой профиль",
+    "login": "Вход",
+    "logout": "Выход"
+  },
+  "home": {
+    "headline": "Портал VPN WireGuard®",
+    "info-headline": "Дополнительная информация",
+    "abstract": "WireGuard® - это чрезвычайно простой, но быстрый и современный VPN, использующий передовую криптографию. Он стремится быть быстрее, проще, компактнее и полезнее, чем IPsec, избегая при этом значительных сложностей. Он предназначен для значительного повышения производительности по сравнению с OpenVPN.",
+    "installation": {
+      "box-header": "Установка WireGuard",
+      "headline": "Установка",
+      "content": "Инструкции по установке клиентского программного обеспечения можно найти на официальном сайте WireGuard.",
+      "btn": "Открыть инструкции",
+      "button": "Открыть инструкции"
+    },
+    "about-wg": {
+      "box-header": "О WireGuard",
+      "headline": "О программе",
+      "content": "WireGuard® - это чрезвычайно простой, но быстрый и современный VPN, использующий передовую криптографию.",
+      "button": "Подробнее"
+    },
+    "about-portal": {
+      "box-header": "О портале WireGuard",
+      "headline": "Портал WireGuard",
+      "content": "Портал WireGuard - это простой веб-портал для настройки WireGuard.",
+      "button": "Подробнее"
+    },
+    "profiles": {
+      "headline": "VPN Профили",
+      "abstract": "Вы можете получить доступ и загрузить свои личные конфигурации VPN через свой пользовательский профиль.",
+      "content": "Чтобы найти все сконфигурированные профили, нажмите на кнопку ниже.",
+      "button": "Открыть мой профиль"
+    },
+    "admin": {
+      "headline": "Административная зона",
+      "abstract": "В административной зоне вы можете управлять узлами и серверным интерфейсом WireGuard, а также пользователями, которым разрешен вход в портал WireGuard.",
+      "content": "",
+      "button-admin": "Открыть администрирование сервера",
+      "button-user": "Открыть администрирование пользователей"
+    }
+  },
+  "interfaces": {
+    "headline": "Администрирование интерфейсов",
+    "headline-peers": "Текущие VPN пиры",
+    "headline-endpoints": "Текущие конечные точки",
+    "no-interface": {
+      "default-selection": "Интерфейсы отсутствуют",
+      "headline": "Интерфейсы не найдены...",
+      "abstract": "Нажмите на кнопку со знаком плюса выше, чтобы создать новый интерфейс WireGuard."
+    },
+    "no-peer": {
+      "headline": "Пиры отсутствуют",
+      "abstract": "В настоящее время для выбранного интерфейса WireGuard нет доступных пиров."
+    },
+    "table-heading": {
+      "name": "Имя",
+      "user": "Пользователь",
+      "ip": "IP-адреса",
+      "endpoint": "Конечная точка",
+      "status": "Статус"
+    },
+    "interface": {
+      "headline": "Статус интерфейса для",
+      "mode": "режим",
+      "key": "Публичный ключ",
+      "endpoint": "Публичная конечная точка",
+      "port": "Порт прослушивания",
+      "peers": "Активные пиры",
+      "total-peers": "Всего пиров",
+      "endpoints": "Активные конечные точки",
+      "total-endpoints": "Всего конечных точек",
+      "ip": "IP-адрес",
+      "default-allowed-ip": "Разрешенные IP по умолчанию",
+      "dns": "DNS-серверы",
+      "mtu": "MTU",
+      "default-keep-alive": "Интервал поддержания активности по умолчанию",
+      "button-show-config": "Показать конфигурацию",
+      "button-download-config": "Скачать конфигурацию",
+      "button-store-config": "Сохранить конфигурацию для wg-quick",
+      "button-edit": "Редактировать интерфейс"
+    },
+    "button-add-interface": "Добавить интерфейс",
+    "button-add-peer": "Добавить пира",
+    "button-add-peers": "Добавить несколько пиров",
+    "button-show-peer": "Показать пира",
+    "button-edit-peer": "Редактировать пира",
+    "peer-disabled": "Пир отключен, причина:",
+    "peer-expiring": "Пир истекает в",
+    "peer-connected": "Подключено",
+    "peer-not-connected": "Не подключено",
+    "peer-handshake": "Последнее рукопожатие:"
+  },
+  "users": {
+    "headline": "Администрирование пользователей",
+    "table-heading": {
+      "id": "ID",
+      "email": "Электронная почта",
+      "firstname": "Имя",
+      "lastname": "Фамилия",
+      "source": "Источник",
+      "peers": "Пиры",
+      "admin": "Админ"
+    },
+    "no-user": {
+      "headline": "Пользователи отсутствуют",
+      "abstract": "В настоящее время в портале WireGuard не зарегистрировано ни одного пользователя."
+    },
+    "button-add-user": "Добавить пользователя",
+    "button-show-user": "Показать пользователя",
+    "button-edit-user": "Редактировать пользователя",
+    "user-disabled": "Пользователь отключен, причина:",
+    "user-locked": "Учетная запись заблокирована, причина:",
+    "admin": "Пользователь имеет права администратора",
+    "no-admin": "Пользователь не имеет прав администратора"
+  },
+  "profile": {
+    "headline": "Мои VPN пиры",
+    "table-heading": {
+      "name": "Имя",
+      "ip": "IP-адреса",
+      "stats": "Статус",
+      "interface": "Интерфейс сервера"
+    },
+    "no-peer": {
+      "headline": "Пиров нет",
+      "abstract": "В настоящее время у вашего профиля пользователя нет связанных пиров."
+    },
+    "peer-connected": "Подключено",
+    "button-add-peer": "Добавить пира",
+    "button-show-peer": "Показать пира",
+    "button-edit-peer": "Редактировать пира"
+  },
+  "modals": {
+    "user-view": {
+      "headline": "Учетная запись пользователя:",
+      "tab-user": "Информация",
+      "tab-peers": "Пиры",
+      "headline-info": "Информация о пользователе:",
+      "headline-notes": "Заметки:",
+      "email": "Электронная почта",
+      "firstname": "Имя",
+      "lastname": "Фамилия",
+      "phone": "Номер телефона",
+      "department": "Отдел",
+      "disabled": "Учетная запись отключена",
+      "locked": "Учетная запись заблокирована",
+      "no-peers": "У пользователя нет связанных пиров.",
+      "peers": {
+        "name": "Имя",
+        "interface": "Интерфейс",
+        "ip": "IP-адреса"
+      }
+    },
+    "user-edit": {
+      "headline-edit": "Редактировать пользователя:",
+      "headline-new": "Новый пользователь",
+      "header-general": "Общее",
+      "header-personal": "Информация о пользователе",
+      "header-notes": "Заметки",
+      "header-state": "Состояние",
+      "identifier": {
+        "label": "Идентификатор",
+        "placeholder": "Уникальный идентификатор пользователя"
+      },
+      "source": {
+        "label": "Источник",
+        "placeholder": "Источник пользователя"
+      },
+      "password": {
+        "label": "Пароль",
+        "placeholder": "Надежный пароль",
+        "description": "Оставьте это поле пустым, чтобы сохранить текущий пароль."
+      },
+      "email": {
+        "label": "Электронная почта",
+        "placeholder": "Адрес электронной почты"
+      },
+      "phone": {
+        "label": "Телефон",
+        "placeholder": "Номер телефона"
+      },
+      "department": {
+        "label": "Отдел",
+        "placeholder": "Отдел"
+      },
+      "firstname": {
+        "label": "Имя",
+        "placeholder": "Имя"
+      },
+      "lastname": {
+        "label": "Фамилия",
+        "placeholder": "Фамилия"
+      },
+      "notes": {
+        "label": "Заметки",
+        "placeholder": ""
+      },
+      "disabled": {
+        "label": "Отключен (нет возможности подключения к WireGuard и входа в систему)"
+      },
+      "locked": {
+        "label": "Заблокирован (вход в систему невозможен, подключения WireGuard работают)"
+      },
+      "admin": {
+        "label": "Является администратором"
+      }
+    },
+    "interface-view": {
+      "headline": "Конфигурация интерфейса:"
+    },
+    "interface-edit": {
+      "headline-edit": "Редактировать интерфейс:",
+      "headline-new": "Новый интерфейс",
+      "tab-interface": "Интерфейс",
+      "tab-peerdef": "Настройки пира по умолчанию",
+      "header-general": "Общие",
+      "header-network": "Сеть",
+      "header-crypto": "Криптография",
+      "header-hooks": "Хуки интерфейса",
+      "header-peer-hooks": "Хуки",
+      "header-state": "Состояние",
+      "identifier": {
+        "label": "Идентификатор",
+        "placeholder": "Уникальный идентификатор интерфейса"
+      },
+      "mode": {
+        "label": "Режим интерфейса",
+        "server": "Режим сервера",
+        "client": "Режим клиента",
+        "any": "Неизвестный режим"
+      },
+      "display-name": {
+        "label": "Отображаемое имя",
+        "placeholder": "Описательное имя для интерфейса"
+      },
+      "private-key": {
+        "label": "Приватный ключ",
+        "placeholder": "Приватный ключ"
+      },
+      "public-key": {
+        "label": "Публичный ключ",
+        "placeholder": "Публичный ключ"
+      },
+      "ip": {
+        "label": "IP-адреса",
+        "placeholder": "IP-адреса (в формате CIDR)"
+      },
+      "listen-port": {
+        "label": "Порт прослушивания",
+        "placeholder": "Порт для прослушивания"
+      },
+      "dns": {
+        "label": "DNS-сервер",
+        "placeholder": "Используемые DNS-серверы"
+      },
+      "dns-search": {
+        "label": "Поисковые домены DNS",
+        "placeholder": "Префиксы поиска DNS"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "MTU интерфейса (0 = использовать значение по умолчанию)"
+      },
+      "firewall-mark": {
+        "label": "Метка брандмауэра",
+        "placeholder": "Метка брандмауэра, применяемая к исходящему трафику (0 = автоматически)"
+      },
+      "routing-table": {
+        "label": "Таблица маршрутизации",
+        "placeholder": "ID таблицы маршрутизации",
+        "description": "Особые случаи: off = не управлять маршрутами, 0 = автоматически"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "Одна или несколько команд bash, разделенных ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "Одна или несколько команд bash, разделенных ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "Одна или несколько команд bash, разделенных ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "Одна или несколько команд bash, разделенных ;"
+      },
+      "disabled": {
+        "label": "Интерфейс отключен"
+      },
+      "save-config": {
+        "label": "Автоматически сохранять конфигурацию wg-quick"
+      },
+      "defaults": {
+        "endpoint": {
+          "label": "Адрес конечной точки",
+          "placeholder": "Адрес конечной точки",
+          "description": "Адрес конечной точки, к которой будут подключаться пиры."
+        },
+        "networks": {
+          "label": "IP-сети",
+          "placeholder": "Сетевые адреса",
+          "description": "Пиры будут получать IP-адреса из этих подсетей."
+        },
+        "allowed-ip": {
+          "label": "Разрешенные IP-адреса",
+          "placeholder": "Разрешенные IP-адреса по умолчанию"
+        },
+        "mtu": {
+          "label": "MTU",
+          "placeholder": "MTU клиента (0 = использовать значение по умолчанию)"
+        },
+        "keep-alive": {
+          "label": "Интервал поддержания активности",
+          "placeholder": "Постоянное поддержание активности (0 = значение по умолчанию)"
+        }
+      },
+      "button-apply-defaults": "Применить настройки пира по умолчанию"
+    },
+    "peer-view": {
+      "headline-peer": "Пир:",
+      "headline-endpoint": "Конечная точка:",
+      "section-info": "Информация о пире",
+      "section-status": "Текущий статус",
+      "section-config": "Конфигурация",
+      "identifier": "Идентификатор",
+      "ip": "IP-адреса",
+      "user": "Связанный пользователь",
+      "notes": "Заметки",
+      "expiry-status": "Истекает в",
+      "disabled-status": "Отключено в",
+      "traffic": "Трафик",
+      "connection-status": "Статус соединения",
+      "upload": "Загружено байт (от сервера к пиру)",
+      "download": "Скачано байт (от пира к серверу)",
+      "pingable": "Доступность пинга",
+      "handshake": "Последнее рукопожатие",
+      "connected-since": "Подключен с",
+      "endpoint": "Конечная точка",
+      "button-download": "Скачать конфигурацию",
+      "button-email": "Отправить конфигурацию по электронной почте"
+    },
+    "peer-edit": {
+      "headline-edit-peer": "Редактировать пира:",
+      "headline-edit-endpoint": "Редактировать конечную точку:",
+      "headline-new-peer": "Создать пира",
+      "headline-new-endpoint": "Создать конечную точку",
+      "header-general": "Общее",
+      "header-network": "Сеть",
+      "header-crypto": "Криптография",
+      "header-hooks": "Хуки (Выполняются на пире)",
+      "header-state": "Состояние",
+      "display-name": {
+        "label": "Отображаемое имя",
+        "placeholder": "Описательное имя для пира"
+      },
+      "linked-user": {
+        "label": "Связанный пользователь",
+        "placeholder": "Учетная запись пользователя, которой принадлежит этот пир"
+      },
+      "private-key": {
+        "label": "Приватный ключ",
+        "placeholder": "Приватный ключ"
+      },
+      "public-key": {
+        "label": "Публичный ключ",
+        "placeholder": "Публичный ключ"
+      },
+      "preshared-key": {
+        "label": "Предварительно разделяемый ключ",
+        "placeholder": "Необязательный предварительно разделяемый ключ"
+      },
+      "endpoint-public-key": {
+        "label": "Публичный ключ конечной точки",
+        "placeholder": "Публичный ключ удаленной конечной точки"
+      },
+      "endpoint": {
+        "label": "Адрес конечной точки",
+        "placeholder": "Адрес удаленной конечной точки"
+      },
+      "ip": {
+        "label": "IP-адреса",
+        "placeholder": "IP-адреса (в формате CIDR)"
+      },
+      "allowed-ip": {
+        "label": "Разрешенные IP-адреса",
+        "placeholder": "Разрешенные IP-адреса (в формате CIDR)"
+      },
+      "extra-allowed-ip": {
+        "label": "Дополнительно разрешенные IP-адреса",
+        "placeholder": "Дополнительные разрешенные IP-адреса (на стороне сервера)",
+        "description": "Эти IP-адреса будут добавлены в удаленный интерфейс WireGuard как разрешенные IP-адреса."
+      },
+      "dns": {
+        "label": "DNS Server",
+        "placeholder": "The DNS servers that should be used"
+      },
+      "dns-search": {
+        "label": "DNS Search Domains",
+        "placeholder": "DNS search prefixes"
+      },
+      "keep-alive": {
+        "label": "Keep Alive Interval",
+        "placeholder": "Persistent Keepalive (0 = default)"
+      },
+      "mtu": {
+        "label": "MTU",
+        "placeholder": "The client MTU (0 = keep default)"
+      },
+      "pre-up": {
+        "label": "Pre-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-up": {
+        "label": "Post-Up",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "pre-down": {
+        "label": "Pre-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "post-down": {
+        "label": "Post-Down",
+        "placeholder": "One or multiple bash commands separated by ;"
+      },
+      "disabled": {
+        "label": "Peer Disabled"
+      },
+      "ignore-global": {
+        "label": "Ignore global settings"
+      },
+      "expires-at": {
+        "label": "Expiry date"
+      }
+    },
+    "peer-multi-create": {
+      "headline-peer": "Create multiple peers",
+      "headline-endpoint": "Create multiple endpoints",
+      "identifiers": {
+        "label": "User Identifiers",
+        "placeholder": "User Identifiers",
+        "description": "A user identifier (the username) for which a peer should be created."
+      },
+      "prefix": {
+        "headline-peer": "Peer:",
+        "headline-endpoint": "Endpoint:",
+        "label": "Display Name Prefix",
+        "placeholder": "The prefix",
+        "description": "A prefix that is added to the peers display name."
+      }
+    }
+  }
+}

frontend/src/main.js

@@ -0,0 +1,45 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import App from "./App.vue";
+import router from "./router";
+
+import i18n from "./lang";
+
+import Notifications from '@kyvg/vue3-notification'
+
+// Bootstrap (and theme)
+//import "bootstrap/dist/css/bootstrap.min.css"
+import "bootswatch/dist/lux/bootstrap.min.css";
+import "bootstrap";
+import "./assets/base.css";
+
+// Fontawesome
+import "@fortawesome/fontawesome-free/js/all.js"
+
+// Flags
+import "flag-icons/css/flag-icons.min.css"
+
+// Syntax Highlighting
+import 'prismjs'
+import 'prismjs/themes/prism-okaidia.css'
+
+const app = createApp(App);
+
+app.use(i18n)
+app.use(createPinia());
+app.use(router);
+app.use(Notifications);
+
+app.config.globalProperties.$filters = {
+  truncate(value, maxLength, suffix) {
+    suffix = suffix || '...'
+    if (value.length > maxLength) {
+      return value.substring(0, maxLength) + suffix;
+    } else {
+      return value;
+    }
+  }
+}
+
+app.mount("#app");

frontend/src/router/index.js

@@ -0,0 +1,109 @@
+import {createRouter, createWebHashHistory} from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import LoginView from '../views/LoginView.vue'
+import InterfaceView from '../views/InterfaceView.vue'
+
+import {authStore} from '@/stores/auth'
+import {notify} from "@kyvg/vue3-notification";
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: LoginView
+    },
+    {
+      path: '/interface',
+      name: 'interface',
+      component: InterfaceView
+    },
+    {
+      path: '/interfaces',
+      name: 'interfaces',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/InterfaceView.vue')
+    },
+    {
+      path: '/users',
+      name: 'users',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/UserView.vue')
+    },
+    {
+      path: '/profile',
+      name: 'profile',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/ProfileView.vue')
+    }
+  ],
+  linkActiveClass: "active",
+  linkExactActiveClass: "exact-active",
+})
+
+router.beforeEach(async (to) => {
+  const auth = authStore()
+
+  // check if the request was a successful oauth login
+  if ('wgLoginState' in to.query && !auth.IsAuthenticated) {
+    const state = to.query['wgLoginState']
+    const returnUrl = auth.ReturnUrl
+    console.log("Oauth login callback:", state)
+
+    if (state === "success") {
+      try {
+        const uid = await auth.LoadSession()
+        console.log("Oauth login completed for UID:", uid)
+        console.log("Continuing to:", returnUrl)
+
+        notify({
+          title: "Logged in",
+          text: "Authentication suceeded!",
+          type: 'success',
+        })
+
+        auth.ResetReturnUrl()
+        return returnUrl
+      } catch (e) {
+        notify({
+          title: "Login failed!",
+          text: "Oauth session is invalid!",
+          type: 'error',
+        })
+
+        return '/login'
+      }
+    } else {
+      notify({
+        title: "Login failed!",
+        text: "Authentication via Oauth failed!",
+        type: 'error',
+      })
+
+      return '/login'
+    }
+  }
+
+  // redirect to login page if not logged in and trying to access a restricted page
+  const publicPages = ['/', '/login']
+  const authRequired = !publicPages.includes(to.path)
+
+  if (authRequired && !auth.IsAuthenticated) {
+    auth.SetReturnUrl(to.fullPath) // store original destination before starting the auth process
+    return '/login'
+  }
+})
+
+export default router