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

package/src/components/ForgotPasswordForm.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForgotPasswordForm = 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 ForgotPasswordForm = ({ onSubmit, emailValidation, labels = {}, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [success, setSuccess] = (0, react_1.useState)(false);
+    const [apiError, setApiError] = (0, react_1.useState)('');
+    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)),
+    };
+    const translatedLabels = {
+        title: labels.title || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ForgotPassword_Title),
+        email: labels.email || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Email),
+        sendResetLink: labels.sendResetLink || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ForgotPassword_SendResetLink),
+        successMessage: labels.successMessage || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordReset_Success),
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            email: '',
+        },
+        validationSchema: Yup.object({
+            email: validation.email,
+        }),
+        onSubmit: async (values) => {
+            try {
+                await onSubmit(values);
+                setSuccess(true);
+                setApiError('');
+            }
+            catch (error) {
+                setApiError(error.response?.data?.message || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ForgotPassword_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: translatedLabels.title }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "form", onSubmit: formik.handleSubmit, sx: { mt: 1, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "email", name: "email", label: translatedLabels.email, value: formik.values.email, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.email && formik.errors.email), helperText: formik.touched.email && formik.errors.email, 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: translatedLabels.successMessage })), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", color: "primary", sx: { mt: 3, mb: 2 }, disabled: formik.isSubmitting, children: translatedLabels.sendResetLink })] })] }) }));
+};
+exports.ForgotPasswordForm = ForgotPasswordForm;

package/src/components/LoginForm.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginForm = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+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 LoginForm = ({ onSubmit, loginType: initialLoginType = 'email', authType: initialAuthType = 'password', allowLoginTypeToggle = true, allowAuthTypeToggle = true, showForgotPassword = true, showSignUp = true, forgotPasswordLink = '/forgot-password', signUpLink = '/register', emailLabel, usernameLabel, passwordLabel, mnemonicLabel, signInButtonText, forgotPasswordText, signUpText, useUsernameText, useEmailText, useMnemonicText, usePasswordText, toggleVisibilityLabel, titleText, emailValidation, usernameValidation, passwordValidation, mnemonicValidation, additionalFields, additionalInitialValues = {}, additionalValidation = {}, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [loginType, setLoginType] = (0, react_1.useState)(initialLoginType);
+    const [authType, setAuthType] = (0, react_1.useState)(initialAuthType);
+    const [showSecret, setShowSecret] = (0, react_1.useState)(false);
+    // Use translations with fallbacks
+    const labels = {
+        title: titleText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_Title),
+        email: emailLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Email),
+        username: usernameLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Username),
+        password: passwordLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Password),
+        mnemonic: mnemonicLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Mnemonic),
+        signIn: signInButtonText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.SignInButton),
+        forgotPassword: forgotPasswordText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_ForgotPassword),
+        signUp: signUpText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_SignUp),
+        useUsername: useUsernameText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_UseUsername),
+        useEmail: useEmailText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_UseEmail),
+        useMnemonic: useMnemonicText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_UseMnemonic),
+        usePassword: usePasswordText || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_UsePassword),
+        toggleVisibility: toggleVisibilityLabel || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.TogglePasswordVisibility),
+    };
+    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)),
+        password: passwordValidation || Yup.string()
+            .min(1, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required))
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        mnemonic: mnemonicValidation || Yup.string()
+            .matches(suite_core_lib_1.Constants.MnemonicRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_InvalidMnemonic))
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+    };
+    const validationSchema = Yup.object({
+        [loginType]: loginType === 'email' ? validation.email : validation.username,
+        ...(authType === 'mnemonic'
+            ? { mnemonic: validation.mnemonic }
+            : { password: validation.password }),
+        ...additionalValidation,
+    });
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            email: '',
+            username: '',
+            mnemonic: '',
+            password: '',
+            ...additionalInitialValues,
+        },
+        validationSchema,
+        onSubmit,
+    });
+    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: 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, { margin: "normal", fullWidth: true, id: loginType, label: loginType === 'email' ? labels.email : labels.username, name: loginType, autoComplete: loginType === 'email' ? 'email' : 'username', autoFocus: true, value: loginType === 'email' ? formik.values.email : formik.values.username, onChange: formik.handleChange, error: formik.touched[loginType] && Boolean(formik.errors[loginType]), helperText: formik.touched[loginType] && formik.errors[loginType] }), authType === 'password' ? ((0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: labels.password, id: "password", type: showSecret ? 'text' : 'password', value: formik.values.password, onChange: formik.handleChange, error: formik.touched.password && Boolean(formik.errors.password), helperText: formik.touched.password && formik.errors.password, slotProps: {
+                                input: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": labels.toggleVisibility, onClick: () => setShowSecret(!showSecret), edge: "end", children: showSecret ? (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOff, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.Visibility, {}) }) })),
+                                },
+                            } })) : ((0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "mnemonic", label: labels.mnemonic, id: "mnemonic", multiline: true, rows: 3, value: formik.values.mnemonic, onChange: formik.handleChange, error: formik.touched.mnemonic && Boolean(formik.errors.mnemonic), helperText: formik.touched.mnemonic && formik.errors.mnemonic, type: showSecret ? 'text' : 'password', slotProps: {
+                                input: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": labels.toggleVisibility, onClick: () => setShowSecret(!showSecret), edge: "end", children: showSecret ? (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOff, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.Visibility, {}) }) })),
+                                },
+                            } })), additionalFields && additionalFields(formik), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 }, disabled: formik.isSubmitting, children: labels.signIn }), (showForgotPassword || showSignUp) && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [showForgotPassword && ((0, jsx_runtime_1.jsx)(material_1.Link, { href: forgotPasswordLink, variant: "body2", children: labels.forgotPassword })), showSignUp && ((0, jsx_runtime_1.jsx)(material_1.Link, { href: signUpLink, variant: "body2", children: labels.signUp }))] })), (allowLoginTypeToggle || allowAuthTypeToggle) && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 1, mt: 2 }, children: [allowLoginTypeToggle && ((0, jsx_runtime_1.jsx)(material_1.Button, { fullWidth: true, variant: "text", onClick: () => setLoginType(loginType === 'email' ? 'username' : 'email'), children: loginType === 'email' ? labels.useUsername : labels.useEmail })), allowAuthTypeToggle && ((0, jsx_runtime_1.jsx)(material_1.Button, { fullWidth: true, variant: "text", onClick: () => setAuthType(authType === 'password' ? 'mnemonic' : 'password'), children: authType === 'password' ? labels.useMnemonic : labels.usePassword }))] }))] })] }) }));
+};
+exports.LoginForm = LoginForm;

