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('The_field_is_required', 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('The_field_is_required', t('Name')) }}
 								render={({ field }) => (
 									<TextInput
 										id={discussionNameId}

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

@@ -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('The_field_is_required', 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('The_field_is_required', t('Subject'))}
 															flexGrow={1}
 														/>
 													</FieldRow>

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('The_field_is_required', t('Name')) }}
 						render={({ field }) => <TextInput id={nameField} {...field} aria-describedby={`${departmentsField}-error`} />}
 					/>
 				</FieldRow>

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('The_field_is_required', 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('The_field_is_required', 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('The_field_is_required', { 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('The_field_is_required', 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('The_field_is_required', 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('The_field_is_required', 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('The_field_is_required', 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('The_field_is_required', 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('The_field_is_required', 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('The_field_is_required', 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' />}

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

@@ -1,8 +1,9 @@
 import { Box, Margins, PasswordInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, Button } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useMethod, useTranslation, useLogout } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { useCallback, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 
 import { e2e } from '../../../../app/e2e/client/rocketchat.e2e';
 
@@ -17,17 +18,17 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 	const resetE2eKey = useMethod('e2e.resetOwnE2EKey');
 
 	const {
-		register,
 		handleSubmit,
 		watch,
 		resetField,
 		formState: { errors, isValid },
+		control,
 	} = useForm({
 		defaultValues: {
 			password: '',
 			passwordConfirm: '',
 		},
-		mode: 'onChange',
+		mode: 'all',
 	});
 
 	const { password } = watch();
@@ -64,37 +65,71 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 		}
 	}, [password, resetField]);
 
+	const passwordId = useUniqueId();
+	const e2ePasswordExplanationId = useUniqueId();
+	const passwordConfirmId = useUniqueId();
+
 	return (
 		<Box display='flex' flexDirection='column' alignItems='flex-start' mbs={16} {...props}>
 			<Margins blockEnd={8}>
 				<Box fontScale='h4'>{t('E2E_Encryption_Password_Change')}</Box>
-				<Box dangerouslySetInnerHTML={{ __html: t('E2E_Encryption_Password_Explanation') }} />
+				<Box id={e2ePasswordExplanationId} dangerouslySetInnerHTML={{ __html: t('E2E_Encryption_Password_Explanation') }} />
 				<FieldGroup w='full'>
 					<Field>
-						<FieldLabel id='New_encryption_password'>{t('New_encryption_password')}</FieldLabel>
+						<FieldLabel htmlFor={passwordId}>{t('New_encryption_password')}</FieldLabel>
 						<FieldRow>
-							<PasswordInput
-								{...register('password', { required: true })}
-								placeholder={t('New_Password_Placeholder')}
-								disabled={!keysExist}
-								aria-labelledby='New_encryption_password'
+							<Controller
+								control={control}
+								name='password'
+								rules={{ required: t('The_field_is_required', t('New_encryption_password')) }}
+								render={({ field }) => (
+									<PasswordInput
+										{...field}
+										id={passwordId}
+										error={errors.password?.message}
+										placeholder={t('New_Password_Placeholder')}
+										disabled={!keysExist}
+										aria-describedby={`${e2ePasswordExplanationId} ${passwordId}-hint ${passwordId}-error`}
+										aria-invalid={errors.password ? 'true' : 'false'}
+									/>
+								)}
 							/>
 						</FieldRow>
-						{!keysExist && <FieldHint>{t('EncryptionKey_Change_Disabled')}</FieldHint>}
+						{!keysExist && <FieldHint id={`${passwordId}-hint`}>{t('EncryptionKey_Change_Disabled')}</FieldHint>}
+						{errors?.password && (
+							<FieldError aria-live='assertive' id={`${passwordId}-error`}>
+								{errors.password.message}
+							</FieldError>
+						)}
 					</Field>
 					{hasTypedPassword && (
 						<Field>
-							<FieldLabel id='Confirm_new_encryption_password'>{t('Confirm_new_encryption_password')}</FieldLabel>
-							<PasswordInput
-								error={errors.passwordConfirm?.message}
-								{...register('passwordConfirm', {
-									required: true,
-									validate: (value: string) => (password !== value ? 'Your passwords do no match' : true),
-								})}
-								placeholder={t('Confirm_New_Password_Placeholder')}
-								aria-labelledby='Confirm_new_encryption_password'
-							/>
-							{errors.passwordConfirm && <FieldError>{errors.passwordConfirm.message}</FieldError>}
+							<FieldLabel htmlFor={passwordConfirmId}>{t('Confirm_new_encryption_password')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									control={control}
+									name='passwordConfirm'
+									rules={{
+										required: t('The_field_is_required', t('Confirm_new_encryption_password')),
+										validate: (value: string) => (password !== value ? 'Your passwords do no match' : true),
+									}}
+									render={({ field }) => (
+										<PasswordInput
+											{...field}
+											id={passwordConfirmId}
+											error={errors.passwordConfirm?.message}
+											placeholder={t('Confirm_New_Password_Placeholder')}
+											aria-describedby={`${passwordConfirmId}-error`}
+											aria-invalid={errors.password ? 'true' : 'false'}
+										/>
+									)}
+								/>
+							</FieldRow>
+							{errors.passwordConfirm && (
+								<FieldError aria-live='assertive' id={`${passwordConfirmId}-error`}>
+									{errors.passwordConfirm.message}
+								</FieldError>
+							)}
 						</Field>
 					)}
 				</FieldGroup>

apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldRow, FieldError, Icon } from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldRow, FieldError, IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
@@ -82,7 +82,7 @@ const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps): Rea
 					<FieldRow>
 						<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
 					</FieldRow>
-					{errors.name && <FieldError>{t('error-the-field-is-required', { field: t('Name') })}</FieldError>}
+					{errors.name && <FieldError>{t('The_field_is_required', t('Name'))}</FieldError>}
 				</Field>
 				<Field>
 					<FieldLabel>{t('Aliases')}</FieldLabel>
@@ -94,12 +94,9 @@ const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps): Rea
 				<Field>
 					<FieldLabel alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
 						{t('Custom_Emoji')}
-						{/* FIXME: replace to IconButton */}
-						<Button square onClick={clickUpload}>
-							<Icon name='upload' size='x20' />
-						</Button>
+						<IconButton secondary small icon='upload' onClick={clickUpload} />
 					</FieldLabel>
-					{errors.emoji && <FieldError>{t('error-the-field-is-required', { field: t('Custom_Emoji') })}</FieldError>}
+					{errors.emoji && <FieldError>{t('The_field_is_required', t('Custom_Emoji'))}</FieldError>}
 					{newEmojiPreview && (
 						<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='center'>
 							<Margins inline={4}>

apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx

@@ -150,7 +150,7 @@ const EditCustomEmoji = ({ close, onChange, data, ...props }: EditCustomEmojiPro
 						<FieldRow>
 							<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
 						</FieldRow>
-						{errors.name && <FieldError>{t('error-the-field-is-required', { field: t('Name') })}</FieldError>}
+						{errors.name && <FieldError>{t('The_field_is_required', t('Name'))}</FieldError>}
 					</Field>
 					<Field>
 						<FieldLabel>{t('Aliases')}</FieldLabel>