fix(deps): update dependency vue to v3.3.13

package.json

@@ -113,7 +113,7 @@
     "sortablejs": "1.15.1",
     "tippy.js": "6.3.7",
     "ufo": "1.3.2",
-    "vue": "3.3.12",
+    "vue": "3.3.13",
     "vue-advanced-cropper": "2.8.8",
     "vue-flatpickr-component": "11.0.3",
     "vue-i18n": "9.8.0",

src/i18n/lang/en.json

@@ -160,6 +160,7 @@
         "expired": "This token has expired {ago}.",
         "tokenCreatedSuccess": "Here is your new api token: {token}",
         "tokenCreatedNotSeeAgain": "Store it in a secure location, you won't see it again!",
+        "selectAll": "Select all",
         "delete": {
           "header": "Delete this token",
           "text1": "Are you sure you want to delete the token \"{token}\"?",

src/views/user/settings/ApiTokens.vue

@@ -12,22 +12,24 @@ import 'flatpickr/dist/flatpickr.css'
 import {useI18n} from 'vue-i18n'
 import {useAuthStore} from '@/stores/auth'
 import Message from '@/components/misc/message.vue'
+import type {IApiToken} from '@/modelTypes/IApiToken'
 
 const service = new ApiTokenService()
-const tokens = ref([])
+const tokens = ref<IApiToken[]>([])
 const apiDocsUrl = window.API_URL + '/docs'
 const showCreateForm = ref(false)
 const availableRoutes = ref(null)
-const newToken = ref(new ApiTokenModel())
+const newToken = ref<IApiToken>(new ApiTokenModel())
 const newTokenExpiry = ref<string | number>(30)
 const newTokenExpiryCustom = ref(new Date())
 const newTokenPermissions = ref({})
+const newTokenPermissionsGroup = ref({})
 const newTokenTitleValid = ref(true)
 const apiTokenTitle = ref()
 const tokenCreatedSuccessMessage = ref('')
 
-const showDeleteModal = ref(false)
-const tokenToDelete = ref(null)
+const showDeleteModal = ref<boolean>(false)
+const tokenToDelete = ref<IApiToken>()
 
 const {t} = useI18n()
 const authStore = useAuthStore()
@@ -65,8 +67,8 @@ function resetPermissions() {
 async function deleteToken() {
 	await service.delete(tokenToDelete.value)
 	showDeleteModal.value = false
-	tokenToDelete.value = null
 	const index = tokens.value.findIndex(el => el.id === tokenToDelete.value.id)
+	tokenToDelete.value = null
 	if (index === -1) {
 		return
 	}
@@ -111,6 +113,32 @@ async function createToken() {
 function formatPermissionTitle(title: string): string {
 	return title.replaceAll('_', ' ')
 }
+
+function selectPermissionGroup(group: string, checked: boolean) {
+	Object.entries(availableRoutes.value[group]).forEach(entry => {
+		const [key] = entry
+		newTokenPermissions.value[group][key] = checked
+	})
+}
+
+function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
+	if (checked) {
+		// Check if all permissions of that group are checked and check the "select all" checkbox in that case
+		let allChecked = true
+		Object.entries(availableRoutes.value[group]).forEach(entry => {
+			const [key] = entry
+			if (!newTokenPermissions.value[group][key]) {
+				allChecked = false
+			}
+		})
+
+		if (allChecked) {
+			newTokenPermissionsGroup.value[group] = true
+		}
+	} else {
+		newTokenPermissionsGroup.value[group] = false
+	}
+}
 </script>
 
 <template>
@@ -215,15 +243,31 @@ function formatPermissionTitle(title: string): string {
 				<p>{{ $t('user.settings.apiTokens.permissionExplanation') }}</p>
 				<div v-for="(routes, group) in availableRoutes" class="mb-2" :key="group">
 					<strong class="is-capitalized">{{ formatPermissionTitle(group) }}</strong><br/>
-					<fancycheckbox
+					<template
+						v-if="Object.keys(routes).length > 1"
+					>
+						<fancycheckbox
+							class="mr-2 is-italic"
+							v-model="newTokenPermissionsGroup[group]"
+							@update:model-value="checked => selectPermissionGroup(group, checked)"
+						>
+							{{ $t('user.settings.apiTokens.selectAll') }}
+						</fancycheckbox>
+						<br/>
+					</template>
+					<template
 						v-for="(paths, route) in routes"
 						:key="group+'-'+route"
-						class="mr-2 is-capitalized"
-						v-model="newTokenPermissions[group][route]"
 					>
-						{{ formatPermissionTitle(route) }}
-					</fancycheckbox>
-					<br/>
+						<fancycheckbox
+							class="mr-2 is-capitalized"
+							v-model="newTokenPermissions[group][route]"
+							@update:model-value="checked => toggleGroupPermissionsFromChild(group, checked)"
+						>
+							{{ formatPermissionTitle(route) }}
+						</fancycheckbox>
+						<br/>
+					</template>
 				</div>
 			</div>