delete peer and interface

wgquick (apparently) depends on bash and openresolv.

Without those packages removing an Interface is impossible and causes an error message to appear in the webui:
- No Bash: exec complains about "bash no such file in $PATH"
- No openresolv: resolvconf -f -d *interface* returns with error 127

Not having a Shell in the container also makes debugging a lot more annoying.

This enables deletion of interfaces in the webui, eases debugging and only adds about 3MB in size.

.circleci/config.yml

@@ -0,0 +1,67 @@
+version: 2.1
+
+jobs:
+  build-latest:
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - go-mod-latest-v4-{{ checksum "go.sum" }}
+      - run:
+          name: Build Frontend
+          command: |
+            make frontend
+      - run:
+          name: Install Dependencies
+          command: |
+            make build-dependencies
+      - save_cache:
+          key: go-mod-latest-v4-{{ checksum "go.sum" }}
+          paths:
+            - "~/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-amd64
+      - run:
+          name: Install Cross-Platform Dependencies
+          command: |
+            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-arm
+      - store_artifacts:
+          path: ~/repo/dist
+      - run:
+          name: "Publish Release on GitHub"
+          command: |
+            if [ ! -z "${CIRCLE_TAG}" ]; then
+               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-latest:
+          filters:
+            tags:
+              only: /^v.*/

.github/workflows/docker-publish.yml

@@ -7,7 +7,7 @@ name: Docker
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, stable ]
     # Publish vX.X.X tags as releases.
     tags: [ 'v*.*.*' ]
 
@@ -19,8 +19,62 @@ env:
 
 
 jobs:
-  build:
+  build-dockerhub:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        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
+
+      - name: Log in to Docker Hub
+        if: github.event_name != 'pull_request'
+        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@v5
+        with:
+          images: wgportal/wg-portal
+          flavor: |
+            latest=true
+            prefix=
+            suffix=
+          tags: |
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern=v{{major}}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          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-github:
+    name: Push Docker image to Github Container Registry
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -28,13 +82,26 @@ jobs:
 
     steps:
       - name: Checkout repository
-        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
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -44,16 +111,29 @@ jobs:
       # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
         id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          flavor: |
+            latest=true
+            prefix=
+            suffix=
+          tags: |
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern=v{{major}}
 
       # 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@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        uses: docker/build-push-action@v5
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          build-args: |
+            BUILD_IDENTIFIER=${{ steps.get_version.outputs.identifier }}
+            BUILD_VERSION=${{ steps.get_version.outputs.hash }}

.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@v4
+        with:
+          python-version: 3.x
+      - uses: actions/cache@v3
+        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,11 @@ data/
 ssh.key
 .testCoverage.txt
 wg_portal.db
+sqlite.db
 go.sum
 swagger.json
-swagger.yaml
+swagger.yaml
+/config.yml
+/config/
+venv/
+.cache/

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

.travis.yml

