@digitaldefiance/express-suite-react-components 2.9.6 → 2.9.9

package/src/wrappers/LogoutPageWrapper.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { LogoutPage } from '../components/LogoutPage';
+export interface LogoutPageWrapperProps {
+    onSuccess?: () => void;
+    redirectTo?: string;
+    componentProps?: Partial<React.ComponentProps<typeof LogoutPage>>;
+}
+export declare const LogoutPageWrapper: FC<LogoutPageWrapperProps>;
+//# sourceMappingURL=LogoutPageWrapper.d.ts.map

package/src/wrappers/LogoutPageWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoutPageWrapper.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/wrappers/LogoutPageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;CACnE;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAkBxD,CAAC"}

package/src/wrappers/LogoutPageWrapper.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoutPageWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const LogoutPage_1 = require("../components/LogoutPage");
+const contexts_1 = require("../contexts");
+const LogoutPageWrapper = ({ onSuccess, redirectTo, componentProps = {}, }) => {
+    const { logout } = (0, contexts_1.useAuth)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { routes } = (0, contexts_1.useSuiteConfig)();
+    const handleLogout = async () => {
+        await logout();
+        if (onSuccess) {
+            onSuccess();
+        }
+        navigate(redirectTo || routes.login || '/login');
+    };
+    return (0, jsx_runtime_1.jsx)(LogoutPage_1.LogoutPage, { onLogout: handleLogout, onNavigate: navigate, ...componentProps });
+};
+exports.LogoutPageWrapper = LogoutPageWrapper;

package/src/wrappers/RegisterFormWrapper.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { RegisterFormProps } from '../components/RegisterForm';
+export interface RegisterFormWrapperProps {
+    onSuccess?: () => void;
+    redirectTo?: string;
+    componentProps?: Partial<Omit<RegisterFormProps, 'onSubmit' | 'timezones' | 'getInitialTimezone'>>;
+}
+export declare const RegisterFormWrapper: FC<RegisterFormWrapperProps>;
+//# sourceMappingURL=RegisterFormWrapper.d.ts.map

package/src/wrappers/RegisterFormWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegisterFormWrapper.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/wrappers/RegisterFormWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAoC,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAGjG,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC;CACpG;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAoC5D,CAAC"}

package/src/wrappers/RegisterFormWrapper.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegisterFormWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const RegisterForm_1 = require("../components/RegisterForm");
+const contexts_1 = require("../contexts");
+const RegisterFormWrapper = ({ onSuccess, redirectTo, componentProps = {}, }) => {
+    const { register } = (0, contexts_1.useAuth)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { routes, timezones } = (0, contexts_1.useSuiteConfig)();
+    const handleSubmit = async (values, usePassword) => {
+        const result = await register(values.username, values.email, values.timezone || 'UTC', values.password);
+        if ('error' in result) {
+            throw new Error(result.error);
+        }
+        if (onSuccess) {
+            onSuccess();
+        }
+        navigate(redirectTo || routes.verifyEmail || '/verify-email');
+        return result;
+    };
+    const defaultTimezones = timezones || ['UTC', 'America/New_York', 'America/Los_Angeles', 'Europe/London'];
+    return ((0, jsx_runtime_1.jsx)(RegisterForm_1.RegisterForm, { onSubmit: handleSubmit, timezones: defaultTimezones, getInitialTimezone: () => Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC', ...componentProps }));
+};
+exports.RegisterFormWrapper = RegisterFormWrapper;

package/src/wrappers/UserSettingsFormWrapper.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { UserSettingsFormProps } from '../components/UserSettingsForm';
+export interface UserSettingsFormWrapperProps {
+    onSuccess?: () => void;
+    componentProps?: Partial<Omit<UserSettingsFormProps, 'initialValues' | 'onSubmit' | 'languages'>>;
+}
+export declare const UserSettingsFormWrapper: FC<UserSettingsFormWrapperProps>;
+//# sourceMappingURL=UserSettingsFormWrapper.d.ts.map

package/src/wrappers/UserSettingsFormWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsFormWrapper.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/wrappers/UserSettingsFormWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAA4C,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAKjH,MAAM,WAAW,4BAA4B;IAC3C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,eAAe,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC;CACnG;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA2BpE,CAAC"}

package/src/wrappers/UserSettingsFormWrapper.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserSettingsFormWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const UserSettingsForm_1 = require("../components/UserSettingsForm");
+const contexts_1 = require("../contexts");
+const hooks_1 = require("../hooks");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
+const UserSettingsFormWrapper = ({ onSuccess, componentProps = {}, }) => {
+    const { settings, isLoading, updateSettings } = (0, hooks_1.useUserSettingsPublic)();
+    const { languages } = (0, contexts_1.useSuiteConfig)();
+    const handleSubmit = async (values) => {
+        const result = await updateSettings(values);
+        if ('success' in result && result.success && onSuccess) {
+            onSuccess();
+        }
+        return result;
+    };
+    if (isLoading || !settings) {
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, suite_core_lib_1.getSuiteCoreTranslation)(suite_core_lib_1.SuiteCoreStringKey.Common_Loading), "..."] });
+    }
+    return ((0, jsx_runtime_1.jsx)(UserSettingsForm_1.UserSettingsForm, { initialValues: settings, onSubmit: handleSubmit, languages: languages, ...componentProps }));
+};
+exports.UserSettingsFormWrapper = UserSettingsFormWrapper;

