@digitaldefiance/express-suite-react-components 5.0.2 → 5.0.4

package/src/components/UserSettingsForm.js

@@ -0,0 +1,269 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserSettingsForm = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const i18n_lib_1 = require("@digitaldefiance/i18n-lib");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const material_1 = require("@mui/material");
+const formik_1 = require("formik");
+const moment_timezone_1 = tslib_1.__importDefault(require("moment-timezone"));
+const react_1 = require("react");
+const Yup = tslib_1.__importStar(require("yup"));
+const contexts_1 = require("../contexts");
+const suite_core_lib_2 = require("@digitaldefiance/suite-core-lib");
+const TotpSetupForm_1 = require("./TotpSetupForm");
+const UserSettingsForm = ({ initialValues, onSubmit, languages, emailValidation, timezoneValidation, siteLanguageValidation, currencyValidation, darkModeValidation, directChallengeValidation, displayNameValidation, additionalFields, additionalInitialValues = {}, additionalValidation = {}, totpEnabled, onTotpSetup, onTotpConfirm, onTotpDisable, onTotpReset, labels = {}, }) => {
+    const { tComponent } = (0, contexts_1.useI18n)();
+    const [apiErrors, setApiErrors] = (0, react_1.useState)({});
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [successMessage, setSuccessMessage] = (0, react_1.useState)(null);
+    // TOTP management state
+    const [totpStatus, setTotpStatus] = (0, react_1.useState)(totpEnabled);
+    // Sync totpStatus when the totpEnabled prop transitions from undefined to a
+    // concrete value (i.e. after the wrapper fetches it asynchronously).
+    (0, react_1.useEffect)(() => {
+        if (totpEnabled !== undefined) {
+            setTotpStatus(totpEnabled);
+        }
+    }, [totpEnabled]);
+    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 [totpSetupLoading, setTotpSetupLoading] = (0, react_1.useState)(false);
+    const [totpError, setTotpError] = (0, react_1.useState)(null);
+    const [showDisablePrompt, setShowDisablePrompt] = (0, react_1.useState)(false);
+    const [disableCode, setDisableCode] = (0, react_1.useState)('');
+    const [disableSubmitting, setDisableSubmitting] = (0, react_1.useState)(false);
+    const [showResetPrompt, setShowResetPrompt] = (0, react_1.useState)(false);
+    const [resetCode, setResetCode] = (0, react_1.useState)('');
+    const [resetSubmitting, setResetSubmitting] = (0, react_1.useState)(false);
+    const handleEnableTotp = (0, react_1.useCallback)(async () => {
+        if (!onTotpSetup)
+            return;
+        setTotpSetupLoading(true);
+        setTotpError(null);
+        try {
+            const result = await onTotpSetup();
+            if ('error' in result) {
+                setTotpError(result.error);
+            }
+            else {
+                setTotpProvisioningUri(result.provisioningUri);
+                setTotpSecret(result.secret);
+                setShowTotpSetup(true);
+            }
+        }
+        catch {
+            setTotpError(labels.totpError || 'Failed to set up two-factor authentication');
+        }
+        finally {
+            setTotpSetupLoading(false);
+        }
+    }, [onTotpSetup, labels.totpError]);
+    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) {
+            setTotpStatus(true);
+            setShowTotpSetup(false);
+            setTotpProvisioningUri(null);
+            setTotpSecret(null);
+        }
+        return result;
+    }, [onTotpConfirm]);
+    const handleDisableTotp = (0, react_1.useCallback)(async () => {
+        if (!onTotpDisable || !disableCode)
+            return;
+        setDisableSubmitting(true);
+        setTotpError(null);
+        try {
+            const result = await onTotpDisable(disableCode);
+            if ('error' in result) {
+                setTotpError(result.error);
+            }
+            else {
+                setTotpStatus(false);
+                setShowDisablePrompt(false);
+                setDisableCode('');
+            }
+        }
+        catch {
+            setTotpError(labels.totpError || 'Failed to disable two-factor authentication');
+        }
+        finally {
+            setDisableSubmitting(false);
+        }
+    }, [onTotpDisable, disableCode, labels.totpError]);
+    const handleResetTotp = (0, react_1.useCallback)(async () => {
+        if (!onTotpReset || !resetCode)
+            return;
+        setResetSubmitting(true);
+        setTotpError(null);
+        try {
+            const result = await onTotpReset(resetCode);
+            if ('error' in result) {
+                setTotpError(result.error);
+            }
+            else {
+                setTotpProvisioningUri(result.provisioningUri);
+                setTotpSecret(result.secret);
+                setShowResetPrompt(false);
+                setResetCode('');
+                setShowTotpSetup(true);
+            }
+        }
+        catch {
+            setTotpError(labels.totpError || 'Failed to reset two-factor authentication');
+        }
+        finally {
+            setResetSubmitting(false);
+        }
+    }, [onTotpReset, resetCode, labels.totpError]);
+    const handleCancelTotpAction = (0, react_1.useCallback)(() => {
+        setShowTotpSetup(false);
+        setShowDisablePrompt(false);
+        setShowResetPrompt(false);
+        setTotpProvisioningUri(null);
+        setTotpSecret(null);
+        setDisableCode('');
+        setResetCode('');
+        setTotpError(null);
+    }, []);
+    const timezones = (0, react_1.useMemo)(() => moment_timezone_1.default.tz.names(), []);
+    const currencies = (0, react_1.useMemo)(() => i18n_lib_1.CurrencyCode.getAllData().map((c) => ({
+        code: c.code,
+        label: `${c.code} - ${c.currency}`,
+    })), []);
+    const validation = {
+        email: emailValidation ||
+            Yup.string()
+                .email(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_InvalidEmail))
+                .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        timezone: timezoneValidation ||
+            Yup.string()
+                .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_TimezoneRequired))
+                .test('valid-timezone', tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_TimezoneInvalid), (value) => !value || moment_timezone_1.default.tz.zone(value) !== null),
+        siteLanguage: siteLanguageValidation ||
+            Yup.string().required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        currency: currencyValidation ||
+            Yup.string()
+                .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required))
+                .test('valid-currency', tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required), (value) => !value || i18n_lib_1.CurrencyCode.isValid(value)),
+        darkMode: darkModeValidation ||
+            Yup.boolean().required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        directChallenge: directChallengeValidation ||
+            Yup.boolean().required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        ...(suite_core_lib_2.Constants.EnableDisplayName ? {
+            displayName: displayNameValidation ||
+                Yup.string()
+                    .min(suite_core_lib_2.Constants.DisplayNameMinLength, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_DisplayNameMinLengthTemplate))
+                    .max(suite_core_lib_2.Constants.DisplayNameMaxLength, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_DisplayNameMaxLengthTemplate))
+                    .matches(suite_core_lib_2.Constants.DisplayNameRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_DisplayNameRegexErrorTemplate)),
+        } : {}),
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            ...initialValues,
+            ...additionalInitialValues,
+        },
+        enableReinitialize: true,
+        validationSchema: Yup.object({
+            email: validation.email,
+            timezone: validation.timezone,
+            siteLanguage: validation.siteLanguage,
+            currency: validation.currency,
+            darkMode: validation.darkMode,
+            directChallenge: validation.directChallenge,
+            ...(suite_core_lib_2.Constants.EnableDisplayName && validation.displayName ? { displayName: validation.displayName } : {}),
+            ...additionalValidation,
+        }),
+        onSubmit: async (values, { setSubmitting, setFieldError, setTouched }) => {
+            setSaving(true);
+            setSuccessMessage(null);
+            const result = await onSubmit(values);
+            if ('success' in result && result.success) {
+                setSuccessMessage(result.message ||
+                    labels.successMessage ||
+                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_SaveSuccess));
+                setApiErrors({});
+            }
+            else {
+                const newApiErrors = {};
+                const fieldsToTouch = {};
+                if ('field' in result && result.field) {
+                    setFieldError(result.field, result.error);
+                    fieldsToTouch[result.field] = true;
+                }
+                if ('errors' in result && result.errors) {
+                    result.errors.forEach((err) => {
+                        if (err.path && err.msg) {
+                            setFieldError(err.path, err.msg);
+                            fieldsToTouch[err.path] = true;
+                        }
+                    });
+                }
+                if ('error' in result &&
+                    result.error &&
+                    !Object.keys(newApiErrors).length) {
+                    newApiErrors.general = result.error;
+                }
+                setApiErrors(newApiErrors);
+                setTouched(fieldsToTouch, false);
+            }
+            setSubmitting(false);
+            setSaving(false);
+        },
+    });
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { maxWidth: "sm", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                mt: 4,
+                display: 'flex',
+                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.Settings_Title) }), (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: "email", name: "email", label: labels.email ||
+                                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Email), value: formik.values.email, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.email && (formik.errors.email || apiErrors.email)), helperText: (formik.touched.email &&
+                                (formik.errors.email || apiErrors.email)) ||
+                                labels.emailHelper ||
+                                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_EmailHelper), margin: "normal" }), suite_core_lib_2.Constants.EnableDisplayName && ((0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "displayName", name: "displayName", label: labels.displayName ||
+                                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_DisplayName), value: formik.values.displayName ?? '', onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.displayName && (formik.errors.displayName || apiErrors.displayName)), helperText: formik.touched.displayName && (formik.errors.displayName || apiErrors.displayName), margin: "normal" })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, margin: "normal", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "timezone-label", children: labels.timezone ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Timezone) }), (0, jsx_runtime_1.jsx)(material_1.Select, { labelId: "timezone-label", id: "timezone", name: "timezone", value: formik.values.timezone, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched.timezone && Boolean(formik.errors.timezone), label: labels.timezone ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Timezone), children: timezones.map((tz) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: tz, children: tz }, tz))) }), formik.touched.timezone &&
+                                    (formik.errors.timezone || apiErrors.timezone) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", variant: "caption", children: formik.errors.timezone || apiErrors.timezone }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, margin: "normal", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "language-label", children: labels.siteLanguage ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_SiteLanguage) }), (0, jsx_runtime_1.jsx)(material_1.Select, { labelId: "language-label", id: "siteLanguage", name: "siteLanguage", value: formik.values.siteLanguage, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched.siteLanguage &&
+                                        Boolean(formik.errors.siteLanguage), label: labels.siteLanguage ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_SiteLanguage), children: languages.map((lang) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: lang.code, children: lang.label }, lang.code))) }), formik.touched.siteLanguage &&
+                                    (formik.errors.siteLanguage || apiErrors.siteLanguage) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", variant: "caption", children: formik.errors.siteLanguage || apiErrors.siteLanguage }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, margin: "normal", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "currency-label", children: labels.currency ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_Currency) }), (0, jsx_runtime_1.jsx)(material_1.Select, { labelId: "currency-label", id: "currency", name: "currency", value: formik.values.currency, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched.currency && Boolean(formik.errors.currency), label: labels.currency ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_Currency), children: currencies.map((curr) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: curr.code, children: curr.label }, curr.code))) }), formik.touched.currency &&
+                                    (formik.errors.currency || apiErrors.currency) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", variant: "caption", children: formik.errors.currency || apiErrors.currency }))] }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, margin: "normal", children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { id: "darkMode", name: "darkMode", checked: formik.values.darkMode, onChange: formik.handleChange }), label: labels.darkMode ||
+                                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_DarkMode) }) }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, margin: "normal", children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { id: "directChallenge", name: "directChallenge", checked: formik.values.directChallenge, onChange: formik.handleChange }), label: labels.directChallenge ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_DirectChallengeLabel) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 4, mt: -1 }, children: labels.directChallengeHelper ||
+                                        tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_DirectChallengeHelper) })] }), additionalFields && additionalFields(formik), apiErrors.general && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mt: 2, mb: 2 }, children: apiErrors.general })), successMessage && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2 }, children: successMessage })), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", color: "primary", sx: { mt: 3, mb: 2 }, disabled: formik.isSubmitting, children: saving
+                                ? labels.saving ||
+                                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_Saving)
+                                : labels.save ||
+                                    tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Settings_Save) })] }), totpStatus !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mt: 3, mb: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "h2", gutterBottom: true, children: labels.totpSectionTitle || 'Two-Factor Authentication' }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: totpStatus
+                                ? (labels.totpStatusEnabled || '2FA is currently enabled')
+                                : (labels.totpStatusDisabled || '2FA is currently disabled') }), totpError && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mb: 2 }, role: "alert", children: totpError })), !totpStatus && !showTotpSetup && ((0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "outlined", onClick: handleEnableTotp, disabled: totpSetupLoading, "data-testid": "enable-totp-button", children: totpSetupLoading
+                                ? 'Setting up...'
+                                : (labels.totpEnableButton || 'Enable 2FA') })), showTotpSetup && totpProvisioningUri && totpSecret && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2 }, children: [(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: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "text", onClick: handleCancelTotpAction, "data-testid": "cancel-totp-setup-button", children: labels.totpCancelButton || 'Cancel' }) })] })), totpStatus && !showTotpSetup && !showDisablePrompt && !showResetPrompt && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "outlined", color: "error", onClick: () => { setShowDisablePrompt(true); setTotpError(null); }, "data-testid": "disable-totp-button", children: labels.totpDisableButton || 'Disable 2FA' }), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "outlined", onClick: () => { setShowResetPrompt(true); setTotpError(null); }, "data-testid": "reset-totp-button", children: labels.totpResetButton || 'Reset 2FA' })] })), showDisablePrompt && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { mb: 1 }, children: "Enter your current 2FA code to disable two-factor authentication:" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "totp-disable-code", name: "totp-disable-code", label: labels.totpDisableCodeLabel || 'TOTP Code', value: disableCode, onChange: (e) => setDisableCode(e.target.value), inputProps: {
+                                        'aria-label': labels.totpDisableCodeLabel || 'TOTP Code',
+                                        inputMode: 'numeric',
+                                        maxLength: 6,
+                                        pattern: '\\d{6}',
+                                    }, autoComplete: "one-time-code", margin: "normal" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2, mt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "contained", color: "error", onClick: handleDisableTotp, disabled: disableSubmitting || !/^\d{6}$/.test(disableCode), "data-testid": "disable-totp-submit-button", children: disableSubmitting
+                                                ? 'Disabling...'
+                                                : (labels.totpDisableSubmitButton || 'Confirm Disable') }), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "text", onClick: handleCancelTotpAction, "data-testid": "cancel-disable-totp-button", children: labels.totpCancelButton || 'Cancel' })] })] })), showResetPrompt && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { mb: 1 }, children: "Enter your current 2FA code to reset two-factor authentication:" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "totp-reset-code", name: "totp-reset-code", label: labels.totpResetCodeLabel || 'TOTP Code', value: resetCode, onChange: (e) => setResetCode(e.target.value), inputProps: {
+                                        'aria-label': labels.totpResetCodeLabel || 'TOTP Code',
+                                        inputMode: 'numeric',
+                                        maxLength: 6,
+                                        pattern: '\\d{6}',
+                                    }, autoComplete: "one-time-code", margin: "normal" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2, mt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "contained", onClick: handleResetTotp, disabled: resetSubmitting || !/^\d{6}$/.test(resetCode), "data-testid": "reset-totp-submit-button", children: resetSubmitting
+                                                ? 'Resetting...'
+                                                : (labels.totpResetSubmitButton || 'Confirm Reset') }), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "button", variant: "text", onClick: handleCancelTotpAction, "data-testid": "cancel-reset-totp-button", children: labels.totpCancelButton || 'Cancel' })] })] }))] }))] }) }));
+};
+exports.UserSettingsForm = UserSettingsForm;
+exports.default = exports.UserSettingsForm;

