Mirrors/wg-portal
1
0
Fork 0
mirror of https://github.com/h44z/wg-portal.git synced 2026-01-10 22:16:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

bulk actions for peers and users (#492) (#602)

Browse Source
This commit is contained in:
h44z
2026-01-05 23:25:17 +01:00
committed by GitHub
parent 4b49a55ea2
commit 015220dc7b
15 changed files with 1329 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/lang/translations/de.json
View File

@@ -129,6 +129,11 @@
"button-add-peers": "Mehrere Peers hinzufügen",
"button-show-peer": "Peer anzeigen",
"button-edit-peer": "Peer bearbeiten",
"button-bulk-delete": "Ausgewählte Peers löschen",
"button-bulk-enable": "Ausgewählte Peers aktivieren",
"button-bulk-disable": "Ausgewählte Peers deaktivieren",
"confirm-bulk-delete": "Sind Sie sicher, dass Sie {count} Peers löschen möchten?",
"confirm-bulk-disable": "Sind Sie sicher, dass Sie {count} Peers deaktivieren möchten?",
"peer-disabled": "Peer ist deaktiviert, Grund:",
"peer-expiring": "Peer läuft ab am",
"peer-connected": "Verbunden",
@@ -153,6 +158,14 @@
"button-add-user": "Benutzer hinzufügen",
"button-show-user": "Benutzer anzeigen",
"button-edit-user": "Benutzer bearbeiten",
"button-bulk-delete": "Ausgewählte Benutzer löschen",
"button-bulk-enable": "Ausgewählte Benutzer aktivieren",
"button-bulk-disable": "Ausgewählte Benutzer deaktivieren",
"button-bulk-lock": "Ausgewählte Benutzer sperren",
"button-bulk-unlock": "Ausgewählte Benutzer entsperren",
"confirm-bulk-delete": "Sind Sie sicher, dass Sie {count} Benutzer löschen möchten?",
"confirm-bulk-disable": "Sind Sie sicher, dass Sie {count} Benutzer deaktivieren möchten?",
"confirm-bulk-lock": "Sind Sie sicher, dass Sie {count} Benutzer sperren möchten?",
"user-disabled": "Benutzer ist deaktiviert, Grund:",
"user-locked": "Konto ist gesperrt, Grund:",
"admin": "Benutzer hat Administratorrechte",

13
frontend/src/lang/translations/en.json
View File

@@ -129,6 +129,11 @@
"button-add-peers": "Add Multiple Peers",
"button-show-peer": "Show Peer",
"button-edit-peer": "Edit Peer",
"button-bulk-delete": "Delete selected peers",
"button-bulk-enable": "Enable selected peers",
"button-bulk-disable": "Disable selected peers",
"confirm-bulk-delete": "Are you sure you want to delete {count} peers?",
"confirm-bulk-disable": "Are you sure you want to disable {count} peers?",
"peer-disabled": "Peer is disabled, reason:",
"peer-expiring": "Peer is expiring at",
"peer-connected": "Connected",
@@ -153,6 +158,14 @@
"button-add-user": "Add User",
"button-show-user": "Show User",
"button-edit-user": "Edit User",
"button-bulk-delete": "Delete selected users",
"button-bulk-enable": "Enable selected users",
"button-bulk-disable": "Disable selected users",
"button-bulk-lock": "Lock selected users",
"button-bulk-unlock": "Unlock selected users",
"confirm-bulk-delete": "Are you sure you want to delete {count} users?",
"confirm-bulk-disable": "Are you sure you want to disable {count} users?",
"confirm-bulk-lock": "Are you sure you want to lock {count} users?",
"user-disabled": "User is disabled, reason:",
"user-locked": "Account is locked, reason:",
"admin": "User has administrator privileges",

67
frontend/src/stores/peers.js
View File

@@ -222,6 +222,73 @@ export const peerStore = defineStore('peers', {
throw new Error(error)
})
},
async BulkDelete(ids) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-delete`, { Identifiers: ids })
.then(() => {
this.peers = this.peers.filter(p => !ids.includes(p.Identifier))
this.fetching = false
notify({
title: "Peers deleted",
text: "Selected peers have been deleted!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to delete peers: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to delete selected peers!",
type: 'error',
})
throw new Error(error)
})
},
async BulkEnable(ids) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-enable`, { Identifiers: ids })
.then(async () => {
await this.LoadPeers()
notify({
title: "Peers enabled",
text: "Selected peers have been enabled!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to enable peers: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to enable selected peers!",
type: 'error',
})
throw new Error(error)
})
},
async BulkDisable(ids, reason) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-disable`, { Identifiers: ids, Reason: reason })
.then(async () => {
await this.LoadPeers()
notify({
title: "Peers disabled",
text: "Selected peers have been disabled!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to disable peers: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to disable selected peers!",
type: 'error',
})
throw new Error(error)
})
},
async UpdatePeer(id, formData) {
this.fetching = true
return apiWrapper.put(`${baseUrl}/${base64_url_encode(id)}`, formData)

14
frontend/src/stores/profile.js
View File

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
import {apiWrapper} from "@/helpers/fetch-wrapper";
import {notify} from "@kyvg/vue3-notification";
import {authStore} from "@/stores/auth";
import {peerStore} from "@/stores/peers";
import { base64_url_encode } from '@/helpers/encoding';
import {freshStats} from "@/helpers/models";
import { ipToBigInt } from '@/helpers/utils';
@@ -218,5 +219,18 @@ export const profileStore = defineStore('profile', {
})
})
},
async BulkDelete(ids) {
this.fetching = true
const peers = peerStore()
return peers.BulkDelete(ids)
.then(() => {
this.peers = this.peers.filter(p => !ids.includes(p.Identifier))
this.fetching = false
})
.catch(error => {
this.fetching = false
throw new Error(error)
})
},
}
})

135
frontend/src/stores/users.js
View File

@@ -142,5 +142,140 @@ export const userStore = defineStore('users', {
})
})
},
async BulkDelete(ids) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-delete`, { Identifiers: ids })
.then(() => {
this.users = this.users.filter(u => !ids.includes(u.Identifier))
this.fetching = false
notify({
title: "Users deleted",
text: "Selected users have been deleted!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to delete users: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to delete selected users!",
type: 'error',
})
throw new Error(error)
})
},
async BulkEnable(ids) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-enable`, { Identifiers: ids })
.then(() => {
this.users.forEach(u => {
if (ids.includes(u.Identifier)) {
u.Disabled = false
u.DisabledReason = ""
}
})
this.fetching = false
notify({
title: "Users enabled",
text: "Selected users have been enabled!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to enable users: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to enable selected users!",
type: 'error',
})
throw new Error(error)
})
},
async BulkDisable(ids, reason) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-disable`, { Identifiers: ids, Reason: reason })
.then(() => {
this.users.forEach(u => {
if (ids.includes(u.Identifier)) {
u.Disabled = true
u.DisabledReason = reason
}
})
this.fetching = false
notify({
title: "Users disabled",
text: "Selected users have been disabled!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to disable users: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to disable selected users!",
type: 'error',
})
throw new Error(error)
})
},
async BulkLock(ids, reason) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-lock`, { Identifiers: ids, Reason: reason })
.then(() => {
this.users.forEach(u => {
if (ids.includes(u.Identifier)) {
u.Locked = true
u.LockedReason = reason
}
})
this.fetching = false
notify({
title: "Users locked",
text: "Selected users have been locked!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to lock users: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to lock selected users!",
type: 'error',
})
throw new Error(error)
})
},
async BulkUnlock(ids) {
this.fetching = true
return apiWrapper.post(`${baseUrl}/bulk-unlock`, { Identifiers: ids })
.then(() => {
this.users.forEach(u => {
if (ids.includes(u.Identifier)) {
u.Locked = false
u.LockedReason = ""
}
})
this.fetching = false
notify({
title: "Users unlocked",
text: "Selected users have been unlocked!",
type: 'success',
})
})
.catch(error => {
this.fetching = false
console.log("Failed to unlock users: ", error)
notify({
title: "Backend Connection Failure",
text: "Failed to unlock selected users!",
type: 'error',
})
throw new Error(error)
})
},
}
})

44
frontend/src/views/InterfaceView.vue
View File

@@ -29,6 +29,10 @@ const sortKey = ref("")
const sortOrder = ref(1)
const selectAll = ref(false)
const selectedPeers = computed(() => {
return peers.All.filter(peer => peer.IsSelected).map(peer => peer.Identifier);
})
function sortBy(key) {
if (sortKey.value === key) {
sortOrder.value = sortOrder.value * -1; // Toggle sort order
@@ -111,6 +115,39 @@ async function saveConfig() {
}
}
async function bulkDelete() {
if (confirm(t('interfaces.confirm-bulk-delete', {count: selectedPeers.value.length}))) {
try {
await peers.BulkDelete(selectedPeers.value)
selectAll.value = false // reset selection
} catch (e) {
// notification is handled in store
}
}
}
async function bulkEnable() {
try {
await peers.BulkEnable(selectedPeers.value)
selectAll.value = false
peers.All.forEach(p => p.IsSelected = false) // remove selection
} catch (e) {
// notification is handled in store
}
}
async function bulkDisable() {
if (confirm(t('interfaces.confirm-bulk-disable', {count: selectedPeers.value.length}))) {
try {
await peers.BulkDisable(selectedPeers.value)
selectAll.value = false
peers.All.forEach(p => p.IsSelected = false) // remove selection
} catch (e) {
// notification is handled in store
}
}
}
function toggleSelectAll() {
peers.FilteredAndPaged.forEach(peer => {
peer.IsSelected = selectAll.value;
@@ -353,6 +390,13 @@ onMounted(async () => {
<a class="btn btn-primary ms-2" href="#" :title="$t('interfaces.button-add-peer')" @click.prevent="editPeerId='#NEW#'"><i class="fa fa-plus me-1"></i><i class="fa fa-user"></i></a>
</div>
</div>
<div class="row" v-if="selectedPeers.length > 0">
<div class="col-12 text-lg-end">
<a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('interfaces.button-bulk-enable')" @click.prevent="bulkEnable"><i class="fa-regular fa-circle-check"></i></a>
<a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('interfaces.button-bulk-disable')" @click.prevent="bulkDisable"><i class="fa fa-ban"></i></a>
<a class="btn btn-outline-danger btn-sm ms-2" href="#" :title="$t('interfaces.button-bulk-delete')" @click.prevent="bulkDelete"><i class="fa fa-trash-can"></i></a>
</div>
</div>
<div v-if="interfaces.Count!==0" class="mt-2 table-responsive">
<div v-if="peers.Count===0">
<h4>{{ $t('interfaces.no-peer.headline') }}</h4>

29
frontend/src/views/ProfileView.vue
View File

@@ -1,14 +1,19 @@
<script setup>
import PeerViewModal from "../components/PeerViewModal.vue";
import { onMounted, ref } from "vue";
import { onMounted, ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { profileStore } from "@/stores/profile";
import { peerStore } from "@/stores/peers";
import UserPeerEditModal from "@/components/UserPeerEditModal.vue";
import { settingsStore } from "@/stores/settings";
import { humanFileSize } from "@/helpers/utils";
const settings = settingsStore()
const profile = profileStore()
const peers = peerStore()
const { t } = useI18n()
const viewedPeerId = ref("")
const editPeerId = ref("")
@@ -17,6 +22,10 @@ const sortKey = ref("")
const sortOrder = ref(1)
const selectAll = ref(false)
const selectedPeers = computed(() => {
return profile.Peers.filter(peer => peer.IsSelected).map(peer => peer.Identifier);
})
function sortBy(key) {
if (sortKey.value === key) {
sortOrder.value = sortOrder.value * -1; // Toggle sort order
@@ -35,6 +44,17 @@ function friendlyInterfaceName(id, name) {
return id
}
async function bulkDelete() {
if (confirm(t('interfaces.confirm-bulk-delete', {count: selectedPeers.value.length}))) {
try {
await profile.BulkDelete(selectedPeers.value)
selectAll.value = false // reset selection
} catch (e) {
// notification is handled in store
}
}
}
function toggleSelectAll() {
profile.FilteredAndPagedPeers.forEach(peer => {
peer.IsSelected = selectAll.value;
@@ -84,6 +104,13 @@ onMounted(async () => {
</div>
</div>
</div>
<div class="row" v-if="selectedPeers.length > 0">
<div class="col-12 text-lg-end">
<button class="btn btn-outline-danger btn-sm" :title="$t('interfaces.button-bulk-delete')" @click.prevent="bulkDelete">
<i class="fa fa-trash-can"></i>
</button>
</div>
</div>
<div class="mt-2 table-responsive">
<div v-if="profile.CountPeers === 0">
<h4>{{ $t('profile.no-peer.headline') }}</h4>

72
frontend/src/views/UserView.vue
View File

@@ -1,16 +1,77 @@
<script setup>
import {userStore} from "@/stores/users";
import {ref,onMounted} from "vue";
import {ref, onMounted, computed} from "vue";
import UserEditModal from "../components/UserEditModal.vue";
import UserViewModal from "../components/UserViewModal.vue";
import {useI18n} from "vue-i18n";
const users = userStore()
const { t } = useI18n()
const editUserId = ref("")
const viewedUserId = ref("")
const selectAll = ref(false)
const selectedUsers = computed(() => {
return users.All.filter(user => user.IsSelected).map(user => user.Identifier);
})
async function bulkDelete() {
if (confirm(t('users.confirm-bulk-delete', {count: selectedUsers.value.length}))) {
try {
await users.BulkDelete(selectedUsers.value)
selectAll.value = false // reset selection
} catch (e) {
// notification is handled in store
}
}
}
async function bulkEnable() {
try {
await users.BulkEnable(selectedUsers.value)
selectAll.value = false
users.All.forEach(u => u.IsSelected = false) // remove selection
} catch (e) {
// notification is handled in store
}
}
async function bulkDisable() {
if (confirm(t('users.confirm-bulk-disable', {count: selectedUsers.value.length}))) {
try {
await users.BulkDisable(selectedUsers.value)
selectAll.value = false
users.All.forEach(u => u.IsSelected = false) // remove selection
} catch (e) {
// notification is handled in store
}
}
}
async function bulkLock() {
if (confirm(t('users.confirm-bulk-lock', {count: selectedUsers.value.length}))) {
try {
await users.BulkLock(selectedUsers.value)
selectAll.value = false
users.All.forEach(u => u.IsSelected = false) // remove selection
} catch (e) {
// notification is handled in store
}
}
}
async function bulkUnlock() {
try {
await users.BulkUnlock(selectedUsers.value)
selectAll.value = false
users.All.forEach(u => u.IsSelected = false) // remove selection
} catch (e) {
// notification is handled in store
}
}
function toggleSelectAll() {
users.FilteredAndPaged.forEach(user => {
user.IsSelected = selectAll.value;
@@ -45,6 +106,15 @@ onMounted(() => {
</a>
</div>
</div>
<div class="row" v-if="selectedUsers.length > 0">
<div class="col-12 text-lg-end">
<a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-enable')" @click.prevent="bulkEnable"><i class="fa-regular fa-circle-check"></i></a>
<a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-disable')" @click.prevent="bulkDisable"><i class="fa fa-ban"></i></a>
<a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-unlock')" @click.prevent="bulkUnlock"><i class="fa-solid fa-lock-open"></i></a>
<a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-lock')" @click.prevent="bulkLock"><i class="fa-solid fa-lock"></i></a>
<a class="btn btn-outline-danger btn-sm ms-2" href="#" :title="$t('users.button-bulk-delete')" @click.prevent="bulkDelete"><i class="fa fa-trash-can"></i></a>
</div>
</div>
<div class="mt-2 table-responsive">
<div v-if="users.Count===0">
<h4>{{ $t('users.no-user.headline') }}</h4>