feat: Add Input fields in userPreferences/idleTimeLimit option.

.changeset/wild-sheep-hug.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Added input fields so the user can specify exactly the time of the enableAutoAway preference in hours, minutes and seconds.

apps/meteor/client/views/account/preferences/IdleTimeEditor.tsx

@@ -0,0 +1,54 @@
+import { NumberInput, FieldRow, FieldLabel } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type IdleTimeEditorProps = {
+	onChangeTime: (time: number | undefined) => void;
+};
+
+const IdleTimeEditor = ({ onChangeTime }: IdleTimeEditorProps) => {
+	const { t } = useTranslation();
+	const [hours, setHours] = useState<number>(0);
+	const [minutes, setMinutes] = useState<number>(5);
+	const [seconds, setSeconds] = useState<number>(0);
+	const [finalSecondCount, setFinalSecondCount] = useState<number | undefined>(hours * 3600 + minutes * 60 + seconds);
+
+	const idleTimeLimitHrs = useUniqueId();
+	const idleTimeLimitMin = useUniqueId();
+	const idleTimeLimitSec = useUniqueId();
+
+	function handleHours(e: any) {
+		setHours(Number(e.target.value));
+	}
+
+	function handleMinutes(e: any) {
+		setMinutes(Number(e.target.value));
+	}
+
+	function handleSeconds(e: any) {
+		setSeconds(Number(e.target.value));
+	}
+
+	useEffect(() => {
+		handleFinalSecondCount();
+	}, [hours, minutes, seconds]);
+
+	function handleFinalSecondCount() {
+		setFinalSecondCount(hours * 3600 + minutes * 60 + seconds);
+		onChangeTime(finalSecondCount);
+	}
+
+	return (
+		<FieldRow>
+			<FieldLabel htmlFor={idleTimeLimitHrs}>{t('Hours')}</FieldLabel>
+			<NumberInput value={hours} onChange={handleHours} id={idleTimeLimitHrs} min={0} />
+			<FieldLabel htmlFor={idleTimeLimitMin}>{t('Minutes')}</FieldLabel>
+			<NumberInput value={minutes} onChange={handleMinutes} id={idleTimeLimitMin} max={59} min={0} />
+			<FieldLabel htmlFor={idleTimeLimitSec}>{t('Seconds')}</FieldLabel>
+			<NumberInput value={seconds} onChange={handleSeconds} id={idleTimeLimitSec} max={59} min={0} />
+		</FieldRow>
+	);
+};
+
+export default IdleTimeEditor;

apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx

@@ -1,14 +1,15 @@
-import { AccordionItem, Field, FieldLabel, FieldRow, NumberInput, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage';
+import { AccordionItem, Field, FieldLabel, FieldRow, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import IdleTimeEditor from './IdleTimeEditor';
+
 const PreferencesUserPresenceSection = () => {
 	const { t } = useTranslation();
-	const { register, control } = useFormContext();
+	const { control } = useFormContext();
 
 	const enableAutoAwayId = useUniqueId();
-	const idleTimeLimit = useUniqueId();
 
 	return (
 		<AccordionItem title={t('User_Presence')}>
@@ -26,10 +27,12 @@ const PreferencesUserPresenceSection = () => {
 					</FieldRow>
 				</Field>
 				<Field>
-					<FieldLabel htmlFor={idleTimeLimit}>{t('Idle_Time_Limit')}</FieldLabel>
-					<FieldRow>
-						<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
-					</FieldRow>
+					<FieldLabel>{t('Idle_Time_Limit')}</FieldLabel>
+					<Controller
+						name='idleTimeLimit'
+						control={control}
+						render={({ field: { onChange } }) => <IdleTimeEditor onChangeTime={onChange} />}
+					/>
 				</Field>
 			</FieldGroup>
 		</AccordionItem>

packages/i18n/src/locales/en.i18n.json

@@ -3815,6 +3815,7 @@
   "Minimum_balance": "Minimum balance",
   "minute": "minute",
   "minutes": "minutes",
+  "Minutes": "Minutes",
   "Missing_configuration": "Missing configuration",
   "Mobex_sms_gateway_address": "Mobex SMS Gateway Address",
   "Mobex_sms_gateway_address_desc": "IP or Host of your Mobex service with specified port. E.g. `http://192.168.1.1:1401` or `https://www.example.com:1401`",
@@ -4941,6 +4942,7 @@
   "used_limit_infinite": "{{used, number}} / ∞",
   "Seats_usage": "Seats Usage",
   "seconds": "seconds",
+  "Seconds": "Seconds",
   "Secret_token": "Secret Token",
   "Secure_SaaS_solution": "Secure SaaS solution.",
   "Security": "Security",