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

package/src/wrappers/UserSettingsFormWrapper.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserSettingsFormWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 authService_1 = require("../services/authService");
+const authenticatedApi_1 = require("../services/authenticatedApi");
+const UserSettingsFormWrapper = ({ onSuccess, constants, eciesConfig, emailDomain = '', totpAvailable = false, componentProps = {}, }) => {
+    const { settings, updateSettings } = (0, hooks_1.useUserSettingsPublic)();
+    const { languages, baseUrl } = (0, contexts_1.useSuiteConfig)();
+    // Fetch totpEnabled from the settings API
+    const [totpEnabled, setTotpEnabled] = (0, react_1.useState)(undefined);
+    const authenticatedApi = (0, react_1.useMemo)(() => (0, authenticatedApi_1.createAuthenticatedApiClient)(baseUrl), [baseUrl]);
+    const authService = (0, react_1.useMemo)(() => {
+        if (!constants || !eciesConfig)
+            return null;
+        return (0, authService_1.createAuthService)(constants, baseUrl, eciesConfig, emailDomain);
+    }, [constants, eciesConfig, baseUrl, emailDomain]);
+    // Fetch totpEnabled from GET /user/settings.
+    // We gate on totpAvailable (no point fetching if TOTP isn't enabled on this
+    // deployment) but NOT on isAuthenticated — isAuthenticated can be false
+    // transiently (e.g. verify 403 on page refresh with a stale token) even
+    // when the user has a valid session token in localStorage. The
+    // authenticatedApi interceptor attaches the token automatically; if the
+    // call fails we leave totpEnabled undefined so no TOTP controls are shown.
+    (0, react_1.useEffect)(() => {
+        if (!totpAvailable)
+            return;
+        authenticatedApi
+            .get('/user/settings')
+            .then((res) => {
+            setTotpEnabled(res.data?.settings?.totpEnabled ?? false);
+        })
+            .catch(() => {
+            // If the endpoint fails, leave totpEnabled undefined (no TOTP controls shown)
+        });
+    }, [totpAvailable, authenticatedApi]);
+    const handleSubmit = async (values) => {
+        const result = await updateSettings(values);
+        if ('success' in result && result.success && onSuccess) {
+            onSuccess();
+        }
+        return result;
+    };
+    // TOTP callbacks — only wired when authService is available
+    const handleTotpSetup = (0, react_1.useCallback)(async () => {
+        if (!authService)
+            return { error: 'AuthService not configured' };
+        return authService.setupTotp();
+    }, [authService]);
+    const handleTotpConfirm = (0, react_1.useCallback)(async (code) => {
+        if (!authService)
+            return { error: 'AuthService not configured' };
+        const result = await authService.confirmTotp(code);
+        if ('success' in result && result.success) {
+            setTotpEnabled(true);
+        }
+        return result;
+    }, [authService]);
+    const handleTotpDisable = (0, react_1.useCallback)(async (code) => {
+        if (!authService)
+            return { error: 'AuthService not configured' };
+        const result = await authService.disableTotp(code);
+        if ('success' in result && result.success) {
+            setTotpEnabled(false);
+        }
+        return result;
+    }, [authService]);
+    const handleTotpReset = (0, react_1.useCallback)(async (code) => {
+        if (!authService)
+            return { error: 'AuthService not configured' };
+        return authService.resetTotp(code);
+    }, [authService]);
+    // Only show loading on initial load, not during updates
+    // Once we have settings, keep showing the form even during updates
+    if (!settings) {
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, suite_core_lib_1.getSuiteCoreTranslation)(suite_core_lib_1.SuiteCoreStringKey.Common_Loading), "..."] });
+    }
+    // Only pass TOTP props when totpAvailable is true, authService is available, and totpEnabled has been fetched
+    const totpProps = totpAvailable && authService && totpEnabled !== undefined
+        ? {
+            totpEnabled,
+            onTotpSetup: handleTotpSetup,
+            onTotpConfirm: handleTotpConfirm,
+            onTotpDisable: handleTotpDisable,
+            onTotpReset: handleTotpReset,
+        }
+        : {};
+    return ((0, jsx_runtime_1.jsx)(UserSettingsForm_1.UserSettingsForm, { initialValues: settings, onSubmit: handleSubmit, languages: languages, ...totpProps, ...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;AACxC,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,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerifyEmailPageWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 = (0, react_1.useCallback)(async (verificationToken) => {
+        const result = await verifyEmail(verificationToken);
+        if (result.success && onSuccess) {
+            onSuccess();
+        }
+        return result;
+    }, [verifyEmail, onSuccess]);
+    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,30 +1,21 @@
-// 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 { ForgotPasswordFormWrapper } from './ForgotPasswordFormWrapper';
 export type { ForgotPasswordFormWrapperProps } from './ForgotPasswordFormWrapper';
-
 export { LoginFormWrapper } from './LoginFormWrapper';
 export type { LoginFormWrapperProps } from './LoginFormWrapper';
-
 export { RegisterFormWrapper } from './RegisterFormWrapper';
 export type { RegisterFormWrapperProps } from './RegisterFormWrapper';
-
 export { ResetPasswordFormWrapper } from './ResetPasswordFormWrapper';
 export type { ResetPasswordFormWrapperProps } from './ResetPasswordFormWrapper';
-
 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,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,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAEhF,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,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserSettingsFormWrapper = exports.VerifyEmailPageWrapper = exports.LogoutPageWrapper = exports.ResetPasswordFormWrapper = exports.RegisterFormWrapper = exports.LoginFormWrapper = exports.ForgotPasswordFormWrapper = 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 ForgotPasswordFormWrapper_1 = require("./ForgotPasswordFormWrapper");
+Object.defineProperty(exports, "ForgotPasswordFormWrapper", { enumerable: true, get: function () { return ForgotPasswordFormWrapper_1.ForgotPasswordFormWrapper; } });
+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 ResetPasswordFormWrapper_1 = require("./ResetPasswordFormWrapper");
+Object.defineProperty(exports, "ResetPasswordFormWrapper", { enumerable: true, get: function () { return ResetPasswordFormWrapper_1.ResetPasswordFormWrapper; } });
+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/AdminRoute.tsx

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

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';
-import { AuthContext } from '../contexts/AuthProvider';
-import { useI18n } from '../contexts';
-import { SuiteCoreComponentId, SuiteCoreStringKey, SuiteCoreStringKeyValue } 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<SuiteCoreStringKeyValue>(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';
-import { AuthContext, useI18n } from '../contexts';
-import { SuiteCoreComponentId, SuiteCoreStringKey, SuiteCoreStringKeyValue } 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<SuiteCoreStringKeyValue>(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,175 +0,0 @@
-import {
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-  SuiteCoreStringKeyValue,
-} from '@digitaldefiance/suite-core-lib';
-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 { 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<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.ApiAccess_Title
-      ),
-    tokenNotAvailable:
-      labels.tokenNotAvailable ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.ApiAccess_TokenNotAvailable
-      ),
-    copyButton:
-      labels.copyButton ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_CopyToClipboard
-      ),
-    notificationTitle:
-      labels.notificationTitle ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_Notification
-      ),
-    copied:
-      labels.copied ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_CopiedToClipboard
-      ),
-    copyFailed:
-      labels.copyFailed ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Error_FailedToCopy
-      ),
-    ok:
-      labels.ok ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        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 (
-    <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;