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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "homepage": "https://github.com/Digital-Defiance/react-components",
   "description": "React MUI components for Digital Defiance Express Suite",
   "repository": {
@@ -24,7 +24,7 @@
     "prettier:fix": "prettier --write 'src/**/*.{ts,tsx}'",
     "format": "npx nx format:write --projects=digitaldefiance-express-suite-react-components",
     "format:check": "npx nx format:check --projects=digitaldefiance-express-suite-react-components",
-    "prepublishOnly": "npx nx build digitaldefiance-express-suite-react-components",
+    "prepublishOnly": "node -e \"if(!require('fs').existsSync('src/index.js')){console.error('Do not publish from the source package. Run: nx build digitaldefiance-express-suite-react-components, then npm publish from dist/packages/digitaldefiance-express-suite-react-components');process.exit(1)}\"",
     "publish:public": "npm publish --access public"
   },
   "peerDependencies": {
@@ -78,5 +78,6 @@
   ],
   "author": "Digital Defiance",
   "license": "MIT",
-  "packageManager": "yarn@4.10.3"
-}
+  "packageManager": "yarn@4.10.3",
+  "type": "commonjs"
+}

package/src/auth/AdminRoute.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+interface AdminRouteProps {
+    children: ReactNode;
+    redirectTo?: string;
+}
+export declare const AdminRoute: FC<AdminRouteProps>;
+export default AdminRoute;
+//# sourceMappingURL=AdminRoute.d.ts.map

