@digitaldefiance/express-suite-react-components 2.9.1 → 2.9.2

package/src/components/TopMenu.tsx

@@ -0,0 +1,134 @@
+import {
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+} from '@digitaldefiance/suite-core-lib';
+import MenuIcon from '@mui/icons-material/Menu';
+import {
+  AppBar,
+  Box,
+  Button,
+  IconButton,
+  Toolbar,
+  Typography,
+} from '@mui/material';
+import React, { FC, ReactElement, useContext, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { AuthContext } from '../contexts/AuthProvider';
+import { useI18n } from '../contexts/I18nProvider';
+import { useMenu } from '../contexts/MenuContext';
+import { MenuType } from '../types/MenuType';
+import { DropdownMenu } from './DropdownMenu';
+import { SideMenu } from './SideMenu';
+import { UserLanguageSelector } from './UserLanguageSelector';
+import { UserMenu } from './UserMenu';
+
+// Extend Window interface for APP_CONFIG
+declare global {
+  interface Window {
+    APP_CONFIG?: {
+      hostname: string;
+      siteTitle: string;
+      server: string;
+      [key: string]: unknown;
+    };
+  }
+}
+
+export interface AdditionalDropdownMenu {
+  menuType: MenuType;
+  menuIcon: ReactElement;
+  priority?: number;
+}
+
+export interface TopMenuProps {
+  Logo: React.ReactNode;
+  additionalMenus?: Array<AdditionalDropdownMenu>;
+}
+
+export const TopMenu: FC<TopMenuProps> = ({ Logo, additionalMenus }) => {
+  const { isAuthenticated } = useContext(AuthContext);
+  const { getTopMenus } = useMenu();
+  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
+
+  const handleOpenSideMenu = () => setIsSideMenuOpen(true);
+  const handleCloseSideMenu = () => setIsSideMenuOpen(false);
+  const { t, tComponent } = useI18n();
+  const appConfig = window.APP_CONFIG;
+  const siteTitle = tComponent<SuiteCoreStringKey>(
+    SuiteCoreComponentId,
+    SuiteCoreStringKey.Common_SiteTemplate
+  );
+
+  return (
+    <AppBar position="fixed" sx={{ top: 10 }}>
+      <Toolbar>
+        <IconButton
+          size="large"
+          edge="start"
+          color="inherit"
+          aria-label="menu"
+          sx={{ mr: 2 }}
+          onClick={handleOpenSideMenu}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Box
+          sx={{
+            height: 40,
+            width: 40,
+            marginRight: 2,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {Logo}
+        </Box>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          {siteTitle}
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          {isAuthenticated ? (
+            <>
+              <Button color="inherit" component={Link} to="/dashboard">
+                {tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Common_Dashboard
+                )}
+              </Button>
+              {getTopMenus().map((menu, index) =>
+                menu.isUserMenu ? (
+                  <UserMenu key={`user-menu`} />
+                ) : (
+                  <DropdownMenu
+                    key={`menu-${index}`}
+                    menuType={menu.menuType}
+                    menuIcon={menu.menuIcon as ReactElement}
+                  />
+                )
+              )}
+            </>
+          ) : (
+            <>
+              <Button color="inherit" component={Link} to="/login">
+                {tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Login_LoginButton
+                )}
+              </Button>
+              <Button color="inherit" component={Link} to="/register">
+                {tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.RegisterButton
+                )}
+              </Button>
+            </>
+          )}
+          <UserLanguageSelector />
+        </Box>
+      </Toolbar>
+      <SideMenu isOpen={isSideMenuOpen} onClose={handleCloseSideMenu} />
+    </AppBar>
+  );
+};
+
+export default TopMenu;

package/src/components/TranslatedTitle.tsx