package/src/components/VerifyEmailPage.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+export interface VerifyEmailPageProps {
+    token: string | null;
+    onVerify: (token: string) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    labels?: {
+        title?: string;
+        verifying?: string;
+        success?: string;
+        failed?: string;
+        noToken?: string;
+        checkYourEmail?: string;
+        proceedToLogin?: string;
+        contactSupport?: string;
+        requestNewEmail?: string;
+    };
+    loginLink?: string;
+    resendLink?: string;
+}
+export declare const VerifyEmailPage: FC<VerifyEmailPageProps>;
+export default VerifyEmailPage;
+//# sourceMappingURL=VerifyEmailPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyEmailPage.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/VerifyEmailPage.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,EAAE,EAAwC,MAAM,OAAO,CAAC;AAGjE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7E,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwLpD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/src/components/VerifyEmailPage.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerifyEmailPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const contexts_1 = require("../contexts");
+const VerifyEmailPage = ({ token, onVerify, labels = {}, loginLink = '/login', resendLink = '/resend-verification', }) => {
+    const { tComponent } = (0, contexts_1.useI18n)();
+    const [message, setMessage] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [verificationStatus, setVerificationStatus] = (0, react_1.useState)('pending');
+    const translatedLabels = (0, react_1.useMemo)(() => {
+        return {
+            title: labels.title ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_EmailVerification),
+            success: labels.success ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.EmailVerification_Success),
+            failed: labels.failed ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.EmailVerification_Failed),
+            noToken: labels.noToken ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.NoVerificationTokenProvided),
+            checkYourEmail: labels.checkYourEmail ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_CheckYourEmail),
+            proceedToLogin: labels.proceedToLogin ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ProceedToLogin),
+            contactSupport: labels.contactSupport ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.HavingTroubleContactSupport),
+            requestNewEmail: labels.requestNewEmail ||
+                tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RequestNewVerificationEmail),
+        };
+    }, [labels, tComponent]);
+    // Use a ref to track whether verification has already been attempted,
+    // preventing infinite re-render loops from unstable onVerify references.
+    const hasVerified = (0, react_1.useRef)(false);
+    // Stable reference to onVerify to avoid re-triggering the effect
+    const onVerifyRef = (0, react_1.useRef)(onVerify);
+    onVerifyRef.current = onVerify;
+    (0, react_1.useEffect)(() => {
+        if (hasVerified.current)
+            return;
+        if (token) {
+            hasVerified.current = true;
+            const verifyEmail = async () => {
+                try {
+                    const result = await onVerifyRef.current(token);
+                    if (result.success) {
+                        setMessage(result.message || translatedLabels.success);
+                        setVerificationStatus('success');
+                    }
+                    else {
+                        setMessage(result.message || translatedLabels.failed);
+                        setVerificationStatus('error');
+                    }
+                }
+                catch {
+                    setMessage(translatedLabels.failed);
+                    setVerificationStatus('error');
+                }
+                finally {
+                    setLoading(false);
+                }
+            };
+            verifyEmail();
+        }
+        else {
+            hasVerified.current = true;
+            setLoading(false);
+            setVerificationStatus('info');
+        }
+    }, [token, translatedLabels]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { maxWidth: "sm", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                mt: 8,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: translatedLabels.title }), loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%', mt: 2 }, children: verificationStatus === 'info' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 2 }, children: translatedLabels.noToken }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body1", children: [translatedLabels.contactSupport, ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: resendLink, color: "primary", children: translatedLabels.requestNewEmail }), "."] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: verificationStatus === 'success' ? 'success' : 'error', sx: { mb: 2 }, children: message }), verificationStatus === 'success' && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", component: material_1.Link, href: loginLink, fullWidth: true, children: translatedLabels.proceedToLogin })), verificationStatus === 'error' && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body1", children: [translatedLabels.contactSupport, ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: resendLink, color: "primary", children: translatedLabels.requestNewEmail }), "."] }))] })) }))] }) }));
+};
+exports.VerifyEmailPage = VerifyEmailPage;
+exports.default = exports.VerifyEmailPage;

