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

package/src/components/TotpSetupForm.tsx

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

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

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

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

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