package/src/components/LogoutPage.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoutPage = void 0;
+const react_1 = require("react");
+const LogoutPage = ({ onLogout, onNavigate, redirectTo = '/login' }) => {
+    (0, react_1.useEffect)(() => {
+        const performLogout = async () => {
+            await onLogout();
+            onNavigate?.(redirectTo);
+        };
+        performLogout();
+    }, [onLogout, onNavigate, redirectTo]);
+    return null;
+};
+exports.LogoutPage = LogoutPage;

package/src/components/RegisterForm.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegisterForm = 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 RegisterForm = ({ onSubmit, timezones, getInitialTimezone, usernameValidation, emailValidation, timezoneValidation, passwordValidation, confirmPasswordValidation, additionalFields, additionalInitialValues = {}, additionalValidation = {}, labels = {}, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [apiErrors, setApiErrors] = (0, react_1.useState)({});
+    const [mnemonic, setMnemonic] = (0, react_1.useState)(null);
+    const [usePassword, setUsePassword] = (0, react_1.useState)(true);
+    const [registrationSuccess, setRegistrationSuccess] = (0, react_1.useState)(false);
+    const [registering, setRegistering] = (0, react_1.useState)(false);
+    const validation = {
+        username: usernameValidation || Yup.string()
+            .min(suite_core_lib_1.Constants.UsernameMinLength, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_UsernameMinLengthTemplate))
+            .max(suite_core_lib_1.Constants.UsernameMaxLength, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_UsernameMaxLengthTemplate))
+            .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)),
+        email: emailValidation || Yup.string()
+            .email(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_InvalidEmail))
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_Required)),
+        timezone: timezoneValidation || Yup.string()
+            .required(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_TimezoneRequired))
+            .oneOf(timezones, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_TimezoneInvalid)),
+        password: passwordValidation || Yup.string()
+            .matches(suite_core_lib_1.Constants.PasswordRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate))
+            .min(8, 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('password')], 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 formik = (0, formik_1.useFormik)({
+        initialValues: {
+            username: '',
+            email: '',
+            timezone: getInitialTimezone(),
+            password: '',
+            confirmPassword: '',
+            ...additionalInitialValues,
+        },
+        enableReinitialize: true,
+        validationSchema: Yup.object({
+            username: validation.username,
+            email: validation.email,
+            timezone: validation.timezone,
+            ...(usePassword
+                ? {
+                    password: validation.password,
+                    confirmPassword: validation.confirmPassword,
+                }
+                : {}),
+            ...additionalValidation,
+        }),
+        onSubmit: async (values, { setSubmitting, setFieldError, setTouched }) => {
+            setRegistering(true);
+            const registerResult = await onSubmit(values, usePassword);
+            if ('success' in registerResult && registerResult.success) {
+                setRegistrationSuccess(true);
+                if (!usePassword && registerResult?.mnemonic) {
+                    setMnemonic(registerResult.mnemonic);
+                }
+            }
+            else {
+                setRegistrationSuccess(false);
+                const newApiErrors = {};
+                const fieldsToTouch = {};
+                if ('field' in registerResult && registerResult.field) {
+                    setFieldError(registerResult.field, registerResult.error);
+                    fieldsToTouch[registerResult.field] = true;
+                }
+                if ('errors' in registerResult && registerResult.errors) {
+                    registerResult.errors.forEach((err) => {
+                        if (err.path && err.msg) {
+                            setFieldError(err.path, err.msg);
+                            fieldsToTouch[err.path] = true;
+                        }
+                    });
+                }
+                if ('error' in registerResult && registerResult.error && !Object.keys(newApiErrors).length) {
+                    newApiErrors.general = registerResult.error;
+                }
+                setApiErrors(newApiErrors);
+                setTouched(fieldsToTouch, false);
+            }
+            setSubmitting(false);
+            setRegistering(false);
+            setApiErrors({});
+        },
+    });
+    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 || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Registration) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "form", onSubmit: formik.handleSubmit, sx: { mt: 1, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "username", name: "username", label: labels.username || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Username), value: formik.values.username, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.username && (formik.errors.username || apiErrors.username)), helperText: formik.touched.username && (formik.errors.username || apiErrors.username), margin: "normal" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "email", name: "email", label: labels.email || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Email), value: formik.values.email, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.email && (formik.errors.email || apiErrors.email)), helperText: formik.touched.email && (formik.errors.email || apiErrors.email), margin: "normal" }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, margin: "normal", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "timezone-label", children: labels.timezone || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Timezone) }), (0, jsx_runtime_1.jsx)(material_1.Select, { labelId: "timezone-label", id: "timezone", name: "timezone", value: formik.values.timezone, onChange: formik.handleChange, onBlur: formik.handleBlur, error: formik.touched.timezone && Boolean(formik.errors.timezone), label: labels.timezone || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Timezone), children: timezones.map((tz) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: tz, children: tz }, tz))) }), formik.touched.timezone && (formik.errors.timezone || apiErrors.timezone) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", variant: "caption", children: formik.errors.timezone || apiErrors.timezone }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'center', mt: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: () => setUsePassword(!usePassword), children: usePassword
+                                    ? labels.useMnemonic || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_UseMnemonic)
+                                    : labels.usePassword || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_UsePassword) }) }), usePassword && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "password", name: "password", label: labels.password || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Password), type: "password", value: formik.values.password, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.password && formik.errors.password), helperText: formik.touched.password && formik.errors.password, margin: "normal" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "confirmPassword", name: "confirmPassword", label: labels.confirmPassword || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_ConfirmNewPassword), 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" })] })), additionalFields && additionalFields(formik, usePassword), apiErrors.general && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mt: 2, mb: 2 }, children: apiErrors.general })), (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: registering
+                                ? labels.registering || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Registering)
+                                : labels.register || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_RegisterButton) }), registering && ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2, whiteSpace: 'pre-wrap' }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: labels.registering || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Registering) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", component: "div", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_RegisteringMessage) })] })), mnemonic && ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2, whiteSpace: 'pre-wrap' }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: labels.successTitle || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", component: "div", children: [labels.mnemonicSuccess || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_MnemonicSuccess), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", sx: { mt: 1, fontFamily: 'monospace' }, children: mnemonic }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "/login", children: labels.proceedToLogin || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ProceedToLogin) }) })] })] })), registrationSuccess && ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", sx: { mt: 2, mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: labels.successTitle || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_SuccessTitle) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", component: "div", children: [tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_Success), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "/login", children: labels.proceedToLogin || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ProceedToLogin) }) })] })] })), !mnemonic && !registrationSuccess && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "/login", variant: "body2", children: labels.loginLink || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Registration_LoginLink) }) }))] })] }) }));
+};
+exports.RegisterForm = RegisterForm;