package/src/components/{index.ts → index.d.ts}

@@ -1,4 +1,3 @@
-// Component exports
 export * from './ApiAccess';
 export * from './BackupCodeLoginForm';
 export * from './BackupCodesForm';
@@ -30,3 +29,4 @@ export * from './TDiv';
 export * from './TImgAlt';
 export * from './TotpSetupForm';
 export * from './TotpVerificationForm';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,KAAK,CAAC;AACpB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC"}

package/src/components/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// Component exports
+tslib_1.__exportStar(require("./ApiAccess"), exports);
+tslib_1.__exportStar(require("./BackupCodeLoginForm"), exports);
+tslib_1.__exportStar(require("./BackupCodesForm"), exports);
+tslib_1.__exportStar(require("./CategoryMenu"), exports);
+tslib_1.__exportStar(require("./ChangePasswordForm"), exports);
+tslib_1.__exportStar(require("./ConfirmationDialog"), exports);
+tslib_1.__exportStar(require("./CurrencyCodeSelector"), exports);
+tslib_1.__exportStar(require("./CurrencyInput"), exports);
+tslib_1.__exportStar(require("./DashboardPage"), exports);
+tslib_1.__exportStar(require("./DropdownMenu"), exports);
+tslib_1.__exportStar(require("./ExpirationSecondsSelector"), exports);
+tslib_1.__exportStar(require("./FakeEmailAdminPanel"), exports);
+tslib_1.__exportStar(require("./Flag"), exports);
+tslib_1.__exportStar(require("./ForgotPasswordForm"), exports);
+tslib_1.__exportStar(require("./LoginForm"), exports);
+tslib_1.__exportStar(require("./LogoutPage"), exports);
+tslib_1.__exportStar(require("./RegisterForm"), exports);
+tslib_1.__exportStar(require("./ResetPasswordForm"), exports);
+tslib_1.__exportStar(require("./UserSettingsForm"), exports);
+tslib_1.__exportStar(require("./SideMenu"), exports);
+tslib_1.__exportStar(require("./SideMenuListItem"), exports);
+tslib_1.__exportStar(require("./TopMenu"), exports);
+tslib_1.__exportStar(require("./TranslatedTitle"), exports);
+tslib_1.__exportStar(require("./UserMenu"), exports);
+tslib_1.__exportStar(require("./UserLanguageSelector"), exports);
+tslib_1.__exportStar(require("./VerifyEmailPage"), exports);
+tslib_1.__exportStar(require("./T"), exports);
+tslib_1.__exportStar(require("./TDiv"), exports);
+tslib_1.__exportStar(require("./TImgAlt"), exports);
+tslib_1.__exportStar(require("./TotpSetupForm"), exports);
+tslib_1.__exportStar(require("./TotpVerificationForm"), exports);

