Chore: Convert client/views/account/security folder to ts (#26413)

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

@@ -1,6 +1,6 @@
 import { Box, Accordion } from '@rocket.chat/fuselage';
 import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import Page from '../../../components/Page';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
@@ -8,7 +8,7 @@ import EndToEnd from './EndToEnd';
 import TwoFactorEmail from './TwoFactorEmail';
 import TwoFactorTOTP from './TwoFactorTOTP';
 
-const AccountSecurityPage = () => {
+const AccountSecurityPage = (): ReactElement => {
 	const t = useTranslation();
 
 	const twoFactorEnabled = useSetting('Accounts_TwoFactorAuthentication_Enabled');

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

@@ -2,25 +2,28 @@ import { Box, Margins, PasswordInput, Field, FieldGroup, Button } from '@rocket.
 import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRoute, useUser, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import { Meteor } from 'meteor/meteor';
-import React, { useCallback, useEffect } from 'react';
+import React, { ComponentProps, ReactElement, useCallback, useEffect } from 'react';
 
 import { e2e } from '../../../../app/e2e/client/rocketchat.e2e';
 import { callbacks } from '../../../../lib/callbacks';
 import { useForm } from '../../../hooks/useForm';
 
-const EndToEnd = (props) => {
+const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const homeRoute = useRoute('home');
 	const user = useUser();
 
-	const publicKey = useLocalStorage('public_key');
-	const privateKey = useLocalStorage('private_key');
+	const publicKey = useLocalStorage('public_key', undefined);
+	const privateKey = useLocalStorage('private_key', undefined);
 
 	const resetE2eKey = useMethod('e2e.resetOwnE2EKey');
 
 	const { values, handlers, reset } = useForm({ password: '', passwordConfirm: '' });
-	const { password, passwordConfirm } = values;
+	const { password, passwordConfirm } = values as {
+		password: string;
+		passwordConfirm: string;
+	};
 	const { handlePassword, handlePasswordConfirm } = handlers;
 
 	const keysExist = publicKey && privateKey;
@@ -43,7 +46,7 @@ const EndToEnd = (props) => {
 			reset();
 			dispatchToastMessage({ type: 'success', message: t('Encryption_key_saved_successfully') });
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 	}, [dispatchToastMessage, password, reset, t]);
 
@@ -55,7 +58,7 @@ const EndToEnd = (props) => {
 				handleLogout();
 			}
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 	}, [dispatchToastMessage, resetE2eKey, handleLogout, t]);
 

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

@@ -1,14 +1,14 @@
 import { Box, Button, Margins } from '@rocket.chat/fuselage';
 import { useUser, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback } from 'react';
+import React, { ComponentProps, ReactElement, useCallback } from 'react';
 
 import { useEndpointAction } from '../../../hooks/useEndpointAction';
 
-const TwoFactorEmail = (props) => {
+const TwoFactorEmail = (props: ComponentProps<typeof Box>): ReactElement => {
 	const t = useTranslation();
 	const user = useUser();
 
-	const isEnabled = user && user.services && user.services.email2fa && user.services.email2fa.enabled;
+	const isEnabled = user?.services?.email2fa?.enabled;
 
 	const enable2faAction = useEndpointAction('POST', '/v1/users.2fa.enableEmail', undefined, t('Two-factor_authentication_enabled'));
 	const disable2faAction = useEndpointAction('POST', '/v1/users.2fa.disableEmail', undefined, t('Two-factor_authentication_disabled'));

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

@@ -1,7 +1,7 @@
 import { Box, Button, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useSafely } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useUser, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, ReactElement, ComponentProps } from 'react';
 import qrcode from 'yaqrcode';
 
 import TextCopy from '../../../components/TextCopy';
@@ -9,7 +9,7 @@ import TwoFactorTotpModal from '../../../components/TwoFactorModal/TwoFactorTotp
 import { useForm } from '../../../hooks/useForm';
 import BackupCodesModal from './BackupCodesModal';
 
-const TwoFactorTOTP = (props) => {
+const TwoFactorTOTP = (props: ComponentProps<typeof Box>): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const user = useUser();
@@ -22,21 +22,21 @@ const TwoFactorTOTP = (props) => {
 	const regenerateCodesFn = useMethod('2fa:regenerateCodes');
 
 	const [registeringTotp, setRegisteringTotp] = useSafely(useState(false));
-	const [qrCode, setQrCode] = useSafely(useState());
-	const [totpSecret, setTotpSecret] = useSafely(useState());
+	const [qrCode, setQrCode] = useSafely(useState<string>());
+	const [totpSecret, setTotpSecret] = useSafely(useState<string>());
 	const [codesRemaining, setCodesRemaining] = useSafely(useState());
 
 	const { values, handlers } = useForm({ authCode: '' });
 
-	const { authCode } = values;
+	const { authCode } = values as { authCode: string };
 	const { handleAuthCode } = handlers;
 
-	const totpEnabled = user && user.services && user.services.totp && user.services.totp.enabled;
+	const totpEnabled = user?.services?.totp?.enabled;
 
 	const closeModal = useCallback(() => setModal(null), [setModal]);
 
 	useEffect(() => {
-		const updateCodesRemaining = async () => {
+		const updateCodesRemaining = async (): Promise<void | boolean> => {
 			if (!totpEnabled) {
 				return false;
 			}
@@ -55,12 +55,12 @@ const TwoFactorTOTP = (props) => {
 
 			setRegisteringTotp(true);
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 	}, [dispatchToastMessage, enableTotpFn, setQrCode, setRegisteringTotp, setTotpSecret]);
 
 	const handleDisableTotp = useCallback(async () => {
-		const onDisable = async (authCode) => {
+		const onDisable = async (authCode: string): Promise<void> => {
 			try {
 				const result = await disableTotpFn(authCode);
 
@@ -70,7 +70,7 @@ const TwoFactorTOTP = (props) => {
 
 				dispatchToastMessage({ type: 'success', message: t('Two-factor_authentication_disabled') });
 			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
+				dispatchToastMessage({ type: 'error', message: String(error) });
 			}
 			closeModal();
 		};
@@ -87,12 +87,12 @@ const TwoFactorTOTP = (props) => {
 			}
 			setModal(<BackupCodesModal codes={result.codes} onClose={closeModal} />);
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 	}, [authCode, closeModal, dispatchToastMessage, setModal, t, verifyCodeFn]);
 
 	const handleRegenerateCodes = useCallback(() => {
-		const onRegenerate = async (authCode) => {
+		const onRegenerate = async (authCode: string): Promise<void> => {
 			try {
 				const result = await regenerateCodesFn(authCode);
 
@@ -101,7 +101,7 @@ const TwoFactorTOTP = (props) => {
 				}
 				setModal(<BackupCodesModal codes={result.codes} onClose={closeModal} />);
 			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
+				dispatchToastMessage({ type: 'error', message: String(error) });
 			}
 		};
 
@@ -124,7 +124,7 @@ const TwoFactorTOTP = (props) => {
 					<>
 						<Box>{t('Scan_QR_code')}</Box>
 						<Box>{t('Scan_QR_code_alternative_s')}</Box>
-						<TextCopy text={totpSecret} />
+						<TextCopy text={totpSecret || ''} />
 						<Box is='img' size='x200' src={qrCode} aria-hidden='true' />
 						<Box display='flex' flexDirection='row' w='full'>
 							<TextInput placeholder={t('Enter_authentication_code')} value={authCode} onChange={handleAuthCode} />

apps/meteor/definition/externals/yaqrcode.d.ts

@@ -0,0 +1,48 @@
+type TypeNumber =
+	| 1
+	| 2
+	| 3
+	| 4
+	| 5
+	| 6
+	| 7
+	| 8
+	| 9
+	| 10
+	| 11
+	| 12
+	| 13
+	| 14
+	| 15
+	| 16
+	| 17
+	| 18
+	| 19
+	| 20
+	| 21
+	| 22
+	| 23
+	| 24
+	| 25
+	| 26
+	| 27
+	| 28
+	| 29
+	| 30
+	| 31
+	| 32
+	| 33
+	| 34
+	| 35
+	| 36
+	| 37
+	| 38
+	| 39;
+interface Params {
+	size?: number;
+	errorCorrectLevel?: 'L' | 'M' | 'Q' | 'H';
+	typeNumber?: TypeNumber;
+}
+declare module 'yaqrcode' {
+	export default function qrcode(source: string, params?: Params): string;
+}