feat: self-review fixes&cleanup

lib/ts/recipe/totp/components/features/mfa/index.tsx

@@ -130,10 +130,10 @@ function useOnLoad(recipeImpl: RecipeInterface, dispatch: React.Dispatch<TOTPMFA
     );
 
     const handleLoadError = React.useCallback(
-        // Test this, it may show an empty screen in many cases
-        () => dispatch({ type: "setError", error: "Getting mfaInfo failed!" }),
+        // TODO: Test this, it may show an empty screen in many cases
+        () => dispatch({ type: "setError", error: "SOMETHING_WENT_WRONG_ERROR" }),
         [dispatch]
-    ); // TODO: translation/proper error handling)
+    );
     const onLoad = React.useCallback(
         async (mfaInfo: { factors: MFAFactorInfo; email?: string; phoneNumber?: string }) => {
             let error: string | undefined = undefined;
@@ -152,13 +152,21 @@ function useOnLoad(recipeImpl: RecipeInterface, dispatch: React.Dispatch<TOTPMFA
             const isAllowedToSetup = mfaInfo.factors.isAllowedToSetup.includes("totp");
             const isAlreadySetup = mfaInfo.factors.isAlreadySetup.includes("totp");
             if (!isAllowedToSetup && !isAlreadySetup) {
-                // TODO: redirect to access denied
-                dispatch({ type: "setError", error: "Setup and completion not allowed" });
+                dispatch({
+                    type: "load",
+                    deviceInfo: undefined,
+                    showBackButton: true,
+                    error: "TOTP_MFA_NOT_ALLOWED_TO_SETUP",
+                });
                 return;
             }
             if (doSetup && !isAllowedToSetup) {
-                // TODO: redirect to access denied
-                dispatch({ type: "setError", error: "Setup not allowed" });
+                dispatch({
+                    type: "load",
+                    deviceInfo: undefined,
+                    showBackButton: true,
+                    error: "TOTP_MFA_NOT_ALLOWED_TO_SETUP",
+                });
                 return;
             }
             let deviceInfo: TOTPDeviceInfo | undefined;
@@ -317,9 +325,6 @@ function getModifiedRecipeImplementation(
                 userContext: { ...input.userContext, additionalDeviceInfo },
             });
             if (res.status === "OK") {
-                // const deviceInfo = (await originalImpl.getDeviceInfo<AdditionalDeviceInfoProperties>({
-                //     userContext: input.userContext,
-                // }))!;
                 const deviceInfo = {
                     ...res,
                 };

lib/ts/recipe/totp/components/themes/mfa/index.tsx

@@ -19,8 +19,10 @@ import React from "react";
 
 import { SuperTokensBranding } from "../../../../../components/SuperTokensBranding";
 import { hasFontDefined } from "../../../../../styles/styles";
+import { useTranslation } from "../../../../../translation/translationContext";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
 import GeneralError from "../../../../emailpassword/components/library/generalError";
+import { AccessDeniedScreen } from "../../../../session/prebuiltui";
 import { ThemeBase } from "../themeBase";
 
 import { BlockedScreen } from "./blockedScreen";
@@ -39,6 +41,7 @@ export enum TOTPMFAScreens {
     CodeVerification,
     Loading,
     Blocked,
+    AccessDenied,
 }
 
 /*
@@ -49,6 +52,7 @@ const SignInUpTheme: React.FC<TOTPMFAProps & { activeScreen: TOTPMFAScreens }> =
     featureState,
     ...props
 }) => {
+    const t = useTranslation();
     const commonProps = {
         featureState,
         recipeImplementation: props.recipeImplementation,
@@ -59,6 +63,8 @@ const SignInUpTheme: React.FC<TOTPMFAProps & { activeScreen: TOTPMFAScreens }> =
 
     return activeScreen === TOTPMFAScreens.Blocked ? (
         <BlockedScreen nextRetryAt={featureState.nextRetryAt!} onRetry={props.onRetryClicked} />
+    ) : activeScreen === TOTPMFAScreens.AccessDenied ? (
+        <AccessDeniedScreen error={t(featureState.error!)} useShadowDom={props.config.useShadowDom} />
     ) : activeScreen === TOTPMFAScreens.Loading ? (
         <LoadingScreen />
     ) : (
@@ -142,6 +148,8 @@ export function getActiveScreen(props: Pick<TOTPMFAProps, "featureState" | "conf
         return TOTPMFAScreens.Blocked;
     } else if (props.featureState.loaded === false) {
         return TOTPMFAScreens.Loading;
+    } else if (props.featureState.error === "TOTP_MFA_NOT_ALLOWED_TO_SETUP") {
+        return TOTPMFAScreens.AccessDenied;
     } else if (props.featureState.deviceInfo) {
         return TOTPMFAScreens.DeviceSetup;
     } else {

lib/ts/recipe/totp/components/themes/styles.css

@@ -43,6 +43,10 @@
     background: rgba(var(--palette-textLink), 0.08);
 }
 
+[data-supertokens~="showTOTPSecretBtn"]:hover {
+    text-decoration: underline;
+}
+
 [data-supertokens~="retryCodeBtn"]:disabled {
     border: 0;
     border-radius: 6px;

lib/ts/recipe/totp/components/themes/translations.ts

@@ -12,7 +12,7 @@ export const defaultTranslationsTOTP = {
         TOTP_DEVICE_SETUP_HEADER_TITLE: "Enable TOTP",
         TOTP_DEVICE_SETUP_HEADER_SUBTITLE:
             "Please scan the given QR code from a phone app like Google Authenticator or Authy.",
-        TOTP_CODE_INPUT_LABEL: "Please enter TOTP from the app",
+        TOTP_CODE_INPUT_LABEL: "Please enter TOTP",
         TOTP_CODE_CONTINUE_BUTTON: "Continue",
         TOTP_BLOCKED_TITLE: "Account locked",
         TOTP_BLOCKED_SUBTITLE: "Account locked due to multiple failed login attempts.",
@@ -21,6 +21,8 @@ export const defaultTranslationsTOTP = {
         TOTP_MFA_BLOCKED_RETRY: "Try again",
         TOTP_MFA_LOGOUT: "Logout",
 
-        INVALID_TOTP_ERROR: "Invalid TOTP.",
+        INVALID_TOTP_ERROR: "Invalid TOTP. Please try again",
+        GENERAL_ERROR_OTP_UNDEFINED: "Please fill your TOTP",
+        TOTP_MFA_NOT_ALLOWED_TO_SETUP: "You are not allowed to set up TOTP.",
     },
 };

lib/ts/recipe/totp/recipe.tsx

@@ -41,6 +41,14 @@ import type {
 import type { NormalisedConfigWithAppInfoAndRecipeID, RecipeInitResult, WebJSRecipeInterface } from "../../types";
 import type { NormalisedAppInfo } from "../../types";
 
+export const totpFactor = {
+    id: "totp",
+    name: "TOTP",
+    description: "Use an authenticator app to complete the authentication request",
+    path: new NormalisedURLPath("/mfa/totp"), // TODO: re-check this with separate domains
+    logo: OTPIcon,
+};
+
 export default class TOTP extends RecipeModule<
     GetRedirectionURLContext,
     PreAndPostAPIHookAction,
@@ -61,18 +69,7 @@ export default class TOTP extends RecipeModule<
         PostSuperTokensInitCallbacks.addPostInitCallback(() => {
             const mfa = MultiFactorAuth.getInstance();
             if (mfa !== undefined) {
-                mfa.addMFAFactors(
-                    [],
-                    [
-                        {
-                            id: "totp",
-                            name: "TOTP",
-                            description: "Use an authenticator app to complete the authentication request",
-                            path: new NormalisedURLPath("/auth/mfa/totp"),
-                            logo: OTPIcon,
-                        },
-                    ]
-                );
+                mfa.addMFAFactors([], [totpFactor]);
             }
             const session = Session.getInstance();
             if (session !== undefined) {

lib/ts/recipe/totp/types.ts

@@ -101,8 +101,8 @@ export type TOTPMFAScreenConfig = {
     disableDefaultUI: boolean;
     setupScreenStyle: string;
     verificationScreenStyle: string;
-    blockedScreenStyle: string; // TODO: ??
-    loadingScreenStyle: string; // TODO: ??
+    blockedScreenStyle: string;
+    loadingScreenStyle: string;
 };
 
 // Config is what does in the constructor of the recipe.