package/src/components/ResetPasswordForm.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetPasswordForm = 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 ResetPasswordForm = ({ token, onSubmit, passwordValidation, confirmPasswordValidation, labels = {}, }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [success, setSuccess] = (0, react_1.useState)(false);
+    const [apiError, setApiError] = (0, react_1.useState)('');
+    const validation = {
+        password: passwordValidation || 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('password')], 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 translatedLabels = {
+        title: labels.title || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordReset_Title),
+        password: labels.password || 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),
+        resetButton: labels.resetButton || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordReset_Button),
+        successMessage: labels.successMessage || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.PasswordReset_Success),
+        invalidToken: labels.invalidToken || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.ForgotPassword_InvalidToken),
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            password: '',
+            confirmPassword: '',
+        },
+        validationSchema: Yup.object({
+            password: validation.password,
+            confirmPassword: validation.confirmPassword,
+        }),
+        onSubmit: async (values) => {
+            if (!token) {
+                setApiError(translatedLabels.invalidToken);
+                return;
+            }
+            try {
+                await onSubmit(token, values.password);
+                setSuccess(true);
+                setApiError('');
+            }
+            catch (error) {
+                setApiError(error.response?.data?.message || tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Error_PasswordChange));
+                setSuccess(false);
+            }
+        },
+    });
+    if (!token) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Container, { maxWidth: "sm", children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mt: 4 }, children: translatedLabels.invalidToken }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { maxWidth: "sm", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                mt: 8,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: translatedLabels.title }), (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: "password", name: "password", label: translatedLabels.password, type: "password", value: formik.values.password, onChange: formik.handleChange, onBlur: formik.handleBlur, error: Boolean(formik.touched.password && formik.errors.password), helperText: formik.touched.password && formik.errors.password, margin: "normal" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, id: "confirmPassword", name: "confirmPassword", label: translatedLabels.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: translatedLabels.successMessage })), (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", fullWidth: true, variant: "contained", color: "primary", sx: { mt: 3, mb: 2 }, disabled: formik.isSubmitting, children: translatedLabels.resetButton })] })] }) }));
+};
+exports.ResetPasswordForm = ResetPasswordForm;