package/src/auth/AdminRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminRoute.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/auth/AdminRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAWlD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAmC1C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/src/auth/AdminRoute.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdminRoute = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+const AuthProvider_1 = require("../contexts/AuthProvider");
+const contexts_1 = require("../contexts");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const AuthProvider_2 = require("../contexts/AuthProvider");
+const AdminRoute = ({ children, redirectTo }) => {
+    const { admin } = (0, AuthProvider_2.useAuth)();
+    const { tComponent } = (0, contexts_1.useI18n)();
+    const { isAuthenticated, isCheckingAuth } = (0, react_1.useContext)(AuthProvider_1.AuthContext);
+    const location = (0, react_router_1.useLocation)();
+    if (isCheckingAuth) {
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_CheckingAuthentication), "..."] }));
+    }
+    if (!isAuthenticated) {
+        return ((0, jsx_runtime_1.jsx)(react_router_1.Navigate, { to: redirectTo ?? '/login', state: { from: location }, replace: true }));
+    }
+    if (!admin) {
+        return ((0, jsx_runtime_1.jsx)(react_router_1.Navigate, { to: redirectTo ?? '/', state: { from: location }, replace: true }));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.AdminRoute = AdminRoute;
+exports.default = exports.AdminRoute;

package/src/auth/Private.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export interface PrivateProps {
+    children: ReactNode;
+}
+export declare const Private: FC<PrivateProps>;
+//# sourceMappingURL=Private.d.ts.map

package/src/auth/Private.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Private.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/auth/Private.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAUpC,CAAC"}

package/src/auth/Private.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Private = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AuthProvider_1 = require("../contexts/AuthProvider");
+const Private = ({ children, }) => {
+    const { isAuthenticated, isCheckingAuth } = (0, react_1.useContext)(AuthProvider_1.AuthContext);
+    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.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+interface PrivateRouteProps {
+    children: ReactNode;
+    redirectTo?: string;
+}
+export declare const PrivateRoute: FC<PrivateRouteProps>;
+export default PrivateRoute;
+//# sourceMappingURL=PrivateRoute.d.ts.map

package/src/auth/PrivateRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrivateRoute.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/auth/PrivateRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAMlD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAc9C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/src/auth/PrivateRoute.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrivateRoute = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+const AuthProvider_1 = require("../contexts/AuthProvider");
+const contexts_1 = require("../contexts");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const PrivateRoute = ({ children, redirectTo }) => {
+    const { tComponent } = (0, contexts_1.useI18n)();
+    const { isAuthenticated, isCheckingAuth } = (0, react_1.useContext)(AuthProvider_1.AuthContext);
+    const location = (0, react_router_1.useLocation)();
+    if (isCheckingAuth) {
+        return (0, jsx_runtime_1.jsxs)("div", { children: [tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_CheckingAuthentication), "..."] });
+    }
+    if (!isAuthenticated) {
+        return (0, jsx_runtime_1.jsx)(react_router_1.Navigate, { to: redirectTo ?? "/login", state: { from: location }, replace: true });
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.PrivateRoute = PrivateRoute;
+exports.default = exports.PrivateRoute;

package/src/auth/UnAuth.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export interface UnAuthProps {
+    children: ReactNode;
+}
+export declare const UnAuth: FC<UnAuthProps>;
+//# sourceMappingURL=UnAuth.d.ts.map

package/src/auth/UnAuth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnAuth.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/auth/UnAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAQlC,CAAC"}

package/src/auth/UnAuth.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnAuth = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AuthProvider_1 = require("../contexts/AuthProvider");
+const UnAuth = ({ children }) => {
+    const { isAuthenticated, isCheckingAuth } = (0, react_1.useContext)(AuthProvider_1.AuthContext);
+    if (isCheckingAuth || isAuthenticated) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.UnAuth = UnAuth;

package/src/auth/UnAuthRoute.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+export interface UnAuthRouteProps {
+    children: ReactNode;
+    redirectTo?: string;
+}
+export declare const UnAuthRoute: FC<UnAuthRouteProps>;
+export default UnAuthRoute;
+//# sourceMappingURL=UnAuthRoute.d.ts.map

package/src/auth/UnAuthRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnAuthRoute.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/auth/UnAuthRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAKlD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAiB5C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/src/auth/UnAuthRoute.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnAuthRoute = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+const contexts_1 = require("../contexts");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const UnAuthRoute = ({ children, redirectTo = '/dashboard', }) => {
+    const { isAuthenticated, isCheckingAuth } = (0, react_1.useContext)(contexts_1.AuthContext);
+    const { tComponent } = (0, contexts_1.useI18n)();
+    const location = (0, react_router_1.useLocation)();
+    if (isCheckingAuth) {
+        return (0, jsx_runtime_1.jsxs)("div", { children: [tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_CheckingAuthentication), "..."] });
+    }
+    if (isAuthenticated) {
+        return (0, jsx_runtime_1.jsx)(react_router_1.Navigate, { to: redirectTo ?? "/dashboard", state: { from: location }, replace: true });
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.UnAuthRoute = UnAuthRoute;
+exports.default = exports.UnAuthRoute;

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

@@ -1,5 +1,6 @@
-export { default as AdminRoute } from './AdminRoute'
+export { default as AdminRoute } from './AdminRoute';
 export { default as PrivateRoute } from './PrivateRoute';
 export { default as UnAuthRoute } from './UnAuthRoute';
 export * from './Private';
-export * from './UnAuth'
+export * from './UnAuth';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/auth/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAA"}

package/src/auth/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnAuthRoute = exports.PrivateRoute = exports.AdminRoute = void 0;
+const tslib_1 = require("tslib");
+var AdminRoute_1 = require("./AdminRoute");
+Object.defineProperty(exports, "AdminRoute", { enumerable: true, get: function () { return tslib_1.__importDefault(AdminRoute_1).default; } });
+var PrivateRoute_1 = require("./PrivateRoute");
+Object.defineProperty(exports, "PrivateRoute", { enumerable: true, get: function () { return tslib_1.__importDefault(PrivateRoute_1).default; } });
+var UnAuthRoute_1 = require("./UnAuthRoute");
+Object.defineProperty(exports, "UnAuthRoute", { enumerable: true, get: function () { return tslib_1.__importDefault(UnAuthRoute_1).default; } });
+tslib_1.__exportStar(require("./Private"), exports);
+tslib_1.__exportStar(require("./UnAuth"), exports);

package/src/components/ApiAccess.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+export interface ApiAccessProps {
+    token?: string | null;
+    labels?: {
+        title?: string;
+        tokenNotAvailable?: string;
+        copyButton?: string;
+        notificationTitle?: string;
+        copied?: string;
+        copyFailed?: string;
+        ok?: string;
+    };
+}
+export declare const ApiAccess: FC<ApiAccessProps>;
+export default ApiAccess;
+//# sourceMappingURL=ApiAccess.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiAccess.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/ApiAccess.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AA2BrC,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;CACH;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAmHxC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/src/components/ApiAccess.js

@@ -0,0 +1,77 @@
+"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 suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const ContentCopy_1 = tslib_1.__importDefault(require("@mui/icons-material/ContentCopy"));
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+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: tokenProp, labels = {}, }) => {
+    const { token: authToken } = (0, contexts_1.useAuth)();
+    const token = tokenProp !== undefined ? tokenProp : authToken;
+    const { 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 {
+                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;
+exports.default = exports.ApiAccess;

package/src/components/BackupCodeLoginForm.d.ts

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+import * as Yup from 'yup';
+export interface BackupCodeLoginFormValues {
+    email: string;
+    username: string;
+    code: string;
+    newPassword?: string;
+    confirmNewPassword?: string;
+    recoverMnemonic: boolean;
+}
+export interface BackupCodeLoginFormProps {
+    onSubmit: (identifier: string, code: string, isEmail: boolean, recoverMnemonic: boolean, newPassword?: string) => Promise<{
+        token: string;
+        codeCount: number;
+        mnemonic?: string;
+        message?: string;
+    } | {
+        error: string;
+        status?: number;
+    }>;
+    onNavigate?: (path: string, state?: Record<string, unknown>) => void;
+    isAuthenticated?: boolean;
+    validationSchema?: Yup.ObjectSchema<BackupCodeLoginFormValues>;
+    labels?: {
+        title?: string;
+        email?: string;
+        username?: string;
+        code?: string;
+        newPassword?: string;
+        confirmPassword?: string;
+        recoverMnemonic?: string;
+        login?: string;
+        useUsername?: string;
+        useEmail?: string;
+        dashboard?: string;
+        generateNewCodes?: string;
+        mnemonicLabel?: string;
+        codesRemaining?: string;
+    };
+}
+export declare const BackupCodeLoginForm: FC<BackupCodeLoginFormProps>;
+export default BackupCodeLoginForm;
+//# sourceMappingURL=BackupCodeLoginForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackupCodeLoginForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/BackupCodeLoginForm.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAG3B,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,CACR,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,OAAO,EACxB,WAAW,CAAC,EAAE,MAAM,KACjB,OAAO,CACR;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GACzE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CACrC,CAAC;IACF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,yBAAyB,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAya5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/src/components/BackupCodeLoginForm.js

@@ -0,0 +1,139 @@
+"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 suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const material_1 = require("@mui/material");
+const formik_1 = require("formik");
+const react_1 = require("react");
+const Yup = tslib_1.__importStar(require("yup"));
+const contexts_1 = require("../contexts");
+const BackupCodeLoginForm = ({ onSubmit, onNavigate, isAuthenticated = false, validationSchema, labels = {}, }) => {
+    const { 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 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_UseEmailAddress),
+        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 yupFieldValidation = {
+        email: 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: 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: 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: Yup.string().matches(suite_core_lib_1.Constants.PasswordRegex, tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate)),
+        confirmPassword: Yup.string().oneOf([Yup.ref('newPassword')], tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Validation_PasswordMatch)),
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: {
+            email: '',
+            username: '',
+            code: '',
+            newPassword: '',
+            confirmNewPassword: '',
+            recoverMnemonic: false,
+        },
+        validationSchema: validationSchema ??
+            Yup.object({
+                [loginType]: loginType === 'email'
+                    ? yupFieldValidation.email
+                    : yupFieldValidation.username,
+                code: yupFieldValidation.code,
+                newPassword: yupFieldValidation.password,
+                confirmNewPassword: yupFieldValidation.confirmPassword,
+            }),
+        enableReinitialize: true,
+        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: () => {
+                                            const newType = loginType === 'email' ? 'username' : 'email';
+                                            formik.setFieldValue(loginType, '');
+                                            setLoginType(newType);
+                                        }, children: loginType === 'email'
+                                            ? translatedLabels.useUsername
+                                            : translatedLabels.useEmail }) })] }))] })] }) }));
+};
+exports.BackupCodeLoginForm = BackupCodeLoginForm;
+exports.default = exports.BackupCodeLoginForm;

package/src/components/BackupCodesForm.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import * as Yup from 'yup';
+export interface BackupCodesFormValues {
+    password?: string;
+    mnemonic?: string;
+}
+export interface BackupCodesFormProps {
+    onSubmit: (values: BackupCodesFormValues) => Promise<{
+        message: string;
+        backupCodes: string[];
+    }>;
+    backupCodesRemaining?: number | null;
+    mnemonicValidation?: Yup.StringSchema;
+    passwordValidation?: Yup.StringSchema;
+    labels?: {
+        title?: string;
+        codesRemaining?: string;
+        mnemonic?: string;
+        password?: string;
+        generateButton?: string;
+        successTitle?: string;
+    };
+}
+export declare const BackupCodesForm: FC<BackupCodesFormProps>;
+export default BackupCodesForm;
+//# sourceMappingURL=BackupCodesForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackupCodesForm.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/BackupCodesForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAG3B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,OAAO,CAAC;QACnD,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC,CAAC;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;IACtC,kBAAkB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;IACtC,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAkPpD,CAAC;AAEF,eAAe,eAAe,CAAC"}