1 files changed, 20 insertions, 2 deletions
diff --git a/web/src/views/Settings/TwoFactorAuthentication/TwoFactorAuthenticationView.tsx b/web/src/views/Settings/TwoFactorAuthentication/TwoFactorAuthenticationView.tsx
index fafd150de..65b87e149 100644
--- a/web/src/views/Settings/TwoFactorAuthentication/TwoFactorAuthenticationView.tsx
+++ b/web/src/views/Settings/TwoFactorAuthentication/TwoFactorAuthenticationView.tsx
@@ -4,15 +4,18 @@ import Grid from "@mui/material/Unstable_Grid2";
 
 import { useNotifications } from "@hooks/NotificationsContext";
 import { useUserInfoPOST } from "@hooks/UserInfo";
+import { useUserInfoTOTPConfigurationOptional } from "@hooks/UserInfoTOTPConfiguration";
 import { useUserWebAuthnDevices } from "@hooks/WebAuthnDevices";
+import TOTPPanel from "@views/Settings/TwoFactorAuthentication/TOTPPanel";
 import WebAuthnDevicesPanel from "@views/Settings/TwoFactorAuthentication/WebAuthnDevicesPanel";
 
 interface Props {}
 
-export default function TwoFactorAuthSettings(props: Props) {
+const TwoFactorAuthSettings = function (props: Props) {
     const [refreshState, setRefreshState] = useState(0);
     const { createErrorNotification } = useNotifications();
     const [userInfo, fetchUserInfo, , fetchUserInfoError] = useUserInfoPOST();
+    const [userTOTPConfig, fetchUserTOTPConfig, , fetchUserTOTPConfigError] = useUserInfoTOTPConfigurationOptional();
     const [userWebAuthnDevices, fetchUserWebAuthnDevices, , fetchUserWebAuthnDevicesError] = useUserWebAuthnDevices();
     const [hasTOTP, setHasTOTP] = useState(false);
     const [hasWebAuthn, setHasWebAuthn] = useState(false);
@@ -40,6 +43,10 @@ export default function TwoFactorAuthSettings(props: Props) {
     }, [hasTOTP, hasWebAuthn, userInfo]);
 
     useEffect(() => {
+        fetchUserTOTPConfig();
+    }, [fetchUserTOTPConfig, hasTOTP]);
+
+    useEffect(() => {
         fetchUserWebAuthnDevices();
     }, [fetchUserWebAuthnDevices, hasWebAuthn]);
 
@@ -50,6 +57,12 @@ export default function TwoFactorAuthSettings(props: Props) {
     }, [fetchUserInfoError, createErrorNotification]);
 
     useEffect(() => {
+        if (fetchUserTOTPConfigError) {
+            createErrorNotification("There was an issue retrieving One Time Password Configuration");
+        }
+    }, [fetchUserTOTPConfigError, createErrorNotification]);
+
+    useEffect(() => {
         if (fetchUserWebAuthnDevicesError) {
             createErrorNotification("There was an issue retrieving One Time Password Configuration");
         }
@@ -58,8 +71,13 @@ export default function TwoFactorAuthSettings(props: Props) {
     return (
         <Grid container spacing={2}>
             <Grid xs={12}>
+                <TOTPPanel config={userTOTPConfig} handleRefreshState={handleRefreshState} />
+            </Grid>
+            <Grid xs={12}>
                 <WebAuthnDevicesPanel devices={userWebAuthnDevices} handleRefreshState={handleRefreshState} />
             </Grid>
         </Grid>
     );
-}
+};
+
+export default TwoFactorAuthSettings;