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

package/src/components/BackupCodesForm.tsx

@@ -0,0 +1,287 @@
+import {
+  Constants,
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+  SuiteCoreStringKeyValue,
+} from '@digitaldefiance/suite-core-lib';
+import {
+  Alert,
+  Box,
+  Button,
+  Container,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { useI18n } from '../contexts';
+
+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 const BackupCodesForm: FC<BackupCodesFormProps> = ({
+  onSubmit,
+  backupCodesRemaining = null,
+  mnemonicValidation,
+  passwordValidation,
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [apiSuccess, setApiSuccess] = useState<string | null>(null);
+  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
+
+  const validation = {
+    mnemonic:
+      mnemonicValidation ||
+      Yup.string()
+        .trim()
+        .matches(
+          Constants.MnemonicRegex,
+          tComponent<SuiteCoreStringKeyValue>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_MnemonicRegex
+          )
+        )
+        .optional(),
+    password:
+      passwordValidation ||
+      Yup.string()
+        .trim()
+        .matches(
+          Constants.PasswordRegex,
+          tComponent<SuiteCoreStringKeyValue>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate
+          )
+        )
+        .optional(),
+  };
+
+  const translatedLabels = {
+    codesRemaining:
+      labels.codesRemaining ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate
+      ),
+    mnemonic:
+      labels.mnemonic ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_Mnemonic
+      ),
+    password:
+      labels.password ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_Password
+      ),
+    generateButton:
+      labels.generateButton ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes
+      ),
+    successTitle:
+      labels.successTitle ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_YourNewCodes
+      ),
+    xorError: tComponent<SuiteCoreStringKeyValue>(
+      SuiteCoreComponentId,
+      SuiteCoreStringKey.Validation_MnemonicOrPasswordRequired
+    ),
+    unexpectedError: tComponent<SuiteCoreStringKeyValue>(
+      SuiteCoreComponentId,
+      SuiteCoreStringKey.Common_UnexpectedError
+    ),
+  };
+
+  const validationSchema = Yup.object({
+    mnemonic: validation.mnemonic,
+    password: validation.password,
+  })
+    .test(
+      'xor-mnemonic-password-mnemonic',
+      translatedLabels.xorError,
+      function (value) {
+        const mnemonic = value?.mnemonic?.trim() ?? '';
+        const password = value?.password?.trim() ?? '';
+        const hasMnemonic = mnemonic.length > 0;
+        const hasPassword = password.length > 0;
+
+        if (!hasMnemonic && !hasPassword) {
+          return this.createError({
+            path: 'mnemonic',
+            message: translatedLabels.xorError,
+          });
+        }
+        if (hasMnemonic && hasPassword) {
+          return this.createError({
+            path: 'mnemonic',
+            message: translatedLabels.xorError,
+          });
+        }
+        return true;
+      }
+    )
+    .test(
+      'xor-mnemonic-password-password',
+      translatedLabels.xorError,
+      function (value) {
+        const mnemonic = value?.mnemonic?.trim() ?? '';
+        const password = value?.password?.trim() ?? '';
+        const hasMnemonic = mnemonic.length > 0;
+        const hasPassword = password.length > 0;
+
+        if (!hasMnemonic && !hasPassword) {
+          return this.createError({
+            path: 'password',
+            message: translatedLabels.xorError,
+          });
+        }
+        if (hasMnemonic && hasPassword) {
+          return this.createError({
+            path: 'password',
+            message: translatedLabels.xorError,
+          });
+        }
+        return true;
+      }
+    );
+
+  const formik = useFormik<BackupCodesFormValues>({
+    initialValues: {
+      password: '',
+      mnemonic: '',
+    },
+    validationSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      try {
+        const result = await onSubmit(values);
+        if (result && result.backupCodes) {
+          setApiSuccess(translatedLabels.successTitle);
+          setBackupCodes(result.backupCodes);
+        }
+        if (result && result.message) {
+          setApiSuccess(result.message);
+        }
+        setApiError(null);
+      } catch (e: unknown) {
+        setApiSuccess(null);
+        const error = e as { response?: { data?: { message?: string } } };
+        setApiError(
+          error.response?.data?.message ?? translatedLabels.unexpectedError
+        );
+      } finally {
+        setSubmitting(false);
+      }
+    },
+  });
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Box>
+        <Typography component="h1" variant="h5">
+          {translatedLabels.codesRemaining.replace(
+            '{count}',
+            String(backupCodesRemaining ?? 0)
+          )}
+        </Typography>
+      </Box>
+      <Box
+        component="form"
+        onSubmit={formik.handleSubmit}
+        sx={{ mt: 1, width: '100%' }}
+      >
+        <TextField
+          margin="normal"
+          fullWidth
+          id="mnemonic"
+          label={translatedLabels.mnemonic}
+          type="password"
+          name="mnemonic"
+          autoComplete="mnemonic"
+          autoFocus
+          value={formik.values.mnemonic}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          error={
+            (formik.touched.mnemonic || formik.submitCount > 0) &&
+            Boolean(formik.errors.mnemonic)
+          }
+          helperText={
+            (formik.touched.mnemonic || formik.submitCount > 0) &&
+            formik.errors.mnemonic
+          }
+        />
+        <TextField
+          margin="normal"
+          fullWidth
+          name="password"
+          label={translatedLabels.password}
+          type="password"
+          id="password"
+          value={formik.values.password}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          error={
+            (formik.touched.password || formik.submitCount > 0) &&
+            Boolean(formik.errors.password)
+          }
+          helperText={
+            (formik.touched.password || formik.submitCount > 0) &&
+            formik.errors.password
+          }
+        />
+        <Button type="submit" fullWidth variant="contained" sx={{ mt: 2 }}>
+          {translatedLabels.generateButton}
+        </Button>
+      </Box>
+      {apiError && (
+        <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+          {apiError}
+        </Alert>
+      )}
+      {backupCodes && apiSuccess && (
+        <Box sx={{ mt: 2, mb: 2 }}>
+          <Typography component="h2" variant="h6">
+            {apiSuccess}
+          </Typography>
+          <ul>
+            {backupCodes.map((code, index) => (
+              <li key={index}>
+                <pre>{code}</pre>
+              </li>
+            ))}
+          </ul>
+        </Box>
+      )}
+    </Container>
+  );
+};
+
+export default BackupCodesForm;

