From 85ffd7158bc76c6a1b32273393af0e2cb0a9ca48 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 5 Nov 2022 07:40:20 +0000
Subject: Bump @nextcloud/eslint-config from 6.1.2 to 8.1.2 Fix all file
 extension related to new rules from eslint-config-8.1.2

Bumps [@nextcloud/eslint-config](https://github.com/nextcloud/eslint-config) from 6.1.2 to 8.1.2.
- [Release notes](https://github.com/nextcloud/eslint-config/releases)
- [Changelog](https://github.com/nextcloud/eslint-config/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nextcloud/eslint-config/compare/v6.1.2...v8.1.2)

---
updated-dependencies:
- dependency-name: "@nextcloud/eslint-config"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/components/Actions/ActionCopyNtoFN.vue         |  6 +-
 src/components/Actions/ActionToggleYear.vue        |  4 +-
 src/components/AdminSettings.vue                   |  3 +-
 src/components/AppContent/ChartContent.vue         |  4 +-
 src/components/AppContent/CircleContent.vue        | 25 +++----
 src/components/AppContent/ContactsContent.vue      | 27 ++++---
 .../AppNavigation/CircleNavigationItem.vue         | 51 ++++++--------
 src/components/AppNavigation/ContactsSettings.vue  | 10 +--
 .../AppNavigation/GroupNavigationItem.vue          | 38 ++++------
 src/components/AppNavigation/RootNavigation.vue    | 82 +++++++++-------------
 .../AppNavigation/Settings/SettingsAddressbook.vue | 34 +++++----
 .../Settings/SettingsAddressbookShare.vue          |  9 ++-
 .../Settings/SettingsAddressbookSharee.vue         | 13 ++--
 .../Settings/SettingsImportContacts.vue            | 23 +++---
 .../Settings/SettingsNewAddressbook.vue            |  2 +-
 .../Settings/SettingsSortContacts.vue              |  7 +-
 src/components/ChartTemplate.vue                   |  5 +-
 src/components/CircleDetails.vue                   | 35 +++++----
 src/components/CircleDetails/CircleConfigs.vue     |  4 +-
 .../CircleDetails/CirclePasswordSettings.vue       | 15 ++--
 src/components/ContactDetails.vue                  | 56 +++++++--------
 .../ContactDetails/ContactDetailsAddNewProp.vue    | 10 +--
 .../ContactDetails/ContactDetailsAvatar.vue        | 41 +++++------
 .../ContactDetails/ContactDetailsProperty.vue      | 14 ++--
 src/components/ContactsList.vue                    |  4 +-
 src/components/ContactsList/ContactsListItem.vue   |  5 +-
 src/components/DetailsHeader.vue                   |  2 +-
 src/components/EntityPicker/ContactsPicker.vue     |  8 +--
 src/components/EntityPicker/EntityBubble.vue       |  5 +-
 src/components/EntityPicker/EntityPicker.vue       | 30 ++++----
 src/components/EntityPicker/EntitySearchResult.vue |  5 +-
 src/components/EntityPicker/NewCircleIntro.vue     | 22 +++---
 src/components/MemberList.vue                      | 36 +++++-----
 src/components/MembersList/MembersListItem.vue     | 31 ++++----
 src/components/OrgChart.vue                        |  7 +-
 src/components/ProcessingScreen.vue                |  4 +-
 src/components/Properties/PropertyActions.vue      |  6 +-
 src/components/Properties/PropertyDateTime.vue     | 16 ++---
 src/components/Properties/PropertyGroups.vue       |  9 ++-
 src/components/Properties/PropertyMultipleText.vue |  8 +--
 src/components/Properties/PropertySelect.vue       | 11 ++-
 src/components/Properties/PropertyText.vue         | 11 ++-
 src/components/Properties/PropertyTitle.vue        |  2 +-
 src/components/Properties/PropertyTitleIcon.vue    | 32 ++++-----
 44 files changed, 342 insertions(+), 430 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index 5e1157e8..aeeb3917 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -29,9 +29,9 @@
 	</ActionButton>
 </template>
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionsMixin from '../../mixins/ActionsMixin'
-import IconCopy from 'vue-material-design-icons/ContentCopy'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionsMixin from '../../mixins/ActionsMixin.js'
+import IconCopy from 'vue-material-design-icons/ContentCopy.vue'
 
 export default {
 	name: 'ActionCopyNtoFN',
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index eb169880..f74a2cf4 100644
--- a/src/components/Actions/ActionToggleYear.vue
+++ b/src/components/Actions/ActionToggleYear.vue
@@ -28,8 +28,8 @@
 	</ActionCheckbox>
 </template>
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import ActionsMixin from '../../mixins/ActionsMixin'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import ActionsMixin from '../../mixins/ActionsMixin.js'
 
 export default {
 	name: 'ActionToggleYear',
diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index 415048ce..32ad9a64 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -24,8 +24,7 @@
 	<div id="contacts" class="section">
 		<h2>{{ t('contacts', 'Contacts') }}</h2>
 		<p>
-			<input
-				id="allow-social-sync"
+			<input id="allow-social-sync"
 				v-model="allowSocialSync"
 				type="checkbox"
 				class="checkbox"
diff --git a/src/components/AppContent/ChartContent.vue b/src/components/AppContent/ChartContent.vue
index e9c3b82f..a4fe165e 100644
--- a/src/components/AppContent/ChartContent.vue
+++ b/src/components/AppContent/ChartContent.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 
 import OrgChart from '../OrgChart.vue'
-import { getChart, transformNode } from '../../utils/chartUtils'
+import { getChart, transformNode } from '../../utils/chartUtils.js'
 
 export default {
 	name: 'ChartContent',
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 90619e90..57c9e6cd 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -24,8 +24,7 @@
 	<AppContent v-if="!circle">
 		<EmptyContent :title="t('contacts', 'Please select a circle')">
 			<template #icon>
-				<IconCircles
-					:size="20" />
+				<IconCircles :size="20" />
 			</template>
 		</EmptyContent>
 	</AppContent>
@@ -41,8 +40,7 @@
 	<AppContent v-else :show-details.sync="showDetails">
 		<!-- member list -->
 		<template #list>
-			<MemberList
-				:list="members"
+			<MemberList :list="members"
 				:loading="loadingList"
 				:show-details.sync="showDetails" />
 		</template>
@@ -60,8 +58,7 @@
 
 				<EmptyContent v-else :title="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
 					<template #icon>
-						<IconCircles
-							:size="20" />
+						<IconCircles :size="20" />
 					</template>
 				</EmptyContent>
 			</template>
@@ -70,14 +67,14 @@
 </template>
 <script>
 import { showError } from '@nextcloud/dialogs'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
-import IconCircles from '../Icons/IconCircles'
-import CircleDetails from '../CircleDetails'
-import MemberList from '../MemberList'
-import RouterMixin from '../../mixins/RouterMixin'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import IconCircles from '../Icons/IconCircles.vue'
+import CircleDetails from '../CircleDetails.vue'
+import MemberList from '../MemberList.vue'
+import RouterMixin from '../../mixins/RouterMixin.js'
 
 export default {
 	name: 'CircleContent',
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index cf029546..60c3a5c1 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -32,8 +32,7 @@
 	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
 		<EmptyContent :title="t('contacts', 'There are no contacts yet')">
 			<template #icon>
-				<IconContact
-					:size="20" />
+				<IconContact :size="20" />
 			</template>
 			<template #desc>
 				<Button type="primary" @click="newContact">
@@ -46,8 +45,7 @@
 	<AppContent v-else-if="isEmptyGroup && isRealGroup">
 		<EmptyContent :title=" t('contacts', 'There are no contacts in this group')">
 			<template #icon>
-				<IconContact
-					:size="20" />
+				<IconContact :size="20" />
 			</template>
 			<template #desc>
 				<Button v-if="contacts.length === 0" type="primary" @click="addContactsToGroup(selectedGroup)">
@@ -63,8 +61,7 @@
 	<AppContent v-else :show-details="showDetails" @update:showDetails="hideDetails">
 		<!-- contacts list -->
 		<template #list>
-			<ContactsList
-				:list="contactsList"
+			<ContactsList :list="contactsList"
 				:contacts="contacts"
 				:search-query="searchQuery" />
 		</template>
@@ -75,15 +72,15 @@
 </template>
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-
-import ContactDetails from '../ContactDetails'
-import ContactsList from '../ContactsList'
-import IconContact from 'vue-material-design-icons/AccountMultiple'
-import RouterMixin from '../../mixins/RouterMixin'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
+import ContactDetails from '../ContactDetails.vue'
+import ContactsList from '../ContactsList.vue'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import RouterMixin from '../../mixins/RouterMixin.js'
 
 export default {
 	name: 'ContactsContent',
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index d276bad1..22be2dad 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -20,13 +20,11 @@
   -
   -->
 <template>
-	<AppNavigationItem
-		:key="circle.key"
+	<AppNavigationItem :key="circle.key"
 		:title="circle.displayName"
 		:to="circle.router">
 		<template #icon>
-			<IconCircles
-				:size="20" />
+			<IconCircles :size="20" />
 		</template>
 		<template v-if="loadingAction" slot="actions">
 			<ActionText>
@@ -38,28 +36,24 @@
 		</template>
 
 		<template v-else slot="actions">
-			<ActionButton
-				v-if="circle.canManageMembers"
+			<ActionButton v-if="circle.canManageMembers"
 				:close-after-click="true"
 				@click="addMemberToCircle">
 				<template #icon>
-					<IconAdd
-						:size="20" />
+					<IconAdd :size="20" />
 				</template>
 				{{ t('contacts', 'Add member') }}
 			</ActionButton>
 
 			<!-- copy circle link -->
-			<ActionLink
-				:href="circleUrl"
+			<ActionLink :href="circleUrl"
 				:icon="copyLinkIcon"
 				@click.stop.prevent="copyToClipboard(circleUrl)">
 				{{ copyButtonText }}
 			</ActionLink>
 
 			<!-- leave circle -->
-			<ActionButton
-				v-if="circle.canLeave"
+			<ActionButton v-if="circle.canLeave"
 				@click="confirmLeaveCircle">
 				{{ t('contacts', 'Leave circle') }}
 				<ExitToApp slot="icon"
@@ -68,8 +62,7 @@
 			</ActionButton>
 
 			<!-- join circle -->
-			<ActionButton
-				v-else-if="!circle.isMember && circle.canJoin"
+			<ActionButton v-else-if="!circle.isMember && circle.canJoin"
 				:disabled="loadingJoin"
 				@click="joinCircle">
 				{{ joinButtonTitle }}
@@ -79,12 +72,10 @@
 			</ActionButton>
 
 			<!-- delete circle -->
-			<ActionButton
-				v-if="circle.canDelete"
+			<ActionButton v-if="circle.canDelete"
 				@click="confirmDeleteCircle">
 				<template #icon>
-					<IconDelete
-						:size="20" />
+					<IconDelete :size="20" />
 				</template>
 				{{ t('contacts', 'Delete circle') }}
 			</ActionButton>
@@ -99,19 +90,19 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import ExitToApp from 'vue-material-design-icons/ExitToApp'
-import IconAdd from 'vue-material-design-icons/Plus'
-import IconDelete from 'vue-material-design-icons/Delete'
-import LocationEnter from 'vue-material-design-icons/LocationEnter'
-import IconCircles from '../Icons/IconCircles'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import ExitToApp from 'vue-material-design-icons/ExitToApp.vue'
+import IconAdd from 'vue-material-design-icons/Plus.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+import LocationEnter from 'vue-material-design-icons/LocationEnter.vue'
+import IconCircles from '../Icons/IconCircles.vue'
 import Circle from '../../models/circle.ts'
-import CircleActionsMixin from '../../mixins/CircleActionsMixin'
+import CircleActionsMixin from '../../mixins/CircleActionsMixin.js'
 
 export default {
 	name: 'CircleNavigationItem',
diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue
index a355bde3..9cb402f6 100644
--- a/src/components/AppNavigation/ContactsSettings.vue
+++ b/src/components/AppNavigation/ContactsSettings.vue
@@ -62,11 +62,11 @@
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import SettingsAddressbook from './Settings/SettingsAddressbook'
-import SettingsNewAddressbook from './Settings/SettingsNewAddressbook'
-import SettingsImportContacts from './Settings/SettingsImportContacts'
-import SettingsSortContacts from './Settings/SettingsSortContacts'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import SettingsAddressbook from './Settings/SettingsAddressbook.vue'
+import SettingsNewAddressbook from './Settings/SettingsNewAddressbook.vue'
+import SettingsImportContacts from './Settings/SettingsImportContacts.vue'
+import SettingsSortContacts from './Settings/SettingsSortContacts.vue'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import { CONTACTS_SETTINGS } from '../../models/constants.ts'
 import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection } from '@nextcloud/vue'
 
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index adfd3cf9..9ffad9ba 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -20,38 +20,30 @@
   -
   -->
 <template>
-	<AppNavigationItem
-		:key="group.key"
+	<AppNavigationItem :key="group.key"
 		:to="group.router"
 		:title="group.name">
 		<template #icon>
-			<IconContact
-				:size="20" />
+			<IconContact :size="20" />
 		</template>
 		<template slot="actions">
-			<ActionButton
-				:close-after-click="true"
+			<ActionButton :close-after-click="true"
 				@click="addContactsToGroup(group)">
 				<template #icon>
-					<IconAdd
-						:size="20" />
+					<IconAdd :size="20" />
 				</template>
 				{{ t('contacts', 'Add contacts') }}
 			</ActionButton>
-			<ActionButton
-				:close-after-click="true"
+			<ActionButton :close-after-click="true"
 				@click="downloadGroup(group)">
 				<template #icon>
-					<IconDownload
-						:size="20" />
+					<IconDownload :size="20" />
 				</template>
 				{{ t('contacts', 'Download') }}
 			</ActionButton>
-			<ActionButton
-				@click="emailGroup(group)">
+			<ActionButton @click="emailGroup(group)">
 				<template #icon>
-					<IconEmail
-						:size="20" />
+					<IconEmail :size="20" />
 				</template>
 				{{ t('contacts', 'Send email') }}
 			</ActionButton>
@@ -70,13 +62,13 @@ import { emit } from '@nextcloud/event-bus'
 import download from 'downloadjs'
 import moment from 'moment'
 
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import IconContact from 'vue-material-design-icons/AccountMultiple'
-import IconAdd from 'vue-material-design-icons/Plus'
-import IconDownload from 'vue-material-design-icons/Download'
-import IconEmail from 'vue-material-design-icons/Email'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import IconAdd from 'vue-material-design-icons/Plus.vue'
+import IconDownload from 'vue-material-design-icons/Download.vue'
+import IconEmail from 'vue-material-design-icons/Email.vue'
 
 export default {
 	name: 'GroupNavigationItem',
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 7e1bf430..bc26c08d 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -40,8 +40,7 @@
 					params: { selectedGroup: GROUP_ALL_CONTACTS },
 				}">
 				<template #icon>
-					<IconContact
-						:size="20" />
+					<IconContact :size="20" />
 				</template>
 				<template #counter>
 					<NcCounterBubble v-if="sortedContacts.length">
@@ -61,8 +60,7 @@
 				icon="icon-category-monitoring" />
 
 			<!-- Not grouped group -->
-			<AppNavigationItem
-				v-if="ungroupedContacts.length > 0"
+			<AppNavigationItem v-if="ungroupedContacts.length > 0"
 				id="notgrouped"
 				:title="GROUP_NO_GROUP_CONTACTS"
 				:to="{
@@ -70,8 +68,7 @@
 					params: { selectedGroup: GROUP_NO_GROUP_CONTACTS },
 				}">
 				<template #icon>
-					<IconUser
-						:size="20" />
+					<IconUser :size="20" />
 				</template>
 				<template #counter>
 					<NcCounterBubble v-if="ungroupedContacts.length">
@@ -81,8 +78,7 @@
 			</AppNavigationItem>
 
 			<!-- Recently contacted group -->
-			<AppNavigationItem
-				v-if="isContactsInteractionEnabled && recentlyContactedContacts && recentlyContactedContacts.contacts.length > 0"
+			<AppNavigationItem v-if="isContactsInteractionEnabled && recentlyContactedContacts && recentlyContactedContacts.contacts.length > 0"
 				id="recentlycontacted"
 				:title="GROUP_RECENTLY_CONTACTED"
 				:to="{
@@ -90,8 +86,7 @@
 					params: { selectedGroup: GROUP_RECENTLY_CONTACTED },
 				}">
 				<template #icon>
-					<IconRecentlyContacted
-						:size="20" />
+					<IconRecentlyContacted :size="20" />
 				</template>
 				<template #counter>
 					<NcCounterBubble v-if="recentlyContactedContacts.contacts.length">
@@ -100,8 +95,7 @@
 				</template>
 			</AppNavigationItem>
 
-			<AppNavigationCaption
-				id="newgroup"
+			<AppNavigationCaption id="newgroup"
 				:force-menu="true"
 				:menu-open.sync="isNewGroupMenuOpen"
 				:title="t('contacts', 'Groups')"
@@ -117,31 +111,27 @@
 						</template>
 						{{ createGroupError ? createGroupError : t('contacts', 'Create a new group') }}
 					</ActionText>
-					<ActionInput
-						icon=""
+					<ActionInput icon=""
 						:placeholder="t('contacts','Group name')"
 						@submit.prevent.stop="createNewGroup" />
 				</template>
 			</AppNavigationCaption>
 
 			<!-- Custom groups -->
-			<GroupNavigationItem
-				v-for="group in ellipsisGroupsMenu"
+			<GroupNavigationItem v-for="group in ellipsisGroupsMenu"
 				:key="group.key"
 				:group="group" />
 
 			<template v-if="isCirclesEnabled">
 				<!-- Toggle groups ellipsis -->
-				<AppNavigationItem
-					v-if="groupsMenu.length > ELLIPSIS_COUNT"
+				<AppNavigationItem v-if="groupsMenu.length > ELLIPSIS_COUNT"
 					:title="collapseGroupsTitle"
 					class="app-navigation__collapse"
 					icon=""
 					@click="onToggleGroups" />
 
 				<!-- New circle button caption and modal -->
-				<AppNavigationCaption
-					id="newcircle"
+				<AppNavigationCaption id="newcircle"
 					:title="t('contacts', 'Circles')">
 					<template #actions>
 						<NcActionButton @click="toggleNewCircleModal">
@@ -159,14 +149,12 @@
 
 				<template v-if="circlesMenu.length > 0">
 					<!-- Circles -->
-					<CircleNavigationItem
-						v-for="circle in ellipsisCirclesMenu"
+					<CircleNavigationItem v-for="circle in ellipsisCirclesMenu"
 						:key="circle.key"
 						:circle="circle" />
 
 					<!-- Toggle circles ellipsis -->
-					<AppNavigationItem
-						v-if="circlesMenu.length > ELLIPSIS_COUNT"
+					<AppNavigationItem v-if="circlesMenu.length > ELLIPSIS_COUNT"
 						:title="collapseCirclesTitle"
 						class="app-navigation__collapse"
 						icon=""
@@ -203,33 +191,33 @@
 <script>
 import { GROUP_ALL_CONTACTS, CHART_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC, CONTACTS_SETTINGS } from '../../models/constants.ts'
 
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import naturalCompare from 'string-natural-compare'
 
-import CircleNavigationItem from './CircleNavigationItem'
+import CircleNavigationItem from './CircleNavigationItem.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
-import ContactsSettings from './ContactsSettings'
-import GroupNavigationItem from './GroupNavigationItem'
-import NewCircleIntro from '../EntityPicker/NewCircleIntro'
-
-import isCirclesEnabled from '../../services/isCirclesEnabled'
-import isContactsInteractionEnabled from '../../services/isContactsInteractionEnabled'
-import IconContact from 'vue-material-design-icons/AccountMultiple'
-import IconUser from 'vue-material-design-icons/Account'
-import IconRecentlyContacted from '../Icons/IconRecentlyContacted'
-import IconAdd from 'vue-material-design-icons/Plus'
-import IconError from 'vue-material-design-icons/AlertCircle'
-
-import RouterMixin from '../../mixins/RouterMixin'
+import ContactsSettings from './ContactsSettings.vue'
+import GroupNavigationItem from './GroupNavigationItem.vue'
+import NewCircleIntro from '../EntityPicker/NewCircleIntro.vue'
+
+import isCirclesEnabled from '../../services/isCirclesEnabled.js'
+import isContactsInteractionEnabled from '../../services/isContactsInteractionEnabled.js'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import IconUser from 'vue-material-design-icons/Account.vue'
+import IconRecentlyContacted from '../Icons/IconRecentlyContacted.vue'
+import IconAdd from 'vue-material-design-icons/Plus.vue'
+import IconError from 'vue-material-design-icons/AlertCircle.vue'
+
+import RouterMixin from '../../mixins/RouterMixin.js'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index b3d50408..cd976f96 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -45,16 +45,14 @@
 			<!-- popovermenu -->
 			<Actions class="addressbook__menu" menu-align="right">
 				<!-- copy addressbook link -->
-				<ActionLink
-					:href="addressbook.url"
+				<ActionLink :href="addressbook.url"
 					:icon="copyLinkIcon"
 					@click.stop.prevent="copyToClipboard(addressbookUrl)">
 					{{ copyButtonText }}
 				</ActionLink>
 
 				<!-- download addressbook -->
-				<ActionLink
-					:href="addressbook.url + '?export'">
+				<ActionLink :href="addressbook.url + '?export'">
 					<template #icon>
 						<IconDownload :size="20" />
 					</template>
@@ -113,22 +111,22 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import IconDownload from 'vue-material-design-icons/Download'
-import IconRename from 'vue-material-design-icons/Pencil'
-import IconDelete from 'vue-material-design-icons/Delete'
-import IconContact from 'vue-material-design-icons/AccountMultiple'
-import IconShare from 'vue-material-design-icons/ShareVariant'
-import ShareAddressBook from './SettingsAddressbookShare'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import IconDownload from 'vue-material-design-icons/Download.vue'
+import IconRename from 'vue-material-design-icons/Pencil.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import IconShare from 'vue-material-design-icons/ShareVariant.vue'
+import ShareAddressBook from './SettingsAddressbookShare.vue'
 import { showError } from '@nextcloud/dialogs'
 
-import CopyToClipboardMixin from '../../../mixins/CopyToClipboardMixin'
+import CopyToClipboardMixin from '../../../mixins/CopyToClipboardMixin.js'
 
 export default {
 	name: 'SettingsAddressbook',
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
index c1583e35..f54d50fb 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
@@ -22,8 +22,7 @@
 
 <template>
 	<div class="addressbook-shares">
-		<Multiselect
-			id="users-groups-search"
+		<Multiselect id="users-groups-search"
 			:options="usersOrGroups"
 			:searchable="true"
 			:internal-search="false"
@@ -48,10 +47,10 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import client from '../../../services/cdav'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import client from '../../../services/cdav.js'
 
-import addressBookSharee from './SettingsAddressbookSharee'
+import addressBookSharee from './SettingsAddressbookSharee.vue'
 import debounce from 'debounce'
 import { urldecode } from '../../../utils/url.js'
 
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
index 75a8c043..91cb9a6d 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
@@ -30,8 +30,7 @@
 			{{ sharee.displayName }}
 		</span>
 		<span class="addressbook-sharee__utils">
-			<input
-				:id="uid"
+			<input :id="uid"
 				:checked="writeable"
 				:disabled="loading"
 				class="checkbox"
@@ -56,11 +55,11 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import IconDelete from 'vue-material-design-icons/Delete'
-import IconGroup from 'vue-material-design-icons/AccountMultiple'
-import IconUser from 'vue-material-design-icons/Account'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconGroup from 'vue-material-design-icons/AccountMultiple.vue'
+import IconUser from 'vue-material-design-icons/Account.vue'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 export default {
 	name: 'SettingsAddressbookSharee',
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index 2eac8403..31834f75 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -36,8 +36,7 @@
 				@close="toggleModal">
 				<section class="import-contact__modal-addressbook">
 					<h3>{{ t('contacts', 'Import contacts') }}</h3>
-					<Multiselect
-						v-if="!isSingleAddressbook"
+					<Multiselect v-if="!isSingleAddressbook"
 						id="select-addressbook"
 						v-model="selectedAddressbook"
 						:allow-empty="false"
@@ -58,8 +57,7 @@
 						type="file"
 						class="hidden-visually"
 						@change="processFile">
-					<Button
-						:disabled="loading"
+					<Button :disabled="loading"
 						class="import-contact__button import-contact__button--local"
 						@click="clickImportInput">
 						<template #icon>
@@ -67,8 +65,7 @@
 						</template>
 						{{ t('contacts', 'Select local file') }}
 					</Button>
-					<Button
-						type="primary"
+					<Button type="primary"
 						:disabled="loading"
 						class="import-contact__button import-contact__button--files"
 						@click="openPicker">
@@ -95,18 +92,18 @@
 </template>
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { encodePath } from '@nextcloud/paths'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
-import IconUpload from 'vue-material-design-icons/Upload'
-import IconError from 'vue-material-design-icons/AlertCircle'
-import IconFolder from 'vue-material-design-icons/Folder'
+import IconUpload from 'vue-material-design-icons/Upload.vue'
+import IconError from 'vue-material-design-icons/AlertCircle.vue'
+import IconFolder from 'vue-material-design-icons/Folder.vue'
 
 const CancelToken = axios.CancelToken
 
diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
index 52de5e4e..2ecec899 100644
--- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
@@ -49,7 +49,7 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import IconAdd from 'vue-material-design-icons/Plus'
+import IconAdd from 'vue-material-design-icons/Plus.vue'
 
 export default {
 	name: 'SettingsNewAddressbook',
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index 839bd770..9f40df50 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -23,8 +23,7 @@
 <template>
 	<div class="sort-contacts">
 		<IconList class="settings-line__icon" />
-		<Multiselect
-			id="sort-by"
+		<Multiselect id="sort-by"
 			:value="orderKeyOption"
 			:searchable="false"
 			:allow-empty="false"
@@ -37,8 +36,8 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import IconList from 'vue-material-design-icons/FormatListBulletedSquare'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import IconList from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 
 export default {
 	name: 'SettingsSortContacts',
diff --git a/src/components/ChartTemplate.vue b/src/components/ChartTemplate.vue
index d6b2ccb4..a48dded8 100644
--- a/src/components/ChartTemplate.vue
+++ b/src/components/ChartTemplate.vue
@@ -8,8 +8,7 @@
 					selectedContact: data.key,
 				},
 			}">
-				<Avatar
-					:disable-tooltip="true"
+				<Avatar :disable-tooltip="true"
 					:display-name="data.fullName"
 					:is-no-user="true"
 					:size="60"
@@ -38,7 +37,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 export default {
 	name: 'ChartTemplate',
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index ac04c93e..4d919d53 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -26,8 +26,7 @@
 		<DetailsHeader>
 			<!-- avatar and upload photo -->
 			<template #avatar="{avatarSize}">
-				<Avatar
-					:disable-tooltip="true"
+				<Avatar :disable-tooltip="true"
 					:display-name="circle.displayName"
 					:is-no-user="true"
 					:size="avatarSize" />
@@ -35,8 +34,7 @@
 
 			<!-- display name -->
 			<template #title>
-				<input
-					v-model="circle.displayName"
+				<input v-model="circle.displayName"
 					:readonly="!circle.isOwner"
 					:placeholder="t('contacts', 'Circle name')"
 					type="text"
@@ -80,8 +78,7 @@
 				{{ t('contacts', 'Description') }}
 			</ContentHeading>
 
-			<RichContenteditable
-				:value.sync="circle.description"
+			<RichContenteditable :value.sync="circle.description"
 				:auto-complete="onAutocomplete"
 				:maxlength="1024"
 				:multiline="true"
@@ -129,21 +126,21 @@
 import { showError } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
-import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails'
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import RichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable'
+import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails.js'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import RichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 
-import Login from 'vue-material-design-icons/Login'
-import Logout from 'vue-material-design-icons/Logout'
-import IconDelete from 'vue-material-design-icons/Delete'
+import Login from 'vue-material-design-icons/Login.vue'
+import Logout from 'vue-material-design-icons/Logout.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
 
 import { CircleEdit, editCircle } from '../services/circles.ts'
-import CircleActionsMixin from '../mixins/CircleActionsMixin'
-import DetailsHeader from './DetailsHeader'
-import CircleConfigs from './CircleDetails/CircleConfigs'
-import ContentHeading from './CircleDetails/ContentHeading'
-import CirclePasswordSettings from './CircleDetails/CirclePasswordSettings'
+import CircleActionsMixin from '../mixins/CircleActionsMixin.js'
+import DetailsHeader from './DetailsHeader.vue'
+import CircleConfigs from './CircleDetails/CircleConfigs.vue'
+import ContentHeading from './CircleDetails/ContentHeading.vue'
+import CirclePasswordSettings from './CircleDetails/CirclePasswordSettings.vue'
 
 export default {
 	name: 'CircleDetails',
@@ -200,7 +197,7 @@ export default {
 		 */
 		onAutocomplete(search, callback) {
 			// TODO: implement autocompletion. Disabled for now
-			// eslint-disable-next-line node/no-callback-literal
+			// eslint-disable-next-line n/no-callback-literal
 			callback([])
 		},
 
diff --git a/src/components/CircleDetails/CircleConfigs.vue b/src/components/CircleDetails/CircleConfigs.vue
index fdd8dea6..aeeb0f03 100644
--- a/src/components/CircleDetails/CircleConfigs.vue
+++ b/src/components/CircleDetails/CircleConfigs.vue
@@ -43,8 +43,8 @@
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import ContentHeading from './ContentHeading'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import ContentHeading from './ContentHeading.vue'
 
 import { PUBLIC_CIRCLE_CONFIG } from '../../models/constants.ts'
 import Circle from '../../models/circle.ts'
diff --git a/src/components/CircleDetails/CirclePasswordSettings.vue b/src/components/CircleDetails/CirclePasswordSettings.vue
index 1547319b..f24911e2 100644
--- a/src/components/CircleDetails/CirclePasswordSettings.vue
+++ b/src/components/CircleDetails/CirclePasswordSettings.vue
@@ -47,21 +47,18 @@
 
 				<li class="unique-password">
 					<template v-if="showUniquePasswordInput">
-						<input
-							v-model="uniquePassword"
+						<input v-model="uniquePassword"
 							:disabled="loading.length > 0"
 							:placeholder="t('contacts', 'Unique password …')"
 							type="text"
 							@keyup.enter="saveUniquePassword">
-						<Button
-							type="tertiary-no-background"
+						<Button type="tertiary-no-background"
 							:disabled="loading.length > 0 || uniquePassword.length === 0"
 							@click="saveUniquePassword">
 							{{ t('contacts', 'Save') }}
 						</Button>
 					</template>
-					<Button
-						v-else-if="useUniquePassword"
+					<Button v-else-if="useUniquePassword"
 						class="change-unique-password"
 						@click="onClickChangePassword">
 						{{ t('contacts', 'Change unique password') }}
@@ -77,9 +74,9 @@
 </template>
 
 <script>
-import ContentHeading from './ContentHeading'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
+import ContentHeading from './ContentHeading.vue'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
 
 // Circle setting keys
 const ENFORCE_PASSWORD_PROTECTION = 'enforce_password'
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index e333ea43..9fe9f173 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -27,8 +27,7 @@
 			:title="t('contacts', 'No contact selected')"
 			:description="t('contacts', 'Select a contact on the list to begin')">
 			<template #icon>
-				<IconContact
-					:size="20" />
+				<IconContact :size="20" />
 			</template>
 		</EmptyContent>
 
@@ -36,8 +35,7 @@
 			<!-- contact header -->
 			<DetailsHeader>
 				<!-- avatar and upload photo -->
-				<ContactAvatar
-					slot="avatar"
+				<ContactAvatar slot="avatar"
 					:contact="contact"
 					@update-local-contact="updateLocalContact" />
 
@@ -258,36 +256,36 @@
 import { showError } from '@nextcloud/dialogs'
 import { stringify } from 'ical.js'
 import debounce from 'debounce'
-// eslint-disable-next-line import/no-unresolved, node/no-missing-import
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
 import PQueue from 'p-queue'
 import qr from 'qr-image'
 import Vue from 'vue'
 import { VueMasonryPlugin } from 'vue-masonry'
 
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import IconContact from 'vue-material-design-icons/AccountMultiple'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import IconDownload from 'vue-material-design-icons/Download'
-import IconDelete from 'vue-material-design-icons/Delete'
-import IconQr from 'vue-material-design-icons/Qrcode'
-import CakeIcon from 'vue-material-design-icons/Cake'
-import IconCopy from 'vue-material-design-icons/ContentCopy'
-
-import rfcProps from '../models/rfcProps'
-import validate from '../services/validate'
-
-import AddNewProp from './ContactDetails/ContactDetailsAddNewProp'
-import ContactAvatar from './ContactDetails/ContactDetailsAvatar'
-import ContactProperty from './ContactDetails/ContactDetailsProperty'
-import DetailsHeader from './DetailsHeader'
-import PropertyGroups from './Properties/PropertyGroups'
-import PropertyRev from './Properties/PropertyRev'
-import PropertySelect from './Properties/PropertySelect'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import IconDownload from 'vue-material-design-icons/Download.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconQr from 'vue-material-design-icons/Qrcode.vue'
+import CakeIcon from 'vue-material-design-icons/Cake.vue'
+import IconCopy from 'vue-material-design-icons/ContentCopy.vue'
+
+import rfcProps from '../models/rfcProps.js'
+import validate from '../services/validate.js'
+
+import AddNewProp from './ContactDetails/ContactDetailsAddNewProp.vue'
+import ContactAvatar from './ContactDetails/ContactDetailsAvatar.vue'
+import ContactProperty from './ContactDetails/ContactDetailsProperty.vue'
+import DetailsHeader from './DetailsHeader.vue'
+import PropertyGroups from './Properties/PropertyGroups.vue'
+import PropertyRev from './Properties/PropertyRev.vue'
+import PropertySelect from './Properties/PropertySelect.vue'
 
 Vue.use(VueMasonryPlugin)
 const updateQueue = new PQueue({ concurrency: 1 })
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index 66df1ca2..9bff1dc3 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -40,11 +40,11 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import rfcProps from '../../models/rfcProps'
-import Contact from '../../models/contact'
-import OrgChartsMixin from '../../mixins/OrgChartsMixin'
-import PropertyTitle from '../Properties/PropertyTitle'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import rfcProps from '../../models/rfcProps.js'
+import Contact from '../../models/contact.js'
+import OrgChartsMixin from '../../mixins/OrgChartsMixin.js'
+import PropertyTitle from '../Properties/PropertyTitle.vue'
 import ICAL from 'ical.js'
 
 export default {
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index 65a7cca0..3c52182c 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -32,16 +32,14 @@
 			@change="processFile">
 
 		<!-- Avatar display -->
-		<Avatar
-			:disable-tooltip="true"
+		<Avatar :disable-tooltip="true"
 			:display-name="contact.displayName"
 			:is-no-user="true"
 			:size="75"
 			:url="photoUrl"
 			class="contact-header-avatar__photo" />
 
-		<Actions
-			v-if="!isReadOnly || contact.photo"
+		<Actions v-if="!isReadOnly || contact.photo"
 			:force-menu="true"
 			:open.sync="opened"
 			class="contact-header-avatar__menu">
@@ -49,22 +47,19 @@
 				<IconImage :size="20" fill-color="#fff" />
 			</template>
 			<template v-if="!isReadOnly">
-				<ActionButton
-					@click.stop.prevent="selectFileInput">
+				<ActionButton @click.stop.prevent="selectFileInput">
 					<template #icon>
 						<IconUpload :size="20" />
 					</template>
 					{{ t('contacts', 'Upload a new picture') }}
 				</ActionButton>
-				<ActionButton
-					@click="selectFilePicker">
+				<ActionButton @click="selectFilePicker">
 					<template #icon>
 						<IconFolder :size="20" />
 					</template>
 					{{ t('contacts', 'Choose from Files') }}
 				</ActionButton>
-				<ActionButton
-					v-for="network in supportedSocial"
+				<ActionButton v-for="network in supportedSocial"
 					:key="network"
 					@click="getSocialAvatar(network)">
 					<template #icon>
@@ -76,16 +71,14 @@
 
 			<template v-if="contact.photo">
 				<!-- FIXME: the link seems to have a bigger font size than the button caption -->
-				<ActionLink
-					:href="`${contact.url}?photo`"
+				<ActionLink :href="`${contact.url}?photo`"
 					target="_blank">
 					<template #icon>
 						<IconDownload :size="20" />
 					</template>
 					{{ t('contacts', 'Download picture') }}
 				</ActionLink>
-				<ActionButton
-					v-if="!isReadOnly"
+				<ActionButton v-if="!isReadOnly"
 					@click="removePhoto">
 					<template #icon>
 						<IconDelete :size="20" />
@@ -98,16 +91,16 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import IconDownload from 'vue-material-design-icons/Download'
-import IconCloudDownload from 'vue-material-design-icons/CloudDownload'
-import IconDelete from 'vue-material-design-icons/Delete'
-import IconUpload from 'vue-material-design-icons/Upload'
-import IconFolder from 'vue-material-design-icons/Folder'
-import IconImage from 'vue-material-design-icons/Image'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import IconDownload from 'vue-material-design-icons/Download.vue'
+import IconCloudDownload from 'vue-material-design-icons/CloudDownload.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconUpload from 'vue-material-design-icons/Upload.vue'
+import IconFolder from 'vue-material-design-icons/Folder.vue'
+import IconImage from 'vue-material-design-icons/Image.vue'
 
 import { showError, showInfo, getFilePickerBuilder, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl, generateRemoteUrl } from '@nextcloud/router'
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index fe33352a..714b98c1 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -46,14 +46,14 @@
 
 <script>
 import { Property } from 'ical.js'
-import rfcProps from '../../models/rfcProps'
-import Contact from '../../models/contact'
+import rfcProps from '../../models/rfcProps.js'
+import Contact from '../../models/contact.js'
 
-import OrgChartsMixin from '../../mixins/OrgChartsMixin'
-import PropertyText from '../Properties/PropertyText'
-import PropertyMultipleText from '../Properties/PropertyMultipleText'
-import PropertyDateTime from '../Properties/PropertyDateTime'
-import PropertySelect from '../Properties/PropertySelect'
+import OrgChartsMixin from '../../mixins/OrgChartsMixin.js'
+import PropertyText from '../Properties/PropertyText.vue'
+import PropertyMultipleText from '../Properties/PropertyMultipleText.vue'
+import PropertyDateTime from '../Properties/PropertyDateTime.vue'
+import PropertySelect from '../Properties/PropertySelect.vue'
 
 export default {
 	name: 'ContactDetailsProperty',
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index 76d31d91..80c95620 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -37,8 +37,8 @@
 </template>
 
 <script>
-import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
-import ContactsListItem from './ContactsList/ContactsListItem'
+import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList.js'
+import ContactsListItem from './ContactsList/ContactsListItem.vue'
 import VirtualList from 'vue-virtual-scroll-list'
 
 export default {
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index 9252e4bc..37204df4 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -1,6 +1,5 @@
 <template>
-	<ListItem
-		:id="id"
+	<ListItem :id="id"
 		:key="source.key"
 		class="list-item-style envelope"
 		:title="source.displayName"
@@ -24,7 +23,7 @@
 
 <script>
 import { NcListItem as ListItem } from '@nextcloud/vue'
-import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 export default {
 	name: 'ContactsListItem',
diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue
index 1eef7309..a536e8ff 100644
--- a/src/components/DetailsHeader.vue
+++ b/src/components/DetailsHeader.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
 
 export default {
 	name: 'DetailsHeader',
diff --git a/src/components/EntityPicker/ContactsPicker.vue b/src/components/EntityPicker/ContactsPicker.vue
index 05fd9e98..0ef7334b 100644
--- a/src/components/EntityPicker/ContactsPicker.vue
+++ b/src/components/EntityPicker/ContactsPicker.vue
@@ -20,11 +20,11 @@
 import { subscribe } from '@nextcloud/event-bus'
 import pLimit from 'p-limit'
 
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import AddToGroupView from '../../views/Processing/AddToGroupView'
-import appendContactToGroup from '../../services/appendContactToGroup'
-import EntityPicker from './EntityPicker'
+import AddToGroupView from '../../views/Processing/AddToGroupView.vue'
+import appendContactToGroup from '../../services/appendContactToGroup.js'
+import EntityPicker from './EntityPicker.vue'
 
 export default {
 	name: 'ContactsPicker',
diff --git a/src/components/EntityPicker/EntityBubble.vue b/src/components/EntityPicker/EntityBubble.vue
index 47280e8f..d06f4d99 100644
--- a/src/components/EntityPicker/EntityBubble.vue
+++ b/src/components/EntityPicker/EntityBubble.vue
@@ -21,8 +21,7 @@
   -
   -->
 <template>
-	<UserBubble
-		class="entity-picker__bubble"
+	<UserBubble class="entity-picker__bubble"
 		:margin="0"
 		:size="22"
 		:display-name="label">
@@ -36,7 +35,7 @@
 </template>
 
 <script>
-import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble'
+import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
 export default {
 	name: 'EntityBubble',
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 8730eafd..4de077de 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/src/components/EntityPicker/EntityPicker.vue
@@ -20,16 +20,14 @@
 -->
 
 <template>
-	<Modal
-		size="normal"
+	<Modal size="normal"
 		@close="onCancel">
 		<!-- Wrapper for content & navigation -->
 		<div class="entity-picker">
 			<!-- Search -->
 			<div class="entity-picker__search">
 				<div class="entity-picker__search-icon icon-search" />
-				<input
-					ref="input"
+				<input ref="input"
 					v-model="searchQuery"
 					:placeholder="t('contacts', 'Search {types}', {types: searchPlaceholderTypes})"
 					class="entity-picker__search-input"
@@ -46,13 +44,11 @@
 
 			<template v-else>
 				<!-- Picked entities -->
-				<transition-group
-					v-if="Object.keys(selectionSet).length > 0"
+				<transition-group v-if="Object.keys(selectionSet).length > 0"
 					name="zoom"
 					tag="ul"
 					class="entity-picker__selection">
-					<EntityBubble
-						v-for="entity in selectionSet"
+					<EntityBubble v-for="entity in selectionSet"
 						:key="entity.key || `entity-${entity.type}-${entity.id}`"
 						v-bind="entity"
 						@delete="onDelete(entity)" />
@@ -81,14 +77,12 @@
 				</EmptyContent>
 
 				<div class="entity-picker__navigation">
-					<button
-						:disabled="loading"
+					<button :disabled="loading"
 						class="navigation__button-left"
 						@click="onCancel">
 						{{ t('contacts', 'Cancel') }}
 					</button>
-					<button
-						:disabled="isEmptySelection || loading"
+					<button :disabled="isEmptySelection || loading"
 						class="navigation__button-right primary"
 						@click="onSubmit">
 						{{ confirmLabel }}
@@ -102,13 +96,13 @@
 <script>
 import debounce from 'debounce'
 import VirtualList from 'vue-virtual-scroll-list'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import IconSearch from 'vue-material-design-icons/Magnify'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import IconSearch from 'vue-material-design-icons/Magnify.vue'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import EntityBubble from './EntityBubble'
-import EntitySearchResult from './EntitySearchResult'
+import EntityBubble from './EntityBubble.vue'
+import EntitySearchResult from './EntitySearchResult.vue'
 
 export default {
 	name: 'EntityPicker',
diff --git a/src/components/EntityPicker/EntitySearchResult.vue b/src/components/EntityPicker/EntitySearchResult.vue
index 609617cb..6cd3fe32 100644
--- a/src/components/EntityPicker/EntitySearchResult.vue
+++ b/src/components/EntityPicker/EntitySearchResult.vue
@@ -24,8 +24,7 @@
 		{{ t('contacts', 'Add {type}', {type: source.label.toLowerCase()}) }}
 	</h4>
 
-	<UserBubble
-		v-else
+	<UserBubble v-else
 		class="entity-picker__bubble"
 		:class="{'entity-picker__bubble--selected': isSelected}"
 		:display-name="source.label"
@@ -41,7 +40,7 @@
 </template>
 
 <script>
-import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble'
+import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
 export default {
 	name: 'EntitySearchResult',
diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue
index 96db20d1..d6242b52 100644
--- a/src/components/EntityPicker/NewCircleIntro.vue
+++ b/src/components/EntityPicker/NewCircleIntro.vue
@@ -20,15 +20,13 @@
 -->
 
 <template>
-	<Modal
-		size="normal"
+	<Modal size="normal"
 		@close="onCancel">
 		<!-- Wrapper for content & navigation -->
 		<div class="entity-picker">
 			<!-- Search -->
 			<div class="entity-picker__new">
-				<input
-					ref="input"
+				<input ref="input"
 					v-model="circleName"
 					:placeholder="t('contacts', 'New circle name')"
 					class="entity-picker__new-input"
@@ -42,8 +40,7 @@
 
 				<!-- Personal circle, TODO: IMPLEMENT -->
 				<template v-if="false">
-					<CheckboxRadioSwitch
-						:checked.sync="isPersonal"
+					<CheckboxRadioSwitch :checked.sync="isPersonal"
 						:disabled="loading !== false">
 						{{ t('contacts', 'Personal circle') }}
 					</CheckboxRadioSwitch>
@@ -54,8 +51,7 @@
 
 				<!-- Local circle -->
 				<template v-if="isGlobalScale">
-					<CheckboxRadioSwitch
-						:checked.sync="isLocal"
+					<CheckboxRadioSwitch :checked.sync="isLocal"
 						:disabled="loading !== false">
 						{{ t('contacts', 'Local circle') }}
 					</CheckboxRadioSwitch>
@@ -66,14 +62,12 @@
 			</div>
 
 			<div class="entity-picker__navigation">
-				<button
-					:disabled="loading"
+				<button :disabled="loading"
 					class="navigation__button-left"
 					@click="onCancel">
 					{{ t('contacts', 'Cancel') }}
 				</button>
-				<button
-					:disabled="isEmptyName || loading"
+				<button :disabled="isEmptyName || loading"
 					class="navigation__button-right primary"
 					@click="onSubmit">
 					{{ t('contacts', 'Create circle') }}
@@ -85,8 +79,8 @@
 
 <script>
 import { getCapabilities } from '@nextcloud/capabilities'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import { CIRCLE_DESC } from '../../models/constants.ts'
 
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index b73ed3f7..0bef24e0 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -32,16 +32,14 @@
 		<template v-else-if="!circle.isMember">
 			<EmptyContent :title="t('contacts', 'The list of members is only visible to members of this circle')">
 				<template #icon>
-					<IconContact
-						:size="20" />
+					<IconContact :size="20" />
 				</template>
 			</EmptyContent>
 		</template>
 		<template v-else>
 			<EmptyContent :title="t('contacts', 'There is no member in this circle')">
 				<template #icon>
-					<IconContact
-						:size="20" />
+					<IconContact :size="20" />
 				</template>
 			</EmptyContent>
 		</template>
@@ -53,16 +51,14 @@
 				@click="onShowPicker(circle.id)">
 				<template #icon>
 					<IconLoading v-if="loading" />
-					<IconAdd
-						:size="20" />
+					<IconAdd :size="20" />
 				</template>
 				{{ t('contacts', 'Add members') }}
 			</Button>
 			<Button v-if="isMobile"
 				@click="showCircleDetails">
 				<template #icon>
-					<IconInfo
-						:size="20" />
+					<IconInfo :size="20" />
 				</template>
 				{{ t('contacts', 'Show circle details') }}
 			</Button>
@@ -89,21 +85,21 @@
 </template>
 
 <script>
-import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
+import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList.js'
+import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import VirtualList from 'vue-virtual-scroll-list'
 
-import MembersListItem from './MembersList/MembersListItem'
-import EntityPicker from './EntityPicker/EntityPicker'
-import IconContact from 'vue-material-design-icons/AccountMultiple'
-import IconAdd from 'vue-material-design-icons/Plus'
-import IconInfo from 'vue-material-design-icons/InformationOutline'
-import RouterMixin from '../mixins/RouterMixin'
+import MembersListItem from './MembersList/MembersListItem.vue'
+import EntityPicker from './EntityPicker/EntityPicker.vue'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import IconAdd from 'vue-material-design-icons/Plus.vue'
+import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
+import RouterMixin from '../mixins/RouterMixin.js'
 
-import { getRecommendations, getSuggestions } from '../services/collaborationAutocompletion'
+import { getRecommendations, getSuggestions } from '../services/collaborationAutocompletion.js'
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
 import { SHARES_TYPES_MEMBER_MAP, CIRCLES_MEMBER_GROUPING } from '../models/constants.ts'
diff --git a/src/components/MembersList/MembersListItem.vue b/src/components/MembersList/MembersListItem.vue
index 227dd1f9..52b7f833 100644
--- a/src/components/MembersList/MembersListItem.vue
+++ b/src/components/MembersList/MembersListItem.vue
@@ -37,8 +37,7 @@
 		<!-- Accept invite -->
 		<template v-if="!loading && isPendingApproval && circle.canManageMembers">
 			<Actions>
-				<ActionButton
-					@click="acceptMember">
+				<ActionButton @click="acceptMember">
 					<template #icon>
 						<IconCheck :size="20" />
 					</template>
@@ -46,8 +45,7 @@
 				</ActionButton>
 			</Actions>
 			<Actions>
-				<ActionButton
-					@click="deleteMember">
+				<ActionButton @click="deleteMember">
 					<template #icon>
 						<IconClose :size="20" />
 					</template>
@@ -71,8 +69,7 @@
 							:size="16"
 							decorative />
 					</ActionText>
-					<ActionButton
-						v-for="level in availableLevelsChange"
+					<ActionButton v-for="level in availableLevelsChange"
 						:key="level"
 						icon=""
 						@click="changeLevel(level)">
@@ -103,21 +100,21 @@
 <script>
 import { CIRCLES_MEMBER_LEVELS, MemberLevels, MemberStatus } from '../../models/constants.ts'
 
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon'
-import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import IconDelete from 'vue-material-design-icons/Delete'
-import IconCheck from 'vue-material-design-icons/Check'
-import IconClose from 'vue-material-design-icons/Close'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon.js'
+import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionTe