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

package/LICENSE

@@ -0,0 +1,21 @@
+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/README.md

@@ -364,6 +364,10 @@ MIT © Digital Defiance
 
 ## ChangeLog
 
+### Version 5.0.1
+
+- Added `data-testid="qr-code-svg"` to the `TotpSetupForm` QR code so the TOTP setup QR can be targeted in end-to-end tests (the form already exposed test ids for its other controls).
+
 ### Version 5.0.0
 
 - **BREAKING**: Replaced the `react-router-dom` peer dependency with `react-router` (`>=7`). Install `react-router` in your app instead of `react-router-dom`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "homepage": "https://github.com/Digital-Defiance/react-components",
   "description": "React MUI components for Digital Defiance Express Suite",
   "repository": {
@@ -78,6 +78,5 @@
   ],
   "author": "Digital Defiance",
   "license": "MIT",
-  "packageManager": "yarn@4.10.3",
-  "type": "commonjs"
-}
+  "packageManager": "yarn@4.10.3"
+}

package/src/auth/AdminRoute.tsx

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,30 @@
+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/auth/{index.d.ts → index.ts}

@@ -1,6 +1,5 @@
-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';
-//# sourceMappingURL=index.d.ts.map
+export * from './UnAuth'

package/src/components/ApiAccess.tsx

@@ -0,0 +1,175 @@
+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;