@digitaldefiance/express-suite-react-components 4.26.26 → 4.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "4.26.26",
+  "version": "4.27.1",
   "homepage": "https://github.com/Digital-Defiance/react-components",
   "description": "React MUI components for Digital Defiance Express Suite",
   "repository": {
@@ -43,6 +43,7 @@
     "currency-codes": "^2.2.0",
     "formik": "^2.4.6",
     "moment-timezone": "^0.6.0",
+    "qrcode.react": "^4.2.0",
     "react-number-format": "^5.4.4",
     "yup": "^1.6.1"
   },

package/src/components/RegisterForm.d.ts

@@ -34,6 +34,33 @@ export interface RegisterFormProps {
     timezoneValidation?: Yup.StringSchema;
     passwordValidation?: Yup.StringSchema;
     confirmPasswordValidation?: Yup.StringSchema;
+    /**
+     * When true, display a TOTP setup step after successful registration.
+     * Defaults to false. When false or not provided, existing flow is unchanged.
+     */
+    enableTotpSetup?: boolean;
+    /**
+     * Called to initiate TOTP setup (e.g. AuthService.setupTotp()).
+     * Must return provisioning URI and secret on success, or an error.
+     */
+    onTotpSetup?: () => Promise<{
+        provisioningUri: string;
+        secret: string;
+    } | {
+        error: string;
+    }>;
+    /**
+     * Called to confirm TOTP setup with a 6-digit code (e.g. AuthService.confirmTotp()).
+     */
+    onTotpConfirm?: (code: string) => Promise<{
+        success: boolean;
+    } | {
+        error: string;
+    }>;
+    /**
+     * Called after the user successfully confirms TOTP during the registration flow.
+     */
+    onTotpSetupComplete?: () => void;
     /**
      * List of email domains that are not allowed during registration.
      * For example, the home system's email domain should be disallowed
@@ -61,6 +88,10 @@ export interface RegisterFormProps {
         savedRecoveryPhrase?: string;
         loginLink?: string;
         mnemonic?: string;
+        totpSetupTitle?: string;
+        totpSkipButton?: string;
+        totpSetupError?: string;
+        totpSetupSuccess?: string;
     };
 }
 export declare const RegisterForm: FC<RegisterFormProps>;

package/src/components/RegisterForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegisterForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/RegisterForm.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RegisterForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/RegisterForm.tsx"],"names":[],"mappings":"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"}

package/src/components/RegisterForm.js

@@ -9,7 +9,8 @@ const formik_1 = require("formik");
 const react_1 = require("react");
 const Yup = tslib_1.__importStar(require("yup"));
 const contexts_1 = require("../contexts");
-const RegisterForm = ({ onSubmit, timezones, getInitialTimezone, usernameValidation, emailValidation, displayNameValidation, timezoneValidation, passwordValidation, confirmPasswordValidation, disallowedEmailDomains, additionalFields, additionalInitialValues = {}, additionalValidation = {}, labels = {}, }) => {
+const TotpSetupForm_1 = require("./TotpSetupForm");
+const RegisterForm = ({ onSubmit, timezones, getInitialTimezone, usernameValidation, emailValidation, displayNameValidation, timezoneValidation, passwordValidation, confirmPasswordValidation, enableTotpSetup = false, onTotpSetup, onTotpConfirm, onTotpSetupComplete, disallowedEmailDomains, additionalFields, additionalInitialValues = {}, additionalValidation = {}, labels = {}, }) => {
     const { tComponent } = (0, contexts_1.useI18n)();
     const [apiErrors, setApiErrors] = (0, react_1.useState)({});
     const [mnemonic, setMnemonic] = (0, react_1.useState)(null);
@@ -17,6 +18,51 @@ const RegisterForm = ({ onSubmit, timezones, getInitialTimezone, usernameValidat
     const [registrationSuccess, setRegistrationSuccess] = (0, react_1.useState)(false);
     const [registering, setRegistering] = (0, react_1.useState)(false);
     const [showMnemonicInput, setShowMnemonicInput] = (0, react_1.useState)(false);
+    const [showTotpSetup, setShowTotpSetup] = (0, react_1.useState)(false);
+    const [totpProvisioningUri, setTotpProvisioningUri] = (0, react_1.useState)(null);
+    const [totpSecret, setTotpSecret] = (0, react_1.useState)(null);
+    const [totpSetupError, setTotpSetupError] = (0, react_1.useState)(null);
+    const [totpSetupComplete, setTotpSetupComplete] = (0, react_1.useState)(false);
+    const [totpSetupLoading, setTotpSetupLoading] = (0, react_1.useState)(false);
+    const initiateTotpSetup = (0, react_1.useCallback)(async () => {
+        if (!onTotpSetup)
+            return;
+        setTotpSetupLoading(true);
+        setTotpSetupError(null);
+        try {
+            const result = await onTotpSetup();
+            if ('error' in result) {
+                setTotpSetupError(result.error);
+            }
+            else {
+                setTotpProvisioningUri(result.provisioningUri);
+                setTotpSecret(result.secret);
+            }
+        }
+        catch {
+            setTotpSetupError(labels.totpSetupError || 'Failed to set up two-factor authentication');
+        }
+        finally {
+            setTotpSetupLoading(false);
+        }
+    }, [onTotpSetup, labels.totpSetupError]);
+    const handleTotpConfirm = (0, react_1.useCallback)(async (code) => {
+        if (!onTotpConfirm) {
+            return { error: 'TOTP confirmation is not available' };
+        }
+        const result = await onTotpConfirm(code);
+        if ('success' in result && result.success) {
+            setTotpSetupComplete(true);
+            setShowTotpSetup(false);
+            if (onTotpSetupComplete) {
+                onTotpSetupComplete();
+            }
+        }
+        return result;
+    }, [onTotpConfirm, onTotpSetupComplete]);
+    const handleSkipTotp = (0, react_1.useCallback)(() => {
+        setShowTotpSetup(false);
+    }, []);
     const validation = {
         username: usernameValidation ||
             Yup.string()
@@ -109,6 +155,12 @@ const RegisterForm = ({ onSubmit, timezones, getInitialTimezone, usernameValidat
                     if (registerResult.mnemonic) {
                         setMnemonic(registerResult.mnemonic);
                     }
+                    if (enableTotpSetup && onTotpSetup) {
+                        setShowTotpSetup(true);
+                        // Fire-and-forget: initiate TOTP setup in background
+                        // The setup state is managed by initiateTotpSetup
+                        initiateTotpSetup();
+                    }
                 }
                 else {
                     setRegistrationSuccess(false);
@@ -149,29 +201,51 @@ const RegisterForm = ({ onSubmit, timezones, getInitialTimezone, usernameValidat
                 flexDirection: 'column',
                 alignItems: 'center',
             }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: labels.title ||
-                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Registration) }), (mnemonic || registrationSuccess) ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2, width: '100%' }, children: mnemonic ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'center', mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", component: "h2", gutterBottom: true, fontWeight: "bold", children: labels.successTitle ||
-                                            tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: labels.mnemonicSuccess ||
-                                            tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_MnemonicSuccess) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                    display: 'grid',
-                                    gridTemplateColumns: 'repeat(3, 1fr)',
-                                    gap: 1.5,
-                                    mb: 3,
-                                }, children: mnemonic.split(/\s+/).map((word, i) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        gap: 0.5,
-                                        py: 1,
-                                        px: 1.5,
-                                        borderRadius: 2,
-                                        border: '1px solid',
-                                        borderColor: 'divider',
-                                        bgcolor: 'action.hover',
-                                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { minWidth: '1.5em', textAlign: 'right' }, children: [i + 1, "."] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: "bold", children: word })] }, i))) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", size: "large", href: "/verify-email", sx: { borderRadius: 6, px: 4 }, children: labels.savedRecoveryPhrase ||
-                                        labels.proceedToLogin ||
-                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SavedRecoveryPhrase) }) }), (0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", component: "div", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Success) })] })] })) : ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: labels.successTitle ||
-                                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", component: "div", children: [tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Success), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center', mt: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "/login", children: labels.proceedToLogin ||
-                                                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ProceedToLogin) }) })] })] })) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "form", onSubmit: formik.handleSubmit, sx: { mt: 1, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "username", name: "username", label: labels.username ||
+                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Registration) }), (mnemonic || registrationSuccess) ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2, width: '100%' }, children: showTotpSetup && !totpSetupComplete ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", component: "h2", gutterBottom: true, fontWeight: "bold", sx: { textAlign: 'center' }, children: labels.totpSetupTitle || 'Set Up Two-Factor Authentication' }), totpSetupLoading && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: 'center', mt: 2 }, children: "Loading TOTP setup..." })), totpSetupError && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mt: 2, mb: 2 }, children: totpSetupError })), totpProvisioningUri && totpSecret && ((0, jsx_runtime_1.jsx)(TotpSetupForm_1.TotpSetupForm, { provisioningUri: totpProvisioningUri, secret: totpSecret, onConfirm: handleTotpConfirm })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center', mt: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: handleSkipTotp, "data-testid": "skip-totp-button", children: labels.totpSkipButton || 'Skip' }) })] })) : totpSetupComplete ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2 }, children: labels.totpSetupSuccess || 'Two-factor authentication has been enabled successfully.' }), mnemonic ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'center', mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", component: "h2", gutterBottom: true, fontWeight: "bold", children: labels.successTitle ||
+                                                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: labels.mnemonicSuccess ||
+                                                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_MnemonicSuccess) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                            display: 'grid',
+                                            gridTemplateColumns: 'repeat(3, 1fr)',
+                                            gap: 1.5,
+                                            mb: 3,
+                                        }, children: mnemonic.split(/\s+/).map((word, i) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: 0.5,
+                                                py: 1,
+                                                px: 1.5,
+                                                borderRadius: 2,
+                                                border: '1px solid',
+                                                borderColor: 'divider',
+                                                bgcolor: 'action.hover',
+                                            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { minWidth: '1.5em', textAlign: 'right' }, children: [i + 1, "."] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: "bold", children: word })] }, i))) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", size: "large", href: "/verify-email", sx: { borderRadius: 6, px: 4 }, children: labels.savedRecoveryPhrase ||
+                                                labels.proceedToLogin ||
+                                                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SavedRecoveryPhrase) }) }), (0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", component: "div", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Success) })] })] })) : ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: labels.successTitle ||
+                                            tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", component: "div", children: [tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Success), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center', mt: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "/login", children: labels.proceedToLogin ||
+                                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ProceedToLogin) }) })] })] }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mnemonic ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'center', mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", component: "h2", gutterBottom: true, fontWeight: "bold", children: labels.successTitle ||
+                                                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: labels.mnemonicSuccess ||
+                                                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_MnemonicSuccess) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                        display: 'grid',
+                                        gridTemplateColumns: 'repeat(3, 1fr)',
+                                        gap: 1.5,
+                                        mb: 3,
+                                    }, children: mnemonic.split(/\s+/).map((word, i) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            gap: 0.5,
+                                            py: 1,
+                                            px: 1.5,
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'divider',
+                                            bgcolor: 'action.hover',
+                                        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { minWidth: '1.5em', textAlign: 'right' }, children: [i + 1, "."] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: "bold", children: word })] }, i))) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", size: "large", href: "/verify-email", sx: { borderRadius: 6, px: 4 }, children: labels.savedRecoveryPhrase ||
+                                            labels.proceedToLogin ||
+                                            tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SavedRecoveryPhrase) }) }), (0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", component: "div", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Success) })] })] })) : ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: labels.successTitle ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", component: "div", children: [tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Success), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center', mt: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "/login", children: labels.proceedToLogin ||
+                                                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ProceedToLogin) }) })] })] })) })) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "form", onSubmit: formik.handleSubmit, sx: { mt: 1, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "username", name: "username", label: labels.username ||
                                 tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Username), value: formik.values.username, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.username &&
                                 (formik.errors.username || apiErrors.username)), helperText: formik.touched.username &&
                                 (formik.errors.username || apiErrors.username), margin: "normal" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "email", name: "email", label: labels.email ||

package/src/components/TotpSetupForm.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+export interface TotpSetupFormValues {
+    code: string;
+}
+export interface TotpSetupFormProps {
+    provisioningUri: string;
+    secret: string;
+    onConfirm: (code: string) => Promise<{
+        success: boolean;
+    } | {
+        error: string;
+    }>;
+    labels?: {
+        title?: string;
+        qrCodeAlt?: string;
+        secretLabel?: string;
+        codeLabel?: string;
+        confirmButton?: string;
+        errorMessage?: string;
+    };
+}
+export declare const TotpSetupForm: FC<TotpSetupFormProps>;
+export default TotpSetupForm;
+//# sourceMappingURL=TotpSetupForm.d.ts.map

package/src/components/TotpSetupForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TotpSetupForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TotpSetupForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAGrC,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CACT,IAAI,EAAE,MAAM,KACT,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvD,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAiBD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+IhD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/src/components/TotpSetupForm.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TotpSetupForm = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const formik_1 = require("formik");
+const qrcode_react_1 = require("qrcode.react");
+const react_1 = require("react");
+const Yup = tslib_1.__importStar(require("yup"));
+const defaultLabels = {
+    title: 'Set Up Two-Factor Authentication',
+    qrCodeAlt: 'QR code for TOTP authenticator app setup',
+    secretLabel: 'Manual entry key',
+    codeLabel: 'Confirmation code',
+    confirmButton: 'Confirm',
+    errorMessage: 'An unexpected error occurred',
+};
+const totpCodeSchema = Yup.object({
+    code: Yup.string()
+        .required('Confirmation code is required')
+        .matches(/^\d{6}$/, 'Code must be exactly 6 digits'),
+});
+const TotpSetupForm = ({ provisioningUri, secret, onConfirm, labels = {}, }) => {
+    const [confirmError, setConfirmError] = (0, react_1.useState)(null);
+    const resolvedLabels = {
+        title: labels.title ?? defaultLabels.title,
+        qrCodeAlt: labels.qrCodeAlt ?? defaultLabels.qrCodeAlt,
+        secretLabel: labels.secretLabel ?? defaultLabels.secretLabel,
+        codeLabel: labels.codeLabel ?? defaultLabels.codeLabel,
+        confirmButton: labels.confirmButton ?? defaultLabels.confirmButton,
+        errorMessage: labels.errorMessage ?? defaultLabels.errorMessage,
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            code: '',
+        },
+        validationSchema: totpCodeSchema,
+        onSubmit: async (values, { setSubmitting }) => {
+            try {
+                setConfirmError(null);
+                const result = await onConfirm(values.code);
+                if ('error' in result) {
+                    setConfirmError(result.error);
+                }
+            }
+            catch {
+                setConfirmError(resolvedLabels.errorMessage);
+            }
+            finally {
+                setSubmitting(false);
+            }
+        },
+    });
+    const errorId = 'totp-setup-error';
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { component: "main", maxWidth: "xs", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                marginTop: 8,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h1", variant: "h5", children: resolvedLabels.title }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 3, display: 'flex', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: provisioningUri, size: 200, role: "img", "aria-label": resolvedLabels.qrCodeAlt }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        mt: 2,
+                        p: 2,
+                        bgcolor: 'grey.100',
+                        borderRadius: 1,
+                        width: '100%',
+                        textAlign: 'center',
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: resolvedLabels.secretLabel }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
+                                fontFamily: 'monospace',
+                                wordBreak: 'break-all',
+                                userSelect: 'all',
+                            }, children: secret })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "form", onSubmit: formik.handleSubmit, sx: { mt: 2, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "code", name: "code", label: resolvedLabels.codeLabel, inputProps: {
+                                'aria-label': resolvedLabels.codeLabel,
+                                inputMode: 'numeric',
+                                maxLength: 6,
+                                pattern: '\\d{6}',
+                                ...(confirmError ? { 'aria-describedby': errorId } : {}),
+                            }, autoComplete: "one-time-code", autoFocus: true, value: formik.values.code, onChange: formik.handleChange, onBlur: formik.handleBlur, error: (formik.touched.code && Boolean(formik.errors.code)) ||
+                                Boolean(confirmError), helperText: formik.touched.code && formik.errors.code }), confirmError && ((0, jsx_runtime_1.jsx)(material_1.Typography, { id: errorId, color: "error", variant: "body2", sx: { mt: 1 }, role: "alert", children: confirmError })), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 }, disabled: formik.isSubmitting, children: resolvedLabels.confirmButton })] })] }) }));
+};
+exports.TotpSetupForm = TotpSetupForm;
+exports.default = exports.TotpSetupForm;

package/src/components/TotpVerificationForm.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { IRequestUserDTO } from '@digitaldefiance/suite-core-lib';
+export interface TotpVerificationFormValues {
+    code: string;
+}
+export interface TotpVerificationFormProps {
+    pendingTotpToken: string;
+    onSubmit: (code: string, pendingTotpToken: string) => Promise<{
+        token: string;
+        user: IRequestUserDTO;
+    } | {
+        error: string;
+    }>;
+    labels?: {
+        title?: string;
+        codeLabel?: string;
+        submitButton?: string;
+        errorMessage?: string;
+    };
+}
+export declare const TotpVerificationForm: FC<TotpVerificationFormProps>;
+export default TotpVerificationForm;
+//# sourceMappingURL=TotpVerificationForm.d.ts.map

package/src/components/TotpVerificationForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TotpVerificationForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TotpVerificationForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,MAAM,KACrB,OAAO,CACV;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAC7D,CAAC;IACF,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAeD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0G9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/src/components/TotpVerificationForm.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TotpVerificationForm = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const formik_1 = require("formik");
+const react_1 = require("react");
+const Yup = tslib_1.__importStar(require("yup"));
+const defaultLabels = {
+    title: 'Two-Factor Authentication',
+    codeLabel: 'Authentication code',
+    submitButton: 'Verify',
+    errorMessage: 'An unexpected error occurred',
+};
+const totpCodeSchema = Yup.object({
+    code: Yup.string()
+        .required('Authentication code is required')
+        .matches(/^\d{6}$/, 'Code must be exactly 6 digits'),
+});
+const TotpVerificationForm = ({ pendingTotpToken, onSubmit, labels = {}, }) => {
+    const [submitError, setSubmitError] = (0, react_1.useState)(null);
+    const resolvedLabels = {
+        title: labels.title ?? defaultLabels.title,
+        codeLabel: labels.codeLabel ?? defaultLabels.codeLabel,
+        submitButton: labels.submitButton ?? defaultLabels.submitButton,
+        errorMessage: labels.errorMessage ?? defaultLabels.errorMessage,
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            code: '',
+        },
+        validationSchema: totpCodeSchema,
+        onSubmit: async (values, { setSubmitting }) => {
+            try {
+                setSubmitError(null);
+                const result = await onSubmit(values.code, pendingTotpToken);
+                if ('error' in result) {
+                    setSubmitError(result.error);
+                }
+            }
+            catch {
+                setSubmitError(resolvedLabels.errorMessage);
+            }
+            finally {
+                setSubmitting(false);
+            }
+        },
+    });
+    const errorId = 'totp-verification-error';
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { component: "main", maxWidth: "xs", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                marginTop: 8,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h1", variant: "h5", children: resolvedLabels.title }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "form", onSubmit: formik.handleSubmit, sx: { mt: 2, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "code", name: "code", label: resolvedLabels.codeLabel, inputProps: {
+                                'aria-label': resolvedLabels.codeLabel,
+                                inputMode: 'numeric',
+                                maxLength: 6,
+                                pattern: '\\d{6}',
+                                ...(submitError ? { 'aria-describedby': errorId } : {}),
+                            }, autoComplete: "one-time-code", autoFocus: true, value: formik.values.code, onChange: formik.handleChange, onBlur: formik.handleBlur, error: (formik.touched.code && Boolean(formik.errors.code)) ||
+                                Boolean(submitError), helperText: formik.touched.code && formik.errors.code }), submitError && ((0, jsx_runtime_1.jsx)(material_1.Typography, { id: errorId, color: "error", variant: "body2", sx: { mt: 1 }, role: "alert", children: submitError })), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 }, disabled: formik.isSubmitting, children: resolvedLabels.submitButton })] })] }) }));
+};
+exports.TotpVerificationForm = TotpVerificationForm;
+exports.default = exports.TotpVerificationForm;

package/src/components/UserSettingsForm.d.ts

@@ -39,6 +39,47 @@ export interface UserSettingsFormProps {
     additionalFields?: (formik: ReturnType<typeof useFormik<UserSettingsFormValues>>) => React.ReactNode;
     additionalInitialValues?: Record<string, string | boolean>;
     additionalValidation?: Record<string, Yup.Schema>;
+    /**
+     * Current TOTP 2FA status. When undefined (not passed), no TOTP controls are rendered.
+     * When false, an "Enable 2FA" button is shown. When true, "Disable 2FA" and "Reset 2FA" buttons are shown.
+     */
+    totpEnabled?: boolean;
+    /**
+     * Called to initiate TOTP setup (e.g. AuthService.setupTotp()).
+     * Must return provisioning URI and secret on success, or an error.
+     */
+    onTotpSetup?: () => Promise<{
+        provisioningUri: string;
+        secret: string;
+    } | {
+        error: string;
+    }>;
+    /**
+     * Called to confirm TOTP setup with a 6-digit code (e.g. AuthService.confirmTotp()).
+     */
+    onTotpConfirm?: (code: string) => Promise<{
+        success: boolean;
+    } | {
+        error: string;
+    }>;
+    /**
+     * Called to disable TOTP with a 6-digit code (e.g. AuthService.disableTotp()).
+     */
+    onTotpDisable?: (code: string) => Promise<{
+        success: boolean;
+    } | {
+        error: string;
+    }>;
+    /**
+     * Called to reset TOTP with a 6-digit code (e.g. AuthService.resetTotp()).
+     * Returns new provisioning URI and secret on success.
+     */
+    onTotpReset?: (code: string) => Promise<{
+        provisioningUri: string;
+        secret: string;
+    } | {
+        error: string;
+    }>;
     labels?: {
         title?: string;
         email?: string;
@@ -53,6 +94,18 @@ export interface UserSettingsFormProps {
         saving?: string;
         save?: string;
         successMessage?: string;
+        totpSectionTitle?: string;
+        totpStatusEnabled?: string;
+        totpStatusDisabled?: string;
+        totpEnableButton?: string;
+        totpDisableButton?: string;
+        totpResetButton?: string;
+        totpDisableCodeLabel?: string;
+        totpDisableSubmitButton?: string;
+        totpResetCodeLabel?: string;
+        totpResetSubmitButton?: string;
+        totpCancelButton?: string;
+        totpError?: string;
     };
 }
 export declare const UserSettingsForm: FC<UserSettingsFormProps>;

package/src/components/UserSettingsForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/UserSettingsForm.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAI3B,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAC7C;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,sBAAsB,CAAC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,OAAO,CACjD;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GACrC;QACE,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC/C,CACJ,CAAC;IACF,SAAS,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;IACnC,kBAAkB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;IACtC,sBAAsB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;IAC1C,kBAAkB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;IACtC,kBAAkB,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACvC,yBAAyB,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC9C,qBAAqB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;IACzC,gBAAgB,CAAC,EAAE,CACjB,MAAM,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,sBAAsB,CAAC,CAAC,KACzD,KAAK,CAAC,SAAS,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAgetD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UserSettingsForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/UserSettingsForm.tsx"],"names":[],"mappings":"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"}