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

package/src/components/TImgAlt.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TImgAlt = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/app/components/TImgAlt.tsx
+const react_1 = require("react");
+const contexts_1 = require("../contexts");
+const TImgAlt = ({ src, stringKey, vars, imgOptions, }) => {
+    const { currentLanguage, tBranded } = (0, contexts_1.useI18n)();
+    const translated = (0, react_1.useMemo)(() => tBranded(stringKey, vars, currentLanguage), [tBranded, stringKey, vars, currentLanguage]);
+    return (0, jsx_runtime_1.jsx)("img", { src: src, ...imgOptions, alt: translated });
+};
+exports.TImgAlt = TImgAlt;
+exports.default = exports.TImgAlt;

package/src/components/TopMenu.d.ts

@@ -0,0 +1,50 @@
+import { IConstants } from '@digitaldefiance/suite-core-lib';
+import React, { FC, ReactElement } from 'react';
+import { ICategoryConfig } from '../interfaces/ICategoryConfig';
+import { MenuType } from '../types/MenuType';
+declare global {
+    interface Window {
+        APP_CONFIG?: {
+            hostname: string;
+            siteTitle: string;
+            server: string;
+            [key: string]: unknown;
+        };
+    }
+}
+export interface AdditionalDropdownMenu {
+    menuType: MenuType;
+    menuIcon: ReactElement;
+    priority?: number;
+    /** Optional callback invoked when the icon button is clicked. */
+    action?: () => void;
+    /** When true, the menu icon is hidden if there are no sub-options. Defaults to false. */
+    hideWhenEmpty?: boolean;
+    /**
+     * Optional category id. When the TopMenu is given matching `categories`,
+     * this menu is rendered inside that category's popover instead of inline.
+     */
+    category?: string;
+    /** Optional label used for tile captions and tooltips. */
+    label?: string;
+}
+export interface TopMenuProps {
+    Logo: React.ReactNode;
+    additionalMenus?: Array<AdditionalDropdownMenu>;
+    /**
+     * Optional category configurations. When provided, any menu (whether
+     * registered via `MenuContext` or passed in `additionalMenus`) whose
+     * `category` matches a category `id` is rendered as a tile inside that
+     * category's mega-menu popover. Menus without a matching category render
+     * inline in the AppBar exactly as before, so this is backwards compatible:
+     * omit `categories` (or use empty array) for the original layout.
+     */
+    categories?: ICategoryConfig[];
+    /** Custom action elements rendered in the toolbar after menu dropdowns (e.g. notification bell). Only shown when authenticated. */
+    actions?: React.ReactNode;
+    constants?: IConstants;
+    showTitle?: boolean;
+}
+export declare const TopMenu: FC<TopMenuProps>;
+export default TopMenu;
+//# sourceMappingURL=TopMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIX,MAAM,iCAAiC,CAAC;AAUzC,OAAO,KAAK,EAAE,EAEZ,EAAE,EACF,YAAY,EAIb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,MAAM,EAAE,MAAM,CAAC;YACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAChD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,mIAAmI;IACnI,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAsKpC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/src/components/TopMenu.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopMenu = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const Menu_1 = tslib_1.__importDefault(require("@mui/icons-material/Menu"));
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+const AuthProvider_1 = require("../contexts/AuthProvider");
+const I18nProvider_1 = require("../contexts/I18nProvider");
+const MenuContext_1 = require("../contexts/MenuContext");
+const CategoryMenu_1 = require("./CategoryMenu");
+const DropdownMenu_1 = require("./DropdownMenu");
+const SideMenu_1 = require("./SideMenu");
+const UserLanguageSelector_1 = require("./UserLanguageSelector");
+const UserMenu_1 = require("./UserMenu");
+const TopMenu = ({ Logo, additionalMenus, categories, actions, constants, showTitle, }) => {
+    const { isAuthenticated } = (0, react_1.useContext)(AuthProvider_1.AuthContext);
+    const { getTopMenus } = (0, MenuContext_1.useMenu)();
+    const [isSideMenuOpen, setIsSideMenuOpen] = (0, react_1.useState)(false);
+    const handleOpenSideMenu = () => setIsSideMenuOpen(true);
+    const handleCloseSideMenu = () => setIsSideMenuOpen(false);
+    const { tComponent } = (0, I18nProvider_1.useI18n)();
+    // When constants are explicitly provided, pass Site as a template variable
+    // override. Otherwise let the i18n engine resolve {Site} from its registered
+    // constants (which the consuming app sets up via createI18nSetup).
+    const siteTitle = tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_SiteTemplate, constants ? { Site: constants.Site } : undefined);
+    const allMenus = (0, react_1.useMemo)(() => {
+        const contextMenus = getTopMenus();
+        if (!additionalMenus || additionalMenus.length === 0) {
+            return contextMenus;
+        }
+        const additional = additionalMenus.map((m) => ({
+            ...m,
+            options: [],
+            isUserMenu: false,
+        }));
+        return [...contextMenus, ...additional].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    }, [getTopMenus, additionalMenus]);
+    // Split menus into those that belong to a configured category vs. those
+    // that should render inline in the AppBar (default, backwards-compatible
+    // behaviour). The user menu is always inline.
+    const { inlineMenus, menusByCategory, orderedCategories } = (0, react_1.useMemo)(() => {
+        const hasCategories = !!categories && categories.length > 0;
+        const categoryIds = new Set(hasCategories ? categories.map((c) => c.id) : []);
+        const byCategory = new Map();
+        const inline = [];
+        for (const menu of allMenus) {
+            const cat = menu.category;
+            if (!menu.isUserMenu && hasCategories && cat && categoryIds.has(cat)) {
+                const list = byCategory.get(cat) ?? [];
+                list.push(menu);
+                byCategory.set(cat, list);
+            }
+            else {
+                inline.push(menu);
+            }
+        }
+        const ordered = hasCategories
+            ? [...categories].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
+            : [];
+        return {
+            inlineMenus: inline,
+            menusByCategory: byCategory,
+            orderedCategories: ordered,
+        };
+    }, [allMenus, categories]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.AppBar, { position: "fixed", sx: { top: 10 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "large", edge: "start", color: "inherit", "aria-label": "menu", sx: { mr: 2 }, onClick: handleOpenSideMenu, children: (0, jsx_runtime_1.jsx)(Menu_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            height: 40,
+                            width: 'auto',
+                            marginRight: 2,
+                            display: 'flex',
+                            alignItems: 'center',
+                        }, children: Logo }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: showTitle !== false ? siteTitle : '\u00A0' }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [isAuthenticated ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_1.Link, to: "/dashboard", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard) }), inlineMenus.map((menu, index) => menu.isUserMenu ? ((0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, {}, `user-menu`)) : ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: menu.menuType, menuIcon: menu.menuIcon, action: menu.action, hideWhenEmpty: menu.hideWhenEmpty }, `menu-${index}`))), orderedCategories.map((category) => ((0, jsx_runtime_1.jsx)(CategoryMenu_1.CategoryMenu, { category: category, menus: menusByCategory.get(category.id) ?? [] }, `category-${category.id}`)))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_1.Link, to: "/login", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_LoginButton) }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_1.Link, to: "/register", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RegisterButton) })] })), isAuthenticated && actions, (0, jsx_runtime_1.jsx)(UserLanguageSelector_1.UserLanguageSelector, {})] })] }), (0, jsx_runtime_1.jsx)(SideMenu_1.SideMenu, { isOpen: isSideMenuOpen, onClose: handleCloseSideMenu })] }));
+};
+exports.TopMenu = TopMenu;
+exports.default = exports.TopMenu;

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,CAgJhD,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, "data-testid": "qr-code-svg" }) }), (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/TranslatedTitle.d.ts

@@ -0,0 +1,8 @@
+interface FCParams<TEnum extends string> {
+    componentId: string;
+    stringKey: TEnum;
+    vars?: Record<string, string | number>;
+}
+export declare const TranslatedTitle: <TEnum extends string>({ componentId, stringKey, vars, }: FCParams<TEnum>) => null;
+export default TranslatedTitle;
+//# sourceMappingURL=TranslatedTitle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TranslatedTitle.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TranslatedTitle.tsx"],"names":[],"mappings":"AAKA,UAAU,QAAQ,CAAC,KAAK,SAAS,MAAM;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,GAAI,KAAK,SAAS,MAAM,EAAE,mCAInD,QAAQ,CAAC,KAAK,CAAC,KAAG,IAapB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/src/components/TranslatedTitle.js

@@ -0,0 +1,15 @@
+"use strict";
+// src/app/components/TranslatedTitle.tsx
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranslatedTitle = void 0;
+const react_1 = require("react");
+const contexts_1 = require("../contexts");
+const TranslatedTitle = ({ componentId, stringKey, vars, }) => {
+    const { tComponent, currentLanguage } = (0, contexts_1.useI18n)();
+    (0, react_1.useEffect)(() => {
+        document.title = tComponent(componentId, stringKey, vars, currentLanguage);
+    }, [tComponent, componentId, stringKey, vars, currentLanguage]);
+    return null;
+};
+exports.TranslatedTitle = TranslatedTitle;
+exports.default = exports.TranslatedTitle;

package/src/components/UserLanguageSelector.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare const UserLanguageSelector: FC;
+export default UserLanguageSelector;
+//# sourceMappingURL=UserLanguageSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserLanguageSelector.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/UserLanguageSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAM1D,eAAO,MAAM,oBAAoB,EAAE,EAkClC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/src/components/UserLanguageSelector.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserLanguageSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const i18n_lib_1 = require("@digitaldefiance/i18n-lib");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const Flag_1 = require("./Flag");
+const hooks_1 = require("../hooks");
+const services_1 = require("../services");
+const contexts_1 = require("../contexts");
+const UserLanguageSelector = () => {
+    const { baseUrl } = (0, contexts_1.useSuiteConfig)();
+    const authenticatedApi = (0, react_1.useMemo)(() => (0, services_1.createAuthenticatedApiClient)(baseUrl), [baseUrl]);
+    const { isAuthenticated } = (0, contexts_1.useAuth)();
+    const { currentLanguage, changeLanguage } = (0, hooks_1.useUserSettings)({ authenticatedApi, isAuthenticated });
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleLanguageChange = (newLanguage) => {
+        changeLanguage(newLanguage);
+        handleClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClick, children: (0, jsx_runtime_1.jsx)(Flag_1.Flag, { language: currentLanguage }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: Object.values(i18n_lib_1.LanguageRegistry.getAllLanguages()).map((lang) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => handleLanguageChange(lang.code), children: [(0, jsx_runtime_1.jsx)(Flag_1.Flag, { language: lang.code, sx: { mr: 1 } }), " ", lang.name] }, lang.code))) })] }));
+};
+exports.UserLanguageSelector = UserLanguageSelector;
+exports.default = exports.UserLanguageSelector;

