[stable34] fix: improve form validation feedback for login, account creation, and sharing

apps/files_sharing/src/views/SharingDetailsTab.vue

@@ -166,14 +166,16 @@
 					<NcDateTimePickerNative
 						v-if="hasExpirationDate"
 						id="share-date-picker"
+						ref="expireDate"
 						:model-value="new Date(share.expireDate ?? dateTomorrow)"
 						:min="dateTomorrow"
 						:max="maxExpirationDateEnforced"
 						hide-label
 						:label="t('files_sharing', 'Expiration date')"
 						:placeholder="t('files_sharing', 'Expiration date')"
 						type="date"
-						@input="onExpirationChange" />
+						@update:model-value="onExpirationChange"
+						@change="checkExpirationDateValidity" />
 					<NcCheckboxRadioSwitch
 						v-if="isPublicShare"
 						v-model="share.hideDownload"
@@ -895,6 +897,32 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Check native `min` / `max` constraints on the expiration date field.
+		 * Prefer the change event target when available (same pattern as SharingEntryLink).
+		 *
+		 * @param {Event} [event]
+		 * @return {boolean}
+		 */
+		checkExpirationDateValidity(event) {
+			const fromEvent = event?.target
+			const fromRef = this.$refs.expireDate?.$el?.querySelector?.('input')
+			const input = fromEvent instanceof HTMLInputElement
+				? fromEvent
+				: (fromRef instanceof HTMLInputElement ? fromRef : null)
+
+			if (!input) {
+				return true
+			}
+
+			input.setCustomValidity('')
+			const isValid = input.checkValidity()
+			if (!isValid) {
+				input.reportValidity()
+			}
+			return isValid
+		},
+
 		/**
 		 * Set a share attribute on the current share
 		 *
@@ -1137,6 +1165,8 @@ export default {
 
 			if (!this.hasExpirationDate) {
 				this.share.expireDate = ''
+			} else if (!this.checkExpirationDateValidity()) {
+				return
 			}
 
 			if (this.isNewShare) {
@@ -1469,4 +1499,9 @@ export default {
 		}
 	}
 }
+
+:deep(input:user-invalid) {
+	--input-border-color: var(--color-border-error, var(--color-error)) !important;
+	border-color: var(--color-border-error, var(--color-error)) !important;
+}
 </style>

apps/settings/src/components/Users/UserFormFields.vue

@@ -30,7 +30,9 @@
 			autocomplete="off"
 			spellcheck="false"
 			pattern="[a-zA-Z0-9 _\.@\-']+"
-			:required="fieldConfig.username?.required" />
+			:required="fieldConfig.username?.required"
+			@input="updateUsernameValidity"
+			@blur="updateUsernameValidity" />
 
 		<NcTextField
 			v-model="formData.displayName"

core/src/components/login/LoginForm.vue

@@ -63,7 +63,7 @@
 				:spellchecking="false"
 				:autocomplete="autoCompleteAllowed ? 'username' : 'off'"
 				required
-				:error="userNameInputLengthIs255"
+				:error="userNameError"
 				:helper-text="userInputHelperText"
 				data-login-form-input-user
 				@change="updateUsername" />
@@ -241,6 +241,10 @@ export default {
 				|| this.throttleDelay > 5000
 		},
 
+		userNameError() {
+			return this.isError || this.userNameInputLengthIs255
+		},
+
 		errorLabel() {
 			if (this.invalidPassword) {
 				return t('core', 'Wrong login or password.')

core/src/tests/components/Login/LoginForm.spec.ts

@@ -66,6 +66,18 @@ describe('core: LoginForm', () => {
 		expect(input.value).toBe('test-user')
 	})
 
+	it('marks username field as error when login credentials are invalid', () => {
+		const page = render(LoginForm, {
+			props: {
+				errors: ['invalidpassword'],
+				username: 'wrong-user',
+			},
+		})
+
+		const input = page.getByRole('textbox', { name: /Account name or email/ })
+		expect(input.closest('.input-field--error')).not.toBeNull()
+	})
+
 	describe('', () => {
 		beforeAll(() => {
 			vi.useFakeTimers()

dist/5482-5482.js.map.license

@@ -0,0 +1 @@
+5482-5482.js.license