@@ -0,0 +1,22 @@
+// src/app/components/TranslatedTitle.tsx
+
+import { useEffect } from 'react';
+import { useI18n } from '../contexts';
+import { SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+
+interface FCParams<TEnum extends string> {
+  componentId: string;
+  stringKey: TEnum;
+} 
+
+export const TranslatedTitle = <TEnum extends string>({ componentId, stringKey }: FCParams<TEnum>): null => {
+  const { tComponent, currentLanguage } = useI18n();
+
+  useEffect(() => {
+      document.title = tComponent<TEnum>(componentId, stringKey, undefined, currentLanguage);
+  }, [tComponent, componentId, stringKey, 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;

package/src/components/UserSettingsForm.tsx

@@ -0,0 +1,328 @@
+import {
+  Alert,
+  Box,
+  Button,
+  Container,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState, useMemo } from 'react';
+import * as Yup from 'yup';
+import moment from 'moment-timezone';
+import { CurrencyCode } from '@digitaldefiance/i18n-lib';
+import { SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface UserSettingsFormValues {
+  email: string;
+  timezone: string;
+  siteLanguage: string;
+  currency: string;
+  darkMode: boolean;
+  directChallenge: boolean;
+  [key: string]: any;
+}
+
+export interface UserSettingsFormProps {
+  initialValues: UserSettingsFormValues;
+  onSubmit: (values: UserSettingsFormValues) => Promise<
+    | { success: boolean; message: string }
+    | { error: string; errorType?: string; field?: string; errors?: Array<{ path: string; msg: string }> }
+  >;
+  languages: Array<{ code: string; label: string }>;
+  emailValidation?: Yup.StringSchema;
+  timezoneValidation?: Yup.StringSchema;
+  siteLanguageValidation?: Yup.StringSchema;
+  currencyValidation?: Yup.StringSchema;
+  darkModeValidation?: Yup.BooleanSchema;
+  directChallengeValidation?: Yup.BooleanSchema;
+  additionalFields?: (formik: any) => React.ReactNode;
+  additionalInitialValues?: Record<string, any>;
+  additionalValidation?: Record<string, Yup.Schema>;
+  labels?: {
+    title?: string;
+    email?: string;
+    emailHelper?: string;
+    timezone?: string;
+    siteLanguage?: string;
+    currency?: string;
+    darkMode?: string;
+    directChallenge?: string;
+    directChallengeHelper?: string;
+    saving?: string;
+    save?: string;
+    successMessage?: string;
+  };
+}
+
+export const UserSettingsForm: FC<UserSettingsFormProps> = ({
+  initialValues,
+  onSubmit,
+  languages,
+  emailValidation,
+  timezoneValidation,
+  siteLanguageValidation,
+  currencyValidation,
+  darkModeValidation,
+  directChallengeValidation,
+  additionalFields,
+  additionalInitialValues = {},
+  additionalValidation = {},
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [apiErrors, setApiErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  
+  const timezones = useMemo(() => moment.tz.names(), []);
+  const currencies = useMemo(() => CurrencyCode.getAllData().map(c => ({ code: c.code, label: `${c.code} - ${c.currency}` })), []);
+
+  const validation = {
+    email: emailValidation || Yup.string()
+      .email(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidEmail))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    timezone: timezoneValidation || Yup.string()
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_TimezoneRequired))
+      .test('valid-timezone', tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_TimezoneInvalid), (value) => !value || moment.tz.zone(value) !== null),
+    siteLanguage: siteLanguageValidation || Yup.string()
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    currency: currencyValidation || Yup.string()
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required))
+      .test('valid-currency', tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required), (value) => !value || CurrencyCode.isValid(value)),
+    darkMode: darkModeValidation || Yup.boolean()
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    directChallenge: directChallengeValidation || Yup.boolean()
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+  };
+
+  const formik = useFormik<UserSettingsFormValues>({
+    initialValues: {
+      ...initialValues,
+      ...additionalInitialValues,
+    },
+    enableReinitialize: true,
+    validationSchema: Yup.object({
+      email: validation.email,
+      timezone: validation.timezone,
+      siteLanguage: validation.siteLanguage,
+      currency: validation.currency,
+      darkMode: validation.darkMode,
+      directChallenge: validation.directChallenge,
+      ...additionalValidation,
+    }),
+    onSubmit: async (values, { setSubmitting, setFieldError, setTouched }) => {
+      setSaving(true);
+      setSuccessMessage(null);
+      const result = await onSubmit(values);
+      
+      if ('success' in result && result.success) {
+        setSuccessMessage(result.message || labels.successMessage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_SaveSuccess));
+        setApiErrors({});
+      } else {
+        const newApiErrors: Record<string, string> = {};
+        const fieldsToTouch: Record<string, boolean> = {};
+
+        if ('field' in result && result.field) {
+          setFieldError(result.field, result.error);
+          fieldsToTouch[result.field] = true;
+        }
+
+        if ('errors' in result && result.errors) {
+          result.errors.forEach((err) => {
+            if (err.path && err.msg) {
+              setFieldError(err.path, err.msg);
+              fieldsToTouch[err.path] = true;
+            }
+          });
+        }
+
+        if ('error' in result && result.error && !Object.keys(newApiErrors).length) {
+          newApiErrors.general = result.error;
+        }
+
+        setApiErrors(newApiErrors);
+        setTouched(fieldsToTouch, false);
+      }
+      setSubmitting(false);
+      setSaving(false);
+    },
+  });
+
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ mt: 4, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          {labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_Title)}
+        </Typography>
+
+        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+          <TextField
+            fullWidth
+            id="email"
+            name="email"
+            label={labels.email || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Email)}
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.email && (formik.errors.email || apiErrors.email))}
+            helperText={
+              (formik.touched.email && (formik.errors.email || apiErrors.email)) ||
+              labels.emailHelper ||
+              tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_EmailHelper)
+            }
+            margin="normal"
+          />
+
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="timezone-label">
+              {labels.timezone || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Timezone)}
+            </InputLabel>
+            <Select
+              labelId="timezone-label"
+              id="timezone"
+              name="timezone"
+              value={formik.values.timezone}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              error={formik.touched.timezone && Boolean(formik.errors.timezone)}
+              label={labels.timezone || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Timezone)}
+            >
+              {timezones.map((tz) => (
+                <MenuItem key={tz} value={tz}>
+                  {tz}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.timezone && (formik.errors.timezone || apiErrors.timezone) && (
+              <Typography color="error" variant="caption">
+                {formik.errors.timezone || apiErrors.timezone}
+              </Typography>
+            )}
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="language-label">
+              {labels.siteLanguage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_SiteLanguage)}
+            </InputLabel>
+            <Select
+              labelId="language-label"
+              id="siteLanguage"
+              name="siteLanguage"
+              value={formik.values.siteLanguage}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              error={formik.touched.siteLanguage && Boolean(formik.errors.siteLanguage)}
+              label={labels.siteLanguage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_SiteLanguage)}
+            >
+              {languages.map((lang) => (
+                <MenuItem key={lang.code} value={lang.code}>
+                  {lang.label}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.siteLanguage && (formik.errors.siteLanguage || apiErrors.siteLanguage) && (
+              <Typography color="error" variant="caption">
+                {formik.errors.siteLanguage || apiErrors.siteLanguage}
+              </Typography>
+            )}
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="currency-label">
+              {labels.currency || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_Currency)}
+            </InputLabel>
+            <Select
+              labelId="currency-label"
+              id="currency"
+              name="currency"
+              value={formik.values.currency}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              error={formik.touched.currency && Boolean(formik.errors.currency)}
+              label={labels.currency || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_Currency)}
+            >
+              {currencies.map((curr) => (
+                <MenuItem key={curr.code} value={curr.code}>
+                  {curr.label}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.currency && (formik.errors.currency || apiErrors.currency) && (
+              <Typography color="error" variant="caption">
+                {formik.errors.currency || apiErrors.currency}
+              </Typography>
+            )}
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <FormControlLabel
+              control={
+                <Switch
+                  id="darkMode"
+                  name="darkMode"
+                  checked={formik.values.darkMode}
+                  onChange={formik.handleChange}
+                />
+              }
+              label={labels.darkMode || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_DarkMode)}
+            />
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <FormControlLabel
+              control={
+                <Switch
+                  id="directChallenge"
+                  name="directChallenge"
+                  checked={formik.values.directChallenge}
+                  onChange={formik.handleChange}
+                />
+              }
+              label={labels.directChallenge || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_DirectChallengeLabel)}
+            />
+            <Typography variant="caption" color="text.secondary" sx={{ ml: 4, mt: -1 }}>
+              {labels.directChallengeHelper || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_DirectChallengeHelper)}
+            </Typography>
+          </FormControl>
+
+          {additionalFields && additionalFields(formik)}
+
+          {apiErrors.general && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiErrors.general}
+            </Alert>
+          )}
+
+          {successMessage && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              {successMessage}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {saving 
+              ? labels.saving || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_Saving)
+              : labels.save || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_Save)}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default UserSettingsForm;

