@digitaldefiance/express-suite-react-components 2.4.3 → 2.5.0

package/README.md

@@ -31,6 +31,19 @@ yarn add @digitaldefiance/express-suite-react-components
 - **DashboardPage** - Basic dashboard layout
 - **ApiAccess** - API token display and copy component
 
+### Wrapper Components
+
+Pre-configured components that integrate with application contexts. See the [Component Wrappers Guide](WRAPPERS.md) for detailed usage.
+
+- **LoginFormWrapper** - Pre-configured login with auth context integration
+- **RegisterFormWrapper** - Pre-configured registration with auth context integration
+- **ChangePasswordFormWrapper** - Pre-configured password change with auth context
+- **BackupCodeLoginWrapper** - Pre-configured backup code login
+- **BackupCodesWrapper** - Pre-configured backup codes management
+- **UserSettingsFormWrapper** - Pre-configured settings form with auto-fetch
+- **VerifyEmailPageWrapper** - Pre-configured email verification
+- **LogoutPageWrapper** - Pre-configured logout with navigation
+
 ### UI Components
 
 - **ConfirmationDialog** - Reusable confirmation dialog
@@ -49,14 +62,19 @@ yarn add @digitaldefiance/express-suite-react-components
 
 - **useLocalStorage** - React hook for localStorage with state sync
 - **useExpiringValue** - React hook for values that expire after a duration
+- **useBackupCodes** - Manage backup code generation and retrieval
+- **useUserSettings** - Fetch and update user settings with context integration
+- **useEmailVerification** - Handle email verification flow
 
 ### Contexts & Providers
 
 - **I18nProvider** - Internationalization context with i18n engine integration
 - **AppThemeProvider** - MUI theme provider with dark/light mode toggle
 - **ThemeToggleButton** - Button component for theme switching
+- **SuiteConfigProvider** - Centralized configuration context (baseUrl, routes, languages)
 - **useI18n** - Hook for accessing i18n context
 - **useTheme** - Hook for accessing theme context
+- **useSuiteConfig** - Hook for accessing suite configuration
 
 ### Services
 
@@ -70,6 +88,44 @@ yarn add @digitaldefiance/express-suite-react-components
 
 ## Usage
 
+### Getting Started with Wrappers
+
+For the quickest setup, use wrapper components that handle context integration automatically. See the [Component Wrappers Guide](WRAPPERS.md) for comprehensive examples.
+
+```tsx
+import { 
+  SuiteConfigProvider,
+  AuthProvider,
+  LoginFormWrapper 
+} from '@digitaldefiance/express-suite-react-components';
+
+function App() {
+  return (
+    <SuiteConfigProvider
+      baseUrl="https://api.example.com"
+      routes={{
+        dashboard: '/dashboard',
+        login: '/login',
+      }}
+      languages={[
+        { code: 'en-US', label: 'English (US)' },
+      ]}
+    >
+      <AuthProvider baseUrl="https://api.example.com" onAuthError={() => {}}>
+        {/* Use wrappers for instant integration */}
+        <LoginFormWrapper />
+        
+        {/* Or customize via props */}
+        <LoginFormWrapper
+          redirectTo="/custom-dashboard"
+          componentProps={{ loginType: 'username' }}
+        />
+      </AuthProvider>
+    </SuiteConfigProvider>
+  );
+}
+```
+
 ### Menu System
 
 The menu system supports extensible menu types. See the [Menu Type Extensibility Guide](docs/MENU_TYPE_EXTENSIBILITY.md) for details on creating custom menus.