package/src/wrappers/VerifyEmailPageWrapper.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { VerifyEmailPage } from '../components/VerifyEmailPage';
+export interface VerifyEmailPageWrapperProps {
+    onSuccess?: () => void;
+    componentProps?: Partial<React.ComponentProps<typeof VerifyEmailPage>>;
+}
+export declare const VerifyEmailPageWrapper: FC<VerifyEmailPageWrapperProps>;
+//# sourceMappingURL=VerifyEmailPageWrapper.d.ts.map

package/src/wrappers/VerifyEmailPageWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyEmailPageWrapper.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/wrappers/VerifyEmailPageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC;CACxE;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAiBlE,CAAC"}

package/src/wrappers/VerifyEmailPageWrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerifyEmailPageWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const VerifyEmailPage_1 = require("../components/VerifyEmailPage");
+const hooks_1 = require("../hooks");
+const VerifyEmailPageWrapper = ({ onSuccess, componentProps = {}, }) => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const token = searchParams.get('token');
+    const { verifyEmail } = (0, hooks_1.useEmailVerification)();
+    const handleVerify = async (verificationToken) => {
+        const result = await verifyEmail(verificationToken);
+        if (result.success && onSuccess) {
+            onSuccess();
+        }
+        return result;
+    };
+    return (0, jsx_runtime_1.jsx)(VerifyEmailPage_1.VerifyEmailPage, { token: token, onVerify: handleVerify, ...componentProps });
+};
+exports.VerifyEmailPageWrapper = VerifyEmailPageWrapper;

package/src/wrappers/{index.tsx → index.d.ts}

@@ -1,24 +1,17 @@
-// Re-export all wrapper components from their individual files
 export { BackupCodeLoginWrapper } from './BackupCodeLoginWrapper';
 export type { BackupCodeLoginWrapperProps } from './BackupCodeLoginWrapper';
-
 export { BackupCodesWrapper } from './BackupCodesWrapper';
 export type { BackupCodesWrapperProps } from './BackupCodesWrapper';
-
 export { ChangePasswordFormWrapper } from './ChangePasswordFormWrapper';
 export type { ChangePasswordFormWrapperProps } from './ChangePasswordFormWrapper';
-
 export { LoginFormWrapper } from './LoginFormWrapper';
 export type { LoginFormWrapperProps } from './LoginFormWrapper';
-
 export { RegisterFormWrapper } from './RegisterFormWrapper';
 export type { RegisterFormWrapperProps } from './RegisterFormWrapper';
-
 export { LogoutPageWrapper } from './LogoutPageWrapper';
 export type { LogoutPageWrapperProps } from './LogoutPageWrapper';
-
 export { VerifyEmailPageWrapper } from './VerifyEmailPageWrapper';
 export type { VerifyEmailPageWrapperProps } from './VerifyEmailPageWrapper';
-
 export { UserSettingsFormWrapper } from './UserSettingsFormWrapper';
 export type { UserSettingsFormWrapperProps } from './UserSettingsFormWrapper';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/wrappers/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,YAAY,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC"}

