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

package/src/components/BackupCodesForm.tsx

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

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

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

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