@digitaldefiance/express-suite-react-components 2.1.35 → 2.1.37

package/README.md

@@ -2,6 +2,8 @@
 
 React MUI components library for Digital Defiance Express Suite applications.
 
+Part of [Express Suite](https://github.com/Digital-Defiance/express-suite)
+
 ## Installation
 
 ```bash
@@ -259,6 +261,14 @@ MIT © Digital Defiance
 
 ## ChangeLog
 
+### v2.1.37
+
+- Fix package/exports/index
+
+### v2.1.36
+
+- Fix package/exports/index
+
 ### v2.1.35
 
 - Initial version (starting number matches rest of Express Suite)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "2.1.35",
+  "version": "2.1.37",
   "description": "React MUI components for Digital Defiance Express Suite",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
+  "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
     "build": "npx nx build digitaldefiance-express-suite-react-components",
     "build:stream": "npx nx build --outputStyle=stream digitaldefiance-express-suite-react-components",

package/src/auth/Private.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Private = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Private = ({ children, isAuthenticated, isCheckingAuth, }) => {
+    if (isCheckingAuth || !isAuthenticated) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.Private = Private;

package/src/auth/PrivateRoute.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrivateRoute = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const PrivateRoute = ({ children, isAuthenticated, isCheckingAuth, redirectTo = '/login', loadingComponent = (0, jsx_runtime_1.jsx)("div", { children: "Checking authentication..." }), }) => {
+    const location = (0, react_router_dom_1.useLocation)();
+    if (isCheckingAuth) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingComponent });
+    }
+    if (!isAuthenticated) {
+        return (0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: redirectTo, state: { from: location }, replace: true });
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.PrivateRoute = PrivateRoute;

package/src/auth/UnAuthRoute.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnAuthRoute = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const UnAuthRoute = ({ children, isAuthenticated, isCheckingAuth, redirectTo = '/dashboard', loadingComponent = (0, jsx_runtime_1.jsx)("div", { children: "Checking authentication..." }), }) => {
+    const location = (0, react_router_dom_1.useLocation)();
+    if (isCheckingAuth) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingComponent });
+    }
+    if (isAuthenticated) {
+        return (0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: redirectTo, state: { from: location }, replace: true });
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.UnAuthRoute = UnAuthRoute;

package/src/auth/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PrivateRoute"), exports);
+tslib_1.__exportStar(require("./UnAuthRoute"), exports);
+tslib_1.__exportStar(require("./Private"), exports);

package/src/components/ApiAccess.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiAccess = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentCopy_1 = tslib_1.__importDefault(require("@mui/icons-material/ContentCopy"));
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const contexts_1 = require("../contexts");
+const ApiAccessContainer = (0, material_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '100vh',
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(3),
+}));
+const ApiAccessContent = (0, material_1.styled)(material_1.Box)(({ theme }) => ({
+    maxWidth: '600px',
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(4),
+    boxShadow: theme.shadows[3],
+}));
+const ApiAccessTitle = (0, material_1.styled)(material_1.Typography)(({ theme }) => ({
+    marginBottom: theme.spacing(3),
+    color: theme.palette.primary.main,
+}));
+const ApiAccess = ({ token, labels = {}, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
+    const [isError, setIsError] = (0, react_1.useState)(false);
+    const translatedLabels = {
+        title: labels.title || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ApiAccess_Title),
+        tokenNotAvailable: labels.tokenNotAvailable || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ApiAccess_TokenNotAvailable),
+        copyButton: labels.copyButton || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_CopyToClipboard),
+        notificationTitle: labels.notificationTitle || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Notification),
+        copied: labels.copied || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_CopiedToClipboard),
+        copyFailed: labels.copyFailed || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Error_FailedToCopy),
+        ok: labels.ok || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_OK),
+    };
+    const copyToClipboard = async () => {
+        if (token) {
+            try {
+                await navigator.clipboard.writeText(token);
+                setIsError(false);
+                setDialogOpen(true);
+            }
+            catch (err) {
+                setIsError(true);
+            }
+        }
+    };
+    const handleClose = () => {
+        setDialogOpen(false);
+        setIsError(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(ApiAccessContainer, { children: [(0, jsx_runtime_1.jsxs)(ApiAccessContent, { children: [(0, jsx_runtime_1.jsx)(ApiAccessTitle, { variant: "h4", align: "center", children: translatedLabels.title }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, multiline: true, rows: 4, value: token || translatedLabels.tokenNotAvailable, slotProps: {
+                            input: {
+                                readOnly: true,
+                            },
+                        }, variant: "outlined", margin: "normal" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", startIcon: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, {}), onClick: copyToClipboard, fullWidth: true, style: { marginTop: '16px' }, children: translatedLabels.copyButton })] }), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: dialogOpen, onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: translatedLabels.notificationTitle }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: isError ? translatedLabels.copyFailed : translatedLabels.copied }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClose, color: "primary", children: translatedLabels.ok }) })] })] }));
+};
+exports.ApiAccess = ApiAccess;

package/src/components/BackupCodeLoginForm.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackupCodeLoginForm = 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 suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const contexts_1 = require("../contexts");
+const BackupCodeLoginForm = ({ onSubmit, onNavigate, isAuthenticated = false, emailValidation, usernameValidation, codeValidation, passwordValidation, confirmPasswordValidation, labels = {}, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [loginType, setLoginType] = (0, react_1.useState)('email');
+    const [loginError, setLoginError] = (0, react_1.useState)(null);
+    const [recoveredMnemonic, setRecoveredMnemonic] = (0, react_1.useState)(null);
+    const [successMessage, setSuccessMessage] = (0, react_1.useState)(null);
+    const [codesRemaining, setCodesRemaining] = (0, react_1.useState)(null);
+    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)),
+        username: usernameValidation || Yup.string()
+            .matches(suite_core_lib_1.Constants.UsernameRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate))
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        code: codeValidation || Yup.string()
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required))
+            .matches(suite_core_lib_1.Constants.BACKUP_CODES.DisplayRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_InvalidBackupCode)),
+        password: passwordValidation || Yup.string()
+            .matches(suite_core_lib_1.Constants.PasswordRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate)),
+        confirmPassword: confirmPasswordValidation || Yup.string()
+            .oneOf([Yup.ref('newPassword')], tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordMatch)),
+    };
+    const translatedLabels = {
+        title: labels.title || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_Title),
+        email: labels.email || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Email),
+        username: labels.username || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Username),
+        code: labels.code || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_BackupCode),
+        newPassword: labels.newPassword || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_NewPassword),
+        confirmPassword: labels.confirmPassword || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_ConfirmNewPassword),
+        recoverMnemonic: labels.recoverMnemonic || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_RecoverMnemonic),
+        login: labels.login || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_Login),
+        useUsername: labels.useUsername || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_UseUsername),
+        useEmail: labels.useEmail || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_UseEmail),
+        dashboard: labels.dashboard || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard),
+        generateNewCodes: labels.generateNewCodes || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
+        mnemonicLabel: labels.mnemonicLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Mnemonic),
+        codesRemaining: labels.codesRemaining || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate),
+        unexpectedError: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_UnexpectedError),
+    };
+    const validationSchema = Yup.object({
+        [loginType]: loginType === 'email' ? validation.email : validation.username,
+        code: validation.code,
+        newPassword: validation.password,
+        confirmNewPassword: validation.confirmPassword,
+    });
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            email: '',
+            username: '',
+            code: '',
+            newPassword: '',
+            confirmNewPassword: '',
+            recoverMnemonic: false,
+        },
+        validationSchema,
+        onSubmit: async (values, { setSubmitting }) => {
+            try {
+                const loginResult = await onSubmit(loginType === 'email' ? values.email : values.username, values.code, loginType === 'email', values.recoverMnemonic, values.newPassword && values.newPassword.length > 0 ? values.newPassword : undefined);
+                if ('error' in loginResult) {
+                    setLoginError(loginResult.error);
+                    setCodesRemaining(null);
+                    setRecoveredMnemonic(null);
+                    return;
+                }
+                setLoginError(null);
+                if (loginResult.codeCount) {
+                    setCodesRemaining(loginResult.codeCount);
+                }
+                if (loginResult.mnemonic) {
+                    setRecoveredMnemonic(loginResult.mnemonic);
+                }
+                if (loginResult.message) {
+                    setSuccessMessage(loginResult.message);
+                }
+            }
+            catch {
+                setLoginError(translatedLabels.unexpectedError);
+            }
+            finally {
+                setSubmitting(false);
+            }
+        },
+    });
+    if (isAuthenticated && recoveredMnemonic === null && codesRemaining === null) {
+        onNavigate?.('/dashboard');
+        return null;
+    }
+    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: translatedLabels.title }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "form", onSubmit: formik.handleSubmit, sx: { mt: 1, width: '100%' }, children: [!isAuthenticated && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", fullWidth: true, id: loginType, label: loginType === 'email' ? translatedLabels.email : translatedLabels.username, name: loginType, autoComplete: loginType === 'email' ? 'email' : 'username', autoFocus: true, value: loginType === 'email' ? formik.values.email : formik.values.username, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched[loginType] && Boolean(formik.errors[loginType]), helperText: formik.touched[loginType] && formik.errors[loginType], disabled: isAuthenticated }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "code", label: translatedLabels.code, id: "code", value: formik.values.code, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched.code && Boolean(formik.errors.code), helperText: formik.touched.code && formik.errors.code, disabled: isAuthenticated }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", fullWidth: true, name: "newPassword", label: translatedLabels.newPassword, type: "password", id: "newPassword", value: formik.values.newPassword, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched.newPassword && Boolean(formik.errors.newPassword), helperText: formik.touched.newPassword && formik.errors.newPassword, disabled: isAuthenticated }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", fullWidth: true, name: "confirmNewPassword", label: translatedLabels.confirmPassword, type: "password", id: "confirmNewPassword", value: formik.values.confirmNewPassword, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched.confirmNewPassword && Boolean(formik.errors.confirmNewPassword), helperText: formik.touched.confirmNewPassword && formik.errors.confirmNewPassword, disabled: isAuthenticated }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: formik.values.recoverMnemonic, onChange: formik.handleChange, onBlur: formik.handleBlur, name: "recoverMnemonic" }), label: translatedLabels.recoverMnemonic, disabled: isAuthenticated })] })), successMessage && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "success.main", variant: "body2", sx: { mt: 1 }, children: successMessage })), recoveredMnemonic && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2, p: 2, bgcolor: 'grey.100', borderRadius: 1 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: [translatedLabels.mnemonicLabel, ":"] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: recoveredMnemonic }), (0, jsx_runtime_1.jsx)(material_1.Button, { fullWidth: true, variant: "contained", sx: { mt: 2 }, onClick: () => onNavigate?.('/dashboard'), children: translatedLabels.dashboard })] })), codesRemaining !== null && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: translatedLabels.codesRemaining.replace('{count}', String(codesRemaining)) }), (0, jsx_runtime_1.jsx)(material_1.Button, { fullWidth: true, variant: "contained", sx: { mt: 2 }, onClick: () => onNavigate?.('/backup-codes', { codeCount: codesRemaining }), children: translatedLabels.generateNewCodes })] })), loginError && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", variant: "body2", sx: { mt: 1 }, children: loginError })), !isAuthenticated && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 }, disabled: formik.isSubmitting, children: translatedLabels.login }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { fullWidth: true, variant: "text", onClick: () => setLoginType(loginType === 'email' ? 'username' : 'email'), children: loginType === 'email' ? translatedLabels.useUsername : translatedLabels.useEmail }) })] }))] })] }) }));
+};
+exports.BackupCodeLoginForm = BackupCodeLoginForm;

package/src/components/BackupCodesForm.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackupCodesForm = 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 suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const contexts_1 = require("../contexts");
+const BackupCodesForm = ({ onSubmit, backupCodesRemaining = null, mnemonicValidation, passwordValidation, labels = {}, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [apiError, setApiError] = (0, react_1.useState)(null);
+    const [apiSuccess, setApiSuccess] = (0, react_1.useState)(null);
+    const [backupCodes, setBackupCodes] = (0, react_1.useState)(null);
+    const validation = {
+        mnemonic: mnemonicValidation || Yup.string()
+            .trim()
+            .matches(suite_core_lib_1.Constants.MnemonicRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_MnemonicRegex))
+            .optional(),
+        password: passwordValidation || Yup.string()
+            .trim()
+            .matches(suite_core_lib_1.Constants.PasswordRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate))
+            .optional(),
+    };
+    const translatedLabels = {
+        codesRemaining: labels.codesRemaining || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate),
+        mnemonic: labels.mnemonic || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Mnemonic),
+        password: labels.password || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Password),
+        generateButton: labels.generateButton || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
+        successTitle: labels.successTitle || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.BackupCodeRecovery_YourNewCodes),
+        xorError: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_MnemonicOrPasswordRequired),
+        unexpectedError: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_UnexpectedError),
+    };
+    const validationSchema = Yup.object({
+        mnemonic: validation.mnemonic,
+        password: validation.password,
+    })
+        .test('xor-mnemonic-password-mnemonic', translatedLabels.xorError, function (value) {
+        const mnemonic = value?.mnemonic?.trim() ?? '';
+        const password = value?.password?.trim() ?? '';
+        const hasMnemonic = mnemonic.length > 0;
+        const hasPassword = password.length > 0;
+        if (!hasMnemonic && !hasPassword) {
+            return this.createError({
+                path: 'mnemonic',
+                message: translatedLabels.xorError,
+            });
+        }
+        if (hasMnemonic && hasPassword) {
+            return this.createError({
+                path: 'mnemonic',
+                message: translatedLabels.xorError,
+            });
+        }
+        return true;
+    })
+        .test('xor-mnemonic-password-password', translatedLabels.xorError, function (value) {
+        const mnemonic = value?.mnemonic?.trim() ?? '';
+        const password = value?.password?.trim() ?? '';
+        const hasMnemonic = mnemonic.length > 0;
+        const hasPassword = password.length > 0;
+        if (!hasMnemonic && !hasPassword) {
+            return this.createError({
+                path: 'password',
+                message: translatedLabels.xorError,
+            });
+        }
+        if (hasMnemonic && hasPassword) {
+            return this.createError({
+                path: 'password',
+                message: translatedLabels.xorError,
+            });
+        }
+        return true;
+    });
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            password: '',
+            mnemonic: '',
+        },
+        validationSchema,
+        onSubmit: async (values, { setSubmitting }) => {
+            try {
+                const result = await onSubmit(values);
+                if (result && result.backupCodes) {
+                    setApiSuccess(translatedLabels.successTitle);
+                    setBackupCodes(result.backupCodes);
+                }
+                if (result && result.message) {
+                    setApiSuccess(result.message);
+                }
+                setApiError(null);
+            }
+            catch (e) {
+                setApiSuccess(null);
+                setApiError(e.response?.data?.message ?? translatedLabels.unexpectedError);
+            }
+            finally {
+                setSubmitting(false);
+            }
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { component: "main", maxWidth: "xs", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h1", variant: "h5", children: translatedLabels.codesRemaining.replace('{count}', String(backupCodesRemaining ?? 0)) }) }), (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, { margin: "normal", fullWidth: true, id: "mnemonic", label: translatedLabels.mnemonic, type: "password", name: "mnemonic", autoComplete: "mnemonic", autoFocus: true, value: formik.values.mnemonic, onChange: formik.handleChange, onBlur: formik.handleBlur, error: (formik.touched.mnemonic || formik.submitCount > 0) && Boolean(formik.errors.mnemonic), helperText: (formik.touched.mnemonic || formik.submitCount > 0) && formik.errors.mnemonic }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", fullWidth: true, name: "password", label: translatedLabels.password, type: "password", id: "password", value: formik.values.password, onChange: formik.handleChange, onBlur: formik.handleBlur, error: (formik.touched.password || formik.submitCount > 0) && Boolean(formik.errors.password), helperText: (formik.touched.password || formik.submitCount > 0) && formik.errors.password }), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", sx: { mt: 2 }, children: translatedLabels.generateButton })] }), apiError && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mt: 2, mb: 2 }, children: apiError })), backupCodes && apiSuccess && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2, mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "h6", children: apiSuccess }), (0, jsx_runtime_1.jsx)("ul", { children: backupCodes.map((code, index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("pre", { children: code }) }, index))) })] }))] }));
+};
+exports.BackupCodesForm = BackupCodesForm;

package/src/components/ChangePasswordForm.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangePasswordForm = 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 suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const contexts_1 = require("../contexts");
+const ChangePasswordForm = ({ onSubmit, titleText, currentPasswordLabel, newPasswordLabel, confirmPasswordLabel, submitButtonText, submittingButtonText, successMessage, currentPasswordValidation, newPasswordValidation, confirmPasswordValidation, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [success, setSuccess] = (0, react_1.useState)(false);
+    const [apiError, setApiError] = (0, react_1.useState)('');
+    const validation = {
+        currentPassword: currentPasswordValidation || Yup.string().required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        newPassword: newPasswordValidation || Yup.string()
+            .min(suite_core_lib_1.Constants.PasswordMinLength, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordMinLengthTemplate))
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        confirmPassword: confirmPasswordValidation || Yup.string()
+            .oneOf([Yup.ref('newPassword')], tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordMatch))
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+    };
+    const labels = {
+        title: titleText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_ChangePassword),
+        currentPassword: currentPasswordLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_CurrentPassword),
+        newPassword: newPasswordLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_NewPassword),
+        confirmPassword: confirmPasswordLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_ConfirmNewPassword),
+        submitButton: submitButtonText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_ChangePassword),
+        submittingButton: submittingButtonText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_ChangingPassword),
+        success: successMessage || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordChange_Success),
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            currentPassword: '',
+            newPassword: '',
+            confirmPassword: '',
+        },
+        validationSchema: Yup.object({
+            currentPassword: validation.currentPassword,
+            newPassword: validation.newPassword,
+            confirmPassword: validation.confirmPassword,
+        }),
+        onSubmit: async (values, { resetForm }) => {
+            const result = await onSubmit(values);
+            if ('success' in result) {
+                setSuccess(true);
+                setApiError('');
+                resetForm();
+            }
+            else if ('error' in result && result.error) {
+                setApiError(result.error);
+                setSuccess(false);
+            }
+        },
+    });
+    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: labels.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: "currentPassword", name: "currentPassword", label: labels.currentPassword, type: "password", value: formik.values.currentPassword, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.currentPassword && formik.errors.currentPassword), helperText: formik.touched.currentPassword && formik.errors.currentPassword, margin: "normal" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "newPassword", name: "newPassword", label: labels.newPassword, type: "password", value: formik.values.newPassword, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.newPassword && formik.errors.newPassword), helperText: formik.touched.newPassword && formik.errors.newPassword, margin: "normal" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "confirmPassword", name: "confirmPassword", label: labels.confirmPassword, type: "password", value: formik.values.confirmPassword, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword), helperText: formik.touched.confirmPassword && formik.errors.confirmPassword, margin: "normal" }), apiError && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mt: 2, mb: 2 }, children: apiError })), success && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2 }, children: labels.success })), (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: formik.isSubmitting ? labels.submittingButton : labels.submitButton })] })] }) }));
+};
+exports.ChangePasswordForm = ChangePasswordForm;

package/src/components/ConfirmationDialog.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmationDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ConfirmationDialog = ({ open, title, message, confirmText = 'Confirm', cancelText = 'Cancel', onConfirm, onCancel, }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onCancel, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: message }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: onCancel, color: "primary", children: cancelText }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: onConfirm, color: "primary", children: confirmText })] })] }));
+};
+exports.ConfirmationDialog = ConfirmationDialog;

package/src/components/CurrencyCodeSelector.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyCodeSelector = 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 formik_1 = require("formik");
+const CurrencyCodeSelector = ({ name, label, onCurrencyChange, }) => {
+    return ((0, jsx_runtime_1.jsx)(formik_1.Field, { name: name, children: ({ field, form }) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, label: label, ...field, onChange: (event) => {
+                const selectedCode = event.target.value;
+                form.setFieldValue(name, selectedCode);
+                onCurrencyChange?.(selectedCode);
+            }, error: form.touched[name] && Boolean(form.errors[name]), helperText: form.touched[name] && form.errors[name], sx: {
+                '& .MuiSelect-select': {
+                    paddingRight: '32px',
+                },
+                '& .MuiOutlinedInput-root': {
+                    '& fieldset': {
+                        borderColor: 'rgba(0, 0, 0, 0.23)',
+                    },
+                    '&:hover fieldset': {
+                        borderColor: 'rgba(0, 0, 0, 0.87)',
+                    },
+                    '&.Mui-focused fieldset': {
+                        borderColor: 'primary.main',
+                    },
+                },
+            }, children: i18n_lib_1.CurrencyCode.getAll().map((code) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: code, children: code }, code))) })) }));
+};
+exports.CurrencyCodeSelector = CurrencyCodeSelector;

package/src/components/CurrencyInput.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_number_format_1 = require("react-number-format");
+function getCurrencyFormat(currencyCode = 'USD') {
+    return {
+        symbol: '$',
+        position: 'prefix',
+        groupSeparator: ',',
+        decimalSeparator: '.',
+    };
+}
+const CurrencyInput = ({ value, onChange, currencyCode = 'USD', label, error, helperText, name, }) => {
+    const format = getCurrencyFormat(currencyCode);
+    if (format.position === 'infix') {
+        const [whole, decimal] = value.toString().split('.');
+        const displayValue = `${whole}${format.symbol}${format.decimalSeparator}${decimal || '00'}`;
+        return ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { customInput: material_1.TextField, fullWidth: true, margin: "normal", label: label, value: displayValue, thousandSeparator: format.groupSeparator, decimalSeparator: format.decimalSeparator, decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, onValueChange: (values) => {
+                onChange(values.floatValue || 0);
+            }, error: error, helperText: helperText, name: name }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { customInput: material_1.TextField, fullWidth: true, margin: "normal", label: label, value: value, thousandSeparator: format.groupSeparator, decimalSeparator: format.decimalSeparator, decimalScale: 2, fixedDecimalScale: true, prefix: format.position === 'prefix' ? format.symbol + ' ' : undefined, suffix: format.position === 'postfix' ? ' ' + format.symbol : undefined, valueIsNumericString: true, onValueChange: (values) => {
+            onChange(values.floatValue || 0);
+        }, error: error, helperText: helperText, name: name }));
+};
+exports.CurrencyInput = CurrencyInput;

package/src/components/DashboardPage.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const DashboardPage = ({ title = 'Dashboard', children }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { maxWidth: "md", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { my: 4, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", component: "h1", gutterBottom: true, align: "center", children: title }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "center", mt: 3, children: children })] }) }));
+};
+exports.DashboardPage = DashboardPage;

package/src/components/DropdownMenu.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const DropdownMenu = ({ menuIcon, options, onNavigate }) => {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleMenuItemClick = (0, react_1.useCallback)((option) => (event) => {
+        event.stopPropagation();
+        if (option.action) {
+            option.action();
+        }
+        else if (option.link && onNavigate) {
+            onNavigate(option.link);
+        }
+        handleClose();
+    }, [onNavigate, handleClose]);
+    const handleClick = (0, react_1.useCallback)((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    if (options.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { color: "inherit", onClick: handleClick, children: menuIcon }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, TransitionComponent: material_1.Fade, sx: {
+                    '& .MuiPopover-paper': {
+                        opacity: 0.5,
+                        overflow: 'visible',
+                    },
+                }, children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "li", onClick: handleMenuItemClick(option), sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        '& > svg': {
+                            marginRight: 2,
+                            width: 24,
+                            height: 24,
+                        },
+                    }, children: [option.icon, option.label] }, option.id))) })] }));
+};
+exports.DropdownMenu = DropdownMenu;

package/src/components/ExpirationSecondsSelector.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpirationSecondsSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ExpirationSecondsSelector = ({ name, label, formik, optionValues, optionNames, onChange, }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, label: label, name: name, value: formik.values[name] ?? '', onChange: (event) => {
+            const selectedValue = event.target.value;
+            formik.setFieldValue(name, selectedValue);
+            if (onChange) {
+                onChange(parseInt(selectedValue));
+            }
+        }, error: formik.touched[name] && Boolean(formik.errors[name]), helperText: formik.touched[name] && formik.errors[name], sx: {
+            mt: 1,
+            '& .MuiSelect-select': {
+                paddingRight: '32px',
+            },
+            '& .MuiOutlinedInput-root': {
+                '& fieldset': {
+                    borderColor: 'rgba(0, 0, 0, 0.23)',
+                },
+                '&:hover fieldset': {
+                    borderColor: 'rgba(0, 0, 0, 0.87)',
+                },
+                '&.Mui-focused fieldset': {
+                    borderColor: 'primary.main',
+                },
+            },
+        }, children: optionNames.map((name, index) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: optionValues[index], children: name }, name))) }));
+};
+exports.ExpirationSecondsSelector = ExpirationSecondsSelector;