diff --git a/packages/login/src/components/TfaActivationForm/index.tsx b/packages/login/src/components/TfaActivationForm/index.tsx index dbf15c879f..fd686f8a4e 100644 --- a/packages/login/src/components/TfaActivationForm/index.tsx +++ b/packages/login/src/components/TfaActivationForm/index.tsx @@ -28,7 +28,7 @@ "use client"; -import { useContext, useState } from "react"; +import { ChangeEvent, useContext, useState } from "react"; import { useTheme } from "styled-components"; import { Trans, useTranslation } from "react-i18next"; @@ -71,17 +71,21 @@ import { const PROXY_BASE_URL = combineUrl(window.ClientConfig?.proxy?.url, "/profile"); type TfaActivationFormProps = { - secretKey: any; - qrCode: any; + secretKey: string; + qrCode: string; passwordHash: TPasswordHash; userName?: string; currentColorScheme?: TColorScheme; } & WithLoaderProps; -const TfaActivationForm = (props: TfaActivationFormProps) => { - const { secretKey, qrCode, passwordHash, userName, currentColorScheme } = - props; +const TfaActivationForm = ({ + secretKey, + qrCode, + passwordHash, + userName, + currentColorScheme, +}: TfaActivationFormProps) => { const { linkData } = useContext(ConfirmRouteContext); const { t } = useTranslation(["Confirm", "Common"]); @@ -124,6 +128,11 @@ const TfaActivationForm = (props: TfaActivationFormProps) => { } }; + const onChangeInput = (event: ChangeEvent) => { + setCode(event.target.value); + setError(""); + }; + const onKeyPress = (event: React.KeyboardEvent) => { if (event.code === "Enter" || event.code === "NumpadEnter") onSubmit(); }; @@ -209,7 +218,7 @@ const TfaActivationForm = (props: TfaActivationFormProps) => { { placeholder={t("EnterCodePlaceholder")} isDisabled={isLoading} maxLength={6} - onChange={(e) => { - setCode(e.target.value); - setError(""); - }} + onChange={onChangeInput} value={code} hasError={error ? true : false} onKeyDown={onKeyPress}