@@ -1,43 +0,0 @@
-language: go
-dist: bionic
-sudo: required
-go:
-  - 1.16.x # Latest go version
-env:
-  - GO111MODULE=on
-addons:
-  apt:
-    packages:
-      - gcc-multilib
-
-before_install:
-  - # skip
-
-install:
-  - # skip
-
-script:
-  - go get -t -v ./...
-  - diff -u <(echo -n) <(gofmt -d .)
-  - go vet $(go list ./... | grep -v /vendor/)
-  - make ENV_BUILD_IDENTIFIER=$TRAVIS_TAG ENV_BUILD_VERSION=$(echo $TRAVIS_COMMIT | cut -c1-7) build
-  # Switch over GCC to cross compilation (breaks 386, hence why do it here only)
-  - 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 ln -s /usr/include/asm-generic /usr/include/asm
-  - make ENV_BUILD_IDENTIFIER=$TRAVIS_TAG ENV_BUILD_VERSION=$(echo $TRAVIS_COMMIT | cut -c1-7) build-cross-plat
-
-deploy:
-  provider: releases
-  skip_cleanup: true # Important, otherwise the build output would be purged.
-  api_key:
-    # *encrypted* GitHub key, as the output of the Travis CI CLI tool
-    secure: "uZ7Vg7mEP7aUyaf/Uq5UZt6r3Ig/iOWcf7DZMhAWilOayeqdfW8kp2VzKFgTM6PJJm5Zv+OYV4dniO11QDjIX5sJfS10ApaxvPjw/a4NkqKykfrKZABWRmuvSv/PSjzl7jnWgnPqydBmHCfowsxI6X9j1uivgXZDMYg9BKOnDJtVoakUWJ47GKWr7ZegvF5DwB3EaPwDUmJIAJRiMqO+I2QmuVmLvvzkuhSQ/yuCjel/O7kudJuioJOvsxSHH5Mjh7HZoYayAFikVIGCXJStzMCeLwa+lUHUXoofoDT8SHMmcw2Oil1OpeC1PhvtT6VFLzYl9aphl472F9zP0TlBzR5VJ3+r5dwFVhf0MHp0LflIIg8RGjZg/H60yUUPbGYW7gN3wjdH1l7i66HcqFVs39GgzPCpxNuz8bhhUJOtR6K9FujYpp8AkFCwB327LwGzBLWP3wLGkmhj3ca3FBGJLZhzRdK6gpdp9KgY+33wJ/5R7zsUGtEGTjzsGB1GmBBb887qt0mh/cfm/mdh5HPWvZCif2WTyWd2W8gUiN4oTPhRdE/FRFUqoR1WEZeQrjgj3tThywrXIpRVdigN74UMsnlThSHxPZdJHPLftei2A3b+yfYgxt43sp22MqyuB6K7mT5ximQLWldN2Ibf7kKb5RO9/WX5P8LUj1KXtY3dh2o="
-  file:
-    - dist/wg-portal-amd64
-    - dist/wg-portal-arm64
-    - dist/wg-portal-arm
-    - dist/wg-portal.env
-    - dist/wg-portal.service
-  on:
-    repo: h44z/wg-portal
-    tags: true # The deployment happens only if the commit has a tag.

Dockerfile

@@ -4,7 +4,7 @@
 ######-
 # Start from the latest golang base image as builder image (only used to compile the code)
 ######-
-FROM golang:1.16 as builder
+FROM golang:1.21 as builder
 
 ARG BUILD_IDENTIFIER
 ENV ENV_BUILD_IDENTIFIER=$BUILD_IDENTIFIER
@@ -12,6 +12,10 @@ ENV ENV_BUILD_IDENTIFIER=$BUILD_IDENTIFIER
 ARG BUILD_VERSION
 ENV ENV_BUILD_VERSION=$BUILD_VERSION
 
+# populated by BuildKit
+ARG TARGETPLATFORM
+ENV ENV_TARGETPLATFORM=$TARGETPLATFORM
+
 RUN mkdir /build
 
 # Copy the source from the current directory to the Working Directory inside the container
@@ -20,40 +24,31 @@ ADD . /build/
 # Set the Current Working Directory inside the container
 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"
-
 # Build the Go app
-RUN go clean -modcache; go mod tidy; make build-docker
+RUN echo "Building version '$ENV_BUILD_IDENTIFIER-$ENV_BUILD_VERSION' for platform $ENV_TARGETPLATFORM"; make build
 
 ######-
 # Here starts the main image
 ######-
-FROM scratch
+FROM alpine:3.19
+
+# Install OS-level dependencies
+RUN apk add --no-cache bash 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
 
-# Command to run the executable
-CMD [ "/app/wgportal" ]
+# by default, the web-portal is reachable on port 8888
+EXPOSE 8888/tcp
 