package/src/contexts/AuthProvider.d.ts

@@ -0,0 +1,19 @@
+import { IECIESConfig } from '@digitaldefiance/ecies-lib';
+import { IConstants } from '@digitaldefiance/suite-core-lib';
+import { ReactNode } from 'react';
+export { AuthContext, useAuth } from './auth-context';
+export type { AuthContextData } from './auth-context';
+export type AuthProviderProps = {
+    children: ReactNode;
+    baseUrl: string;
+    constants: IConstants;
+    eciesConfig: IECIESConfig;
+    /**
+     * Optional callback to handle navigation after logout
+     * If not provided, logout will only clear auth state without navigation
+     */
+    onLogout?: () => void;
+    emailDomain: string;
+};
+export declare const AuthProvider: ({ children, baseUrl, constants, eciesConfig, onLogout, emailDomain, }: AuthProviderProps) => import("react").JSX.Element;
+//# sourceMappingURL=AuthProvider.d.ts.map

package/src/contexts/AuthProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/contexts/AuthProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,YAAY,EAIb,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EACL,UAAU,EAOX,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAEL,SAAS,EAMV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAUtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,UAAU,CAAC;IACtB,WAAW,EAAE,YAAY,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAitBF,eAAO,MAAM,YAAY,GAAI,uEAO1B,iBAAiB,gCAYnB,CAAC"}