package/src/wrappers/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserSettingsFormWrapper = exports.VerifyEmailPageWrapper = exports.LogoutPageWrapper = exports.RegisterFormWrapper = exports.LoginFormWrapper = exports.ChangePasswordFormWrapper = exports.BackupCodesWrapper = exports.BackupCodeLoginWrapper = void 0;
+// Re-export all wrapper components from their individual files
+var BackupCodeLoginWrapper_1 = require("./BackupCodeLoginWrapper");
+Object.defineProperty(exports, "BackupCodeLoginWrapper", { enumerable: true, get: function () { return BackupCodeLoginWrapper_1.BackupCodeLoginWrapper; } });
+var BackupCodesWrapper_1 = require("./BackupCodesWrapper");
+Object.defineProperty(exports, "BackupCodesWrapper", { enumerable: true, get: function () { return BackupCodesWrapper_1.BackupCodesWrapper; } });
+var ChangePasswordFormWrapper_1 = require("./ChangePasswordFormWrapper");
+Object.defineProperty(exports, "ChangePasswordFormWrapper", { enumerable: true, get: function () { return ChangePasswordFormWrapper_1.ChangePasswordFormWrapper; } });
+var LoginFormWrapper_1 = require("./LoginFormWrapper");
+Object.defineProperty(exports, "LoginFormWrapper", { enumerable: true, get: function () { return LoginFormWrapper_1.LoginFormWrapper; } });
+var RegisterFormWrapper_1 = require("./RegisterFormWrapper");
+Object.defineProperty(exports, "RegisterFormWrapper", { enumerable: true, get: function () { return RegisterFormWrapper_1.RegisterFormWrapper; } });
+var LogoutPageWrapper_1 = require("./LogoutPageWrapper");
+Object.defineProperty(exports, "LogoutPageWrapper", { enumerable: true, get: function () { return LogoutPageWrapper_1.LogoutPageWrapper; } });
+var VerifyEmailPageWrapper_1 = require("./VerifyEmailPageWrapper");
+Object.defineProperty(exports, "VerifyEmailPageWrapper", { enumerable: true, get: function () { return VerifyEmailPageWrapper_1.VerifyEmailPageWrapper; } });
+var UserSettingsFormWrapper_1 = require("./UserSettingsFormWrapper");
+Object.defineProperty(exports, "UserSettingsFormWrapper", { enumerable: true, get: function () { return UserSettingsFormWrapper_1.UserSettingsFormWrapper; } });

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Digital Defiance, Jessica Mulein
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/auth/Private.tsx

@@ -1,17 +0,0 @@
-import { FC, ReactNode, useContext } from 'react';
-import { AuthContext } from '../contexts/AuthProvider';
-export interface PrivateProps {
-  children: ReactNode;
-}
-
-export const Private: FC<PrivateProps> = ({
-  children,
-}) => {
-  const { isAuthenticated, isCheckingAuth } = useContext(AuthContext);
-
-  if (isCheckingAuth || !isAuthenticated) {
-    return <></>;
-  }
-
-  return <>{children}</>;
-};

package/src/auth/PrivateRoute.tsx

@@ -1,28 +0,0 @@
-import { FC, ReactNode, useContext } from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
-import { AuthContext } from '../contexts/AuthProvider';
-import { useI18n } from '../contexts';
-import { SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-
-interface PrivateRouteProps {
-  children: ReactNode;
-  redirectTo?: string;
-}
-
-export const PrivateRoute: FC<PrivateRouteProps> = ({ children, redirectTo }) => {
-  const { tComponent } = useI18n();
-  const { isAuthenticated, isCheckingAuth } = useContext(AuthContext);
-  const location = useLocation();
-
-  if (isCheckingAuth) {
-    return <div>{tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_CheckingAuthentication)}...</div>;
-  }
-
-  if (!isAuthenticated) {
-    return <Navigate to={redirectTo ?? "/login"} state={{ from: location }} replace />;
-  }
-
-  return <>{children}</>;
-};
-
-export default PrivateRoute;

package/src/auth/UnAuth.tsx