package/src/components/SideMenu.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const SideMenuListItem_1 = require("./SideMenuListItem");
+const SideMenu = ({ isOpen, onClose, menuOptions, onNavigate }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "left", open: isOpen, onClose: onClose, children: (0, jsx_runtime_1.jsx)(material_1.List, { children: menuOptions.map((item) => ((0, jsx_runtime_1.jsx)(SideMenuListItem_1.SideMenuListItem, { menuItem: item, onClose: onClose, onNavigate: onNavigate }, item.id))) }) }));
+};
+exports.SideMenu = SideMenu;

package/src/components/SideMenuListItem.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const SideMenuListItem = ({ menuItem, onClose, onNavigate, }) => {
+    const handleMenuItemClick = (0, react_1.useCallback)((option) => (event) => {
+        event.stopPropagation();
+        if (option.action) {
+            option.action();
+        }
+        else if (option.link !== undefined && onNavigate) {
+            if (typeof option.link === 'string') {
+                onNavigate(option.link);
+            }
+            else if (typeof option.link === 'object' && 'pathname' in option.link && option.link.pathname) {
+                onNavigate({ pathname: option.link.pathname, state: option.link.state });
+            }
+        }
+        onClose();
+    }, [onNavigate, onClose]);
+    if (menuItem.divider) {
+        return (0, jsx_runtime_1.jsx)(material_1.Divider, {}, menuItem.label);
+    }
+    else if (menuItem.link) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { onClick: handleMenuItemClick(menuItem), children: [menuItem.icon && (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: menuItem.icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: menuItem.label })] }, menuItem.id));
+    }
+    else if (menuItem.action) {
+        const action = menuItem.action;
+        return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { onClick: async () => {
+                await action();
+                onClose();
+            }, children: [menuItem.icon && (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: menuItem.icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: menuItem.label })] }, menuItem.id));
+    }
+    return null;
+};
+exports.SideMenuListItem = SideMenuListItem;

