fix(code-style): Adjust JS code to our code style

This resolves 68 ESLint warnings about invalid code style.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/comments/src/comments-activity-tab.ts

@@ -24,7 +24,7 @@ export function registerCommentsPlugins() {
 
 			if (!ActivityTabPluginView) {
 				const { default: ActivityCommentAction } = await import('./views/ActivityCommentAction.vue')
-				/** @ts-expect-error Types are broken for Vue2 */
+				// @ts-expect-error Types are broken for Vue2
 				ActivityTabPluginView = Vue.extend(ActivityCommentAction)
 			}
 			ActivityTabPluginInstance = new ActivityTabPluginView({
@@ -50,7 +50,7 @@ export function registerCommentsPlugins() {
 		const { data: comments } = await getComments({ resourceType: 'files', resourceId: fileInfo.id }, { limit, offset })
 		logger.debug('Loaded comments', { fileInfo, comments })
 		const { default: CommentView } = await import('./views/ActivityCommentEntry.vue')
-		/** @ts-expect-error Types are broken for Vue2 */
+		// @ts-expect-error Types are broken for Vue2
 		const CommentsViewObject = Vue.extend(CommentView)
 
 		return comments.map((comment) => ({

apps/files/src/store/viewConfig.ts

@@ -59,8 +59,8 @@ export const useViewConfigStore = function(...args) {
 			 * Set the sorting key AND sort by ASC
 			 * The key param must be a valid key of a File object
 			 * If not found, will be searched within the File attributes
-			 * @param key
-			 * @param view
+			 * @param key Key to sort by
+			 * @param view View to set the sorting key for
 			 */
 			setSortingBy(key = 'basename', view = 'files') {
 				// Save new config
@@ -70,7 +70,7 @@ export const useViewConfigStore = function(...args) {
 
 			/**
 			 * Toggle the sorting direction
-			 * @param view
+			 * @param view view to set the sorting order for
 			 */
 			toggleSortingDirection(view = 'files') {
 				const config = this.getConfig(view) || { sorting_direction: 'asc' }

apps/files/src/views/FilesList.vue

@@ -410,7 +410,7 @@ export default defineComponent({
 
 		showCustomEmptyView() {
 			return !this.loading && this.isEmptyDir && this.currentView?.emptyView !== undefined
-		}
+		},
 	},
 
 	watch: {

apps/files_external/src/actions/enterCredentialsAction.ts

@@ -23,8 +23,15 @@ type CredentialResponse = {
 	password?: string,
 }
 
+/**
+ * Set credentials for external storage
+ *
+ * @param node The node for which to set the credentials
+ * @param login The username
+ * @param password The password
+ */
 async function setCredentials(node: Node, login: string, password: string): Promise<null|true> {
-	const configResponse = await axios.put(generateUrl('apps/files_external/userglobalstorages/{id}', node.attributes), {
+	const configResponse = await axios.put(generateUrl('apps/files_external/userglobalstorages/{id}', { id: node.attributes.id }), {
 		backendOptions: { user: login, password },
 	}) as AxiosResponse<StorageConfig>
 

apps/files_external/src/actions/inlineStorageCheckAction.ts

@@ -30,7 +30,8 @@ export const action = new FileAction({
 	/**
 	 * Use this function to check the storage availability
 	 * We then update the node attributes directly.
-	 * @param node
+	 *
+	 * @param node The node to render inline
 	 */
 	async renderInline(node: Node) {
 		let config = null as unknown as StorageConfig

apps/files_sharing/src/files_views/shares.spec.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 /* eslint-disable n/no-extraneous-import */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { OCSResponse } from '@nextcloud/typings/ocs'
 import { Folder, Navigation, View, getNavigation } from '@nextcloud/files'
 import { beforeEach, describe, expect, test, vi } from 'vitest'

apps/files_sharing/src/mixins/ShareRequests.js

@@ -26,10 +26,10 @@ export default {
 		 * @param {string} [data.password]  password to protect public link Share with
 		 * @param {number} [data.permissions]  1 = read; 2 = update; 4 = create; 8 = delete; 16 = share; 31 = all (default: 31, for public shares: 1)
 		 * @param {boolean} [data.sendPasswordByTalk] send the password via a talk conversation
-		 * @param {string} [data.expireDate] expire the shareautomatically after
+		 * @param {string} [data.expireDate] expire the share automatically after
 		 * @param {string} [data.label] custom label
 		 * @param {string} [data.attributes] Share attributes encoded as json
-		 * @param data.note
+		 * @param {string} data.note custom note to recipient
 		 * @return {Share} the new share
 		 * @throws {Error}
 		 */

apps/files_sharing/src/models/Share.ts

@@ -314,7 +314,7 @@ export default class Share {
 
 	/**
 	 * Get the shared item id
-		 */
+	 */
 	get fileSource(): number {
 		return this._share.file_source
 	}

apps/files_sharing/src/utils/GeneratePassword.ts

@@ -13,9 +13,9 @@ const config = new Config()
 const passwordSet = 'abcdefgijkmnopqrstwxyzABCDEFGHJKLMNPQRSTWXYZ23456789'
 
 /**
- * Generate a valid policy password or
- * request a valid password if password_policy
- * is enabled
+ * Generate a valid policy password or request a valid password if password_policy is enabled
+ *
+ * @param {boolean} verbose If enabled the the status is shown to the user via toast
  */
 export default async function(verbose = false): Promise<string> {
 	// password policy is enabled, let's request a pass

apps/files_sharing/src/views/SharingDetailsTab.vue

@@ -247,6 +247,7 @@
 import { emit } from '@nextcloud/event-bus'
 import { getLanguage } from '@nextcloud/l10n'
 import { ShareType } from '@nextcloud/sharing'
+import moment from '@nextcloud/moment'
 
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'

apps/files_sharing/src/views/SharingTab.vue

@@ -82,15 +82,19 @@
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
+import { getCurrentUser } from '@nextcloud/auth'
 import { orderBy } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { CollectionList } from 'nextcloud-vue-collections'
+
+import axios from '@nextcloud/axios'
+import moment from '@nextcloud/moment'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
-import Config from '../services/ConfigService.ts'
 import { shareWithTitle } from '../utils/SharedWithMe.js'
+
+import Config from '../services/ConfigService.ts'
 import Share from '../models/Share.ts'
 import ShareTypes from '../mixins/ShareTypes.js'
 import SharingEntryInternal from '../components/SharingEntryInternal.vue'
@@ -241,7 +245,7 @@ export default {
 		updateExpirationSubtitle(share) {
 			const expiration = moment(share.expireDate).unix()
 			this.$set(this.sharedWithMe, 'subtitle', t('files_sharing', 'Expires {relativetime}', {
-				relativetime: OC.Util.relativeModifiedDate(expiration * 1000),
+				relativetime: moment(expiration * 1000).fromNow(),
 			}))
 
 			// share have expired
@@ -310,7 +314,7 @@ export default {
 					// interval update
 					this.expirationInterval = setInterval(this.updateExpirationSubtitle, 10000, share)
 				}
-			} else if (this.fileInfo && this.fileInfo.shareOwnerId !== undefined ? this.fileInfo.shareOwnerId !== OC.currentUser : false) {
+			} else if (this.fileInfo && this.fileInfo.shareOwnerId !== undefined ? this.fileInfo.shareOwnerId !== getCurrentUser().uid : false) {
 				// Fallback to compare owner and current user.
 				this.sharedWithMe = {
 					displayName: this.fileInfo.shareOwner,

apps/files_versions/src/files_versions_tab.js

@@ -7,14 +7,14 @@ import Vue from 'vue'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import VersionTab from './views/VersionTab.vue'
-import VTooltip from 'v-tooltip'
+import VTooltipPlugin from 'v-tooltip'
 // eslint-disable-next-line n/no-missing-import, import/no-unresolved
 import BackupRestore from '@mdi/svg/svg/backup-restore.svg?raw'
 
 Vue.prototype.t = t
 Vue.prototype.n = n
 
-Vue.use(VTooltip)
+Vue.use(VTooltipPlugin)
 
 // Init Sharing tab component
 const View = Vue.extend(VersionTab)

apps/files_versions/src/views/VersionTab.vue

@@ -177,7 +177,7 @@ export default {
 		/**
 		 * Handle restored event from Version.vue
 		 *
-		 * @param {import('../utils/versions.ts').Version} version
+		 * @param {import('../utils/versions.ts').Version} version The version to restore
 		 */
 		async handleRestore(version) {
 			// Update local copy of fileInfo as rendering depends on it.
@@ -217,7 +217,7 @@ export default {
 
 		/**
 		 * Handle label-updated event from Version.vue
-		 * @param {import('../utils/versions.ts').Version} version
+		 * @param {import('../utils/versions.ts').Version} version The version to update
 		 */
 		handleLabelUpdateRequest(version) {
 			this.showVersionLabelForm = true
@@ -226,7 +226,7 @@ export default {
 
 		/**
 		 * Handle label-updated event from Version.vue
-		 * @param {string} newLabel
+		 * @param {string} newLabel The new label
 		 */
 		async handleLabelUpdate(newLabel) {
 			const oldLabel = this.editedVersion.label
@@ -246,8 +246,7 @@ export default {
 		/**
 		 * Handle deleted event from Version.vue
 		 *
-		 * @param {import('../utils/versions.ts').Version} version
-		 * @param {string} newName
+		 * @param {import('../utils/versions.ts').Version} version The version to delete
 		 */
 		async handleDelete(version) {
 			const index = this.versions.indexOf(version)

apps/settings/src/admin.js

@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { generateUrl } from '@nextcloud/router'
 import $ from 'jquery'
 
 window.addEventListener('DOMContentLoaded', () => {
 	$('#loglevel').change(function() {
-		$.post(OC.generateUrl('/settings/admin/log/level'), { level: $(this).val() }, () => {
+		$.post(generateUrl('/settings/admin/log/level'), { level: $(this).val() }, () => {
 			OC.Log.reload()
 		})
 	})
@@ -48,7 +49,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 		OC.msg.startSaving('#mail_settings_msg')
 		$.ajax({
-			url: OC.generateUrl('/settings/admin/mailsettings'),
+			url: generateUrl('/settings/admin/mailsettings'),
 			type: 'POST',
 			data: $('#mail_general_settings_form').serialize(),
 			success: () => {
@@ -68,7 +69,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 		OC.msg.startSaving('#mail_settings_msg')
 		$.ajax({
-			url: OC.generateUrl('/settings/admin/mailsettings/credentials'),
+			url: generateUrl('/settings/admin/mailsettings/credentials'),
 			type: 'POST',
 			data: $('#mail_credentials_settings').serialize(),
 			success: () => {
@@ -94,7 +95,7 @@ window.addEventListener('DOMContentLoaded', () => {
 		OC.msg.startAction('#sendtestmail_msg', t('settings', 'Sending…'))
 
 		$.ajax({
-			url: OC.generateUrl('/settings/admin/mailtest'),
+			url: generateUrl('/settings/admin/mailtest'),
 			type: 'POST',
 			success: () => {
 				OC.msg.finishedSuccess('#sendtestmail_msg', t('settings', 'Email sent'))

apps/settings/src/components/AuthToken.vue

@@ -175,8 +175,8 @@ export default defineComponent({
 			return this.token.type === TokenType.PERMANENT_TOKEN
 		},
 		/**
-		 * Object ob the current user agend used by the token
-		 * @return Either an object containing user agent information or null if unknown
+		 * Object ob the current user agent used by the token
+		 * This either returns an object containing user agent information or `null` if unknown
 		 */
 		client() {
 			// pretty format sync client user agent

apps/settings/src/components/BasicSettings/BackgroundJob.vue

@@ -56,6 +56,7 @@
 			@update:checked="onBackgroundJobModeChanged">
 			{{ t('settings', 'Cron (Recommended)') }}
 		</NcCheckboxRadioSwitch>
+		<!-- eslint-disable-next-line vue/no-v-html The translation is sanitized-->
 		<em v-html="cronLabel" />
 	</NcSettingsSection>
 </template>
@@ -111,7 +112,7 @@ export default {
 				desc += '<br>' + t('settings', 'The PHP POSIX extension is required. See {linkstart}PHP documentation{linkend} for more details.', {
 					linkstart: '<a target="_blank" rel="noreferrer nofollow" class="external" href="https://www.php.net/manual/en/book.posix.php">',
 					linkend: '</a>',
-				}, undefined, { escape: false, sanitize: false })
+				}, undefined, { escape: false })
 			}
 			return desc
 		},

apps/settings/src/components/Encryption.vue

@@ -53,7 +53,15 @@
 				</template>
 			</div>
 
-			<div v-else-if="externalBackendsEnabled" v-html="migrationMessage" />
+			<div v-else-if="externalBackendsEnabled">
+				{{
+					t(
+						'settings',
+						'You need to migrate your encryption keys from the old encryption (ownCloud <= 8.0) to the new one. Please enable the "Default encryption module" and run {command}',
+						{ command: '"occ encryption:migrate"' },
+					)
+				}}
+			</div>
 		</div>
 	</NcSettingsSection>
 </template>
@@ -92,13 +100,6 @@ export default {
 			defaultCheckedModule: Object.entries(encryptionModules).find((module) => module[1].default)[0],
 		}
 	},
-	computed: {
-		migrationMessage() {
-			return t('settings', 'You need to migrate your encryption keys from the old encryption (ownCloud <= 8.0) to the new one. Please enable the "Default encryption module" and run {command}', {
-				command: '"occ encryption:migrate"',
-			})
-		},
-	},
 	methods: {
 		displayWarning() {
 			if (!this.encryptionEnabled) {

apps/settings/src/components/Markdown.vue

@@ -4,6 +4,7 @@
 -->
 
 <template>
+	<!-- eslint-disable-next-line vue/no-v-html This is rendered markdown so should be "safe" -->
 	<div class="settings-markdown" v-html="renderMarkdown" />
 </template>
 

apps/settings/src/components/PersonalInfo/BirthdaySection.vue

@@ -8,13 +8,11 @@
 			:input-id="inputId"
 			:readable="birthdate.readable" />
 
-		<template>
-			<NcDateTimePickerNative :id="inputId"
-				type="date"
-				label=""
-				:value="value"
-				@input="onInput" />
-		</template>
+		<NcDateTimePickerNative :id="inputId"
+			type="date"
+			label=""
+			:value="value"
+			@input="onInput" />
 
 		<p class="property__helper-text-message">
 			{{ t('settings', 'Enter your date of birth') }}
@@ -66,7 +64,7 @@ export default {
 			get() {
 				return new Date(this.birthdate.value)
 			},
-			/** @param {Date} value */
+			/** @param {Date} value The date to set */
 			set(value) {
 				const day = value.getDate().toString().padStart(2, '0')
 				const month = (value.getMonth() + 1).toString().padStart(2, '0')

apps/settings/src/components/PersonalInfo/DetailsSection.vue

@@ -20,6 +20,7 @@
 			<div class="details__quota">
 				<CircleSlice :size="20" />
 				<div class="details__quota-info">
+					<!-- eslint-disable-next-line vue/no-v-html -->
 					<p class="details__quota-text" v-html="quotaText" />
 					<NcProgressBar size="medium"
 						:value="usageRelative"
@@ -32,8 +33,9 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
-import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+import { t } from '@nextcloud/l10n'
 
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 import Account from 'vue-material-design-icons/Account.vue'
 import CircleSlice from 'vue-material-design-icons/CircleSlice3.vue'
 
@@ -64,12 +66,14 @@ export default {
 	computed: {
 		quotaText() {
 			if (quota === SPACE_UNLIMITED) {
-				return t('settings', 'You are using <strong>{usage}</strong>', { usage })
+				return t('settings', 'You are using {s}{usage}{/s}', { usage, s: '<strong>', '/s': '</strong>' }, undefined, { escape: false })
 			}
 			return t(
 				'settings',
-				'You are using <strong>{usage}</strong> of <strong>{totalSpace}</strong> (<strong>{usageRelative}%</strong>)',
-				{ usage, totalSpace, usageRelative },
+				'You are using {s}{usage}{/s} of {s}{totalSpace}{/s} ({s}{usageRelative}%{/s})',
+				{ usage, totalSpace, usageRelative, s: '<strong>', '/s': '</strong>' },
+				undefined,
+				{ escape: false },
 			)
 		},
 	},