feat: add simple audit ui

frontend/src/App.vue

@@ -91,6 +91,7 @@ const currentYear = ref(new Date().getFullYear())
             <div class="dropdown-menu">
               <RouterLink :to="{ name: 'profile' }" class="dropdown-item"><i class="fas fa-user"></i> {{ $t('menu.profile') }}</RouterLink>
               <RouterLink :to="{ name: 'settings' }" class="dropdown-item" v-if="auth.IsAdmin || !settings.Setting('ApiAdminOnly')"><i class="fas fa-gears"></i> {{ $t('menu.settings') }}</RouterLink>
+              <RouterLink :to="{ name: 'audit' }" class="dropdown-item" v-if="auth.IsAdmin"><i class="fas fa-file-shield"></i> {{ $t('menu.audit') }}</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>

frontend/src/lang/translations/en.json

@@ -38,6 +38,7 @@
     "lang": "Toggle Language",
     "profile": "My Profile",
     "settings": "Settings",
+    "audit": "Audit Log",
     "login": "Login",
     "logout": "Logout"
   },
@@ -188,6 +189,23 @@
       "api-link": "API Documentation"
     }
   },
+  "audit": {
+    "headline": "Audit Log",
+    "abstract": "Here you can find the audit log of all actions performed in the WireGuard Portal.",
+    "no-entries": {
+      "headline": "No log entries available",
+      "abstract": "Currently, there are no audit logs recorded."
+    },
+    "entries-headline": "Log Entries",
+    "table-heading": {
+      "id": "#",
+      "time": "Time",
+      "user": "User",
+      "severity": "Severity",
+      "origin": "Origin",
+      "message": "Message"
+    }
+  },
   "modals": {
     "user-view": {
       "headline": "User Account:",

frontend/src/router/index.js

@@ -56,6 +56,14 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/SettingsView.vue')
+    },
+    {
+      path: '/audit',
+      name: 'audit',
+      // 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/AuditView.vue')
     }
   ],
   linkActiveClass: "active",

frontend/src/stores/audit.js

@@ -0,0 +1,87 @@
+import { defineStore } from 'pinia'
+import {apiWrapper} from "@/helpers/fetch-wrapper";
+import {notify} from "@kyvg/vue3-notification";
+import { base64_url_encode } from '@/helpers/encoding';
+
+const baseUrl = `/audit`
+
+export const auditStore = defineStore('audit', {
+  state: () => ({
+    entries: [],
+    filter: "",
+    pageSize: 10,
+    pageOffset: 0,
+    pages: [],
+    fetching: false,
+  }),
+  getters: {
+    Count: (state) => state.entries.length,
+    FilteredCount: (state) => state.Filtered.length,
+    All: (state) => state.entries,
+    Filtered: (state) => {
+      if (!state.filter) {
+        return state.entries
+      }
+      return state.entries.filter((e) => {
+        return e.Timestamp.includes(state.filter) ||
+            e.Message.includes(state.filter) ||
+            e.Severity.includes(state.filter) ||
+            e.Origin.includes(state.filter)
+      })
+    },
+    FilteredAndPaged: (state) => {
+      return state.Filtered.slice(state.pageOffset, state.pageOffset + state.pageSize)
+    },
+    isFetching: (state) => state.fetching,
+    hasNextPage: (state) => state.pageOffset < (state.FilteredCount - state.pageSize),
+    hasPrevPage: (state) => state.pageOffset > 0,
+    currentPage: (state) => (state.pageOffset / state.pageSize)+1,
+  },
+  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()
+    },
+    setEntries(entries) {
+      this.entries = entries
+      this.calculatePages()
+      this.fetching = false
+    },
+    async LoadEntries() {
+      this.fetching = true
+      return apiWrapper.get(`${baseUrl}/entries`)
+        .then(this.setEntries)
+        .catch(error => {
+          this.setEntries([])
+          console.log("Failed to load audit entries: ", error)
+          notify({
+            title: "Backend Connection Failure",
+            text: "Failed to load audit entries!",
+          })
+        })
+    },
+  }
+})