package/src/components/TopMenu.js

@@ -0,0 +1,14 @@
+"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 Menu_1 = tslib_1.__importDefault(require("@mui/icons-material/Menu"));
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const SideMenu_1 = require("./SideMenu");
+const TopMenu = ({ title, logo, logoAlt, isAuthenticated = false, menuOptions, authenticatedButtons, unauthenticatedButtons, rightContent, onNavigate, }) => {
+    const [isSideMenuOpen, setIsSideMenuOpen] = (0, react_1.useState)(false);
+    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: () => setIsSideMenuOpen(true), children: (0, jsx_runtime_1.jsx)(Menu_1.default, {}) }), logo && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", sx: { height: 40, width: 40, marginRight: 2 }, alt: logoAlt || 'Logo', src: logo })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: title }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [isAuthenticated ? authenticatedButtons : unauthenticatedButtons, rightContent] })] }), (0, jsx_runtime_1.jsx)(SideMenu_1.SideMenu, { isOpen: isSideMenuOpen, onClose: () => setIsSideMenuOpen(false), menuOptions: menuOptions, onNavigate: onNavigate })] }));
+};
+exports.TopMenu = TopMenu;

package/src/components/TranslatedTitle.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranslatedTitle = void 0;
+const react_1 = require("react");
+const TranslatedTitle = ({ title, language }) => {
+    (0, react_1.useEffect)(() => {
+        document.title = title;
+    }, [title, language]);
+    return null;
+};
+exports.TranslatedTitle = TranslatedTitle;

package/src/components/UserLanguageSelector.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserLanguageSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const Flag_1 = require("./Flag");
+const UserLanguageSelector = ({ currentLanguage, currentCountryCode, languages, onLanguageChange, }) => {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleLanguageChange = (languageCode) => {
+        onLanguageChange(languageCode);
+        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, { languageCode: currentLanguage, countryCode: currentCountryCode }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: languages.map((lang) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => handleLanguageChange(lang.code), children: [(0, jsx_runtime_1.jsx)(Flag_1.Flag, { languageCode: lang.code, countryCode: lang.countryCode, sx: { mr: 1 } }), ' ', lang.name] }, lang.code))) })] }));
+};
+exports.UserLanguageSelector = UserLanguageSelector;