package/src/components/UserMenu.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare const UserMenu: FC;
+export default UserMenu;
+//# sourceMappingURL=UserMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/UserMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,eAAO,MAAM,QAAQ,EAAE,EAOtB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/src/components/UserMenu.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const MenuType_1 = require("../types/MenuType");
+const DropdownMenu_1 = require("./DropdownMenu");
+const UserMenu = () => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: MenuType_1.MenuTypes.UserMenu, menuIcon: (0, jsx_runtime_1.jsx)(icons_material_1.AccountCircle, {}) }));
+};
+exports.UserMenu = UserMenu;
+exports.default = exports.UserMenu;

package/src/components/UserSettingsForm.d.ts

@@ -0,0 +1,113 @@
+import { useFormik } from 'formik';
+import { FC } from 'react';
+import * as Yup from 'yup';
+export interface UserSettingsFormValues {
+    email: string;
+    timezone: string;
+    siteLanguage: string;
+    currency: string;
+    darkMode: boolean;
+    directChallenge: boolean;
+    displayName?: string;
+    [key: string]: string | boolean | undefined;
+}
+export interface UserSettingsFormProps {
+    initialValues: UserSettingsFormValues;
+    onSubmit: (values: UserSettingsFormValues) => Promise<{
+        success: boolean;
+        message: string;
+    } | {
+        error: string;
+        errorType?: string;
+        field?: string;
+        errors?: Array<{
+            path: string;
+            msg: string;
+        }>;
+    }>;
+    languages: Array<{
+        code: string;
+        label: string;
+    }>;
+    emailValidation?: Yup.StringSchema;
+    timezoneValidation?: Yup.StringSchema;
+    siteLanguageValidation?: Yup.StringSchema;
+    currencyValidation?: Yup.StringSchema;
+    darkModeValidation?: Yup.BooleanSchema;
+    directChallengeValidation?: Yup.BooleanSchema;
+    displayNameValidation?: Yup.StringSchema;
+    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;
+        emailHelper?: string;
+        timezone?: string;
+        siteLanguage?: string;
+        currency?: string;
+        darkMode?: string;
+        directChallenge?: string;
+        directChallengeHelper?: string;
+        displayName?: string;
+        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>;
+export default UserSettingsForm;
+//# sourceMappingURL=UserSettingsForm.d.ts.map

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

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