start of model edit dialogs

vue3/src/components/dialogs/DeleteConfirmDialog.vue

@@ -0,0 +1,37 @@
+<template>
+
+    <v-dialog max-width="400" activator="parent" v-model="dialog">
+        <v-card>
+            <v-card-title>{{ $t('Delete') }}</v-card-title>
+            <v-card-text>
+                {{ $t('DeleteConfirmQuestion')}}
+                <b>{{ objectName }}</b>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn @click="dialog=false">{{ $t('Cancel') }}</v-btn>
+                <v-btn @click="emit('delete'); dialog=false" color="delete" prepend-icon="$delete">
+                    {{ $t('Delete') }}
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+<script setup lang="ts">
+
+import {ref} from "vue";
+
+const emit = defineEmits(['delete'])
+
+const props = defineProps({
+    objectName: {type: String, default: ''}
+})
+
+const dialog = ref(false)
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/model_editors/AccessTokenEditor.vue

@@ -0,0 +1,81 @@
+<template>
+    <v-card>
+        <v-card-title>{{ $t(OBJ_LOCALIZATION_KEY) }}</v-card-title>
+        <v-card-text>
+            <v-form>
+                <v-text-field label="Token" v-model="editingObj.token" :disabled="isUpdate"></v-text-field>
+                <v-text-field label="Scope" v-model="editingObj.scope"></v-text-field>
+                <v-date-input :label="$t('Valid Until')" v-model="editingObj.scope"></v-date-input>
+            </v-form>
+        </v-card-text>
+        <v-card-actions>
+            <v-btn color="save" prepend-icon="$save">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
+            <v-btn color="delete" prepend-icon="$delete">{{ $t('Delete') }}
+                <delete-confirm-dialog :object-name="objectName"></delete-confirm-dialog>
+            </v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
+import {computed, onMounted, ref} from "vue";
+import {AccessToken, ApiApi} from "@/openapi";
+import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+
+const props = defineProps({
+    accessToken: {type: {} as AccessToken, required: false}
+})
+
+const OBJ_LOCALIZATION_KEY = 'Access_Token'
+const editingObj = ref({} as AccessToken)
+const loading = ref(false)
+
+/**
+ * checks if given object has ID property to determine if it needs to be updated or created
+ */
+const isUpdate = computed(() => {
+    return editingObj.value.id !== undefined
+})
+
+/**
+ * display name for object in headers/delete dialog/...
+ */
+const objectName = computed(() => {
+    return isUpdate ? `${t(OBJ_LOCALIZATION_KEY)} ${editingObj.value.token}` : `${t(OBJ_LOCALIZATION_KEY)} (${t('New')})`
+})
+
+onMounted(() => {
+    if (props.accessToken != null) {
+        editingObj.value = props.accessToken
+    }
+})
+
+/**
+ * saves the edited object in the database
+ */
+function saveObject() {
+    let api = new ApiApi()
+    if (isUpdate.value) {
+
+    } else {
+
+    }
+}
+
+/**
+ * test
+ */
+function deleteObject() {
+
+}
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/settings/ApiSettings.vue

@@ -36,7 +36,7 @@
             </v-list-item>
         </v-list>
 
-
+        <access-token-editor class="mt-2"></access-token-editor>
 
     </v-form>
 </template>
@@ -48,6 +48,7 @@ import {onMounted, ref} from "vue";
 import {AccessToken, ApiApi} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {DateTime} from "luxon";
+import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";
 
 const accessTokenList = ref([] as AccessToken[])
 const accessToken = ref({} as AccessToken)

vue3/src/components/settings/SpaceMemberSettings.vue

@@ -82,7 +82,7 @@ import {ApiApi, Group, InviteLink, UserSpace} from "@/openapi";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {useI18n} from "vue-i18n";
 import {DateTime} from "luxon";
-import {VDateInput} from 'vuetify/labs/VDateInput'
+import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
 import {useClipboard} from "@vueuse/core"; //TODO remove once component is out of labs
 
 const {t} = useI18n()