package/src/components/VerifyEmailPage.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerifyEmailPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 VerifyEmailPage = ({ token, onVerify, labels = {}, loginLink = '/login', resendLink = '/resend-verification', }) => {
+    const { t, tComponent } = (0, contexts_1.useI18n)();
+    const [message, setMessage] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [verificationStatus, setVerificationStatus] = (0, react_1.useState)('pending');
+    const translatedLabels = {
+        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)),
+    };
+    (0, react_1.useEffect)(() => {
+        const verifyEmail = async (verificationToken) => {
+            try {
+                const result = await onVerify(verificationToken);
+                if (result.success) {
+                    setMessage(result.message || translatedLabels.success);
+                    setVerificationStatus('success');
+                }
+                else {
+                    setMessage(result.message || translatedLabels.failed);
+                    setVerificationStatus('error');
+                }
+            }
+            catch {
+                setMessage(translatedLabels.failed);
+                setVerificationStatus('error');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        if (token) {
+            verifyEmail(token);
+        }
+        else {
+            setLoading(false);
+            setMessage(translatedLabels.noToken);
+            setVerificationStatus('error');
+        }
+    }, [token, onVerify, translatedLabels]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { maxWidth: "sm", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                mt: 8,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: translatedLabels.title }), loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%', mt: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: verificationStatus === 'success' ? 'success' : 'error', sx: { mb: 2 }, children: message }), verificationStatus === 'success' && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", component: material_1.Link, href: loginLink, fullWidth: true, children: translatedLabels.proceedToLogin })), verificationStatus === 'error' && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body1", children: [translatedLabels.contactSupport, ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: resendLink, color: "primary", children: translatedLabels.requestNewEmail }), "."] }))] }))] }) }));
+};
+exports.VerifyEmailPage = VerifyEmailPage;

package/src/components/index.js

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

package/src/contexts/I18nProvider.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useI18n = exports.I18nProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const i18n_lib_1 = require("@digitaldefiance/i18n-lib");
+const react_1 = require("react");
+const I18nContext = (0, react_1.createContext)(undefined);
+const I18nProvider = ({ children, i18nEngine, onLanguageChange, }) => {
+    const context = i18n_lib_1.GlobalActiveContext.getInstance();
+    const [currentLanguage, setCurrentLanguage] = (0, react_1.useState)(context.userLanguage);
+    const changeLanguage = (0, react_1.useCallback)(async (language) => {
+        const languageDetails = i18n_lib_1.LanguageRegistry.getLanguageByCode(language);
+        if (language && languageDetails) {
+            context.userLanguage = language;
+            i18nEngine.setLanguage(language);
+            localStorage.setItem('language', languageDetails.name);
+            localStorage.setItem('languageCode', language);
+            setCurrentLanguage(language);
+            if (onLanguageChange) {
+                await onLanguageChange(language);
+            }
+        }
+    }, [onLanguageChange, i18nEngine, context]);
+    const t = (0, react_1.useCallback)((key, vars, language) => {
+        return i18nEngine.t(key, vars, language);
+    }, [i18nEngine]);
+    const tComponent = (0, react_1.useCallback)((componentId, stringKey) => {
+        return i18nEngine.translate(componentId, stringKey, undefined, currentLanguage);
+    }, [currentLanguage, i18nEngine]);
+    const value = {
+        t,
+        tComponent,
+        changeLanguage,
+        currentLanguage,
+    };
+    return (0, jsx_runtime_1.jsx)(I18nContext.Provider, { value: value, children: children });
+};
+exports.I18nProvider = I18nProvider;
+const useI18n = () => {
+    const context = (0, react_1.useContext)(I18nContext);
+    if (context === undefined) {
+        throw new Error('useI18n must be used within an I18nProvider');
+    }
+    return context;
+};
+exports.useI18n = useI18n;

package/src/contexts/ThemeProvider.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeToggleButton = exports.AppThemeProvider = exports.useTheme = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const ThemeContext = (0, react_1.createContext)(undefined);
+const useTheme = () => {
+    const context = (0, react_1.useContext)(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within an AppThemeProvider');
+    }
+    return context;
+};
+exports.useTheme = useTheme;
+const AppThemeProvider = ({ children, customTheme }) => {
+    const [mode, setMode] = (0, react_1.useState)('light');
+    const colorMode = (0, react_1.useMemo)(() => ({
+        toggleColorMode: () => {
+            setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+        },
+        mode,
+    }), [mode]);
+    const theme = (0, react_1.useMemo)(() => (customTheme ? customTheme(mode) : (0, material_1.createTheme)({ palette: { mode } })), [mode, customTheme]);
+    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: colorMode, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: children }) }));
+};
+exports.AppThemeProvider = AppThemeProvider;
+const ThemeToggleButton = () => {
+    const { mode, toggleColorMode } = (0, exports.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: toggleColorMode, color: "inherit", children: mode === 'dark' ? (0, jsx_runtime_1.jsx)(icons_material_1.Brightness7, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.Brightness4, {}) }));
+};
+exports.ThemeToggleButton = ThemeToggleButton;

package/src/contexts/index.js

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