Add support for auth.oidc.allowed_user_groups (#667) (#668)

Signed-off-by: Michael Tupitsyn <michael.tupitsyn@gmail.com>

Makefile

@@ -1,7 +1,8 @@
 # Go parameters
 GOCMD=go
+GOVERSION=1.25
 MODULENAME=github.com/h44z/wg-portal
-GOFILES:=$(shell go list ./... | grep -v /vendor/)
+GOFILES=$(shell go list ./... | grep -v /vendor/)
 BUILDDIR=dist
 BINARIES=$(subst cmd/,,$(wildcard cmd/*))
 IMAGE=h44z/wg-portal
@@ -51,6 +52,11 @@ format:
 .PHONY: test
 test: test-vet test-race
 
+#> test-in-docker: Run tests in Docker (for non-Linux environments e.g. MacOS)
+.PHONY: test-in-docker
+test-in-docker:
+	docker run --rm -u $(shell id -u):$(shell id -g) -e HOME=/tmp -v $(PWD):/app -w /app golang:$(GOVERSION) make test
+
 #< test-vet: Static code analysis
 .PHONY: test-vet
 test-vet: build-dependencies

docs/documentation/configuration/examples.md

@@ -144,6 +144,9 @@ auth:
       extra_scopes:
         - https://www.googleapis.com/auth/userinfo.email
         - https://www.googleapis.com/auth/userinfo.profile
+      allowed_user_groups:
+        - the-admin-group
+        - vpn-users
       field_map:
         user_identifier: sub
         email: email
@@ -201,6 +204,9 @@ auth:
         - email
         - profile
         - i-want-some-groups
+      allowed_user_groups:
+        - admin-group-name
+        - vpn-users
       field_map:
         email: email
         firstname: name

docs/documentation/configuration/overview.md

@@ -561,6 +561,10 @@ Below are the properties for each OIDC provider entry inside `auth.oidc`:
 - **Default:** *(empty)*
 - **Description:** A list of allowlisted domains. Only users with email addresses in these domains can log in or register. This is useful for restricting access to specific organizations or groups.
 
+#### `allowed_user_groups`
+- **Default:** *(empty)*
+- **Description:** A list of allowlisted user groups. If configured, at least one entry in the mapped `user_groups` claim must match one of these values.
+
 #### `field_map`
 - **Default:** *(empty)*
 - **Description:** Maps OIDC claims to WireGuard Portal user fields. 
@@ -639,6 +643,10 @@ Below are the properties for each OAuth provider entry inside `auth.oauth`:
 - **Default:** *(empty)*
 - **Description:** A list of allowlisted domains. Only users with email addresses in these domains can log in or register. This is useful for restricting access to specific organizations or groups.
 
+#### `allowed_user_groups`
+- **Default:** *(empty)*
+- **Description:** A list of allowlisted user groups. If configured, at least one entry in the mapped `user_groups` claim must match one of these values.
+
 #### `field_map`
 - **Default:** *(empty)*
 - **Description:** Maps OAuth attributes to WireGuard Portal fields.

docs/documentation/usage/authentication.md

@@ -66,6 +66,40 @@ auth:
         - "outlook.com"
 ```
 
+#### Limiting Login to Specific User Groups
+
+You can limit the login to specific user groups by setting the `allowed_user_groups` property for OAuth2 or OIDC providers.
+If this property is not empty, the user's `user_groups` claim must contain at least one matching group.
+
+To use this feature, ensure your group claim is mapped via `field_map.user_groups`.
+
+```yaml
+auth:
+  oidc:
+    - provider_name: "oidc1"
+      # ... other settings
+      allowed_user_groups:
+        - "wg-users"
+        - "wg-admins"
+      field_map:
+        user_groups: "groups"
+```
+
+If `allowed_user_groups` is configured and the authenticated user has no matching group in `user_groups`, login is denied.
+
+Minimal deny-by-group example:
+
+```yaml
+auth:
+  oauth:
+    - provider_name: "oauth1"
+      # ... other settings
+      allowed_user_groups:
+        - "vpn-users"
+      field_map:
+        user_groups: "groups"
+```
+
 #### Limit Login to Existing Users
 
 You can limit the login to existing users only by setting the `registration_enabled` property to `false` for OAuth2 or OIDC providers.

frontend/index.html

@@ -14,7 +14,7 @@
       let WGPORTAL_SITE_TITLE="WireGuard Portal";
       let WGPORTAL_SITE_COMPANY_NAME="WireGuard Portal";
     </script>
-    <script src="/api/v0/config/frontend.js"></script>
+    <script src="/api/v0/config/frontend.js" vite-ignore></script>
   </head>
   <body class="d-flex flex-column min-vh-100">
     <noscript>

frontend/package.json

@@ -9,28 +9,28 @@
   },
   "dependencies": {
     "@fontsource/nunito-sans": "^5.2.7",
-    "@fortawesome/fontawesome-free": "^7.1.0",
+    "@fortawesome/fontawesome-free": "^7.2.0",
     "@kyvg/vue3-notification": "^3.4.2",
     "@popperjs/core": "^2.11.8",
-    "@simplewebauthn/browser": "^13.2.2",
+    "@simplewebauthn/browser": "^13.3.0",
-    "@vojtechlanka/vue-tags-input": "^3.1.1",
+    "@vojtechlanka/vue-tags-input": "^3.1.2",
     "bootstrap": "^5.3.8",
     "bootswatch": "^5.3.8",
-    "cidr-tools": "^11.0.3",
+    "cidr-tools": "^11.3.2",
     "flag-icons": "^7.5.0",
     "ip-address": "^10.1.0",
-    "is-cidr": "^6.0.1",
+    "is-cidr": "^6.0.3",
     "is-ip": "^5.0.1",
     "pinia": "^3.0.4",
     "prismjs": "^1.30.0",
-    "vue": "^3.5.25",
+    "vue": "^3.5.31",
-    "vue-i18n": "^11.2.2",
+    "vue-i18n": "^11.3.0",
     "vue-prism-component": "github:h44z/vue-prism-component",
-    "vue-router": "^4.6.3"
+    "vue-router": "^5.0.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitejs/plugin-vue": "^6.0.5",
-    "sass-embedded": "^1.93.3",
+    "sass-embedded": "^1.98.0",
-    "vite": "^7.2.7"
+    "vite": "^8.0.3"
   }
 }

frontend/src/components/Modal.vue

@@ -26,13 +26,13 @@
   display:block;
 }
 .modal.show {
-  opacity: 1;
+  opacity: 1.0;
 }
 .modal-backdrop {
   background-color: rgba(0,0,0,0.6) !important;
 }
 .modal-backdrop.show {
-  opacity: 1 !important;
+  opacity: 1.0 !important;
 }
 </style>
 

frontend/src/components/Pagination.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true
+  },
+  totalCount: {
+    type: Number,
+    required: true
+  },
+  pageSize: {
+    type: Number,
+    required: true
+  },
+  onGotoPage: {
+    type: Function,
+    required: true
+  },
+  onNextPage: {
+    type: Function,
+    required: true
+  },
+  onPrevPage: {
+    type: Function,
+    required: true
+  },
+  hasNextPage: {
+    type: Boolean,
+    required: true
+  },
+  hasPrevPage: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
+
+const pages = computed(() => {
+  const current = props.currentPage;
+  const last = totalPages.value;
+  const delta = 2; // Number of pages to show before and after current page
+  
+  const range = [];
+  const rangeWithDots = [];
+
+  // If total pages is small, just show all pages
+  if (last <= 7) {
+    for (let i = 1; i <= last; i++) {
+      rangeWithDots.push({ type: 'page', value: i });
+    }
+    return rangeWithDots;
+  }
+
+  // Calculate the range around the current page
+  let start = Math.max(2, current - delta);
+  let end = Math.min(last - 1, current + delta);
+
+  // Adjust range to always show a consistent number of pages if possible
+  if (current <= delta + 2) {
+    end = 2 + delta * 2;
+  } else if (current >= last - delta - 1) {
+    start = last - delta * 2 - 1;
+  }
+
+  // Add dots before the range if needed
+  if (start > 2) {
+    rangeWithDots.push({ type: 'page', value: 1 });
+    rangeWithDots.push({ type: 'dots', value: 'dots-start' });
+  } else {
+    for (let i = 1; i < start; i++) {
+      rangeWithDots.push({ type: 'page', value: i });
+    }
+  }
+
+  // Add the central range
+  for (let i = start; i <= end; i++) {
+    rangeWithDots.push({ type: 'page', value: i });
+  }
+
+  // Add dots after the range if needed
+  if (end < last - 1) {
+    rangeWithDots.push({ type: 'dots', value: 'dots-end' });
+    rangeWithDots.push({ type: 'page', value: last });
+  } else {
+    for (let i = end + 1; i <= last; i++) {
+      rangeWithDots.push({ type: 'page', value: i });
+    }
+  }
+
+  return rangeWithDots;
+});
+</script>
+
+<template>
+  <ul class="pagination pagination-sm mb-0" v-if="totalPages > 1">
+    <li :class="{ disabled: !hasPrevPage }" class="page-item">
+      <a class="page-link" href="#" @click.prevent="hasPrevPage && onPrevPage()">&laquo;</a>
+    </li>
+
+    <li v-for="item in pages" :key="item.type === 'page' ? item.value : item.value" :class="{ active: currentPage === item.value, disabled: item.type === 'dots' }" class="page-item">
+      <a v-if="item.type === 'page'" class="page-link" href="#" @click.prevent="onGotoPage(item.value)">{{ item.value }}</a>
+      <span v-else class="page-link">...</span>
+    </li>
+
+    <li :class="{ disabled: !hasNextPage }" class="page-item">
+      <a class="page-link" href="#" @click.prevent="hasNextPage && onNextPage()">&raquo;</a>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.page-link {
+  cursor: pointer;
+}
+.page-item.disabled .page-link {
+  cursor: default;
+}
+</style>

frontend/src/router/index.js

@@ -1,7 +1,6 @@
 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 {securityStore} from '@/stores/security'
@@ -20,11 +19,6 @@ const router = createRouter({
       name: 'login',
       component: LoginView
     },
-    {
-      path: '/interface',
-      name: 'interface',
-      component: InterfaceView
-    },
     {
       path: '/interfaces',
       name: 'interfaces',

frontend/src/stores/audit.js

@@ -11,7 +11,6 @@ export const auditStore = defineStore('audit', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
   }),
   getters: {
@@ -41,33 +40,22 @@ export const auditStore = defineStore('audit', {
     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
+      if (this.hasNextPage) {
-
+        this.pageOffset += this.pageSize
-      this.calculatePages()
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
+      if (this.hasPrevPage) {
-
+        this.pageOffset -= this.pageSize
-      this.calculatePages()
+      }
     },
     setEntries(entries) {
       this.entries = entries
-      this.calculatePages()
       this.fetching = false
     },
     async LoadEntries() {

frontend/src/stores/peers.js

@@ -19,7 +19,6 @@ export const peerStore = defineStore('peers', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
     sortKey: 'IsConnected', // Default sort key
     sortOrder: -1, // 1 for ascending, -1 for descending
@@ -87,33 +86,22 @@ export const peerStore = defineStore('peers', {
     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
+      if (this.hasNextPage) {
-
+        this.pageOffset += this.pageSize
-      this.calculatePages()
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
+      if (this.hasPrevPage) {
-
+        this.pageOffset -= this.pageSize
-      this.calculatePages()
+      }
     },
     setPeers(peers) {
       this.peers = peers
-      this.calculatePages()
       this.fetching = false
       this.trafficStats = {}
     },

frontend/src/stores/profile.js

@@ -20,7 +20,6 @@ export const profileStore = defineStore('profile', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
     sortKey: 'IsConnected', // Default sort key
     sortOrder: -1, // 1 for ascending, -1 for descending
@@ -80,29 +79,19 @@ export const profileStore = defineStore('profile', {
     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
+      if (this.hasNextPage) {
-
+        this.pageOffset += this.pageSize
-      this.calculatePages()
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
+      if (this.hasPrevPage) {
-
+        this.pageOffset -= this.pageSize
-      this.calculatePages()
+      }
     },
     setPeers(peers) {
       this.peers = peers

frontend/src/stores/users.js

@@ -12,7 +12,6 @@ export const userStore = defineStore('users', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
   }),
   getters: {
@@ -43,33 +42,22 @@ export const userStore = defineStore('users', {
     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
+      if (this.hasNextPage) {
-
+        this.pageOffset += this.pageSize
-      this.calculatePages()
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
+      if (this.hasPrevPage) {
-
+        this.pageOffset -= this.pageSize
-      this.calculatePages()
+      }
     },
     setUsers(users) {
       this.users = users
-      this.calculatePages()
       this.fetching = false
     },
     setUserPeers(peers) {

frontend/src/views/AuditView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted } from "vue";
 import {auditStore} from "@/stores/audit";
+import Pagination from "@/components/Pagination.vue";
 
 const audit = auditStore()
 
@@ -60,28 +61,24 @@ onMounted(async () => {
     </table>
   </div>
   <hr>
-  <div class="mt-3">
     <div class="row">
-      <div class="col-6">
+      <div class="col-12 col-md-6">
-        <ul class="pagination pagination-sm">
+        <Pagination
-          <li :class="{disabled:audit.pageOffset===0}" class="page-item">
+            :currentPage="audit.currentPage"
-            <a class="page-link" @click="audit.previousPage">&laquo;</a>
+            :totalCount="audit.FilteredCount"
-          </li>
+            :pageSize="audit.pageSize"
-
+            :hasNextPage="audit.hasNextPage"
-          <li v-for="page in audit.pages" :key="page" :class="{active:audit.currentPage===page}" class="page-item">
+            :hasPrevPage="audit.hasPrevPage"
-            <a class="page-link" @click="audit.gotoPage(page)">{{page}}</a>
+            :onGotoPage="audit.gotoPage"
-          </li>
+            :onNextPage="audit.nextPage"
-
+            :onPrevPage="audit.previousPage"
-          <li :class="{disabled:!audit.hasNextPage}" class="page-item">
+        />
-            <a class="page-link" @click="audit.nextPage">&raquo;</a>
-          </li>
-        </ul>
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="audit.pageSize" class="form-select" @click="audit.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="audit.pageSize" class="form-select" @change="audit.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
@@ -92,5 +89,4 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-  </div>
 </template>

frontend/src/views/InterfaceView.vue

@@ -1,9 +1,10 @@
 <script setup>
-import PeerViewModal from "../components/PeerViewModal.vue";
+import PeerViewModal from "@/components/PeerViewModal.vue";
-import PeerEditModal from "../components/PeerEditModal.vue";
+import PeerEditModal from "@/components/PeerEditModal.vue";
-import PeerMultiCreateModal from "../components/PeerMultiCreateModal.vue";
+import PeerMultiCreateModal from "@/components/PeerMultiCreateModal.vue";
-import InterfaceEditModal from "../components/InterfaceEditModal.vue";
+import InterfaceEditModal from "@/components/InterfaceEditModal.vue";
-import InterfaceViewModal from "../components/InterfaceViewModal.vue";
+import InterfaceViewModal from "@/components/InterfaceViewModal.vue";
+import Pagination from "@/components/Pagination.vue";
 
 import {computed, onMounted, ref} from "vue";
 import {peerStore} from "@/stores/peers";
@@ -482,26 +483,23 @@ onMounted(async () => {
   <hr v-if="interfaces.Count!==0">
   <div v-if="interfaces.Count!==0" class="mt-3">
     <div class="row">
-      <div class="col-6">
+      <div class="col-12 col-md-6">
-        <ul class="pagination pagination-sm">
+        <Pagination
-          <li :class="{disabled:peers.pageOffset===0}" class="page-item">
+            :currentPage="peers.currentPage"
-            <a class="page-link" @click="peers.previousPage">&laquo;</a>
+            :totalCount="peers.FilteredCount"
-          </li>
+            :pageSize="peers.pageSize"
-
+            :hasNextPage="peers.hasNextPage"
-          <li v-for="page in peers.pages" :key="page" :class="{active:peers.currentPage===page}" class="page-item">
+            :hasPrevPage="peers.hasPrevPage"
-            <a class="page-link" @click="peers.gotoPage(page)">{{page}}</a>
+            :onGotoPage="peers.gotoPage"
-          </li>
+            :onNextPage="peers.nextPage"
-
+            :onPrevPage="peers.previousPage"
-          <li :class="{disabled:!peers.hasNextPage}" class="page-item">
+        />
-            <a class="page-link" @click="peers.nextPage">&raquo;</a>
-          </li>
-        </ul>
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="peers.pageSize" class="form-select" @click="peers.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="peers.pageSize" class="form-select" @change="peers.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>

frontend/src/views/ProfileView.vue

@@ -6,6 +6,7 @@ import { useI18n } from "vue-i18n";
 import { profileStore } from "@/stores/profile";
 import { peerStore } from "@/stores/peers";
 import UserPeerEditModal from "@/components/UserPeerEditModal.vue";
+import Pagination from "@/components/Pagination.vue";
 import { settingsStore } from "@/stores/settings";
 import { humanFileSize } from "@/helpers/utils";
 
@@ -66,7 +67,6 @@ onMounted(async () => {
   await profile.LoadPeers()
   await profile.LoadStats()
   await profile.LoadInterfaces()
-  await profile.calculatePages(); // Forces to show initial page number
 })
 
 </script>
@@ -185,36 +185,33 @@ onMounted(async () => {
   <hr>
   <div class="mt-3">
     <div class="row">
-      <div class="col-6">
+      <div class="col-12 col-md-6">
-        <ul class="pagination pagination-sm">
+        <Pagination
-          <li :class="{ disabled: profile.pageOffset === 0 }" class="page-item">
+            :currentPage="profile.currentPage"
-            <a class="page-link" @click="profile.previousPage">&laquo;</a>
+            :totalCount="profile.FilteredPeerCount"
-          </li>
+            :pageSize="profile.pageSize"
-
+            :hasNextPage="profile.hasNextPage"
-          <li v-for="page in profile.pages" :key="page" :class="{ active: profile.currentPage === page }" class="page-item">
+            :hasPrevPage="profile.hasPrevPage"
-            <a class="page-link" @click="profile.gotoPage(page)">{{ page }}</a>
+            :onGotoPage="profile.gotoPage"
-          </li>
+            :onNextPage="profile.nextPage"
-
+            :onPrevPage="profile.previousPage"
-          <li :class="{ disabled: !profile.hasNextPage }" class="page-item">
+        />
-            <a class="page-link" @click="profile.nextPage">&raquo;</a>
-          </li>
-        </ul>
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">
             {{ $t('general.pagination.size')}}:
           </label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="profile.pageSize" class="form-select" @click="profile.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="profile.pageSize" class="form-select" @change="profile.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
-            <option value="100">100</option>
+              <option value="100">100</option>
-            <option value="999999999">{{ $t('general.pagination.all') }}</option>
+              <option value="999999999">{{ $t('general.pagination.all') }}</option>
-          </select>
+            </select>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 </div></template>

frontend/src/views/UserView.vue

@@ -1,8 +1,9 @@
 <script setup>
 import {userStore} from "@/stores/users";
 import {ref, onMounted, computed} from "vue";
-import UserEditModal from "../components/UserEditModal.vue";
+import UserEditModal from "@/components/UserEditModal.vue";
-import UserViewModal from "../components/UserViewModal.vue";
+import UserViewModal from "@/components/UserViewModal.vue";
+import Pagination from "@/components/Pagination.vue";
 import {useI18n} from "vue-i18n";
 
 const users = userStore()
@@ -165,28 +166,24 @@ onMounted(() => {
     </table>
   </div>
   <hr>
-  <div class="mt-3">
     <div class="row">
-      <div class="col-6">
+      <div class="col-12 col-md-6">
-        <ul class="pagination pagination-sm">
+        <Pagination
-          <li :class="{disabled:users.pageOffset===0}" class="page-item">
+            :currentPage="users.currentPage"
-            <a class="page-link" @click="users.previousPage">&laquo;</a>
+            :totalCount="users.FilteredCount"
-          </li>
+            :pageSize="users.pageSize"
-
+            :hasNextPage="users.hasNextPage"
-          <li v-for="page in users.pages" :key="page" :class="{active:users.currentPage===page}" class="page-item">
+            :hasPrevPage="users.hasPrevPage"
-            <a class="page-link" @click="users.gotoPage(page)">{{page}}</a>
+            :onGotoPage="users.gotoPage"
-          </li>
+            :onNextPage="users.nextPage"
-
+            :onPrevPage="users.previousPage"
-          <li :class="{disabled:!users.hasNextPage}" class="page-item">
+        />
-            <a class="page-link" @click="users.nextPage">&raquo;</a>
-          </li>
-        </ul>
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="users.pageSize" class="form-select" @click="users.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="users.pageSize" class="form-select" @change="users.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
@@ -197,5 +194,4 @@ onMounted(() => {
         </div>
       </div>
     </div>
-  </div>
 </template>

internal/adapters/database.go

@@ -232,21 +232,19 @@ func (r *SqlRepo) migrate() error {
 	slog.Debug("running migration: interface status", "result", r.db.AutoMigrate(&domain.InterfaceStatus{}))
 	slog.Debug("running migration: audit data", "result", r.db.AutoMigrate(&domain.AuditEntry{}))
 
-	existingSysStat := SysStat{}
+	var existingSysStat SysStat
+	var err error
+
 	r.db.Order("schema_version desc").First(&existingSysStat) // get latest version
 
 	// Migration: 0 --> 1
 	if existingSysStat.SchemaVersion == 0 {
 		const schemaVersion = 1
-		sysStat := SysStat{
+		existingSysStat, err = r.addMigration(schemaVersion) // ensure that follow-up checks test against the latest version
-			MigratedAt:    time.Now(),
+		if err != nil {
-			SchemaVersion: schemaVersion,
+			return err
-		}
-		if err := r.db.Create(&sysStat).Error; err != nil {
-			return fmt.Errorf("failed to write sysstat entry for schema version %d: %w", schemaVersion, err)
 		}
 		slog.Debug("sys-stat entry written", "schema_version", schemaVersion)
-		existingSysStat = sysStat // ensure that follow-up checks test against the latest version
 	}
 
 	// Migration: 1 --> 2
@@ -262,14 +260,10 @@ func (r *SqlRepo) migrate() error {
 			}
 			slog.Debug("migrated interface create_default_peer flags", "schema_version", schemaVersion)
 		}
-		sysStat := SysStat{
+		existingSysStat, err = r.addMigration(schemaVersion) // ensure that follow-up checks test against the latest version
-			MigratedAt:    time.Now(),
+		if err != nil {
-			SchemaVersion: schemaVersion,
+			return err
 		}
-		if err := r.db.Create(&sysStat).Error; err != nil {
-			return fmt.Errorf("failed to write sysstat entry for schema version %d: %w", schemaVersion, err)
-		}
-		existingSysStat = sysStat // ensure that follow-up checks test against the latest version
 	}
 
 	// Migration: 2 --> 3
@@ -307,19 +301,45 @@ func (r *SqlRepo) migrate() error {
 		if err != nil {
 			return fmt.Errorf("failed to migrate to multi-auth: %w", err)
 		}
-		sysStat := SysStat{
+		existingSysStat, err = r.addMigration(schemaVersion) // ensure that follow-up checks test against the latest version
-			MigratedAt:    time.Now(),
+		if err != nil {
-			SchemaVersion: schemaVersion,
+			return err
 		}
-		if err := r.db.Create(&sysStat).Error; err != nil {
+	}
-			return fmt.Errorf("failed to write sysstat entry for schema version %d: %w", schemaVersion, err)
+
+	// Migration: 3 --> 4
+	if existingSysStat.SchemaVersion == 3 {
+		const schemaVersion = 4
+		cutoff := time.Date(2000, 1, 1, 0, 0, 0, 0, time.UTC)
+
+		// Fix zero created_at timestamps for users. Set the to the last known update timestamp.
+		err := r.db.Model(&domain.User{}).Where("created_at < ?", cutoff).
+			Update("created_at", gorm.Expr("updated_at")).Error
+		if err != nil {
+			slog.Warn("failed to fix zero created_at for users", "error", err)
+		}
+		slog.Debug("fixed zero created_at timestamps for users", "schema_version", schemaVersion)
+
+		existingSysStat, err = r.addMigration(schemaVersion) // ensure that follow-up checks test against the latest version
+		if err != nil {
+			return err
 		}
-		existingSysStat = sysStat // ensure that follow-up checks test against the latest version
 	}
 
 	return nil
 }
 
+func (r *SqlRepo) addMigration(schemaVersion uint64) (SysStat, error) {
+	sysStat := SysStat{
+		MigratedAt:    time.Now(),
+		SchemaVersion: schemaVersion,
+	}
+	if err := r.db.Create(&sysStat).Error; err != nil {
+		return SysStat{}, fmt.Errorf("failed to write sysstat entry for schema version %d: %w", schemaVersion, err)
+	}
+	return sysStat, nil
+}
+
 // region interfaces
 
 // GetInterface returns the interface with the given id.

internal/adapters/database_created_at_test.go

@@ -0,0 +1,168 @@
+package adapters
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	"github.com/glebarez/sqlite"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	"gorm.io/gorm"
+
+	"github.com/h44z/wg-portal/internal/config"
+	"github.com/h44z/wg-portal/internal/domain"
+)
+
+func newTestDB(t *testing.T) *gorm.DB {
+	t.Helper()
+	db, err := gorm.Open(sqlite.Open("file::memory:"), &gorm.Config{})
+	require.NoError(t, err)
+	return db
+}
+
+func TestUpsertUser_SetsCreatedAtWhenZero(t *testing.T) {
+	db := newTestDB(t)
+	require.NoError(t, db.AutoMigrate(&domain.User{}, &domain.UserAuthentication{}, &domain.UserWebauthnCredential{}))
+
+	repo := &SqlRepo{db: db, cfg: &config.Config{}}
+	ui := domain.SystemAdminContextUserInfo()
+
+	user := &domain.User{
+		Identifier: "test-user",
+		Email:      "test@example.com",
+		// CreatedAt is zero
+	}
+
+	err := repo.upsertUser(ui, db, user)
+	require.NoError(t, err)
+
+	assert.False(t, user.CreatedAt.IsZero(), "CreatedAt should be set when it was zero")
+	assert.Equal(t, ui.UserId(), user.UpdatedBy, "UpdatedBy should be set when it was empty")
+	assert.WithinDuration(t, user.UpdatedAt, user.CreatedAt, time.Second,
+		"CreatedAt should be close to UpdatedAt for new user")
+}
+
+func TestUpsertUser_PreservesExistingCreatedAt(t *testing.T) {
+	db := newTestDB(t)
+	require.NoError(t, db.AutoMigrate(&domain.User{}, &domain.UserAuthentication{}, &domain.UserWebauthnCredential{}))
+
+	repo := &SqlRepo{db: db, cfg: &config.Config{}}
+	ui := domain.SystemAdminContextUserInfo()
+
+	originalTime := time.Date(2025, 1, 1, 12, 0, 0, 0, time.UTC)
+	user := &domain.User{
+		Identifier: "test-user",
+		Email:      "test@example.com",
+		BaseModel: domain.BaseModel{
+			CreatedAt: originalTime,
+			CreatedBy: "original-creator",
+		},
+	}
+
+	err := repo.upsertUser(ui, db, user)
+	require.NoError(t, err)
+
+	assert.Equal(t, originalTime, user.CreatedAt, "CreatedAt should not be overwritten")
+	assert.Equal(t, "original-creator", user.CreatedBy, "CreatedBy should not be overwritten")
+}
+
+func TestSaveUser_NewUserGetsCreatedAt(t *testing.T) {
+	db := newTestDB(t)
+	require.NoError(t, db.AutoMigrate(&domain.User{}, &domain.UserAuthentication{}, &domain.UserWebauthnCredential{}))
+
+	repo := &SqlRepo{db: db, cfg: &config.Config{}}
+	ctx := domain.SetUserInfo(context.Background(), domain.SystemAdminContextUserInfo())
+
+	before := time.Now().Add(-time.Second)
+
+	err := repo.SaveUser(ctx, "new-user", func(u *domain.User) (*domain.User, error) {
+		u.Email = "new@example.com"
+		return u, nil
+	})
+	require.NoError(t, err)
+
+	var saved domain.User
+	require.NoError(t, db.First(&saved, "identifier = ?", "new-user").Error)
+
+	assert.False(t, saved.CreatedAt.IsZero(), "CreatedAt should not be zero")
+	assert.True(t, saved.CreatedAt.After(before), "CreatedAt should be recent")
+	assert.NotEmpty(t, saved.CreatedBy, "CreatedBy should be set")
+}
+
+func TestMigration_FixesZeroCreatedAt(t *testing.T) {
+	db := newTestDB(t)
+
+	// Manually create tables and seed schema version 3
+	require.NoError(t, db.AutoMigrate(
+		&SysStat{},
+		&domain.User{},
+		&domain.UserAuthentication{},
+		&domain.Interface{},
+		&domain.Cidr{},
+		&domain.Peer{},
+		&domain.AuditEntry{},
+		&domain.UserWebauthnCredential{},
+	))
+
+	// Insert schema versions 1, 2, 3 so migration starts at 3
+	for v := uint64(1); v <= 3; v++ {
+		require.NoError(t, db.Create(&SysStat{SchemaVersion: v, MigratedAt: time.Now()}).Error)
+	}
+
+	updatedAt := time.Date(2025, 6, 15, 10, 0, 0, 0, time.UTC)
+
+	// Insert a user with zero created_at but valid updated_at
+	require.NoError(t, db.Exec(
+		"INSERT INTO users (identifier, email, created_at, updated_at) VALUES (?, ?, ?, ?)",
+		"zero-user", "zero@example.com", time.Time{}, updatedAt,
+	).Error)
+
+	// Run migration
+	repo := &SqlRepo{db: db, cfg: &config.Config{}}
+	require.NoError(t, repo.migrate())
+
+	// Verify created_at was backfilled from updated_at
+	var user domain.User
+	require.NoError(t, db.First(&user, "identifier = ?", "zero-user").Error)
+	assert.Equal(t, updatedAt, user.CreatedAt, "created_at should be backfilled from updated_at")
+
+	// Verify schema version advanced to 4
+	var latest SysStat
+	require.NoError(t, db.Order("schema_version DESC").First(&latest).Error)
+	assert.Equal(t, uint64(4), latest.SchemaVersion)
+}
+
+func TestMigration_DoesNotTouchValidCreatedAt(t *testing.T) {
+	db := newTestDB(t)
+
+	require.NoError(t, db.AutoMigrate(
+		&SysStat{},
+		&domain.User{},
+		&domain.UserAuthentication{},
+		&domain.Interface{},
+		&domain.Cidr{},
+		&domain.Peer{},
+		&domain.AuditEntry{},
+		&domain.UserWebauthnCredential{},
+	))
+
+	for v := uint64(1); v <= 3; v++ {
+		require.NoError(t, db.Create(&SysStat{SchemaVersion: v, MigratedAt: time.Now()}).Error)
+	}
+
+	createdAt := time.Date(2024, 3, 1, 8, 0, 0, 0, time.UTC)
+	updatedAt := time.Date(2025, 6, 15, 10, 0, 0, 0, time.UTC)
+
+	require.NoError(t, db.Exec(
+		"INSERT INTO users (identifier, email, created_at, updated_at) VALUES (?, ?, ?, ?)",
+		"valid-user", "valid@example.com", createdAt, updatedAt,
+	).Error)
+
+	repo := &SqlRepo{db: db, cfg: &config.Config{}}
+	require.NoError(t, repo.migrate())
+
+	var user domain.User
+	require.NoError(t, db.First(&user, "identifier = ?", "valid-user").Error)
+	assert.Equal(t, createdAt, user.CreatedAt, "valid created_at should not be modified")
+}

internal/app/auth/auth.go

@@ -65,6 +65,9 @@ type AuthenticatorOauth interface {
 	RegistrationEnabled() bool
 	// GetAllowedDomains returns the list of whitelisted domains
 	GetAllowedDomains() []string
+	// GetAllowedUserGroups returns the list of whitelisted user groups.
+	// If non-empty, at least one user group must match.
+	GetAllowedUserGroups() []string
 }
 
 // AuthenticatorLdap is the interface for all LDAP authenticators.
@@ -497,6 +500,33 @@ func isDomainAllowed(email string, allowedDomains []string) bool {
 	return false
 }
 
+func isAnyAllowedUserGroup(userGroups, allowedUserGroups []string) bool {
+	if len(allowedUserGroups) == 0 {
+		return true
+	}
+
+	allowed := make(map[string]struct{}, len(allowedUserGroups))
+	for _, group := range allowedUserGroups {
+		trimmed := strings.TrimSpace(group)
+		if trimmed == "" {
+			continue
+		}
+		allowed[trimmed] = struct{}{}
+	}
+
+	if len(allowed) == 0 {
+		return false
+	}
+
+	for _, group := range userGroups {
+		if _, ok := allowed[strings.TrimSpace(group)]; ok {
+			return true
+		}
+	}
+
+	return false
+}
+
 // OauthLoginStep2 finishes the oauth authentication flow by exchanging the code for an access token and
 // fetching the user information.
 func (a *Authenticator) OauthLoginStep2(ctx context.Context, providerId, nonce, code string) (*domain.User, error) {
@@ -524,6 +554,10 @@ func (a *Authenticator) OauthLoginStep2(ctx context.Context, providerId, nonce,
 		return nil, fmt.Errorf("user %s is not in allowed domains", userInfo.Email)
 	}
 
+	if !isAnyAllowedUserGroup(userInfo.UserGroups, oauthProvider.GetAllowedUserGroups()) {
+		return nil, fmt.Errorf("user %s is not in allowed user groups", userInfo.Identifier)
+	}
+
 	ctx = domain.SetUserInfo(ctx,
 		domain.SystemAdminContextUserInfo()) // switch to admin user context to check if user exists
 	user, err := a.processUserInfo(ctx, userInfo, domain.UserSourceOauth, oauthProvider.GetName(),

internal/app/auth/auth_oauth.go

@@ -29,6 +29,7 @@ type PlainOauthAuthenticator struct {
 	userInfoLogging      bool
 	sensitiveInfoLogging bool
 	allowedDomains       []string
+	allowedUserGroups    []string
 }
 
 func newPlainOauthAuthenticator(
@@ -60,6 +61,7 @@ func newPlainOauthAuthenticator(
 	provider.userInfoLogging = cfg.LogUserInfo
 	provider.sensitiveInfoLogging = cfg.LogSensitiveInfo
 	provider.allowedDomains = cfg.AllowedDomains
+	provider.allowedUserGroups = cfg.AllowedUserGroups
 
 	return provider, nil
 }
@@ -73,6 +75,10 @@ func (p PlainOauthAuthenticator) GetAllowedDomains() []string {
 	return p.allowedDomains
 }
 
+func (p PlainOauthAuthenticator) GetAllowedUserGroups() []string {
+	return p.allowedUserGroups
+}
+
 // RegistrationEnabled returns whether registration is enabled for the OAuth authenticator.
 func (p PlainOauthAuthenticator) RegistrationEnabled() bool {
 	return p.registrationEnabled

internal/app/auth/auth_oidc.go

@@ -26,6 +26,7 @@ type OidcAuthenticator struct {
 	userInfoLogging      bool
 	sensitiveInfoLogging bool
 	allowedDomains       []string
+	allowedUserGroups    []string
 }
 
 func newOidcAuthenticator(
@@ -61,6 +62,7 @@ func newOidcAuthenticator(
 	provider.userInfoLogging = cfg.LogUserInfo
 	provider.sensitiveInfoLogging = cfg.LogSensitiveInfo
 	provider.allowedDomains = cfg.AllowedDomains
+	provider.allowedUserGroups = cfg.AllowedUserGroups
 
 	return provider, nil
 }
@@ -74,6 +76,10 @@ func (o OidcAuthenticator) GetAllowedDomains() []string {
 	return o.allowedDomains
 }
 
+func (o OidcAuthenticator) GetAllowedUserGroups() []string {
+	return o.allowedUserGroups
+}
+
 // RegistrationEnabled returns whether registration is enabled for this authenticator.
 func (o OidcAuthenticator) RegistrationEnabled() bool {
 	return o.registrationEnabled

internal/app/auth/oauth_common.go

@@ -16,6 +16,7 @@ func parseOauthUserInfo(
 ) (*domain.AuthenticatorUserInfo, error) {
 	var isAdmin bool
 	var adminInfoAvailable bool
+	userGroups := internal.MapDefaultStringSlice(raw, mapping.UserGroups, nil)
 
 	// first try to match the is_admin field against the given regex
 	if mapping.IsAdmin != "" {
@@ -29,7 +30,6 @@ func parseOauthUserInfo(
 	// next try to parse the user's groups
 	if !isAdmin && mapping.UserGroups != "" && adminMapping.AdminGroupRegex != "" {
 		adminInfoAvailable = true
-		userGroups := internal.MapDefaultStringSlice(raw, mapping.UserGroups, nil)
 		re := adminMapping.GetAdminGroupRegex()
 		for _, group := range userGroups {
 			if re.MatchString(strings.TrimSpace(group)) {
@@ -42,6 +42,7 @@ func parseOauthUserInfo(
 	userInfo := &domain.AuthenticatorUserInfo{
 		Identifier:         domain.UserIdentifier(internal.MapDefaultString(raw, mapping.UserIdentifier, "")),
 		Email:              internal.MapDefaultString(raw, mapping.Email, ""),
+		UserGroups:         userGroups,
 		Firstname:          internal.MapDefaultString(raw, mapping.Firstname, ""),
 		Lastname:           internal.MapDefaultString(raw, mapping.Lastname, ""),
 		Phone:              internal.MapDefaultString(raw, mapping.Phone, ""),

internal/app/auth/oauth_common_test.go

@@ -96,6 +96,7 @@ func Test_parseOauthUserInfo_admin_group(t *testing.T) {
 	assert.Equal(t, info.Firstname, "Test User")
 	assert.Equal(t, info.Lastname, "")
 	assert.Equal(t, info.Email, "test@mydomain.net")
+	assert.Equal(t, info.UserGroups, []string{"abuse@mydomain.net", "postmaster@mydomain.net", "wgportal-admins@mydomain.net"})
 }
 
 func Test_parseOauthUserInfo_admin_value(t *testing.T) {

internal/app/users/user_manager.go

@@ -533,6 +533,7 @@ func (m Manager) create(ctx context.Context, user *domain.User) (*domain.User, e
 	}
 
 	err = m.users.SaveUser(ctx, user.Identifier, func(u *domain.User) (*domain.User, error) {
+		user.CopyCalculatedAttributes(u, false)
 		return user, nil
 	})
 	if err != nil {

internal/config/auth.go

@@ -258,6 +258,10 @@ type OpenIDConnectProvider struct {
 	// AllowedDomains defines the list of allowed domains
 	AllowedDomains []string `yaml:"allowed_domains"`
 
+	// AllowedUserGroups defines the list of allowed user groups.
+	// If not empty, at least one group from the user's group claim must match.
+	AllowedUserGroups []string `yaml:"allowed_user_groups"`
+
 	// FieldMap is used to map the names of the user-info endpoint fields to wg-portal fields
 	FieldMap OauthFields `yaml:"field_map"`
 
@@ -303,6 +307,10 @@ type OAuthProvider struct {
 	// AllowedDomains defines the list of allowed domains
 	AllowedDomains []string `yaml:"allowed_domains"`
 
+	// AllowedUserGroups defines the list of allowed user groups.
+	// If not empty, at least one group from the user's group claim must match.
+	AllowedUserGroups []string `yaml:"allowed_user_groups"`
+
 	// FieldMap is used to map the names of the user-info endpoint fields to wg-portal fields
 	FieldMap OauthFields `yaml:"field_map"`
 

internal/domain/auth.go

@@ -12,6 +12,7 @@ type LoginProviderInfo struct {
 type AuthenticatorUserInfo struct {
 	Identifier         UserIdentifier
 	Email              string
+	UserGroups         []string
 	Firstname          string
 	Lastname           string
 	Phone              string

internal/domain/user.go

@@ -68,7 +68,7 @@ type User struct {
 	WebAuthnCredentialList []UserWebauthnCredential `gorm:"foreignKey:user_identifier"` // the webauthn credentials of the user, used for webauthn authentication
 
 	// API token for REST API access
-	ApiToken        string `form:"api_token" binding:"omitempty"`
+	ApiToken        string `form:"api_token" binding:"omitempty" gorm:"serializer:encstr"`
 	ApiTokenCreated *time.Time
 
 	LinkedPeerCount int `gorm:"-"`