@digitaldefiance/express-suite-react-components 2.9.38 → 2.9.40

package/src/components/BackupCodesForm.tsx

@@ -1,286 +0,0 @@
-import {
-  Constants,
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-} 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<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_MnemonicRegex
-          )
-        )
-        .optional(),
-    password:
-      passwordValidation ||
-      Yup.string()
-        .trim()
-        .matches(
-          Constants.PasswordRegex,
-          tComponent<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate
-          )
-        )
-        .optional(),
-  };
-
-  const translatedLabels = {
-    codesRemaining:
-      labels.codesRemaining ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate
-      ),
-    mnemonic:
-      labels.mnemonic ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_Mnemonic
-      ),
-    password:
-      labels.password ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_Password
-      ),
-    generateButton:
-      labels.generateButton ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes
-      ),
-    successTitle:
-      labels.successTitle ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.BackupCodeRecovery_YourNewCodes
-      ),
-    xorError: tComponent<SuiteCoreStringKey>(
-      SuiteCoreComponentId,
-      SuiteCoreStringKey.Validation_MnemonicOrPasswordRequired
-    ),
-    unexpectedError: tComponent<SuiteCoreStringKey>(
-      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/ChangePasswordForm.tsx

@@ -1,272 +0,0 @@
-import {
-  Constants,
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-} 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<SuiteCoreStringKey>(
-          SuiteCoreComponentId,
-          SuiteCoreStringKey.Validation_Required
-        )
-      ),
-    newPassword:
-      newPasswordValidation ||
-      Yup.string()
-        .min(
-          Constants.PasswordMinLength,
-          tComponent<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordMinLengthTemplate
-          )
-        )
-        .required(
-          tComponent<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_Required
-          )
-        ),
-    confirmPassword:
-      confirmPasswordValidation ||
-      Yup.string()
-        .oneOf(
-          [Yup.ref('newPassword')],
-          tComponent<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordMatch
-          )
-        )
-        .required(
-          tComponent<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_Required
-          )
-        ),
-  };
-
-  const labels = {
-    title:
-      titleText ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ChangePassword
-      ),
-    currentPassword:
-      currentPasswordLabel ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_CurrentPassword
-      ),
-    newPassword:
-      newPasswordLabel ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_NewPassword
-      ),
-    confirmPassword:
-      confirmPasswordLabel ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ConfirmNewPassword
-      ),
-    submitButton:
-      submitButtonText ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ChangePassword
-      ),
-    submittingButton:
-      submittingButtonText ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ChangingPassword
-      ),
-    success:
-      successMessage ||
-      tComponent<SuiteCoreStringKey>(
-        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;

package/src/components/ConfirmationDialog.tsx

@@ -1,48 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@mui/material';
-import React from 'react';
-
-export interface ConfirmationDialogProps {
-  open: boolean;
-  title: string;
-  message: string;
-  confirmText?: string;
-  cancelText?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
-  open,
-  title,
-  message,
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
-  onConfirm,
-  onCancel,
-}) => {
-  return (
-    <Dialog open={open} onClose={onCancel}>
-      <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        <DialogContentText>{message}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onCancel} color="primary">
-          {cancelText}
-        </Button>
-        <Button onClick={onConfirm} color="primary">
-          {confirmText}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default ConfirmationDialog;

package/src/components/CurrencyCodeSelector.tsx

@@ -1,60 +0,0 @@
-import { CurrencyCode } from '@digitaldefiance/i18n-lib';
-import { MenuItem, TextField } from '@mui/material';
-import { Field, FieldProps } from 'formik';
-import { ChangeEvent, FC } from 'react';
-
-export interface CurrencyCodeSelectorProps {
-  name: string;
-  label: string;
-  onCurrencyChange?: (code: string) => void;
-}
-
-export const CurrencyCodeSelector: FC<CurrencyCodeSelectorProps> = ({
-  name,
-  label,
-  onCurrencyChange,
-}) => {
-  return (
-    <Field name={name}>
-      {({ field, form }: FieldProps) => (
-        <TextField
-          select
-          fullWidth
-          label={label}
-          {...field}
-          onChange={(event: ChangeEvent<HTMLInputElement>) => {
-            const selectedCode = event.target.value;
-            form.setFieldValue(name, selectedCode);
-            onCurrencyChange?.(selectedCode);
-          }}
-          error={form.touched[name] && Boolean(form.errors[name])}
-          helperText={form.touched[name] && (form.errors[name] as string)}
-          sx={{
-            '& .MuiSelect-select': {
-              paddingRight: '32px',
-            },
-            '& .MuiOutlinedInput-root': {
-              '& fieldset': {
-                borderColor: 'rgba(0, 0, 0, 0.23)',
-              },
-              '&:hover fieldset': {
-                borderColor: 'rgba(0, 0, 0, 0.87)',
-              },
-              '&.Mui-focused fieldset': {
-                borderColor: 'primary.main',
-              },
-            },
-          }}
-        >
-          {CurrencyCode.getAll().map((code: string) => (
-            <MenuItem key={code} value={code}>
-              {code}
-            </MenuItem>
-          ))}
-        </TextField>
-      )}
-    </Field>
-  );
-};
-
-export default CurrencyCodeSelector;