-HEALTHCHECK --interval=30s --timeout=5s --start-period=30s --retries=3 CMD [ "/app/hc", "http://localhost:11223/health" ]
+# the database and config file can be mounted from the host
+VOLUME [ "/app/data", "/app/config" ]
+
+# Command to run the executable
+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,203 @@
 [![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, a new WireGuard peer will be created on the WG_DEFAULT_DEVICE if this option is enabled. |
+| 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 (optional)
+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,35 +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();
-        });
-    });
-})(jQuery); // End of use strict
-
-

assets/tpl/admin_create_clients.html

@@ -1,72 +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 LDAP 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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/jquery-ui.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,211 +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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_edit_interface.html

@@ -1,261 +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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_edit_user.html

@@ -1,88 +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/bootstrap.bundle.min.js"></script>
-<script src="/js/jquery.easing.js"></script>
-<script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_index.html

@@ -1,269 +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-10 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-2 col-12 text-right">
-                {{if eq $.Device.Type "server"}}
-                <a href="/admin/peer/createldap" title="Add multiple peers" class="btn btn-primary"><i class="fa fa-fw fa-user-plus"></i></a>
-                {{end}}
-                <a href="/admin/peer/create" title="Add a peer" 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" 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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/admin_user_index.html

@@ -1,67 +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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/error.html

@@ -1,31 +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/bootstrap.bundle.min.js"></script>
-<script src="/js/jquery.easing.js"></script>
-<script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/index.html

@@ -1,87 +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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>

assets/tpl/login.html

@@ -1,64 +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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.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,110 +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/bootstrap.bundle.min.js"></script>
-    <script src="/js/jquery.easing.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:     true,
+		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,47 @@
+advanced:
+  log_level: trace
+
+core:
+  admin_user: test@test.de
+  admin_password: secret
+
+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,128 @@
+<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>
+              </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,431 @@
+<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';
+
+const { t } = useI18n()
+
+const peers = peerStore()
+const interfaces = interfaceStore()
+
+const props = defineProps({
+  peerId: String,
+  visible: Boolean,
+})
+
+const emit = defineEmits(['close'])
+
+const selectedPeer = computed(() => {
+  return peers.Find(props.peerId)
+})
+
+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
+        console.log(selectedInterface.value)
+        console.log(selectedPeer.value)
+        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 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,199 @@
+<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";
+
+const { t } = useI18n()
+
+const settings = settingsStore()
+const peers = peerStore()
+const interfaces = interfaceStore()
+
+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) {
+    p = freshPeer() // dummy peer to avoid 'undefined' exceptions
+  }
+
+  return p
+})
+
+const selectedStats = computed(() => {
+  let s = peers.Statistics(props.peerId)
+
+  if (!s) {
+    s = freshStats() // dummy peer 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',
+    })
+  })
+}
+
+</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="peers.ConfigQrUrl(props.peerId)" 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"  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,27 @@
+// src/lang/index.js
+import de from './translations/de.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,
+    "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.",
+      "btn": "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.",
+      "btn": "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/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

frontend/src/stores/auth.js