package/src/components/CategoryMenu.tsx

@@ -0,0 +1,155 @@
+import {
+  Box,
+  Fade,
+  IconButton,
+  Popover,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import {
+  FC,
+  MouseEvent,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import { ICategoryConfig } from '../interfaces/ICategoryConfig';
+import { IMenuConfig } from '../interfaces/IMenuConfig';
+import { DropdownMenu } from './DropdownMenu';
+
+export interface CategoryMenuProps {
+  category: ICategoryConfig;
+  menus: IMenuConfig[];
+}
+
+/**
+ * Renders an AppBar icon button that opens a popover containing a grid of
+ * icon tiles. Each tile is a {@link DropdownMenu} for one of the supplied
+ * `menus`, preserving its existing sub-menu behaviour. Use this together with
+ * `IMenuConfig.category` to collapse many top-bar icons into a small number
+ * of category containers (a "mega-menu" pattern).
+ */
+export const CategoryMenu: FC<CategoryMenuProps> = ({ category, menus }) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleOpen = useCallback((event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+
+  const columns = category.columns ?? 3;
+  const showLabels = category.showLabels ?? true;
+  const showHeader = category.showHeader ?? false;
+  const hideWhenEmpty = category.hideWhenEmpty ?? true;
+
+  const visibleMenus = useMemo(
+    () => menus.filter((m) => !m.isUserMenu),
+    [menus]
+  );
+
+  if (visibleMenus.length === 0 && hideWhenEmpty) {
+    return null;
+  }
+
+  const trigger = (
+    <IconButton
+      color="inherit"
+      onClick={handleOpen}
+      aria-label={category.label ?? category.id}
+      aria-haspopup="true"
+      aria-expanded={Boolean(anchorEl) || undefined}
+    >
+      {category.icon}
+    </IconButton>
+  );
+
+  return (
+    <Box>
+      {category.label ? (
+        <Tooltip title={category.label}>{trigger}</Tooltip>
+      ) : (
+        trigger
+      )}
+      <Popover
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        TransitionComponent={Fade}
+      >
+        <Box sx={{ p: 1.5, minWidth: 64 * columns + 24 }}>
+          {showHeader && (category.header || category.label) && (
+            <Typography
+              variant="overline"
+              sx={{
+                display: 'block',
+                px: 1,
+                pb: 1,
+                color: 'text.secondary',
+                lineHeight: 1.2,
+              }}
+            >
+              {category.header ?? category.label}
+            </Typography>
+          )}
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: `repeat(${columns}, minmax(72px, 1fr))`,
+              gap: 1,
+            }}
+          >
+            {visibleMenus.map((menu, index) => {
+              const tileLabel = menu.label ?? String(menu.menuType);
+              return (
+                <Box
+                  key={`${category.id}-tile-${menu.menuType}-${index}`}
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'flex-start',
+                    px: 0.5,
+                    py: 0.5,
+                    borderRadius: 1,
+                    '&:hover': {
+                      backgroundColor: 'action.hover',
+                    },
+                  }}
+                >
+                  <DropdownMenu
+                    menuType={menu.menuType}
+                    menuIcon={menu.menuIcon as ReactElement}
+                    action={menu.action}
+                    hideWhenEmpty={menu.hideWhenEmpty}
+                  />
+                  {showLabels && (
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        mt: -0.5,
+                        textAlign: 'center',
+                        lineHeight: 1.1,
+                        color: 'text.primary',
+                        userSelect: 'none',
+                      }}
+                    >
+                      {tileLabel}
+                    </Typography>
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      </Popover>
+    </Box>
+  );
+};
+
+export default CategoryMenu;

package/src/components/ChangePasswordForm.tsx

@@ -0,0 +1,273 @@
+import {
+  Constants,
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+  SuiteCoreStringKeyValue,
+} from '@digitaldefiance/suite-core-lib';
+import {
+  Alert,
+  Box,
+  Button,
+  Container,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { useI18n } from '../contexts';
+
+export interface ChangePasswordFormValues {
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+export interface ChangePasswordFormProps {
+  onSubmit: (
+    values: ChangePasswordFormValues
+  ) => Promise<{ success?: boolean; error?: string }>;
+  titleText?: string;
+  currentPasswordLabel?: string;
+  newPasswordLabel?: string;
+  confirmPasswordLabel?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  successMessage?: string;
+  currentPasswordValidation?: Yup.StringSchema;
+  newPasswordValidation?: Yup.StringSchema;
+  confirmPasswordValidation?: Yup.StringSchema;
+}
+
+export const ChangePasswordForm: FC<ChangePasswordFormProps> = ({
+  onSubmit,
+  titleText,
+  currentPasswordLabel,
+  newPasswordLabel,
+  confirmPasswordLabel,
+  submitButtonText,
+  submittingButtonText,
+  successMessage,
+  currentPasswordValidation,
+  newPasswordValidation,
+  confirmPasswordValidation,
+}) => {
+  const { tComponent } = useI18n();
+  const [success, setSuccess] = useState(false);
+  const [apiError, setApiError] = useState<string>('');
+
+  const validation = {
+    currentPassword:
+      currentPasswordValidation ||
+      Yup.string().required(
+        tComponent<SuiteCoreStringKeyValue>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_Required
+        )
+      ),
+    newPassword:
+      newPasswordValidation ||
+      Yup.string()
+        .min(
+          Constants.PasswordMinLength,
+          tComponent<SuiteCoreStringKeyValue>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_PasswordMinLengthTemplate
+          )
+        )
+        .required(
+          tComponent<SuiteCoreStringKeyValue>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_Required
+          )
+        ),
+    confirmPassword:
+      confirmPasswordValidation ||
+      Yup.string()
+        .oneOf(
+          [Yup.ref('newPassword')],
+          tComponent<SuiteCoreStringKeyValue>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_PasswordMatch
+          )
+        )
+        .required(
+          tComponent<SuiteCoreStringKeyValue>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_Required
+          )
+        ),
+  };
+
+  const labels = {
+    title:
+      titleText ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_ChangePassword
+      ),
+    currentPassword:
+      currentPasswordLabel ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_CurrentPassword
+      ),
+    newPassword:
+      newPasswordLabel ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_NewPassword
+      ),
+    confirmPassword:
+      confirmPasswordLabel ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_ConfirmNewPassword
+      ),
+    submitButton:
+      submitButtonText ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_ChangePassword
+      ),
+    submittingButton:
+      submittingButtonText ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_ChangingPassword
+      ),
+    success:
+      successMessage ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.PasswordChange_Success
+      ),
+  };
+
+  const formik = useFormik<ChangePasswordFormValues>({
+    initialValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+    validationSchema: Yup.object({
+      currentPassword: validation.currentPassword,
+      newPassword: validation.newPassword,
+      confirmPassword: validation.confirmPassword,
+    }),
+    onSubmit: async (values, { resetForm }) => {
+      const result = await onSubmit(values);
+
+      if ('success' in result) {
+        setSuccess(true);
+        setApiError('');
+        resetForm();
+      } else if ('error' in result && result.error) {
+        setApiError(result.error);
+        setSuccess(false);
+      }
+    },
+  });
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {labels.title}
+        </Typography>
+
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          sx={{ mt: 1, width: '100%' }}
+        >
+          <TextField
+            fullWidth
+            id="currentPassword"
+            name="currentPassword"
+            label={labels.currentPassword}
+            type="password"
+            value={formik.values.currentPassword}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(
+              formik.touched.currentPassword && formik.errors.currentPassword
+            )}
+            helperText={
+              formik.touched.currentPassword && formik.errors.currentPassword
+            }
+            margin="normal"
+          />
+
+          <TextField
+            fullWidth
+            id="newPassword"
+            name="newPassword"
+            label={labels.newPassword}
+            type="password"
+            value={formik.values.newPassword}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(
+              formik.touched.newPassword && formik.errors.newPassword
+            )}
+            helperText={formik.touched.newPassword && formik.errors.newPassword}
+            margin="normal"
+          />
+
+          <TextField
+            fullWidth
+            id="confirmPassword"
+            name="confirmPassword"
+            label={labels.confirmPassword}
+            type="password"
+            value={formik.values.confirmPassword}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(
+              formik.touched.confirmPassword && formik.errors.confirmPassword
+            )}
+            helperText={
+              formik.touched.confirmPassword && formik.errors.confirmPassword
+            }
+            margin="normal"
+          />
+
+          {apiError && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiError}
+            </Alert>
+          )}
+
+          {success && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              {labels.success}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {formik.isSubmitting
+              ? labels.submittingButton
+              : labels.submitButton}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default ChangePasswordForm;