i18n: Required fields text to "{Field} required" format

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -120,7 +120,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 								<Controller
 									control={control}
 									name='parentRoom'
-									rules={{ required: t('error-the-field-is-required', { field: t('Discussion_target_channel') }) }}
+									rules={{ required: t('Required_field', { field: t('Discussion_target_channel') }) }}
 									render={({ field: { name, onBlur, onChange, value } }) => (
 										<RoomAutoComplete
 											name={name}
@@ -152,7 +152,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 							<Controller
 								name='name'
 								control={control}
-								rules={{ required: t('Field_required') }}
+								rules={{ required: t('Required_field', { field: t('Name') }) }}
 								render={({ field }) => (
 									<TextInput
 										id={discussionNameId}

apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx

@@ -84,11 +84,11 @@ const CloseChatModal = ({
 			const requestData = transcriptEmail && visitorEmail ? { email: visitorEmail, subject } : undefined;
 
 			if (!comment?.trim() && commentRequired) {
-				setError('comment', { type: 'custom', message: t('The_field_is_required', t('Comment')) });
+				setError('comment', { type: 'custom', message: t('Required_field', { field: t('Comment') }) });
 			}
 
 			if (transcriptEmail && !subject) {
-				setError('subject', { type: 'custom', message: t('The_field_is_required', t('Subject')) });
+				setError('subject', { type: 'custom', message: t('Required_field', { field: t('Subject') }) });
 			}
 
 			if (!tags?.length && tagRequired) {
@@ -154,12 +154,7 @@ const CloseChatModal = ({
 							<FieldRow>
 								<TextInput
 									{...register('comment')}
-									error={
-										errors.comment &&
-										t('error-the-field-is-required', {
-											field: t('Comment'),
-										})
-									}
+									error={errors.comment && t('Required_field', { field: t('Comment') })}
 									flexGrow={1}
 									placeholder={t('Please_add_a_comment')}
 								/>
@@ -206,12 +201,7 @@ const CloseChatModal = ({
 														<TextInput
 															{...register('subject', { required: true })}
 															className='active'
-															error={
-																errors.subject &&
-																t('error-the-field-is-required', {
-																	field: t('Subject'),
-																})
-															}
+															error={errors.subject && t('Required_field', { field: t('Subject') })}
 															flexGrow={1}
 														/>
 													</FieldRow>

apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx

@@ -74,7 +74,7 @@ const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, on
 								disabled={!!emailDefault || !!transcriptRequest}
 								error={errors.email?.message}
 								flexGrow={1}
-								{...register('email', { required: t('The_field_is_required', t('Email')) })}
+								{...register('email', { required: t('Required_field', { field: t('Email') }) })}
 							/>
 						</FieldRow>
 						<FieldError>{errors.email?.message}</FieldError>
@@ -86,7 +86,7 @@ const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, on
 								disabled={!!transcriptRequest}
 								error={errors.subject?.message}
 								flexGrow={1}
-								{...register('subject', { required: t('The_field_is_required', t('Subject')) })}
+								{...register('subject', { required: t('Required_field', { field: t('Subject') }) })}
 							/>
 						</FieldRow>
 						<FieldError>{errors.subject?.message}</FieldError>

apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx

@@ -44,7 +44,7 @@ const BusinessHoursMultiple = ({ className }: { className?: ComponentProps<typeo
 					<Controller
 						name='name'
 						control={control}
-						rules={{ required: t('error-the-field-is-required', { field: t('Name') }) }}
+						rules={{ required: t('Required_field', { field: t('Name') }) }}
 						render={({ field }) => <TextInput id={nameField} {...field} aria-describedby={`${departmentsField}-error`} />}
 					/>
 				</FieldRow>

apps/meteor/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx

@@ -43,7 +43,7 @@ const CannedResponseForm = () => {
 				<Controller
 					name='shortcut'
 					control={control}
-					rules={{ required: t('The_field_is_required', t('Shortcut')) }}
+					rules={{ required: t('Required_field', { field: t('Shortcut') }) }}
 					render={({ field }) => (
 						<TextInput
 							{...field}
@@ -76,7 +76,7 @@ const CannedResponseForm = () => {
 					<Controller
 						name='text'
 						control={control}
-						rules={{ required: t('The_field_is_required', t('Message')) }}
+						rules={{ required: t('Required_field', { field: t('Message') }) }}
 						render={({ field: { value, onChange, name, onBlur } }) => (
 							<CannedResponsesComposer
 								id={messageField}
@@ -168,7 +168,7 @@ const CannedResponseForm = () => {
 								<Controller
 									name='departmentId'
 									control={control}
-									rules={{ required: t('The_field_is_required', t('Department')) }}
+									rules={{ required: t('Required_field', { field: t('Department') }) }}
 									render={({ field: { value, onChange } }) => (
 										<AutoCompleteDepartment
 											{...(hasMonitorPermission && { onlyMyDepartments: hasMonitorPermission })}

apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx

@@ -47,7 +47,7 @@ const PriorityEditForm = ({ data, onSave, onCancel }: PriorityEditFormProps): Re
 		const { name } = getValues();
 
 		if (!isValid) {
-			return dispatchToastMessage({ type: 'error', message: t('The_field_is_required') });
+			return dispatchToastMessage({ type: 'error', message: t('Required_field', { field: t('Name') }) });
 		}
 
 		try {
@@ -77,7 +77,7 @@ const PriorityEditForm = ({ data, onSave, onCancel }: PriorityEditFormProps): Re
 				<Controller
 					name='name'
 					control={control}
-					rules={{ required: t('The_field_is_required', t('Name')), validate: (v) => v?.trim() !== '' }}
+					rules={{ required: t('Required_field', { field: t('Name') }), validate: (v) => v?.trim() !== '' }}
 					render={({ field: { value, onChange } }): ReactElement => (
 						<StringSettingInput
 							_id=''

apps/meteor/client/omnichannel/slaPolicies/SlaEdit.tsx

@@ -37,15 +37,15 @@ function SlaEdit({ data, isNew, slaId, reload, ...props }: SlaEditProps): ReactE
 	const { field: nameField } = useController({
 		control,
 		name: 'name',
-		rules: { required: t('The_field_is_required', t('Name')) },
+		rules: { required: t('Required_field', { field: t('Name') }) },
 	});
 
 	const { field: dueTimeField } = useController({
 		control,
 		name: 'dueTimeInMinutes',
 		rules: {
 			validate(value) {
-				return Number(value || 0) <= 0 ? t('The_field_is_required', t('Estimated_wait_time_in_minutes')) : true;
+				return Number(value || 0) <= 0 ? t('Required_field', { field: t('Estimated_wait_time_in_minutes') }) : true;
 			},
 		},
 	});
@@ -56,7 +56,7 @@ function SlaEdit({ data, isNew, slaId, reload, ...props }: SlaEditProps): ReactE
 		const { name, description, dueTimeInMinutes } = getValues();
 
 		if (!isValid || !name || dueTimeInMinutes === undefined) {
-			return dispatchToastMessage({ type: 'error', message: t('The_field_is_required') });
+			return dispatchToastMessage({ type: 'error', message: t('Required_field') });
 		}
 
 		try {

apps/meteor/client/omnichannel/tags/TagEdit.tsx

@@ -88,7 +88,7 @@ const TagEdit = ({ tagData, currentDepartments }: TagEditProps) => {
 								<Controller
 									name='name'
 									control={control}
-									rules={{ required: t('The_field_is_required', 'name') }}
+									rules={{ required: t('Required_field', { field: t('Name') }) }}
 									render={({ field }) => <TextInput {...field} error={errors?.name?.message} aria-describedby={`${nameField}-error`} />}
 								/>
 							</FieldRow>

apps/meteor/client/omnichannel/units/UnitEdit.tsx

@@ -168,7 +168,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) =>
 								<Controller
 									name='name'
 									control={control}
-									rules={{ required: t('The_field_is_required', t('Name')) }}
+									rules={{ required: t('Required_field', { field: t('Name') }) }}
 									render={({ field }) => (
 										<TextInput
 											id={nameField}
@@ -195,7 +195,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) =>
 								<Controller
 									name='visibility'
 									control={control}
-									rules={{ required: t('The_field_is_required', t('Visibility')) }}
+									rules={{ required: t('Required_field', { field: t('Visibility') }) }}
 									render={({ field }) => (
 										<Select
 											id={visibilityField}
@@ -220,7 +220,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) =>
 								<Controller
 									name='departments'
 									control={control}
-									rules={{ required: t('The_field_is_required', t('Departments')) }}
+									rules={{ required: t('Required_field', { field: t('Departments') }) }}
 									render={({ field: { name, value, onChange, onBlur } }) => (
 										<PaginatedMultiSelectFiltered
 											id={departmentsField}
@@ -267,7 +267,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) =>
 								<Controller
 									name='monitors'
 									control={control}
-									rules={{ required: t('The_field_is_required', t('Monitors')) }}
+									rules={{ required: t('Required_field', { field: t('Monitors') }) }}
 									render={({ field: { name, value, onChange, onBlur } }) => (
 										<PaginatedMultiSelectFiltered
 											id={monitorsField}

apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx

@@ -222,7 +222,7 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
 								id={nameId}
 								data-qa-type='channel-name-input'
 								{...register('name', {
-									required: t('error-the-field-is-required', { field: t('Name') }),
+									required: t('Required_field', { field: t('Name') }),
 									validate: (value) => validateChannelName(value),
 								})}
 								error={errors.name?.message}

apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx

@@ -181,7 +181,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 								id={nameId}
 								aria-invalid={errors.name ? 'true' : 'false'}
 								{...register('name', {
-									required: t('error-the-field-is-required', { field: t('Name') }),
+									required: t('Required_field', { field: t('Name') }),
 									validate: (value) => validateTeamName(value),
 								})}
 								addon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />}

apps/meteor/client/sidebarv2/header/CreateChannelModal.tsx

@@ -222,7 +222,7 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
 								id={nameId}
 								data-qa-type='channel-name-input'
 								{...register('name', {
-									required: t('error-the-field-is-required', { field: t('Name') }),
+									required: t('Required_field', { field: t('Name') }),
 									validate: (value) => validateChannelName(value),
 								})}
 								error={errors.name?.message}

apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx

@@ -183,7 +183,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 								id={nameId}
 								aria-invalid={errors.name ? 'true' : 'false'}
 								{...register('name', {
-									required: t('error-the-field-is-required', { field: t('Name') }),
+									required: t('Required_field', { field: t('Name') }),
 									validate: (value) => validateTeamName(value),
 								})}
 								addon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />}

apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx

@@ -1,6 +1,6 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { SelectLegacy, Box, Button, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { SelectLegacy, Box, Button, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage';
+import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
@@ -13,7 +13,11 @@ import { useRemoveWebDAVAccountIntegrationMutation } from './hooks/useRemoveWebD
 const AccountIntegrationsPage = () => {
 	const { data: webdavAccountIntegrations } = useWebDAVAccountIntegrationsQuery();
 
-	const { handleSubmit, control } = useForm<{ accountSelected: string }>();
+	const {
+		handleSubmit,
+		control,
+		formState: { errors },
+	} = useForm<{ accountSelected: string }>();
 
 	const options: SelectOption[] = useMemo(
 		() => webdavAccountIntegrations?.map(({ _id, ...current }) => [_id, getWebdavServerName(current)]) ?? [],
@@ -36,6 +40,8 @@ const AccountIntegrationsPage = () => {
 		removeMutation.mutate({ accountSelected });
 	});
 
+	const accountSelectedId = useUniqueId();
+
 	return (
 		<Page>
 			<PageHeader title={t('Integrations')} />
@@ -47,22 +53,18 @@ const AccountIntegrationsPage = () => {
 							<Controller
 								control={control}
 								name='accountSelected'
-								rules={{ required: true }}
-								render={({ field: { onChange, value, name, ref } }) => (
-									<SelectLegacy
-										ref={ref}
-										name={name}
-										options={options}
-										onChange={onChange}
-										value={value}
-										placeholder={t('Select_an_option')}
-									/>
-								)}
+								rules={{ required: t('Required_field', { field: t('WebDAV_Accounts') }) }}
+								render={({ field }) => <SelectLegacy {...field} options={options} placeholder={t('Select_an_option')} />}
 							/>
 							<Button type='submit' danger>
 								{t('Remove')}
 							</Button>
 						</FieldRow>
+						{errors?.accountSelected && (
+							<FieldError aria-live='assertive' id={`${accountSelectedId}-error`}>
+								{errors.accountSelected.message}
+							</FieldError>
+						)}
 					</Field>
 				</Box>
 			</PageScrollableContentWithShadow>

apps/meteor/client/views/account/profile/AccountProfileForm.tsx

@@ -166,7 +166,9 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							<Controller
 								control={control}
 								name='name'
-								rules={{ validate: (name) => (requireName && name === '' ? t('error-the-field-is-required', { field: t('Name') }) : true) }}
+								rules={{
+									required: requireName && t('Required_field', { field: t('Name') }),
+								}}
 								render={({ field }) => (
 									<TextInput
 										{...field}
@@ -196,7 +198,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 								control={control}
 								name='username'
 								rules={{
-									required: t('error-the-field-is-required', { field: t('Username') }),
+									required: t('Required_field', { field: t('Username') }),
 									validate: (username) => validateUsername(username),
 								}}
 								render={({ field }) => (
@@ -305,7 +307,10 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						<Controller
 							control={control}
 							name='email'
-							rules={{ validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) } }}
+							rules={{
+								required: t('Required_field', { field: t('Email') }),
+								validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) },
+							}}
 							render={({ field }) => (
 								<TextInput
 									{...field}

apps/meteor/client/views/account/security/AccountSecurityPage.tsx

@@ -18,7 +18,7 @@ const AccountSecurityPage = (): ReactElement => {
 
 	const methods = useForm({
 		defaultValues: passwordDefaultValues,
-		mode: 'onBlur',
+		mode: 'all',
 	});
 	const {
 		reset,

apps/meteor/client/views/account/security/ChangePassword.tsx

@@ -53,13 +53,13 @@ const ChangePassword = (props: AllHTMLAttributes<HTMLFormElement>) => {
 							control={control}
 							name='password'
 							rules={{
+								required: t('Required_field', { field: t('New_password') }),
 								validate: () => (password?.length && !passwordIsValid ? t('Password_must_meet_the_complexity_requirements') : true),
 							}}
-							render={({ field: { onChange, value } }) => (
+							render={({ field }) => (
 								<PasswordInput
+									{...field}
 									id={passwordId}
-									onChange={onChange}
-									value={value}
 									error={errors.password?.message}
 									flexGrow={1}
 									addon={<Icon name='key' size='x20' />}
@@ -84,12 +84,14 @@ const ChangePassword = (props: AllHTMLAttributes<HTMLFormElement>) => {
 						<Controller
 							control={control}
 							name='confirmationPassword'
-							rules={{ validate: (confirmationPassword) => (password !== confirmationPassword ? t('Passwords_do_not_match') : true) }}
-							render={({ field: { onChange, value } }) => (
+							rules={{
+								required: t('Required_field', { field: t('Confirm_password') }),
+								validate: (confirmationPassword) => (password !== confirmationPassword ? t('Passwords_do_not_match') : true),
+							}}
+							render={({ field }) => (
 								<PasswordInput
+									{...field}
 									id={confirmPasswordId}
-									onChange={onChange}
-									value={value}
 									error={errors.confirmationPassword?.message}
 									flexGrow={1}
 									addon={<Icon name='key' size='x20' />}