refactor(core): remove usage of Vue mixins

As a preparation for modern Vue with composition API and especially
`script setup`.

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

Author: susnux

core/src/components/MainMenu.js

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import Vue from 'vue'
 import AppMenu from './AppMenu.vue'
 
@@ -12,13 +11,6 @@ import AppMenu from './AppMenu.vue'
  * This is the top left menu where users can navigate between different apps.
  */
 export function setUp() {
-	Vue.mixin({
-		methods: {
-			t,
-			n,
-		},
-	})
-
 	const container = document.getElementById('header-start__appmenu')
 	if (!container) {
 		// no container, possibly we're on a public page

core/src/components/UnifiedSearch/CustomDateRangeModal.vue

@@ -40,6 +40,7 @@
 </template>
 
 <script>
+import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePickerNative'
 import NcModal from '@nextcloud/vue/components/NcModal'
@@ -61,6 +62,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			t,
+		}
+	},
+
 	data() {
 		return {
 			dateFilter: { startFrom: null, endAt: null },

core/src/components/login/LoginForm.vue

@@ -51,22 +51,16 @@
 			<h2 class="login-form__headline" data-login-form-headline>
 				{{ headlineText }}
 			</h2>
-			<NcTextField
+			<LoginNameInput
 				id="user"
 				ref="user"
-				v-model="user"
-				:label="loginText"
-				name="user"
-				:maxlength="255"
+				:user.sync="user"
 				:class="{ shake: invalidPassword }"
-				autocapitalize="none"
-				:spellchecking="false"
-				:autocomplete="autoCompleteAllowed ? 'username' : 'off'"
+				:auto-complete-allowed="autoCompleteAllowed"
+				:allow-email="emailEnabled"
+				name="user"
 				required
-				:error="userNameInputLengthIs255"
-				:helper-text="userInputHelperText"
-				data-login-form-input-user
-				@change="updateUsername" />
+				data-login-form-input-user />
 
 			<NcPasswordField
 				id="password"
@@ -131,23 +125,20 @@ import debounce from 'debounce'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
 import LoginButton from './LoginButton.vue'
-import AuthMixin from '../../mixins/auth.js'
+import LoginNameInput from './LoginNameInput.vue'
 
 export default {
 	name: 'LoginForm',
 
 	components: {
 		LoginButton,
+		LoginNameInput,
 		NcCheckboxRadioSwitch,
 		NcPasswordField,
-		NcTextField,
 		NcNoteCard,
 	},
 
-	mixins: [AuthMixin],
-
 	props: {
 		username: {
 			type: String,
@@ -285,13 +276,6 @@ export default {
 		emailEnabled() {
 			return this.emailStates.every((state) => state === '1')
 		},
-
-		loginText() {
-			if (this.emailEnabled) {
-				return t('core', 'Account name or email')
-			}
-			return t('core', 'Account name')
-		},
 	},
 
 	watch: {
@@ -305,9 +289,9 @@ export default {
 
 	mounted() {
 		if (this.username === '') {
-			this.$refs.user.$refs.inputField.$refs.input.focus()
+			this.$refs.user.focus()
 		} else {
-			this.$refs.password.$refs.inputField.$refs.input.focus()
+			this.$refs.password.focus()
 		}
 	},
 

core/src/components/login/LoginNameInput.vue

@@ -0,0 +1,66 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts">
+export default {
+	// Attributes are forwarded to the input element instead of the wrapper,
+	// otherwise the `id` would be duplicated and break the label association.
+	inheritAttrs: false,
+}
+</script>
+
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import { useVModel } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+
+const props = defineProps<{
+	// eslint-disable-next-line vue/no-unused-properties
+	user: string
+	allowEmail?: boolean
+	autoCompleteAllowed?: boolean
+}>()
+
+defineEmits(['update:user'])
+
+defineExpose({
+	focus,
+})
+
+const userName = useVModel(props, 'user')
+
+const inputElement = ref<InstanceType<typeof NcTextField>>()
+
+const hasError = computed(() => userName.value.length >= 255)
+const helperText = computed(() => {
+	if (hasError.value) {
+		return t('core', 'Email length is at max (255)')
+	}
+	return ''
+})
+
+/**
+ * Focus the input element.
+ */
+function focus() {
+	inputElement.value?.focus()
+}
+</script>
+
+<template>
+	<NcTextField
+		id="user"
+		ref="inputElement"
+		v-bind="$attrs"
+		v-model="userName"
+		:label="allowEmail ? t('core', 'Account name or email') : t('core', 'Account name')"
+		name="user"
+		:maxlength="255"
+		autocapitalize="none"
+		:autocomplete="autoCompleteAllowed ? 'username' : 'off'"
+		:error="hasError"
+		:helper-text="helperText" />
+</template>

core/src/components/login/PasswordLessLoginForm.vue

@@ -51,6 +51,7 @@
 </template>
 
 <script type="ts">
+import { t } from '@nextcloud/l10n'
 import { getBaseUrl } from '@nextcloud/router'
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
 import { defineComponent } from 'vue'
@@ -105,6 +106,7 @@ export default defineComponent({
 
 	setup() {
 		return {
+			t,
 			supportsWebauthn: browserSupportsWebAuthn(),
 		}
 	},

core/src/components/login/ResetPassword.vue

@@ -7,17 +7,10 @@
 	<form class="reset-password-form" @submit.prevent="submit">
 		<h2>{{ t('core', 'Reset password') }}</h2>
 
-		<NcTextField
+		<LoginNameInput
 			id="user"
-			v-model="user"
-			name="user"
-			:maxlength="255"
-			autocapitalize="off"
-			:label="t('core', 'Login or email')"
-			:error="userNameInputLengthIs255"
-			:helper-text="userInputHelperText"
-			required
-			@change="updateUsername" />
+			:user.sync="user"
+			@update:user="updateUsername" />
 
 		<LoginButton :loading="loading" :value="t('core', 'Reset password')" />
 
@@ -45,26 +38,24 @@
 
 <script lang="ts">
 import axios from '@nextcloud/axios'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
 import LoginButton from './LoginButton.vue'
+import LoginNameInput from './LoginNameInput.vue'
 import logger from '../../logger.js'
-import AuthMixin from '../../mixins/auth.js'
 
 export default defineComponent({
 	name: 'ResetPassword',
 	components: {
 		LoginButton,
 		NcButton,
 		NcNoteCard,
-		NcTextField,
+		LoginNameInput,
 	},
 
-	mixins: [AuthMixin],
-
 	props: {
 		username: {
 			type: String,
@@ -77,6 +68,12 @@ export default defineComponent({
 		},
 	},
 
+	setup() {
+		return {
+			t,
+		}
+	},
+
 	data() {
 		return {
 			error: false,

core/src/components/login/UpdatePassword.vue

@@ -48,6 +48,7 @@
 
 <script>
 import Axios from '@nextcloud/axios'
+import { t } from '@nextcloud/l10n'
 import LoginButton from './LoginButton.vue'
 
 export default {
@@ -68,6 +69,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			t,
+		}
+	},
+
 	data() {
 		return {
 			error: false,

core/src/legacy-unified-search.js

@@ -4,30 +4,11 @@
  */
 
 import { getCSPNonce } from '@nextcloud/auth'
-import { n, t } from '@nextcloud/l10n'
-import { getLoggerBuilder } from '@nextcloud/logger'
 import Vue from 'vue'
 import UnifiedSearch from './views/LegacyUnifiedSearch.vue'
 
 __webpack_nonce__ = getCSPNonce()
 
-const logger = getLoggerBuilder()
-	.setApp('unified-search')
-	.detectUser()
-	.build()
-
-Vue.mixin({
-	data() {
-		return {
-			logger,
-		}
-	},
-	methods: {
-		t,
-		n,
-	},
-})
-
 export default new Vue({
 	el: '#unified-search',
 	name: 'UnifiedSearchRoot',

core/src/login.js

@@ -5,11 +5,8 @@
 
 import Vue from 'vue'
 import LoginView from './views/Login.vue'
-import Nextcloud from './mixins/Nextcloud.js'
 // eslint-disable-next-line no-unused-vars
 import OC from './OC/index.js' // TODO: Not needed but L10n breaks if removed
 
-Vue.mixin(Nextcloud)
-
 const View = Vue.extend(LoginView)
 new View().$mount('#login')