frontend/src/views/AuditView.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { onMounted } from "vue";
+import {auditStore} from "@/stores/audit";
+
+const audit = auditStore()
+
+onMounted(async () => {
+  await audit.LoadEntries()
+})
+
+</script>
+
+<template>
+  <div class="page-header">
+    <h1>{{ $t('audit.headline') }}</h1>
+  </div>
+
+  <p class="lead">{{ $t('audit.abstract') }}</p>
+
+  <!-- Entry list -->
+  <div class="mt-4 row">
+    <div class="col-12 col-lg-6">
+      <h3>{{ $t('audit.entries-headline') }}</h3>
+    </div>
+    <div class="col-12 col-lg-6 text-lg-end">
+      <div class="form-group d-inline">
+        <div class="input-group mb-3">
+          <input v-model="audit.filter" class="form-control" :placeholder="$t('general.search.placeholder')" type="text" @keyup="audit.afterPageSizeChange">
+          <button class="input-group-text btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mt-2 table-responsive">
+    <div v-if="audit.Count===0">
+      <h4>{{ $t('audit.no-entries.headline') }}</h4>
+      <p>{{ $t('audit.no-entries.abstract') }}</p>
+    </div>
+    <table v-if="audit.Count!==0" id="auditTable" class="table table-sm">
+      <thead>
+      <tr>
+        <th scope="col">{{ $t('audit.table-heading.id') }}</th>
+        <th class="text-center" scope="col">{{ $t('audit.table-heading.time') }}</th>
+        <th class="text-center" scope="col">{{ $t('audit.table-heading.severity') }}</th>
+        <th scope="col">{{ $t('audit.table-heading.user') }}</th>
+        <th scope="col">{{ $t('audit.table-heading.origin') }}</th>
+        <th scope="col">{{ $t('audit.table-heading.message') }}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="entry in audit.FilteredAndPaged" :key="entry.Id">
+        <td>{{entry.Id}}</td>
+        <td>{{entry.Timestamp}}</td>
+        <td class="text-center"><span class="badge rounded-pill" :class="[ entry.Severity === 'low' ? 'bg-light' : entry.Severity === 'medium' ? 'bg-warning' : 'bg-danger']">{{entry.Severity}}</span></td>
+        <td>{{entry.ContextUser}}</td>
+        <td>{{entry.Origin}}</td>
+        <td>{{entry.Message}}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <hr>
+  <div class="mt-3">
+    <div class="row">
+      <div class="col-6">
+        <ul class="pagination pagination-sm">
+          <li :class="{disabled:audit.pageOffset===0}" class="page-item">
+            <a class="page-link" @click="audit.previousPage">&laquo;</a>
+          </li>
+
+          <li v-for="page in audit.pages" :key="page" :class="{active:audit.currentPage===page}" class="page-item">
+            <a class="page-link" @click="audit.gotoPage(page)">{{page}}</a>
+          </li>
+
+          <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="form-group row">
+          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
+          <div class="col-sm-6">
+            <select v-model.number="audit.pageSize" class="form-select" @click="audit.afterPageSizeChange()">
+              <option value="10">10</option>
+              <option value="25">25</option>
+              <option value="50">50</option>
+              <option value="100">100</option>
+              <option value="999999999">{{ $t('general.pagination.all') }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/SettingsView.vue

@@ -1,13 +1,8 @@
 <script setup>
-import PeerViewModal from "../components/PeerViewModal.vue";
-
-import { onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import { profileStore } from "@/stores/profile";
-import PeerEditModal from "@/components/PeerEditModal.vue";
 import { settingsStore } from "@/stores/settings";
-import { humanFileSize } from "@/helpers/utils";
-import {RouterLink} from "vue-router";
-import {authStore} from "../stores/auth";
+import { authStore } from "../stores/auth";
 
 const profile = profileStore()
 const settings = settingsStore()

frontend/src/views/UserView.vue

@@ -3,16 +3,12 @@ import {userStore} from "@/stores/users";
 import {ref,onMounted} from "vue";
 import UserEditModal from "../components/UserEditModal.vue";
 import UserViewModal from "../components/UserViewModal.vue";
-import {notify} from "@kyvg/vue3-notification";
-import {settingsStore} from "@/stores/settings";
 
-const settings = settingsStore()
 const users = userStore()
 
 const editUserId = ref("")
 const viewedUserId = ref("")
 
-
 const selectAll = ref(false)
 
 function toggleSelectAll() {