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

package/src/components/ResetPasswordForm.tsx

@@ -0,0 +1,246 @@
+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 ResetPasswordFormValues {
+  password: string;
+  confirmPassword: string;
+}
+
+export interface ResetPasswordFormProps {
+  token: string | null;
+  onSubmit: (token: string, password: string) => Promise<void>;
+  passwordValidation?: Yup.StringSchema;
+  confirmPasswordValidation?: Yup.StringSchema;
+  labels?: {
+    title?: string;
+    password?: string;
+    confirmPassword?: string;
+    resetButton?: string;
+    successMessage?: string;
+    invalidToken?: string;
+  };
+}
+
+export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
+  token,
+  onSubmit,
+  passwordValidation,
+  confirmPasswordValidation,
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [success, setSuccess] = useState(false);
+  const [apiError, setApiError] = useState<string>('');
+
+  const validation = {
+    password:
+      passwordValidation ||
+      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('password')],
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_PasswordMatch
+          )
+        )
+        .required(
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_Required
+          )
+        ),
+  };
+
+  const translatedLabels = {
+    title:
+      labels.title ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.PasswordReset_Title
+      ),
+    password:
+      labels.password ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_NewPassword
+      ),
+    confirmPassword:
+      labels.confirmPassword ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_ConfirmNewPassword
+      ),
+    resetButton:
+      labels.resetButton ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.PasswordReset_Button
+      ),
+    successMessage:
+      labels.successMessage ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.PasswordReset_Success
+      ),
+    invalidToken:
+      labels.invalidToken ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.ForgotPassword_InvalidToken
+      ),
+  };
+
+  const formik = useFormik<ResetPasswordFormValues>({
+    initialValues: {
+      password: '',
+      confirmPassword: '',
+    },
+    validationSchema: Yup.object({
+      password: validation.password,
+      confirmPassword: validation.confirmPassword,
+    }),
+    onSubmit: async (values) => {
+      if (!token) {
+        setApiError(translatedLabels.invalidToken);
+        return;
+      }
+
+      try {
+        await onSubmit(token, values.password);
+        setSuccess(true);
+        setApiError('');
+      } catch (error: unknown) {
+        const err = error as { response?: { data?: { message?: string } } };
+        setApiError(
+          err.response?.data?.message ||
+            tComponent<SuiteCoreStringKey>(
+              SuiteCoreComponentId,
+              SuiteCoreStringKey.Error_PasswordChange
+            )
+        );
+        setSuccess(false);
+      }
+    },
+  });
+
+  if (!token) {
+    return (
+      <Container maxWidth="sm">
+        <Alert severity="error" sx={{ mt: 4 }}>
+          {translatedLabels.invalidToken}
+        </Alert>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {translatedLabels.title}
+        </Typography>
+
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          sx={{ mt: 1, width: '100%' }}
+        >
+          <TextField
+            fullWidth
+            id="password"
+            name="password"
+            label={translatedLabels.password}
+            type="password"
+            value={formik.values.password}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.password && formik.errors.password)}
+            helperText={formik.touched.password && formik.errors.password}
+            margin="normal"
+          />
+
+          <TextField
+            fullWidth
+            id="confirmPassword"
+            name="confirmPassword"
+            label={translatedLabels.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 }}>
+              {translatedLabels.successMessage}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {translatedLabels.resetButton}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default ResetPasswordForm;

package/src/components/SideMenu.tsx

@@ -0,0 +1,46 @@
+import { Drawer, List } from '@mui/material';
+import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMenu } from '../contexts/MenuContext';
+import { IMenuOption } from '../interfaces/IMenuOption';
+import { MenuTypes } from '../types/MenuType';
+import { SideMenuListItem } from './SideMenuListItem';
+
+interface SideMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const SideMenu: FC<SideMenuProps> = ({ isOpen, onClose }) => {
+  const { getMenuOptions } = useMenu();
+  const navigate = useNavigate();
+
+  const menuOptions = getMenuOptions(MenuTypes.SideMenu, true);
+
+  const handleNavigate = (
+    link: string | Partial<{ pathname: string; state?: unknown }>
+  ) => {
+    if (typeof link === 'string') {
+      navigate(link);
+    } else if (link.pathname) {
+      navigate(link.pathname, { state: link.state });
+    }
+  };
+
+  return (
+    <Drawer anchor="left" open={isOpen} onClose={onClose}>
+      <List>
+        {menuOptions.map((item: IMenuOption) => (
+          <SideMenuListItem
+            key={item.id}
+            menuItem={item}
+            onClose={onClose}
+            onNavigate={handleNavigate}
+          />
+        ))}
+      </List>
+    </Drawer>
+  );
+};
+
+export default SideMenu;

package/src/components/SideMenuListItem.tsx

@@ -0,0 +1,74 @@
+import {
+  Divider,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import { FC, useCallback } from 'react';
+import { IMenuOption } from '../interfaces';
+
+export interface SideMenuListItemProps {
+  menuItem: IMenuOption;
+  onClose: () => void;
+  onNavigate?: (
+    link: string | Partial<{ pathname: string; state?: unknown }>
+  ) => void;
+}
+
+export const SideMenuListItem: FC<SideMenuListItemProps> = ({
+  menuItem,
+  onClose,
+  onNavigate,
+}) => {
+  const handleMenuItemClick = useCallback(
+    (option: IMenuOption) => (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+      if (option.action) {
+        option.action();
+      } else if (option.link !== undefined && onNavigate) {
+        if (typeof option.link === 'string') {
+          onNavigate(option.link);
+        } else if (
+          typeof option.link === 'object' &&
+          'pathname' in option.link &&
+          option.link.pathname
+        ) {
+          onNavigate({
+            pathname: option.link.pathname,
+            state: 'state' in option.link ? option.link.state : undefined,
+          });
+        }
+      }
+      onClose();
+    },
+    [onNavigate, onClose]
+  );
+
+  if (menuItem.divider) {
+    return <Divider key={menuItem.label} />;
+  } else if (menuItem.link) {
+    return (
+      <ListItemButton key={menuItem.id} onClick={handleMenuItemClick(menuItem)}>
+        {menuItem.icon && <ListItemIcon>{menuItem.icon}</ListItemIcon>}
+        <ListItemText primary={menuItem.label} />
+      </ListItemButton>
+    );
+  } else if (menuItem.action) {
+    const action = menuItem.action;
+    return (
+      <ListItemButton
+        key={menuItem.id}
+        onClick={async () => {
+          await action();
+          onClose();
+        }}
+      >
+        {menuItem.icon && <ListItemIcon>{menuItem.icon}</ListItemIcon>}
+        <ListItemText primary={menuItem.label} />
+      </ListItemButton>
+    );
+  }
+  return null;
+};
+
+export default SideMenuListItem;

package/src/components/TopMenu.tsx

@@ -0,0 +1,145 @@
+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 }) => {
+  const { isAuthenticated } = useContext(AuthContext);
+  const { getTopMenus } = useMenu();
+  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
+
+  const handleOpenSideMenu = () => setIsSideMenuOpen(true);
+  const handleCloseSideMenu = () => setIsSideMenuOpen(false);
+  const { tComponent } = useI18n();
+  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,29 @@
+// src/app/components/TranslatedTitle.tsx
+
+import { useEffect } from 'react';
+import { useI18n } from '../contexts';
+
+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;