@@ -1,16 +0,0 @@
-import { FC, ReactNode, useContext } from 'react';
-import { AuthContext } from '../contexts/AuthProvider';
-
-export interface UnAuthProps {
-  children: ReactNode;
-}
-
-export const UnAuth: FC<UnAuthProps> = ({ children }) => {
-  const { isAuthenticated, isCheckingAuth } = useContext(AuthContext);
-
-  if (isCheckingAuth || isAuthenticated) {
-    return null;
-  }
-
-  return <>{children}</>;
-};

package/src/auth/UnAuthRoute.tsx

@@ -1,30 +0,0 @@
-import { FC, ReactNode, useContext } from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
-import { AuthContext, useI18n } from '../contexts';
-import { SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-
-export interface UnAuthRouteProps {
-  children: ReactNode;
-  redirectTo?: string;
-}
-
-export const UnAuthRoute: FC<UnAuthRouteProps> = ({
-  children,
-  redirectTo = '/dashboard',
-}) => {
-  const { isAuthenticated, isCheckingAuth } = useContext(AuthContext);
-  const { tComponent } = useI18n();
-  const location = useLocation();
-
-  if (isCheckingAuth) {
-    return <div>{tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_CheckingAuthentication)}...</div>;
-  }
-
-  if (isAuthenticated) {
-    return <Navigate to={redirectTo ?? "/dashboard"} state={{ from: location }} replace />;
-  }
-
-  return <>{children}</>;
-};
-
-export default UnAuthRoute;

package/src/components/ApiAccess.tsx

@@ -1,134 +0,0 @@
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  styled,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { FC, useState } from 'react';
-import { SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-import { useAuth, useI18n } from '../contexts';
-
-const ApiAccessContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: '100vh',
-  backgroundColor: theme.palette.background.default,
-  padding: theme.spacing(3),
-}));
-
-const ApiAccessContent = styled(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 = styled(Typography)(({ theme }) => ({
-  marginBottom: theme.spacing(3),
-  color: theme.palette.primary.main,
-}));
-
-export interface ApiAccessProps {
-  token?: string | null;
-  labels?: {
-    title?: string;
-    tokenNotAvailable?: string;
-    copyButton?: string;
-    notificationTitle?: string;
-    copied?: string;
-    copyFailed?: string;
-    ok?: string;
-  };
-}
-
-export const ApiAccess: FC<ApiAccessProps> = ({
-  token: tokenProp,
-  labels = {},
-}) => {
-  const { token: authToken } = useAuth();
-  const token = tokenProp !== undefined ? tokenProp : authToken;
-  const { tComponent } = useI18n();
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  const translatedLabels = {
-    title: labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ApiAccess_Title),
-    tokenNotAvailable: labels.tokenNotAvailable || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ApiAccess_TokenNotAvailable),
-    copyButton: labels.copyButton || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_CopyToClipboard),
-    notificationTitle: labels.notificationTitle || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Notification),
-    copied: labels.copied || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_CopiedToClipboard),
-    copyFailed: labels.copyFailed || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Error_FailedToCopy),
-    ok: labels.ok || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, 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 (
-    <ApiAccessContainer>
-      <ApiAccessContent>
-        <ApiAccessTitle variant="h4" align="center">
-          {translatedLabels.title}
-        </ApiAccessTitle>
-        <TextField
-          fullWidth
-          multiline
-          rows={4}
-          value={token || translatedLabels.tokenNotAvailable}
-          slotProps={{
-            input: {
-              readOnly: true,
-            },
-          }}
-          variant="outlined"
-          margin="normal"
-        />
-        <Button
-          variant="contained"
-          color="primary"
-          startIcon={<ContentCopyIcon />}
-          onClick={copyToClipboard}
-          fullWidth
-          style={{ marginTop: '16px' }}
-        >
-          {translatedLabels.copyButton}
-        </Button>
-      </ApiAccessContent>
-      <Dialog open={dialogOpen} onClose={handleClose}>
-        <DialogTitle>{translatedLabels.notificationTitle}</DialogTitle>
-        <DialogContent>{isError ? translatedLabels.copyFailed : translatedLabels.copied}</DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose} color="primary">
-            {translatedLabels.ok}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </ApiAccessContainer>
-  );
-};
-
-export default ApiAccess;