@@ -0,0 +1,125 @@
+import { defineStore } from 'pinia'
+
+import { notify } from "@kyvg/vue3-notification";
+import { apiWrapper } from '@/helpers/fetch-wrapper'
+import router from '../router'
+
+export const authStore = defineStore({
+    id: 'auth',
+    state: () => ({
+        // initialize state from local storage to enable user to stay logged in
+        user: JSON.parse(localStorage.getItem('user')),
+        providers: [],
+        returnUrl: localStorage.getItem('returnUrl')
+    }),
+    getters: {
+        UserIdentifier: (state) => state.user?.Identifier || 'unknown',
+        User: (state) => state.user,
+        LoginProviders: (state) => state.providers,
+        IsAuthenticated: (state) => state.user != null,
+        IsAdmin: (state) => state.user?.IsAdmin || false,
+        ReturnUrl: (state) => state.returnUrl || '/',
+    },
+    actions: {
+        SetReturnUrl(link) {
+            this.returnUrl = link
+            localStorage.setItem('returnUrl', link)
+        },
+        ResetReturnUrl() {
+            this.returnUrl = null
+            localStorage.removeItem('returnUrl')
+        },
+        // LoadProviders always returns a fulfilled promise, even if the request failed.
+        async LoadProviders() {
+            apiWrapper.get(`/auth/providers`)
+                .then(providers => this.providers = providers)
+                .catch(error => {
+                    this.providers = []
+                    console.log("Failed to load auth providers: ", error)
+                    notify({
+                        title: "Backend Connection Failure",
+                        text: "Failed to load external authentication providers!",
+                    })
+                })
+        },
+
+        // LoadSession returns promise that might have been rejected if the session was not authenticated.
+        async LoadSession() {
+            return apiWrapper.get(`/auth/session`)
+                .then(session => {
+                    if (session.LoggedIn === true) {
+                        this.ResetReturnUrl()
+                        this.setUserInfo(session)
+                        return session.UserIdentifier
+                    } else {
+                        this.setUserInfo(null)
+                        return Promise.reject(new Error('session not authenticated'))
+                    }
+                })
+                .catch(err => {
+                    this.setUserInfo(null)
+                    return Promise.reject(err)
+                })
+        },
+        // Login returns promise that might have been rejected if the login attempt was not successful.
+        async Login(username, password) {
+            return apiWrapper.post(`/auth/login`, { username, password })
+                .then(user =>  {
+                    this.ResetReturnUrl()
+                    this.setUserInfo(user)
+                    return user.Identifier
+                })
+                .catch(err => {
+                    console.log("Login failed:", err)
+                    this.setUserInfo(null)
+                    return Promise.reject(new Error("login failed"))
+                })
+        },
+        async Logout() {
+            this.setUserInfo(null)
+            this.ResetReturnUrl() // just to be sure^^
+
+            try {
+                await apiWrapper.post(`/auth/logout`)
+            } catch (e) {
+                console.log("Logout request failed:", e)
+            }
+
+            notify({
+                title: "Logged Out",
+                text: "Logout successful!",
+                type: "warn",
+            })
+
+
+            await router.push('/login')
+        },
+        // -- internal setters
+        setUserInfo(userInfo) {
+            // store user details and jwt in local storage to keep user logged in between page refreshes
+            if (userInfo) {
+                if ('UserIdentifier' in userInfo) { // session object
+                    this.user = {
+                        Identifier: userInfo['UserIdentifier'],
+                        Firstname: userInfo['UserFirstname'],
+                        Lastname: userInfo['UserLastname'],
+                        Email: userInfo['UserEmail'],
+                        IsAdmin: userInfo['IsAdmin']
+                    }
+                } else { // user object
+                    this.user = {
+                        Identifier: userInfo['Identifier'],
+                        Firstname: userInfo['Firstname'],
+                        Lastname: userInfo['Lastname'],
+                        Email: userInfo['Email'],
+                        IsAdmin: userInfo['IsAdmin']
+                    }
+                }
+                localStorage.setItem('user', JSON.stringify(this.user))
+            } else {
+                this.user = null
+                localStorage.removeItem('user')
+            }
+        },
+    }
+});

frontend/src/stores/interfaces.js

