@digitaldefiance/express-suite-react-components 2.9.1 → 2.9.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/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "2.9.1",
+  "version": "2.9.2",
+  "homepage": "https://github.com/Digital-Defiance/react-components",
   "description": "React MUI components for Digital Defiance Express Suite",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Digital-Defiance/react-components.git"
+  },
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "scripts": {
@@ -25,8 +30,8 @@
     "react-router-dom": "6.29.0"
   },
   "dependencies": {
-    "@digitaldefiance/i18n-lib": "3.8.0",
-    "@digitaldefiance/suite-core-lib": "3.6.6",
+    "@digitaldefiance/i18n-lib": "3.8.2",
+    "@digitaldefiance/suite-core-lib": "3.6.7",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",
@@ -68,6 +73,5 @@
   ],
   "author": "Digital Defiance",
   "license": "MIT",
-  "packageManager": "yarn@4.10.3",
-  "type": "commonjs"
-}
+  "packageManager": "yarn@4.10.3"
+}

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-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

@@ -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-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/auth/{index.d.ts → index.ts}

@@ -1,5 +1,4 @@
 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,134 @@
+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;

package/src/components/BackupCodeLoginForm.tsx

@@ -0,0 +1,314 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  FormControlLabel,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+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?: any) => void;
+  isAuthenticated?: boolean;
+  validationSchema?: Yup.ObjectSchema<any>;
+  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 const BackupCodeLoginForm: FC<BackupCodeLoginFormProps> = ({
+  onSubmit,
+  onNavigate,
+  isAuthenticated = false,
+  validationSchema,
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [loginType, setLoginType] = useState<'email' | 'username'>('email');
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [recoveredMnemonic, setRecoveredMnemonic] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [codesRemaining, setCodesRemaining] = useState<number | null>(null);
+
+  const translatedLabels = {
+    title: labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_Title),
+    email: labels.email || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Email),
+    username: labels.username || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Username),
+    code: labels.code || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_BackupCode),
+    newPassword: labels.newPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_NewPassword),
+    confirmPassword: labels.confirmPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword),
+    recoverMnemonic: labels.recoverMnemonic || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_RecoverMnemonic),
+    login: labels.login || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_Login),
+    useUsername: labels.useUsername || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseUsername),
+    useEmail: labels.useEmail || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseEmailAddress),
+    dashboard: labels.dashboard || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Dashboard),
+    generateNewCodes: labels.generateNewCodes || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
+    mnemonicLabel: labels.mnemonicLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Mnemonic),
+    codesRemaining: labels.codesRemaining || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate),
+    unexpectedError: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UnexpectedError),
+  };
+
+  const yupFieldValidation = {
+    email: Yup.string()
+      .email(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidEmail))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    username: Yup.string()
+      .matches(Constants.UsernameRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    code: Yup.string()
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required))
+      .matches(Constants.BACKUP_CODES.DisplayRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidBackupCode)),
+    password: Yup.string()
+      .matches(Constants.PasswordRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate)),
+    confirmPassword: Yup.string()
+      .oneOf([Yup.ref('newPassword')], tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMatch)),
+  };
+
+  const formik = useFormik<BackupCodeLoginFormValues>({
+    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 (
+    <Container component="main" maxWidth="xs">
+      <Box sx={{ marginTop: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Typography component="h1" variant="h5">
+          {translatedLabels.title}
+        </Typography>
+        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+          {!isAuthenticated && (
+            <>
+              <TextField
+                margin="normal"
+                fullWidth
+                id={loginType}
+                label={loginType === 'email' ? translatedLabels.email : translatedLabels.username}
+                name={loginType}
+                autoComplete={loginType === 'email' ? 'email' : 'username'}
+                autoFocus
+                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}
+              />
+              <TextField
+                margin="normal"
+                required
+                fullWidth
+                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}
+              />
+              <TextField
+                margin="normal"
+                fullWidth
+                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}
+              />
+              <TextField
+                margin="normal"
+                fullWidth
+                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}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={formik.values.recoverMnemonic}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    name="recoverMnemonic"
+                  />
+                }
+                label={translatedLabels.recoverMnemonic}
+                disabled={isAuthenticated}
+              />
+            </>
+          )}
+          {successMessage && (
+            <Typography color="success.main" variant="body2" sx={{ mt: 1 }}>
+              {successMessage}
+            </Typography>
+          )}
+          {recoveredMnemonic && (
+            <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
+              <Typography variant="subtitle2" gutterBottom>
+                {translatedLabels.mnemonicLabel}:
+              </Typography>
+              <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>
+                {recoveredMnemonic}
+              </Typography>
+              <Button
+                fullWidth
+                variant="contained"
+                sx={{ mt: 2 }}
+                onClick={() => onNavigate?.('/dashboard')}
+              >
+                {translatedLabels.dashboard}
+              </Button>
+            </Box>
+          )}
+          {codesRemaining !== null && (
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="body2">
+                {translatedLabels.codesRemaining.replace('{count}', String(codesRemaining))}
+              </Typography>
+              <Button
+                fullWidth
+                variant="contained"
+                sx={{ mt: 2 }}
+                onClick={() => onNavigate?.('/backup-codes', { codeCount: codesRemaining })}
+              >
+                {translatedLabels.generateNewCodes}
+              </Button>
+            </Box>
+          )}
+          {loginError && (
+            <Typography color="error" variant="body2" sx={{ mt: 1 }}>
+              {loginError}
+            </Typography>
+          )}
+          {!isAuthenticated && (
+            <>
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{ mt: 3, mb: 2 }}
+                disabled={formik.isSubmitting}
+              >
+                {translatedLabels.login}
+              </Button>
+              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                <Button
+                  fullWidth
+                  variant="text"
+                  onClick={() => {
+                    const newType = loginType === 'email' ? 'username' : 'email';
+                    formik.setFieldValue(loginType, '');
+                    setLoginType(newType);
+                  }}
+                >
+                  {loginType === 'email' ? translatedLabels.useUsername : translatedLabels.useEmail}
+                </Button>
+              </Box>
+            </>
+          )}
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default BackupCodeLoginForm;