package/src/components/VerifyEmailPage.tsx

@@ -0,0 +1,133 @@
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Container,
+  Link,
+  Typography,
+} from '@mui/material';
+import { FC, useEffect, useState } from 'react';
+import { SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface VerifyEmailPageProps {
+  token: string | null;
+  onVerify: (token: string) => Promise<{ success: boolean; message?: string }>;
+  labels?: {
+    title?: string;
+    verifying?: string;
+    success?: string;
+    failed?: string;
+    noToken?: string;
+    proceedToLogin?: string;
+    contactSupport?: string;
+    requestNewEmail?: string;
+  };
+  loginLink?: string;
+  resendLink?: string;
+}
+
+export const VerifyEmailPage: FC<VerifyEmailPageProps> = ({
+  token,
+  onVerify,
+  labels = {},
+  loginLink = '/login',
+  resendLink = '/resend-verification',
+}) => {
+  const { t, tComponent } = useI18n();
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [verificationStatus, setVerificationStatus] = useState<'pending' | 'success' | 'error'>(
+    'pending'
+  );
+
+  const translatedLabels = {
+    title: labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_EmailVerification),
+    success: labels.success || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.EmailVerification_Success),
+    failed: labels.failed || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.EmailVerification_Failed),
+    noToken: labels.noToken || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.NoVerificationTokenProvided),
+    proceedToLogin: labels.proceedToLogin || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ProceedToLogin),
+    contactSupport: labels.contactSupport || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.HavingTroubleContactSupport),
+    requestNewEmail: labels.requestNewEmail || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.RequestNewVerificationEmail),
+  };
+
+  useEffect(() => {
+    const verifyEmail = async (verificationToken: string) => {
+      try {
+        const result = await onVerify(verificationToken);
+        if (result.success) {
+          setMessage(result.message || translatedLabels.success);
+          setVerificationStatus('success');
+        } else {
+          setMessage(result.message || translatedLabels.failed);
+          setVerificationStatus('error');
+        }
+      } catch {
+        setMessage(translatedLabels.failed);
+        setVerificationStatus('error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (token) {
+      verifyEmail(token);
+    } else {
+      setLoading(false);
+      setMessage(translatedLabels.noToken);
+      setVerificationStatus('error');
+    }
+  }, [token, onVerify, translatedLabels]);
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {translatedLabels.title}
+        </Typography>
+
+        {loading ? (
+          <CircularProgress />
+        ) : (
+          <Box sx={{ width: '100%', mt: 2 }}>
+            <Alert severity={verificationStatus === 'success' ? 'success' : 'error'} sx={{ mb: 2 }}>
+              {message}
+            </Alert>
+
+            {verificationStatus === 'success' && (
+              <Button
+                variant="contained"
+                color="primary"
+                component={Link}
+                href={loginLink}
+                fullWidth
+              >
+                {translatedLabels.proceedToLogin}
+              </Button>
+            )}
+
+            {verificationStatus === 'error' && (
+              <Typography variant="body1">
+                {translatedLabels.contactSupport}{' '}
+                <Link href={resendLink} color="primary">
+                  {translatedLabels.requestNewEmail}
+                </Link>
+                .
+              </Typography>
+            )}
+          </Box>
+        )}
+      </Box>
+    </Container>
+  );
+};
+
+export default VerifyEmailPage;

package/src/components/{index.d.ts → index.ts}

@@ -1,3 +1,4 @@
+// Component exports
 export * from './ApiAccess';
 export * from './BackupCodeLoginForm';
 export * from './BackupCodesForm';
@@ -22,4 +23,3 @@ export * from './TranslatedTitle';
 export * from './UserMenu';
 export * from './UserLanguageSelector';
 export * from './VerifyEmailPage';
-//# sourceMappingURL=index.d.ts.map