@@ -0,0 +1,152 @@
+import { defineStore } from 'pinia'
+
+import {apiWrapper} from '@/helpers/fetch-wrapper'
+import {notify} from "@kyvg/vue3-notification";
+import { freshInterface } from '@/helpers/models';
+import { base64_url_encode } from '@/helpers/encoding';
+
+const baseUrl = `/interface`
+
+export const interfaceStore = defineStore({
+  id: 'interfaces',
+  state: () => ({
+    interfaces: [],
+    prepared: freshInterface(),
+    configuration: "",
+    selected: "",
+    fetching: false,
+  }),
+  getters: {
+    Count: (state) => state.interfaces.length,
+    Prepared: (state) => {console.log("STATE:", state.prepared); return state.prepared},
+    All: (state) => state.interfaces,
+    Find: (state) => {
+        return (id) => state.interfaces.find((p) => p.Identifier === id)
+    },
+    GetSelected: (state) => state.interfaces.find((i) => i.Identifier === state.selected) || state.interfaces[0],
+    isFetching: (state) => state.fetching,
+  },
+  actions: {
+    setInterfaces(interfaces) {
+      this.interfaces = interfaces
+      if (this.interfaces.length > 0) {
+        this.selected = this.interfaces[0].Identifier
+      } else {
+        this.selected = ""
+      }
+      this.fetching = false
+    },
+    async LoadInterfaces() {
+      this.fetching = true
+      return apiWrapper.get(`${baseUrl}/all`)
+          .then(this.setInterfaces)
+          .catch(error => {
+            this.setInterfaces([])
+            console.log("Failed to load interfaces: ", error)
+            notify({
+              title: "Backend Connection Failure",
+              text: "Failed to load interfaces!",
+            })
+          })
+    },
+    setPreparedInterface(iface) {
+      this.prepared = iface;
+    },
+    setInterfaceConfig(ifaceConfig) {
+        this.configuration = ifaceConfig;
+    },
+    async PrepareInterface() {
+      return apiWrapper.get(`${baseUrl}/prepare`)
+        .then(this.setPreparedInterface)
+        .catch(error => {
+          this.prepared = freshInterface()
+          console.log("Failed to load prepared interface: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load prepared interface!",
+          })
+        })
+    },
+    async LoadInterfaceConfig(id) {
+      return apiWrapper.get(`${baseUrl}/config/${base64_url_encode(id)}`)
+        .then(this.setInterfaceConfig)
+        .catch(error => {
+          this.configuration = ""
+          console.log("Failed to load interface configuration: ", error)
+          notify({
+              title: "Backend Connection Failure",
+              text: "Failed to load interface configuration!",
+          })
+        })
+    },
+    async DeleteInterface(id) {
+      this.fetching = true
+      return apiWrapper.delete(`${baseUrl}/${base64_url_encode(id)}`)
+        .then(() => {
+          this.interfaces = this.interfaces.filter(i => i.Identifier !== id)
+          if (this.interfaces.length > 0) {
+            this.selected = this.interfaces[0].Identifier
+          } else {
+            this.selected = ""
+          }
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    },
+    async UpdateInterface(id, formData) {
+      this.fetching = true
+      return apiWrapper.put(`${baseUrl}/${base64_url_encode(id)}`, formData)
+        .then(iface => {
+          let idx = this.interfaces.findIndex((i) => i.Identifier === id)
+          this.interfaces[idx] = iface
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    },
+    async CreateInterface(formData) {
+      this.fetching = true
+      return apiWrapper.post(`${baseUrl}/new`, formData)
+        .then(iface => {
+          this.interfaces.push(iface)
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    },
+    async ApplyPeerDefaults(id, formData) {
+      this.fetching = true
+      return apiWrapper.post(`${baseUrl}/${base64_url_encode(id)}/apply-peer-defaults`, formData)
+        .then(() => {
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    },
+    async SaveConfiguration(id) {
+      this.fetching = true
+      return apiWrapper.post(`${baseUrl}/${base64_url_encode(id)}/save-config`)
+        .then(() => {
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    }
+  }
+})

frontend/src/stores/peers.js

@@ -0,0 +1,258 @@
+import { defineStore } from 'pinia'
+import {apiWrapper} from "@/helpers/fetch-wrapper";
+import {notify} from "@kyvg/vue3-notification";
+import {interfaceStore} from "./interfaces";
+import {freshPeer, freshStats} from '@/helpers/models';
+import { base64_url_encode } from '@/helpers/encoding';
+
+const baseUrl = `/peer`
+
+export const peerStore = defineStore({
+  id: 'peers',
+  state: () => ({
+    peers: [],
+    stats: {},
+    statsEnabled: false,
+    peer: freshPeer(),
+    prepared: freshPeer(),
+    configuration: "",
+    filter: "",
+    pageSize: 10,
+    pageOffset: 0,
+    pages: [],
+    fetching: false,
+  }),
+  getters: {
+    Find: (state) => {
+      return (id) => state.peers.find((p) => p.Identifier === id)
+    },
+
+    Count: (state) => state.peers.length,
+    Prepared: (state) => {console.log("STATE:", state.prepared); return state.prepared},
+    FilteredCount: (state) => state.Filtered.length,
+    All: (state) => state.peers,
+    Filtered: (state) => {
+      if (!state.filter) {
+        return state.peers
+      }
+      return state.peers.filter((p) => {
+        return p.DisplayName.includes(state.filter) || p.Identifier.includes(state.filter)
+      })
+    },
+    FilteredAndPaged: (state) => {
+      return state.Filtered.slice(state.pageOffset, state.pageOffset + state.pageSize)
+    },
+    ConfigQrUrl: (state) => {
+      return (id) => state.peers.find((p) => p.Identifier === id) ? apiWrapper.url(`${baseUrl}/config-qr/${base64_url_encode(id)}`) : ''
+    },
+    isFetching: (state) => state.fetching,
+    hasNextPage: (state) => state.pageOffset < (state.FilteredCount - state.pageSize),
+    hasPrevPage: (state) => state.pageOffset > 0,
+    currentPage: (state) => (state.pageOffset / state.pageSize)+1,
+    Statistics: (state) => {
+      return (id) => state.statsEnabled && (id in state.stats) ? state.stats[id] : freshStats()
+    },
+    hasStatistics: (state) => state.statsEnabled,
+
+  },
+  actions: {
+    afterPageSizeChange() {
+      // reset pageOffset to avoid problems with new page sizes
+      this.pageOffset = 0
+      this.calculatePages()
+    },
+    calculatePages() {
+      let pageCounter = 1;
+      this.pages = []
+      for (let i = 0; i < this.FilteredCount; i+=this.pageSize) {
+        this.pages.push(pageCounter++)
+      }
+    },
+    gotoPage(page) {
+      this.pageOffset = (page-1) * this.pageSize
+
+      this.calculatePages()
+    },
+    nextPage() {
+      this.pageOffset += this.pageSize
+
+      this.calculatePages()
+    },
+    previousPage() {
+      this.pageOffset -= this.pageSize
+
+      this.calculatePages()
+    },
+    setPeers(peers) {
+      this.peers = peers
+      this.calculatePages()
+      this.fetching = false
+    },
+    setPeer(peer) {
+      this.peer = peer
+      this.fetching = false
+    },
+    setPreparedPeer(peer) {
+      this.prepared = peer;
+    },
+    setPeerConfig(config) {
+      this.configuration = config;
+    },
+    setStats(statsResponse) {
+      if (!statsResponse) {
+        this.stats = {}
+        this.statsEnabled = false
+      }
+      this.stats = statsResponse.Stats
+      this.statsEnabled = statsResponse.Enabled
+    },
+    async PreparePeer(interfaceId) {
+      return apiWrapper.get(`${baseUrl}/iface/${base64_url_encode(interfaceId)}/prepare`)
+        .then(this.setPreparedPeer)
+        .catch(error => {
+          this.prepared = freshPeer()
+          console.log("Failed to load prepared peer: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load prepared peer!",
+          })
+        })
+    },
+    async MailPeerConfig(linkOnly, ids) {
+      return apiWrapper.post(`${baseUrl}/config-mail`, {
+          Identifiers: ids,
+          LinkOnly: linkOnly
+        })
+        .then(() => {
+          notify({
+            title: "Peer Configuration sent",
+            text: "Email sent to linked user!",
+          })
+        })
+        .catch(error => {
+          console.log("Failed to send peer configuration: ", error)
+          throw new Error(error)
+        })
+    },
+    async LoadPeerConfig(id) {
+      return apiWrapper.get(`${baseUrl}/config/${base64_url_encode(id)}`)
+        .then(this.setPeerConfig)
+        .catch(error => {
+          this.configuration = ""
+          console.log("Failed to load peer configuration: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load peer configuration!",
+          })
+        })
+    },
+    async LoadPeer(id) {
+      this.fetching = true
+      return apiWrapper.get(`${baseUrl}/${base64_url_encode(id)}`)
+        .then(this.setPeer)
+        .catch(error => {
+          this.setPeers([])
+          console.log("Failed to load peer: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load peer!",
+          })
+        })
+    },
+    async LoadStats(interfaceId) {
+      // if no interfaceId is given, use the currently selected interface
+      if (!interfaceId) {
+        interfaceId = interfaceStore().GetSelected.Identifier
+        if (!interfaceId) {
+          return // no interface, nothing to load
+        }
+      }
+      this.fetching = true
+
+      return apiWrapper.get(`${baseUrl}/iface/${base64_url_encode(interfaceId)}/stats`)
+        .then(this.setStats)
+        .catch(error => {
+          this.setStats(undefined)
+          console.log("Failed to load peer stats: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load peer stats!",
+          })
+        })
+    },
+    async DeletePeer(id) {
+      this.fetching = true
+      return apiWrapper.delete(`${baseUrl}/${base64_url_encode(id)}`)
+        .then(() => {
+          this.peers = this.peers.filter(p => p.Identifier !== id)
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    },
+    async UpdatePeer(id, formData) {
+      this.fetching = true
+      return apiWrapper.put(`${baseUrl}/${base64_url_encode(id)}`, formData)
+        .then(peer => {
+          let idx = this.peers.findIndex((p) => p.Identifier === id)
+          this.peers[idx] = peer
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    },
+    async CreatePeer(interfaceId, formData) {
+      this.fetching = true
+      return apiWrapper.post(`${baseUrl}/iface/${base64_url_encode(interfaceId)}/new`, formData)
+        .then(peer => {
+          this.peers.push(peer)
+          this.fetching = false
+        })
+        .catch(error => {
+          this.fetching = false
+          console.log(error)
+          throw new Error(error)
+        })
+    },
+    async CreateMultiplePeers(interfaceId, formData) {
+      this.fetching = true
+      return apiWrapper.post(`${baseUrl}/iface/${base64_url_encode(interfaceId)}/multiplenew`, formData)
+          .then(peers => {
+            this.peers.push(...peers)
+            this.fetching = false
+          })
+          .catch(error => {
+            this.fetching = false
+            console.log(error)
+            throw new Error(error)
+          })
+    },
+    async LoadPeers(interfaceId) {
+      // if no interfaceId is given, use the currently selected interface
+      if (!interfaceId) {
+        interfaceId = interfaceStore().GetSelected.Identifier
+        if (!interfaceId) {
+          return // no interface, nothing to load
+        }
+      }
+      this.fetching = true
+
+      return apiWrapper.get(`${baseUrl}/iface/${base64_url_encode(interfaceId)}/all`)
+        .then(this.setPeers)
+        .catch(error => {
+          this.setPeers([])
+          console.log("Failed to load peers: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load peers!",
+          })
+        })
+    }
+  }
+})

frontend/src/stores/profile.js

@@ -0,0 +1,137 @@
+import { defineStore } from 'pinia'
+import {apiWrapper} from "@/helpers/fetch-wrapper";
+import {notify} from "@kyvg/vue3-notification";
+import {authStore} from "@/stores/auth";
+import { base64_url_encode } from '@/helpers/encoding';
+import {freshStats} from "@/helpers/models";
+
+const baseUrl = `/user`
+
+export const profileStore = defineStore({
+  id: 'profile',
+  state: () => ({
+    peers: [],
+    stats: {},
+    statsEnabled: false,
+    user: {},
+    filter: "",
+    pageSize: 10,
+    pageOffset: 0,
+    pages: [],
+    fetching: false,
+  }),
+  getters: {
+    FindPeers: (state) => {
+      return (id) => state.peers.find((p) => p.Identifier === id)
+    },
+    CountPeers: (state) => state.peers.length,
+    FilteredPeerCount: (state) => state.FilteredPeers.length,
+    Peers: (state) => state.peers,
+    FilteredPeers: (state) => {
+      if (!state.filter) {
+        return state.peers
+      }
+      return state.peers.filter((p) => {
+        return p.DisplayName.includes(state.filter) || p.Identifier.includes(state.filter)
+      })
+    },
+    FilteredAndPagedPeers: (state) => {
+      return state.FilteredPeers.slice(state.pageOffset, state.pageOffset + state.pageSize)
+    },
+    isFetching: (state) => state.fetching,
+    hasNextPage: (state) => state.pageOffset < (state.FilteredPeerCount - state.pageSize),
+    hasPrevPage: (state) => state.pageOffset > 0,
+    currentPage: (state) => (state.pageOffset / state.pageSize)+1,
+    Statistics: (state) => {
+      return (id) => state.statsEnabled && (id in state.stats) ? state.stats[id] : freshStats()
+    },
+    hasStatistics: (state) => state.statsEnabled,
+  },
+  actions: {
+    afterPageSizeChange() {
+      // reset pageOffset to avoid problems with new page sizes
+      this.pageOffset = 0
+      this.calculatePages()
+    },
+    calculatePages() {
+      let pageCounter = 1;
+      this.pages = []
+      for (let i = 0; i < this.FilteredPeerCount; i+=this.pageSize) {
+        this.pages.push(pageCounter++)
+      }
+    },
+    gotoPage(page) {
+      this.pageOffset = (page-1) * this.pageSize
+
+      this.calculatePages()
+    },
+    nextPage() {
+      this.pageOffset += this.pageSize
+
+      this.calculatePages()
+    },
+    previousPage() {
+      this.pageOffset -= this.pageSize
+
+      this.calculatePages()
+    },
+    setPeers(peers) {
+      this.peers = peers
+      this.fetching = false
+    },
+    setUser(user) {
+      this.user = user
+      this.fetching = false
+    },
+    setStats(statsResponse) {
+      if (!statsResponse) {
+        this.stats = {}
+        this.statsEnabled = false
+      }
+      this.stats = statsResponse.Stats
+      this.statsEnabled = statsResponse.Enabled
+    },
+    async LoadPeers() {
+      this.fetching = true
+      let currentUser = authStore().user.Identifier
+      return apiWrapper.get(`${baseUrl}/${base64_url_encode(currentUser)}/peers`)
+        .then(this.setPeers)
+        .catch(error => {
+          this.setPeers([])
+          console.log("Failed to load user peers for ", currentUser, ": ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load user peers!",
+          })
+        })
+    },
+    async LoadStats() {
+      this.fetching = true
+      let currentUser = authStore().user.Identifier
+      return apiWrapper.get(`${baseUrl}/${base64_url_encode(currentUser)}/stats`)
+        .then(this.setStats)
+        .catch(error => {
+          this.setStats(undefined)
+          console.log("Failed to load peer stats: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load peer stats!",
+          })
+        })
+    },
+    async LoadUser() {
+      this.fetching = true
+      let currentUser = authStore().user.Identifier
+      return apiWrapper.get(`${baseUrl}/${base64_url_encode(currentUser)}`)
+        .then(this.setUser)
+        .catch(error => {
+          this.setUser({})
+          console.log("Failed to load user for ", currentUser, ": ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load user!",
+          })
+        })
+    },
+  }
+})