added authentication as its own data point

src/modals/Modals.vue

@@ -32,6 +32,8 @@ import { navigationStore } from '../store/store.js'
 		<DeleteJobArgument />
 		<EditSourceConfiguration />
 		<DeleteSourceConfiguration />
+		<EditSourceConfigurationAuthentication v-if="navigationStore.modal === 'editSourceConfigurationAuthentication'" />
+		<DeleteSourceConfigurationAuthentication v-if="navigationStore.modal === 'deleteSourceConfigurationAuthentication'" />
 		<ViewSourceLog />
 		<ViewJobLog />
 		<ViewSynchronizationLog />
@@ -62,6 +64,8 @@ import EditJobArgument from './JobArgument/EditJobArgument.vue'
 import DeleteJobArgument from './JobArgument/DeleteJobArgument.vue'
 import EditSourceConfiguration from './SourceConfiguration/EditSourceConfiguration.vue'
 import DeleteSourceConfiguration from './SourceConfiguration/DeleteSourceConfiguration.vue'
+import EditSourceConfigurationAuthentication from './SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue'
+import DeleteSourceConfigurationAuthentication from './SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue'
 import ViewSourceLog from './Log/ViewSourceLog.vue'
 import EditMappingMapping from './mappingMapping/EditMappingMapping.vue'
 import DeleteMappingMapping from './mappingMapping/DeleteMappingMapping.vue'
@@ -98,6 +102,8 @@ export default {
 		DeleteJobArgument,
 		EditSourceConfiguration,
 		DeleteSourceConfiguration,
+		EditSourceConfigurationAuthentication,
+		DeleteSourceConfigurationAuthentication,
 		ViewSourceLog,
 		EditMappingMapping,
 		DeleteMappingMapping,

src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue

@@ -0,0 +1,118 @@
+<script setup>
+import { navigationStore, sourceStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Delete Source Authentication"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Successfully deleted source authentication</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Something went wrong deleting the source authentication</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+		<p v-if="success === null">
+			Do you want to delete <b>{{ sourceStore.sourceConfigurationKey.replace(/^authentication\./g, '') }}</b> from Source Authentication?
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" icon="" @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success !== null ? 'Close' : 'Cancel' }}
+			</NcButton>
+			<NcButton
+				v-if="success === null"
+				:disabled="loading"
+				icon="Delete"
+				type="error"
+				@click="deleteSourceConfiguration()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Delete v-if="!loading" :size="20" />
+				</template>
+				Delete
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+
+export default {
+	name: 'DeleteSourceConfigurationAuthentication',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		Delete,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			sourceStore.setSourceConfigurationKey(null)
+		},
+		deleteSourceConfiguration() {
+			this.loading = true
+
+			const sourceItemClone = { ...sourceStore.sourceItem }
+			delete sourceItemClone?.configuration[sourceStore.sourceConfigurationKey]
+
+			const sourceItem = {
+				...sourceStore.sourceItem,
+			}
+
+			sourceStore.saveSource(sourceItem)
+				.then(() => {
+					this.loading = false
+					this.success = true
+
+					// Wait for the user to read the feedback then close the model
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style>
+.modal__content {
+    margin: var(--OC-margin-50);
+    text-align: center;
+}
+
+.zaakDetailsContainer {
+    margin-block-start: var(--OC-margin-20);
+    margin-inline-start: var(--OC-margin-20);
+    margin-inline-end: var(--OC-margin-20);
+}
+
+.success {
+    color: green;
+}
+</style>

src/modals/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { sourceStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="editSourceConfigurationAuthentication"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>{{ isEdit ? 'Edit' : 'Add' }} Authentication</h2>
+			<NcNoteCard v-if="success" type="success">
+				<p>Authentication successfully added</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+
+			<form v-if="!success" @submit.prevent="handleSubmit">
+				<div class="form-group">
+					<NcTextField
+						id="key"
+						label="Key*"
+						required
+						:error="checkIfKeyIsUnique(configurationItem.key)"
+						:helper-text="checkIfKeyIsUnique(configurationItem.key) ? 'This key is already in use. Please choose a different key name.' : ''"
+						:value.sync="configurationItem.key" />
+					<NcTextField
+						id="value"
+						label="Value"
+						:value.sync="configurationItem.value" />
+				</div>
+			</form>
+
+			<NcButton
+				v-if="!success"
+				:disabled="loading || !configurationItem.key || checkIfKeyIsUnique(configurationItem.key)"
+				type="primary"
+				@click="editSourceConfiguration()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				Save
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcModal,
+	NcLoadingIcon,
+	NcNoteCard,
+	NcTextField,
+} from '@nextcloud/vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+
+export default {
+	name: 'EditSourceConfigurationAuthentication',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			configurationItem: {
+				key: '',
+				value: '',
+			},
+			success: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			closeTimeoutFunc: null,
+			oldKey: '',
+			isEdit: false,
+		}
+	},
+	mounted() {
+		this.initializeSourceConfiguration()
+	},
+	methods: {
+		initializeSourceConfiguration() {
+			if (!sourceStore.sourceConfigurationKey) {
+				return
+			}
+			const configurationItem = Object.entries(sourceStore.sourceItem.configuration).find(([key]) => key === sourceStore.sourceConfigurationKey)
+			if (configurationItem) {
+				this.configurationItem = {
+					key: configurationItem[0].replace(/^authentication\./g, '') || '',
+					value: configurationItem[1] || '',
+				}
+				this.oldKey = configurationItem[0]
+				this.isEdit = true
+			}
+		},
+		checkIfKeyIsUnique(key) {
+			if (!sourceStore.sourceItem.configuration) return false
+			const fullKey = `authentication.${key}`
+			const keys = Object.keys(sourceStore.sourceItem.configuration)
+			if (this.oldKey === fullKey) return false
+			if (keys.includes(fullKey)) return true
+			return false
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			sourceStore.setSourceConfigurationKey(null)
+		},
+		async editSourceConfiguration() {
+			this.loading = true
+
+			const newSourceItem = {
+				...sourceStore.sourceItem,
+				configuration: {
+					...sourceStore.sourceItem.configuration,
+					[`authentication.${this.configurationItem.key}`]: this.configurationItem.value,
+				},
+			}
+
+			if (this.oldKey !== '' && this.oldKey !== `authentication.${this.configurationItem.key}`) {
+				delete newSourceItem.configuration[this.oldKey]
+			}
+
+			try {
+				await sourceStore.saveSource(newSourceItem)
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the authentication configuration'
+			}
+		},
+	},
+}
+</script>