@@ -295,8 +351,77 @@ interface RegisterFormProps {
 
 MIT © Digital Defiance
 
+## Documentation
+
+- **[Overview](docs/OVERVIEW.md)** - Package architecture and getting started guide
+- **[Components Documentation](docs/COMPONENTS.md)** - API reference for presentational components
+- **[Hooks Documentation](docs/HOOKS.md)** - API reference for custom React hooks
+- **[Wrappers API Documentation](docs/WRAPPERS_API.md)** - API reference for wrapper components
+- **[Component Wrappers Guide](WRAPPERS.md)** - Comprehensive guide to using wrappers, hooks, and components
+- **[Menu Type Extensibility Guide](docs/MENU_TYPE_EXTENSIBILITY.md)** - Creating custom menu types
+
 ## ChangeLog
 
+### Version 2.5.0
+
+#### Added
+
+- **SuiteConfigProvider** - Centralized configuration context for baseUrl, routes, languages, and timezones
+- **Component Wrappers** - Pre-configured wrapper components for all major forms and pages
+  - LoginFormWrapper, RegisterFormWrapper, ChangePasswordFormWrapper
+  - BackupCodeLoginWrapper, BackupCodesWrapper
+  - UserSettingsFormWrapper, VerifyEmailPageWrapper, LogoutPageWrapper
+- **Business Logic Hooks** - Reusable hooks for common operations
+  - useBackupCodes - Manage backup code generation and retrieval
+  - useUserSettings - Fetch and update user settings with context integration
+  - useEmailVerification - Handle email verification flow
+- **Component Wrappers Guide** - Comprehensive documentation at `WRAPPERS.md`
+
+#### Changed
+
+- **Wrapper Architecture** - All wrappers now use centralized SuiteConfigProvider
+- **Consistent API** - All wrappers support `onSuccess`, `componentProps`, and configurable routing
+- **Improved Testability** - Business logic extracted into hooks for easier testing
+- **Better DX** - Three levels of abstraction: Wrappers (easy), Hooks (flexible), Components (full control)
+
+#### Breaking Changes
+
+- **BackupCodesWrapper** - No longer requires `baseUrl` prop (uses SuiteConfigProvider)
+- **VerifyEmailPageWrapper** - No longer requires `baseUrl` prop (uses SuiteConfigProvider)
+- **UserSettingsFormWrapper** - No longer requires `baseUrl` or `languages` props (uses SuiteConfigProvider)
+
+#### Migration Guide
+
+```tsx
+// Old (v2.4.x)
+<BackupCodesWrapper baseUrl="https://api.example.com" />
+<UserSettingsFormWrapper 
+  baseUrl="https://api.example.com"
+  languages={[...]}
+/>
+
+// New (v2.5.0)
+<SuiteConfigProvider 
+  baseUrl="https://api.example.com"
+  languages={[...]}
+>
+  <BackupCodesWrapper />
+  <UserSettingsFormWrapper />
+</SuiteConfigProvider>
+```
+
+See [Component Wrappers Guide](WRAPPERS.md) for complete migration examples.
+
+### Version 2.4.5
+
+- DarkMode improvements
+
+### Version 2.4.4
+
+- Fix t(tComponent( calls
+- Add enableBackupCode to MenuProvider
+- Add User Settings to menu
+
 ### Version 2.4.3
 
 - Simplify UserSettingsForm/Wrapper
@@ -315,23 +440,27 @@ MIT © Digital Defiance
 ### Version 2.4.0
 
 #### Changed
+
 - **Version Bump**: Updated from 2.3.5 to 2.4.0
 - **Dependency Update**: Upgraded `@digitaldefiance/suite-core-lib` from ^2.2.5 to ^2.2.10
 - **Translation Keys**: Replaced `Login_UseEmail` with `Login_UseEmailAddress` in BackupCodeLoginForm and LoginForm
 - **Error Messages**: Updated password login error to use `Error_Login_PasswordLoginNotSetup` instead of `PasswordLogin_Setup_NotAvailable` in AuthProvider
 
 #### Added
+
 - **Error Handling**: LoginForm now displays error messages via Alert component with Formik status
 - **Error Recovery**: LoginForm onSubmit wrapped with try-catch to capture and display errors
 - **Menu Context Integration**: TopMenu now uses `useMenu()` hook and `getTopMenus()` method
 - **Menu Types**: Added `AccountCircle` icon import and `IMenuConfig` interface import
 
 #### Fixed
+
 - **Import Path**: Corrected `IAppConfig` import path from `../interfaces/AppConfig` to `../interfaces/IAppConfig`
 - **Menu Rendering**: Simplified TopMenu additional menus logic to use centralized menu context
 - **Error Type**: Added `errorType: 'PasswordLoginNotSetup'` to password login error responses
 
 #### Technical
+
 - Enhanced error propagation in authentication flows
 - Improved menu configuration architecture with context-based management
 - Better alignment with suite-core-lib translation key naming conventions
@@ -359,10 +488,12 @@ MIT © Digital Defiance
 ### v2.3.0
 
 #### Breaking Changes
+
 - **Removed `IncludeOnMenu` enum** - Replaced with extensible `MenuType` system using branded string types
 - Menu system now requires `MenuTypes` constant instead of enum values
 
 #### Added
+
 - **Extensible Menu Type System** - New `MenuType` branded string type with `createMenuType()` factory function
 - **`MenuTypes` constant** - Built-in menu types (SideMenu, TopMenu, UserMenu) replacing enum
 - **`createMenuType()` function** - Factory for creating custom menu types with type safety
@@ -371,6 +502,7 @@ MIT © Digital Defiance
 - **Menu Type Extensibility Guide** - Comprehensive documentation at `docs/MENU_TYPE_EXTENSIBILITY.md`
 
 #### Changed
+
 - **IMenuOption.includeOnMenus** - Now uses `MenuType[]` instead of `IncludeOnMenu[]`
 - **DropdownMenu.menuType** - Now accepts `MenuType` instead of `IncludeOnMenu`
 - **MenuContext.getMenuOptions** - Now accepts `MenuType` parameter instead of `IncludeOnMenu`
@@ -378,6 +510,7 @@ MIT © Digital Defiance
 - Updated README with menu system usage examples and extensibility guide link
 
 #### Migration Guide
+
 ```typescript
 // Old (v2.2.x)
 import { IncludeOnMenu } from '@digitaldefiance/express-suite-react-components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "description": "React MUI components for Digital Defiance Express Suite",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -8,9 +8,9 @@
     "build": "npx nx build digitaldefiance-express-suite-react-components",
     "build:stream": "npx nx build --outputStyle=stream digitaldefiance-express-suite-react-components",
     "build:logged": "npx nx build --outputStyle=stream digitaldefiance-express-suite-react-components 2>&1 | ansifilter -o build.log",
-    "test": "npx nx test digitaldefiance-express-suite-react-components",
-    "test:stream": "npx nx test --outputStyle=stream digitaldefiance-express-suite-react-components",
-    "test:logged": "npx nx test --outputStyle=stream digitaldefiance-express-suite-react-components 2>&1 | ansifilter -o test.log",
+    "test": "NODE_OPTIONS='--max-old-space-size=6144' npx nx test digitaldefiance-express-suite-react-components",
+    "test:stream": "NODE_OPTIONS='--max-old-space-size=6144' npx nx test --outputStyle=stream digitaldefiance-express-suite-react-components",
+    "test:logged": "NODE_OPTIONS='--max-old-space-size=6144' npx nx test --outputStyle=stream digitaldefiance-express-suite-react-components 2>&1 | ansifilter -o test.log",
     "test:coverage": "npx jest --coverage --testPathPattern=digitaldefiance-express-suite-react-components --coverageReporters=text",
     "lint": "npx nx lint digitaldefiance-express-suite-react-components",
     "lint:fix": "npx nx lint digitaldefiance-express-suite-react-components --fix",

package/src/components/TopMenu.js

@@ -25,14 +25,14 @@ const TopMenu = ({ Logo, additionalMenus }) => {
     const appConfig = 'APP_CONFIG' in window
         ? window.APP_CONFIG
         : undefined;
-    const siteTitle = t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_SiteTemplate));
+    const siteTitle = tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_SiteTemplate);
     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: 40,
                             marginRight: 2,
                             display: 'flex',
                             alignItems: 'center',
-                        }, children: Logo }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: siteTitle }), (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_dom_1.Link, to: "/dashboard", children: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard)) }), getTopMenus().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 }, `menu-${index}`))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/login", children: t(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_dom_1.Link, to: "/register", children: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RegisterButton)) })] })), (0, jsx_runtime_1.jsx)(UserLanguageSelector_1.UserLanguageSelector, {})] })] }), (0, jsx_runtime_1.jsx)(SideMenu_1.SideMenu, { isOpen: isSideMenuOpen, onClose: handleCloseSideMenu })] }));
+                        }, children: Logo }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: siteTitle }), (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_dom_1.Link, to: "/dashboard", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard) }), getTopMenus().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 }, `menu-${index}`))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_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_dom_1.Link, to: "/register", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RegisterButton) })] })), (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/VerifyEmailPage.js

@@ -12,13 +12,13 @@ const VerifyEmailPage = ({ token, onVerify, labels = {}, loginLink = '/login', r
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [verificationStatus, setVerificationStatus] = (0, react_1.useState)('pending');
     const translatedLabels = {
-        title: labels.title || t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_EmailVerification)),
-        success: labels.success || t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.EmailVerification_Success)),
-        failed: labels.failed || t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.EmailVerification_Failed)),
-        noToken: labels.noToken || t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.NoVerificationTokenProvided)),
-        proceedToLogin: labels.proceedToLogin || t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ProceedToLogin)),
-        contactSupport: labels.contactSupport || t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.HavingTroubleContactSupport)),
-        requestNewEmail: labels.requestNewEmail || t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RequestNewVerificationEmail)),
+        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),
+        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),
     };
     (0, react_1.useEffect)(() => {
         const verifyEmail = async (verificationToken) => {

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

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

package/src/contexts/AuthProvider.js

@@ -6,6 +6,7 @@ const ecies_lib_1 = require("@digitaldefiance/ecies-lib");
 const i18n_lib_1 = require("@digitaldefiance/i18n-lib");
 const react_1 = require("react");
 const I18nProvider_1 = require("./I18nProvider");
+const ThemeProvider_1 = require("./ThemeProvider");
 const authService_1 = require("../services/authService");
 const authenticatedApi_1 = require("../services/authenticatedApi");
 const useExpiringValue_1 = require("../hooks/useExpiringValue");
@@ -14,6 +15,7 @@ const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
 exports.AuthContext = (0, react_1.createContext)({});
 const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout }) => {
     const { changeLanguage, currentLanguage, t, tComponent } = (0, I18nProvider_1.useI18n)();
+    const { setColorMode } = (0, ThemeProvider_1.useTheme)();
     const authService = (0, react_1.useMemo)(() => (0, authService_1.createAuthService)(constants, baseUrl, eciesConfig), [constants, baseUrl, eciesConfig]);
     const authenticatedApi = (0, react_1.useMemo)(() => (0, authenticatedApi_1.createAuthenticatedApiClient)(baseUrl), [baseUrl]);
     // Use the custom hooks for expiring values
@@ -97,6 +99,8 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
                 setIsGlobalAdmin(userData.roles.some((r) => r.admin));
                 setIsAuthenticated(true);
                 setToken(token);
+                // Set theme based on user's darkMode preference
+                setColorMode(userData.darkMode ? 'dark' : 'light');
             }
         }
         catch (error) {
@@ -109,7 +113,7 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
             setLoading(false);
             setIsCheckingAuth(false);
         }
-    }, [authService, clearMnemonic, clearWallet]);
+    }, [authService, clearMnemonic, clearWallet, setColorMode]);
     (0, react_1.useEffect)(() => {
         const token = localStorage.getItem('authToken');
         if (token) {
@@ -137,10 +141,12 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
             setAuthState((prev) => prev + 1);
             localStorage.setItem('authToken', loginResult.token);
             localStorage.setItem('user', JSON.stringify(loginResult.user));
+            // Set theme based on user's darkMode preference
+            setColorMode(loginResult.user.darkMode ? 'dark' : 'light');
             return loginResult;
         }
         return loginResult;
-    }, [authService, setMnemonic, setWallet]);
+    }, [authService, setMnemonic, setWallet, setColorMode]);
     const emailChallengeLogin = (0, react_1.useCallback)(async (mnemonic, token, username, email, expireMnemonicSeconds, expireWalletSeconds) => {
         setLoading(true);
         const loginResult = await authService.emailChallengeLogin(mnemonic, token, username, email);
@@ -156,10 +162,12 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
             setAuthState((prev) => prev + 1);
             localStorage.setItem('authToken', loginResult.token);
             localStorage.setItem('user', JSON.stringify(loginResult.user));
+            // Set theme based on user's darkMode preference
+            setColorMode(loginResult.user.darkMode ? 'dark' : 'light');
             return loginResult;
         }
         return loginResult;
-    }, [authService, setMnemonic, setWallet]);
+    }, [authService, setMnemonic, setWallet, setColorMode]);
     const getPasswordLoginService = (0, react_1.useCallback)(() => {
         const eciesService = new ecies_lib_1.ECIESService(eciesConfig);
         return new ecies_lib_1.PasswordLoginService(eciesService, new ecies_lib_1.Pbkdf2Service(ecies_lib_1.Constants.PBKDF2_PROFILES, ecies_lib_1.Constants.ECIES, ecies_lib_1.Constants.PBKDF2));
@@ -170,7 +178,7 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
     }, []);
     const passwordLogin = (0, react_1.useCallback)(async (password, username, email) => {
         if (!isPasswordLoginAvailable()) {
-            return { error: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Error_Login_PasswordLoginNotSetup)), errorType: 'PasswordLoginNotSetup' };
+            return { error: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Error_Login_PasswordLoginNotSetup), errorType: 'PasswordLoginNotSetup' };
         }
         setLoading(true);
         const passwordLoginService = getPasswordLoginService();
@@ -179,8 +187,12 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
         setLoading(false);
         setWallet(wallet);
         setMnemonic(mnemonic);
+        // Set theme based on user's darkMode preference if login succeeded
+        if ('user' in loginResult) {
+            setColorMode(loginResult.user.darkMode ? 'dark' : 'light');
+        }
         return loginResult;
-    }, [authService, getPasswordLoginService, setMnemonic, setWallet, t, tComponent, isPasswordLoginAvailable]);
+    }, [authService, getPasswordLoginService, setMnemonic, setWallet, t, tComponent, isPasswordLoginAvailable, setColorMode]);
     const refreshToken = (0, react_1.useCallback)(async () => {
         try {
             const result = await authService.refreshToken();
@@ -216,11 +228,11 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
             setLoading(false);
             setWallet(wallet);
             setMnemonic(mnemonic);
-            return { success: true, message: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordLogin_Setup_Success)) };
+            return { success: true, message: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordLogin_Setup_Success) };
         }
         catch {
             setLoading(false);
-            return { success: false, message: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordLogin_Setup_Failure)) };
+            return { success: false, message: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordLogin_Setup_Failure) };
         }
     }, [setMnemonic, setWallet, t, tComponent]);
     const backupCodeLogin = (0, react_1.useCallback)(async (identifier, code, isEmail, recoverMnemonic, newPassword) => {
@@ -232,6 +244,8 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
             if (loginResult.user) {
                 setUser(loginResult.user);
                 setIsAuthenticated(true);
+                // Set theme based on user's darkMode preference
+                setColorMode(loginResult.user.darkMode ? 'dark' : 'light');
             }
             setAuthState((prev) => prev + 1);
             return {
@@ -242,7 +256,7 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
             };
         }
         return loginResult;
-    }, [baseUrl]);
+    }, [baseUrl, setColorMode]);
     const logout = (0, react_1.useCallback)(async () => {
         localStorage.removeItem('user');
         localStorage.removeItem('authToken');
@@ -270,7 +284,7 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
     }, [baseUrl]);
     const changePassword = (0, react_1.useCallback)(async (currentPassword, newPassword) => {
         if (!isPasswordLoginAvailable()) {
-            return { error: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Error_Login_PasswordLoginNotSetup)), errorType: 'PasswordLoginNotSetup' };
+            return { error: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Error_Login_PasswordLoginNotSetup), errorType: 'PasswordLoginNotSetup' };
         }
         setLoading(true);
         try {
@@ -278,13 +292,13 @@ const AuthProviderInner = ({ children, baseUrl, constants, eciesConfig, onLogout
             const { mnemonic, wallet } = await passwordLoginService.getWalletAndMnemonicFromLocalStorageBundle(new ecies_lib_1.SecureString(currentPassword));
             if (!mnemonic) {
                 setLoading(false);
-                return { error: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordLogin_InvalidCurrentPassword)), errorType: 'InvalidCurrentPassword' };
+                return { error: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordLogin_InvalidCurrentPassword), errorType: 'InvalidCurrentPassword' };
             }
             await passwordLoginService.setupPasswordLoginLocalStorageBundle(mnemonic, new ecies_lib_1.SecureString(newPassword));
             setLoading(false);
             setWallet(wallet);
             setMnemonic(mnemonic);
-            return { success: true, message: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordChange_Success)) };
+            return { success: true, message: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordChange_Success) };
         }
         catch (error) {
             setLoading(false);

package/src/contexts/MenuContext.d.ts

@@ -5,6 +5,7 @@ import { IMenuConfig } from '../interfaces/IMenuConfig';
 interface MenuProviderProps {
     children: ReactNode;
     menuConfigs?: IMenuConfig[];
+    enableBackupCodes?: boolean;
 }
 interface MenuContextType {
     menuOptions: IMenuOption[];

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

@@ -1 +1 @@
-{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/contexts/MenuContext.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACL,EAAE,EACF,SAAS,EAQV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,QAAQ,EAAa,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;CAC7B;AAED,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,cAAc,EAAE,CACd,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,OAAO,KACrB,WAAW,EAAE,CAAC;IACnB,kBAAkB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,MAAM,IAAI,CAAC;IAC5D,WAAW,EAAE,MAAM,KAAK,CAAC,WAAW,CAAC,CAAC;CACvC;AAID,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwO9C,CAAC;AAEF,eAAO,MAAM,OAAO,QAAO,eAM1B,CAAC"}
+{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/contexts/MenuContext.tsx"],"names":[],"mappings":"AAiBA,OAAO,EACL,EAAE,EACF,SAAS,EAQV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,QAAQ,EAAa,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,cAAc,EAAE,CACd,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,OAAO,KACrB,WAAW,EAAE,CAAC;IACnB,kBAAkB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,MAAM,IAAI,CAAC;IAC5D,WAAW,EAAE,MAAM,KAAK,CAAC,WAAW,CAAC,CAAC;CACvC;AAID,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiP9C,CAAC;AAEF,eAAO,MAAM,OAAO,QAAO,eAM1B,CAAC"}

package/src/contexts/MenuContext.js

@@ -12,11 +12,11 @@ const MenuType_1 = require("../types/MenuType");
 const I18nProvider_1 = require("./I18nProvider");
 const ThemeProvider_1 = require("./ThemeProvider");
 const MenuContext = (0, react_1.createContext)(undefined);
-const MenuProvider = ({ children, menuConfigs = [] }) => {
+const MenuProvider = ({ children, menuConfigs = [], enableBackupCodes = true }) => {
     const { userData: user, isAuthenticated, mnemonic, clearMnemonic, wallet, clearWallet } = (0, AuthProvider_1.useAuth)();
     const registeredMenuOptions = (0, react_1.useRef)(new Set());
     const [registeredOptions, setRegisteredOptions] = (0, react_1.useState)(new Map());
-    const { t, tComponent } = (0, I18nProvider_1.useI18n)();
+    const { tComponent } = (0, I18nProvider_1.useI18n)();
     const { mode, toggleColorMode } = (0, ThemeProvider_1.useTheme)();
     const registerMenuOption = (0, react_1.useCallback)((option) => {
         const unregister = () => {
@@ -47,7 +47,7 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
         const baseOptions = [
             {
                 id: 'dashboard',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_Dashboard)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_Dashboard),
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Dashboard, {}),
                 link: '/dashboard',
                 requiresAuth: true,
@@ -64,7 +64,7 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             },
             {
                 id: 'logout',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.LogoutButton)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.LogoutButton),
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.ExitToApp, {}),
                 link: '/logout',
                 requiresAuth: true,
@@ -73,7 +73,7 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             },
             {
                 id: 'login',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Login_LoginButton)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Login_LoginButton),
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Login, {}),
                 link: '/login',
                 requiresAuth: false,
@@ -82,7 +82,7 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             },
             {
                 id: 'register',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.RegisterButton)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.RegisterButton),
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.PersonAdd, {}),
                 link: '/register',
                 requiresAuth: false,
@@ -91,7 +91,7 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             },
             {
                 id: 'forgot-password',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.ForgotPassword_Title)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.ForgotPassword_Title),
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.LockOpen, {}),
                 link: '/forgot-password',
                 requiresAuth: false,
@@ -100,31 +100,31 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             },
             {
                 id: 'change-password',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ChangePassword)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ChangePassword),
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.LockReset, {}),
                 link: '/change-password',
                 requiresAuth: true,
                 includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
-            {
-                id: 'backup-code',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.BackupCodeRecovery_Title)),
-                icon: (0, jsx_runtime_1.jsx)(icons_material_1.Key, {}),
-                link: '/backup-code',
-                requiresAuth: false,
-                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
-                index: index++,
-            },
-            {
-                id: 'backup-codes',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes)),
-                icon: (0, jsx_runtime_1.jsx)(icons_material_1.Autorenew, {}),
-                link: '/backup-codes',
-                requiresAuth: true,
-                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
-                index: index++,
-            },
+            ...(enableBackupCodes ? [{
+                    id: 'backup-code',
+                    label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.BackupCodeRecovery_Title),
+                    icon: (0, jsx_runtime_1.jsx)(icons_material_1.Key, {}),
+                    link: '/backup-code',
+                    requiresAuth: false,
+                    includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
+                    index: index++,
+                },
+                {
+                    id: 'backup-codes',
+                    label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
+                    icon: (0, jsx_runtime_1.jsx)(icons_material_1.Autorenew, {}),
+                    link: '/backup-codes',
+                    requiresAuth: true,
+                    includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
+                    index: index++,
+                }] : []),
             {
                 id: 'divider',
                 label: '',
@@ -135,7 +135,7 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             },
             {
                 id: 'clear-mnemonic',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ClearMnemonic)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ClearMnemonic),
                 action: clearMnemonic,
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Key, {}),
                 requiresAuth: true,
@@ -145,7 +145,7 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             },
             {
                 id: 'clear-wallet',
-                label: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ClearWallet)),
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ClearWallet),
                 action: clearWallet,
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Key, {}),
                 requiresAuth: true,
@@ -165,18 +165,27 @@ const MenuProvider = ({ children, menuConfigs = [] }) => {
             {
                 id: 'theme-toggle',
                 label: mode === 'dark'
-                    ? t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ThemeToggle_Light))
-                    : t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ThemeToggle_Dark)),
+                    ? tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ThemeToggle_Light)
+                    : tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ThemeToggle_Dark),
                 icon: mode === 'dark' ? (0, jsx_runtime_1.jsx)(icons_material_1.Brightness7, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.Brightness4, {}),
                 includeOnMenus: [MenuType_1.MenuTypes.SideMenu],
                 index: index++,
                 requiresAuth: undefined,
                 action: toggleColorMode,
             },
+            {
+                id: 'user-settings',
+                label: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Settings_Title),
+                icon: (0, jsx_runtime_1.jsx)(icons_material_1.Settings, {}),
+                link: '/user-settings',
+                requiresAuth: true,
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
+                index: index++,
+            }
         ];
         const allOptions = [...baseOptions, ...registeredOptions.values()];
         return allOptions.sort((a, b) => a.index - b.index);
-    }, [t, tComponent, registeredOptions, user?.roles, mode, toggleColorMode]);
+    }, [tComponent, registeredOptions, user?.roles, mode, toggleColorMode]);
     const getMenuOptions = (0, react_1.useCallback)((menuType, includeDividers) => {
         const MenuFilter = (o) => {
             // Apply the custom filter first