diff --git a/apps/meteor/client/views/account/security/AccountSecurityPage.js b/apps/meteor/client/views/account/security/AccountSecurityPage.tsx similarity index 94% rename from apps/meteor/client/views/account/security/AccountSecurityPage.js rename to apps/meteor/client/views/account/security/AccountSecurityPage.tsx index 5f0ac42860a..42a947d6386 100644 --- a/apps/meteor/client/views/account/security/AccountSecurityPage.js +++ b/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'); diff --git a/apps/meteor/client/views/account/security/EndToEnd.js b/apps/meteor/client/views/account/security/EndToEnd.tsx similarity index 87% rename from apps/meteor/client/views/account/security/EndToEnd.js rename to apps/meteor/client/views/account/security/EndToEnd.tsx index 5c8c381d520..5c3b0077f46 100644 --- a/apps/meteor/client/views/account/security/EndToEnd.js +++ b/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): 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]); diff --git a/apps/meteor/client/views/account/security/TwoFactorEmail.js b/apps/meteor/client/views/account/security/TwoFactorEmail.tsx similarity index 86% rename from apps/meteor/client/views/account/security/TwoFactorEmail.js rename to apps/meteor/client/views/account/security/TwoFactorEmail.tsx index 219c83e78a5..48453d58d57 100644 --- a/apps/meteor/client/views/account/security/TwoFactorEmail.js +++ b/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): 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')); diff --git a/apps/meteor/client/views/account/security/TwoFactorTOTP.js b/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx similarity index 83% rename from apps/meteor/client/views/account/security/TwoFactorTOTP.js rename to apps/meteor/client/views/account/security/TwoFactorTOTP.tsx index 34dd86ab77a..e7647a23f59 100644 --- a/apps/meteor/client/views/account/security/TwoFactorTOTP.js +++ b/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): 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()); + const [totpSecret, setTotpSecret] = useSafely(useState()); 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 => { 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 => { 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(); } 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 => { try { const result = await regenerateCodesFn(authCode); @@ -101,7 +101,7 @@ const TwoFactorTOTP = (props) => { } setModal(); } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); + dispatchToastMessage({ type: 'error', message: String(error) }); } }; @@ -124,7 +124,7 @@ const TwoFactorTOTP = (props) => { <> {t('Scan_QR_code')} {t('Scan_QR_code_alternative_s')} - +