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

package/src/components/TotpSetupForm.tsx

@@ -1,188 +0,0 @@
-import { Box, Button, Container, TextField, Typography } from '@mui/material';
-import { useFormik } from 'formik';
-import { QRCodeSVG } from 'qrcode.react';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-
-export interface TotpSetupFormValues {
-  code: string;
-}
-
-export interface TotpSetupFormProps {
-  provisioningUri: string;
-  secret: string;
-  onConfirm: (
-    code: string
-  ) => Promise<{ success: boolean } | { error: string }>;
-  labels?: {
-    title?: string;
-    qrCodeAlt?: string;
-    secretLabel?: string;
-    codeLabel?: string;
-    confirmButton?: string;
-    errorMessage?: string;
-  };
-}
-
-const defaultLabels = {
-  title: 'Set Up Two-Factor Authentication',
-  qrCodeAlt: 'QR code for TOTP authenticator app setup',
-  secretLabel: 'Manual entry key',
-  codeLabel: 'Confirmation code',
-  confirmButton: 'Confirm',
-  errorMessage: 'An unexpected error occurred',
-};
-
-const totpCodeSchema = Yup.object({
-  code: Yup.string()
-    .required('Confirmation code is required')
-    .matches(/^\d{6}$/, 'Code must be exactly 6 digits'),
-});
-
-export const TotpSetupForm: FC<TotpSetupFormProps> = ({
-  provisioningUri,
-  secret,
-  onConfirm,
-  labels = {},
-}) => {
-  const [confirmError, setConfirmError] = useState<string | null>(null);
-
-  const resolvedLabels = {
-    title: labels.title ?? defaultLabels.title,
-    qrCodeAlt: labels.qrCodeAlt ?? defaultLabels.qrCodeAlt,
-    secretLabel: labels.secretLabel ?? defaultLabels.secretLabel,
-    codeLabel: labels.codeLabel ?? defaultLabels.codeLabel,
-    confirmButton: labels.confirmButton ?? defaultLabels.confirmButton,
-    errorMessage: labels.errorMessage ?? defaultLabels.errorMessage,
-  };
-
-  const formik = useFormik<TotpSetupFormValues>({
-    initialValues: {
-      code: '',
-    },
-    validationSchema: totpCodeSchema,
-    onSubmit: async (values, { setSubmitting }) => {
-      try {
-        setConfirmError(null);
-        const result = await onConfirm(values.code);
-        if ('error' in result) {
-          setConfirmError(result.error);
-        }
-      } catch {
-        setConfirmError(resolvedLabels.errorMessage);
-      } finally {
-        setSubmitting(false);
-      }
-    },
-  });
-
-  const errorId = 'totp-setup-error';
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <Box
-        sx={{
-          marginTop: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Typography component="h1" variant="h5">
-          {resolvedLabels.title}
-        </Typography>
-
-        <Box sx={{ mt: 3, display: 'flex', justifyContent: 'center' }}>
-          <QRCodeSVG
-            value={provisioningUri}
-            size={200}
-            role="img"
-            aria-label={resolvedLabels.qrCodeAlt}
-            data-testid="qr-code-svg"
-          />
-        </Box>
-
-        <Box
-          sx={{
-            mt: 2,
-            p: 2,
-            bgcolor: 'grey.100',
-            borderRadius: 1,
-            width: '100%',
-            textAlign: 'center',
-          }}
-        >
-          <Typography variant="subtitle2" gutterBottom>
-            {resolvedLabels.secretLabel}
-          </Typography>
-          <Typography
-            variant="body2"
-            sx={{
-              fontFamily: 'monospace',
-              wordBreak: 'break-all',
-              userSelect: 'all',
-            }}
-          >
-            {secret}
-          </Typography>
-        </Box>
-
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          sx={{ mt: 2, width: '100%' }}
-        >
-          <TextField
-            margin="normal"
-            required
-            fullWidth
-            id="code"
-            name="code"
-            label={resolvedLabels.codeLabel}
-            inputProps={{
-              'aria-label': resolvedLabels.codeLabel,
-              inputMode: 'numeric',
-              maxLength: 6,
-              pattern: '\\d{6}',
-              ...(confirmError ? { 'aria-describedby': errorId } : {}),
-            }}
-            autoComplete="one-time-code"
-            autoFocus
-            value={formik.values.code}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={
-              (formik.touched.code && Boolean(formik.errors.code)) ||
-              Boolean(confirmError)
-            }
-            helperText={formik.touched.code && formik.errors.code}
-          />
-
-          {confirmError && (
-            <Typography
-              id={errorId}
-              color="error"
-              variant="body2"
-              sx={{ mt: 1 }}
-              role="alert"
-            >
-              {confirmError}
-            </Typography>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {resolvedLabels.confirmButton}
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default TotpSetupForm;

package/src/components/TotpVerificationForm.tsx

@@ -1,148 +0,0 @@
-import { Box, Button, Container, TextField, Typography } from '@mui/material';
-import { useFormik } from 'formik';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-import { IRequestUserDTO } from '@digitaldefiance/suite-core-lib';
-
-export interface TotpVerificationFormValues {
-  code: string;
-}
-
-export interface TotpVerificationFormProps {
-  pendingTotpToken: string;
-  onSubmit: (
-    code: string,
-    pendingTotpToken: string
-  ) => Promise<
-    { token: string; user: IRequestUserDTO } | { error: string }
-  >;
-  labels?: {
-    title?: string;
-    codeLabel?: string;
-    submitButton?: string;
-    errorMessage?: string;
-  };
-}
-
-const defaultLabels = {
-  title: 'Two-Factor Authentication',
-  codeLabel: 'Authentication code',
-  submitButton: 'Verify',
-  errorMessage: 'An unexpected error occurred',
-};
-
-const totpCodeSchema = Yup.object({
-  code: Yup.string()
-    .required('Authentication code is required')
-    .matches(/^\d{6}$/, 'Code must be exactly 6 digits'),
-});
-
-export const TotpVerificationForm: FC<TotpVerificationFormProps> = ({
-  pendingTotpToken,
-  onSubmit,
-  labels = {},
-}) => {
-  const [submitError, setSubmitError] = useState<string | null>(null);
-
-  const resolvedLabels = {
-    title: labels.title ?? defaultLabels.title,
-    codeLabel: labels.codeLabel ?? defaultLabels.codeLabel,
-    submitButton: labels.submitButton ?? defaultLabels.submitButton,
-    errorMessage: labels.errorMessage ?? defaultLabels.errorMessage,
-  };
-
-  const formik = useFormik<TotpVerificationFormValues>({
-    initialValues: {
-      code: '',
-    },
-    validationSchema: totpCodeSchema,
-    onSubmit: async (values, { setSubmitting }) => {
-      try {
-        setSubmitError(null);
-        const result = await onSubmit(values.code, pendingTotpToken);
-        if ('error' in result) {
-          setSubmitError(result.error);
-        }
-      } catch {
-        setSubmitError(resolvedLabels.errorMessage);
-      } finally {
-        setSubmitting(false);
-      }
-    },
-  });
-
-  const errorId = 'totp-verification-error';
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <Box
-        sx={{
-          marginTop: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Typography component="h1" variant="h5">
-          {resolvedLabels.title}
-        </Typography>
-
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          sx={{ mt: 2, width: '100%' }}
-        >
-          <TextField
-            margin="normal"
-            required
-            fullWidth
-            id="code"
-            name="code"
-            label={resolvedLabels.codeLabel}
-            inputProps={{
-              'aria-label': resolvedLabels.codeLabel,
-              inputMode: 'numeric',
-              maxLength: 6,
-              pattern: '\\d{6}',
-              ...(submitError ? { 'aria-describedby': errorId } : {}),
-            }}
-            autoComplete="one-time-code"
-            autoFocus
-            value={formik.values.code}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={
-              (formik.touched.code && Boolean(formik.errors.code)) ||
-              Boolean(submitError)
-            }
-            helperText={formik.touched.code && formik.errors.code}
-          />
-
-          {submitError && (
-            <Typography
-              id={errorId}
-              color="error"
-              variant="body2"
-              sx={{ mt: 1 }}
-              role="alert"
-            >
-              {submitError}
-            </Typography>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {resolvedLabels.submitButton}
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default TotpVerificationForm;

package/src/components/TranslatedTitle.tsx

@@ -1,31 +0,0 @@
-// src/app/components/TranslatedTitle.tsx
-
-import { useEffect } from 'react';
-import { useI18n } from '../contexts';
-
-interface FCParams<TEnum extends string> {
-  componentId: string;
-  stringKey: TEnum;
-  vars?: Record<string, string | number>;
-}
-
-export const TranslatedTitle = <TEnum extends string>({
-  componentId,
-  stringKey,
-  vars,
-}: FCParams<TEnum>): null => {
-  const { tComponent, currentLanguage } = useI18n();
-
-  useEffect(() => {
-    document.title = tComponent<TEnum>(
-      componentId,
-      stringKey,
-      vars,
-      currentLanguage
-    );
-  }, [tComponent, componentId, stringKey, vars, currentLanguage]);
-
-  return null;
-};
-
-export default TranslatedTitle;

package/src/components/UserLanguageSelector.tsx

@@ -1,45 +0,0 @@
-import { LanguageRegistry, LanguageDefinition } from '@digitaldefiance/i18n-lib';
-import { Button, Menu, MenuItem } from '@mui/material';
-import { FC, MouseEvent, useState, useMemo } from 'react';
-import { Flag } from './Flag';
-import { useUserSettings } from '../hooks';
-import { createAuthenticatedApiClient } from '../services';
-import { useAuth, useSuiteConfig } from '../contexts';
-
-export const UserLanguageSelector: FC = () => {
-  const { baseUrl } = useSuiteConfig();
-  const authenticatedApi = useMemo(() => createAuthenticatedApiClient(baseUrl), [baseUrl]);
-  const { isAuthenticated } = useAuth();
-  const { currentLanguage, changeLanguage } = useUserSettings({ authenticatedApi, isAuthenticated });
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleLanguageChange = (newLanguage: string) => {
-    changeLanguage(newLanguage);
-    handleClose();
-  };
-
-  return (
-    <>
-      <Button onClick={handleClick}>
-        <Flag language={currentLanguage} />
-      </Button>
-      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
-        {Object.values(LanguageRegistry.getAllLanguages()).map((lang: LanguageDefinition) => (
-          <MenuItem key={lang.code} onClick={() => handleLanguageChange(lang.code)}>
-            <Flag language={lang.code} sx={{ mr: 1 }} /> {lang.name}
-          </MenuItem>
-        ))}
-      </Menu>
-    </>
-  );
-};
-
-export default UserLanguageSelector;

package/src/components/UserMenu.tsx

@@ -1,15 +0,0 @@
-import { FC } from 'react';
-import { AccountCircle } from '@mui/icons-material';
-import { MenuTypes } from '../types/MenuType';
-import { DropdownMenu } from './DropdownMenu';
-
-export const UserMenu: FC = () => {
-  return (
-    <DropdownMenu
-      menuType={MenuTypes.UserMenu}
-      menuIcon={<AccountCircle />}
-    />
-  );
-};
-
-export default UserMenu;