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

package/src/types/MenuType.ts

@@ -1,15 +0,0 @@
-// Branded type for menu type identifiers
-export type MenuType = string & { readonly __brand: 'MenuType' };
-
-// Factory function to create menu types
-export const createMenuType = (id: string): MenuType => id as MenuType;
-
-// Built-in menu types
-export const MenuTypes = {
-  SideMenu: createMenuType('SideMenu'),
-  TopMenu: createMenuType('TopMenu'),
-  UserMenu: createMenuType('UserMenu'),
-} as const;
-
-// Type for the built-in menu types
-export type BuiltInMenuType = typeof MenuTypes[keyof typeof MenuTypes];

package/src/types/expirationSeconds.ts

@@ -1,18 +0,0 @@
-export const ExpirationSecondsOptionValues = [0, 10, 30, 45, 60, 120, 300, 600];
-
-export function createExpirationSecondsOptionNames(
-  secondsLabel: string,
-  minuteLabel: string,
-  minutesLabel: string
-): string[] {
-  return [
-    `0 ${secondsLabel}`,
-    `10 ${secondsLabel}`,
-    `30 ${secondsLabel}`,
-    `45 ${secondsLabel}`,
-    `1 ${minuteLabel}`,
-    `2 ${minutesLabel}`,
-    `5 ${minutesLabel}`,
-    `10 ${minutesLabel}`,
-  ];
-}

package/src/types/index.ts

@@ -1 +0,0 @@
-export * from './MenuType';

package/src/types/translation.ts

@@ -1,20 +0,0 @@
-/**
- * Translation function type for components
- * Accepts a key and optional variables, returns translated string
- */
-export type TranslationFunction = (
-  key: string,
-  variables?: Record<string, string | number>
-) => string;
-
-/**
- * Helper to get translated text or fallback to provided string
- */
-export function getTranslatedText(
-  t: TranslationFunction | undefined,
-  key: string,
-  fallback: string,
-  variables?: Record<string, string | number>
-): string {
-  return t ? t(key, variables) : fallback;
-}

package/src/wrappers/BackupCodeLoginWrapper.tsx

@@ -1,34 +0,0 @@
-import { FC } from 'react';
-import { useNavigate } from 'react-router';
-import { BackupCodeLoginForm } from '../components/BackupCodeLoginForm';
-import { useAuth } from '../contexts';
-
-export interface BackupCodeLoginWrapperProps {
-  onSuccess?: () => void;
-  componentProps?: Partial<React.ComponentProps<typeof BackupCodeLoginForm>>;
-}
-
-export const BackupCodeLoginWrapper: FC<BackupCodeLoginWrapperProps> = ({
-  onSuccess,
-  componentProps = {},
-}) => {
-  const { backupCodeLogin, isAuthenticated } = useAuth();
-  const navigate = useNavigate();
-
-  const handleSubmit: typeof backupCodeLogin = async (...args) => {
-    const result = await backupCodeLogin(...args);
-    if ('token' in result && onSuccess) {
-      onSuccess();
-    }
-    return result;
-  };
-
-  return (
-    <BackupCodeLoginForm
-      onSubmit={handleSubmit}
-      onNavigate={navigate}
-      isAuthenticated={isAuthenticated}
-      {...componentProps}
-    />
-  );
-};

package/src/wrappers/BackupCodesWrapper.tsx

@@ -1,28 +0,0 @@
-import { FC } from 'react';
-import { useLocation } from 'react-router';
-import { BackupCodesForm } from '../components/BackupCodesForm';
-import { useBackupCodes } from '../hooks';
-
-export interface BackupCodesWrapperProps {
-  componentProps?: Partial<React.ComponentProps<typeof BackupCodesForm>>;
-}
-
-export const BackupCodesWrapper: FC<BackupCodesWrapperProps> = ({ 
-  componentProps = {},
-}) => {
-  const location = useLocation();
-  const initialCodeCount = (location.state as { codeCount?: number })?.codeCount ?? null;
-  const { backupCodesRemaining, generateBackupCodes } = useBackupCodes({ initialCodeCount });
-
-  const handleSubmit = async (values: { password?: string; mnemonic?: string }) => {
-    return await generateBackupCodes(values.password, values.mnemonic);
-  };
-  
-  return (
-    <BackupCodesForm 
-      onSubmit={handleSubmit} 
-      backupCodesRemaining={backupCodesRemaining}
-      {...componentProps}
-    />
-  );
-};

package/src/wrappers/ChangePasswordFormWrapper.tsx

@@ -1,34 +0,0 @@
-import { FC } from 'react';
-import { ChangePasswordForm } from '../components/ChangePasswordForm';
-import { useAuth } from '../contexts';
-
-export interface ChangePasswordFormWrapperProps {
-  onSuccess?: () => void;
-  componentProps?: Partial<React.ComponentProps<typeof ChangePasswordForm>>;
-}
-
-export const ChangePasswordFormWrapper: FC<ChangePasswordFormWrapperProps> = ({
-  onSuccess,
-  componentProps = {},
-}) => {
-  const { changePassword } = useAuth();
-
-  const handleSubmit = async (values: {
-    currentPassword: string;
-    newPassword: string;
-  }) => {
-    const result = await changePassword(
-      values.currentPassword,
-      values.newPassword
-    );
-    if ('error' in result) {
-      return { error: result.error };
-    }
-    if (onSuccess) {
-      onSuccess();
-    }
-    return result;
-  };
-
-  return <ChangePasswordForm onSubmit={handleSubmit} {...componentProps} />;
-};

package/src/wrappers/ForgotPasswordFormWrapper.tsx

@@ -1,45 +0,0 @@
-import { FC } from 'react';
-import {
-  SuiteCoreStringKey,
-  TranslatableSuiteError,
-} from '@digitaldefiance/suite-core-lib';
-import {
-  ForgotPasswordForm,
-  ForgotPasswordFormProps,
-  ForgotPasswordFormValues,
-} from '../components/ForgotPasswordForm';
-import { useSuiteConfig } from '../contexts';
-
-export interface ForgotPasswordFormWrapperProps {
-  onSuccess?: () => void;
-  componentProps?: Partial<Omit<ForgotPasswordFormProps, 'onSubmit'>>;
-}
-
-export const ForgotPasswordFormWrapper: FC<ForgotPasswordFormWrapperProps> = ({
-  onSuccess,
-  componentProps = {},
-}) => {
-  const { baseUrl } = useSuiteConfig();
-
-  const handleSubmit = async (values: ForgotPasswordFormValues) => {
-    const res = await fetch(`${baseUrl}/user/forgot-password`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email: values.email }),
-    });
-    if (!res.ok) {
-      const body: { message?: string } = await res.json().catch(() => ({})) as { message?: string };
-      if (body.message) {
-        throw new Error(body.message);
-      }
-      throw new TranslatableSuiteError(
-        SuiteCoreStringKey.ForgotPassword_Error,
-      );
-    }
-    if (onSuccess) {
-      onSuccess();
-    }
-  };
-
-  return <ForgotPasswordForm onSubmit={handleSubmit} {...componentProps} />;
-};

package/src/wrappers/LoginFormWrapper.tsx

@@ -1,108 +0,0 @@
-import { FC, useState } from 'react';
-import { useNavigate } from 'react-router';
-import { SecureString, EmailString } from '@digitaldefiance/ecies-lib';
-import { IRequestUserDTO, SuiteCoreStringKey, TranslatableSuiteError } from '@digitaldefiance/suite-core-lib';
-import { LoginForm, LoginFormValues, LoginFormProps } from '../components/LoginForm';
-import { TotpVerificationForm } from '../components/TotpVerificationForm';
-import { useAuth, useSuiteConfig } from '../contexts';
-
-export interface LoginFormWrapperProps {
-  onSuccess?: () => void;
-  redirectTo?: string;
-  componentProps?: Partial<Omit<LoginFormProps, 'onSubmit'>>;
-  /**
-   * Called when the user submits a TOTP verification code during login.
-   * Typically wired to `AuthService.verifyTotpLogin(pendingTotpToken, code)`.
-   * When not provided, the wrapper cannot complete TOTP-protected logins.
-   */
-  onVerifyTotp?: (
-    code: string,
-    pendingTotpToken: string,
-  ) => Promise<{ token: string; user: IRequestUserDTO } | { error: string }>;
-}
-
-export const LoginFormWrapper: FC<LoginFormWrapperProps> = ({ 
-  onSuccess,
-  redirectTo,
-  componentProps = {},
-  onVerifyTotp,
-}) => {
-  const { directLogin, passwordLogin, verifyTotpLogin, setUser } = useAuth();
-  const navigate = useNavigate();
-  const { routes } = useSuiteConfig();
-  const [pendingTotpToken, setPendingTotpToken] = useState<string | null>(null);
-
-  const handleLoginSuccess = () => {
-    if (onSuccess) {
-      onSuccess();
-    }
-    navigate(redirectTo || routes.dashboard || '/dashboard');
-  };
-
-  const handleSubmit = async (values: LoginFormValues) => {
-    const email = values.email && values.email.trim().length > 0 ? new EmailString(values.email) : undefined;
-    const username = values.username && values.username.trim() ? values.username : undefined;
-    
-    if (values.password) {
-      const result = await passwordLogin(
-        new SecureString(values.password),
-        username,
-        email
-      );
-      if ('error' in result) {
-        throw new Error(result.error);
-      }
-      if ('pendingTotpToken' in result) {
-        setPendingTotpToken(result.pendingTotpToken);
-        return;
-      }
-      handleLoginSuccess();
-    } else if (values.mnemonic) {
-      const result = await directLogin(
-        new SecureString(values.mnemonic),
-        username,
-        email
-      );
-      if ('error' in result) {
-        throw new Error(result.error);
-      }
-      if ('pendingTotpToken' in result) {
-        setPendingTotpToken(result.pendingTotpToken);
-        return;
-      }
-      handleLoginSuccess();
-    } else {
-      throw new TranslatableSuiteError(SuiteCoreStringKey.Error_NoPasswordOrMnemonicProvided);
-    }
-  };
-
-  const handleTotpSubmit = async (
-    code: string,
-    token: string,
-  ): Promise<{ token: string; user: IRequestUserDTO } | { error: string }> => {
-    // Use the explicitly provided callback, or fall back to verifyTotpLogin from AuthContext
-    const verifyFn = onVerifyTotp ?? ((c: string, t: string) => verifyTotpLogin(t, c));
-    const result = await verifyFn(code, token);
-    if ('error' in result) {
-      return result;
-    }
-    // Store the full JWT and complete the login flow
-    localStorage.setItem('authToken', result.token);
-    localStorage.setItem('user', JSON.stringify(result.user));
-    // Update auth context so PrivateRoute guards see the user as authenticated
-    await setUser(result.user);
-    handleLoginSuccess();
-    return result;
-  };
-
-  if (pendingTotpToken) {
-    return (
-      <TotpVerificationForm
-        pendingTotpToken={pendingTotpToken}
-        onSubmit={handleTotpSubmit}
-      />
-    );
-  }
-
-  return <LoginForm onSubmit={handleSubmit} {...componentProps} />;
-};

package/src/wrappers/LogoutPageWrapper.tsx

@@ -1,30 +0,0 @@
-import { FC } from 'react';
-import { useNavigate } from 'react-router';
-import { LogoutPage } from '../components/LogoutPage';
-import { useAuth, useSuiteConfig } from '../contexts';
-
-export interface LogoutPageWrapperProps {
-  onSuccess?: () => void;
-  redirectTo?: string;
-  componentProps?: Partial<React.ComponentProps<typeof LogoutPage>>;
-}
-
-export const LogoutPageWrapper: FC<LogoutPageWrapperProps> = ({ 
-  onSuccess,
-  redirectTo,
-  componentProps = {},
-}) => {
-  const { logout } = useAuth();
-  const navigate = useNavigate();
-  const { routes } = useSuiteConfig();
-  
-  const handleLogout = async () => {
-    await logout();
-    if (onSuccess) {
-      onSuccess();
-    }
-    navigate(redirectTo || routes.login || '/login');
-  };
-  
-  return <LogoutPage onLogout={handleLogout} onNavigate={navigate} {...componentProps} />;
-};

package/src/wrappers/RegisterFormWrapper.tsx

@@ -1,109 +0,0 @@
-import { SecureString } from '@digitaldefiance/ecies-lib';
-import { FC } from 'react';
-import {
-  RegisterForm,
-  RegisterFormProps,
-  RegisterFormValues,
-} from '../components/RegisterForm';
-import { useAuth, useSuiteConfig } from '../contexts';
-
-export interface RegisterFormWrapperProps {
-  onSuccess?: () => void;
-  /**
-   * When true, offer the TOTP setup step after successful registration.
-   * Typically sourced from window.APP_CONFIG.totpAvailable.
-   * Defaults to false.
-   *
-   * NOTE: This requires the registration endpoint to return a session token
-   * so the user is authenticated when the TOTP setup call is made. If
-   * registration does not issue a token (the default in this suite), leave
-   * this false and direct users to enable TOTP from their settings page
-   * after logging in.
-   */
-  enableTotpSetup?: boolean;
-  componentProps?: Partial<
-    Omit<RegisterFormProps, 'onSubmit' | 'timezones' | 'getInitialTimezone'>
-  >;
-}
-
-export const RegisterFormWrapper: FC<RegisterFormWrapperProps> = ({
-  onSuccess,
-  enableTotpSetup = false,
-  componentProps = {},
-}) => {
-  const { register, setUpBrowserPasswordLogin, setupTotp, confirmTotp } =
-    useAuth();
-  const { timezones } = useSuiteConfig();
-
-  const handleSubmit = async (
-    values: RegisterFormValues,
-    usePassword: boolean
-  ) => {
-    const result = await register(
-      values.username,
-      values.email,
-      values.timezone || 'UTC',
-      values.password,
-      values.mnemonic,
-      values.displayName,
-      values.directChallenge
-    );
-    if ('error' in result) {
-      return result;
-    }
-
-    // After successful registration with a password, set up the browser-side
-    // password login bundle (encrypts mnemonic with password and stores in localStorage).
-    // This is required for subsequent password-based logins to work.
-    if (usePassword && values.password && result.mnemonic) {
-      const setupResult = await setUpBrowserPasswordLogin(
-        new SecureString(result.mnemonic),
-        new SecureString(values.password)
-      );
-      if ('error' in setupResult) {
-        // Password login setup failed — still return success for registration
-        // but log the issue. The user can set up password login later.
-        console.warn(
-          'Registration succeeded but browser password login setup failed:',
-          setupResult.error
-        );
-      }
-    }
-
-    if (onSuccess) {
-      onSuccess();
-    }
-    // Don't navigate away — let RegisterForm show the success message
-    // (mnemonic grid or email verification notice). The user navigates
-    // manually via the "Proceed to login" / "I Have Saved My Recovery
-    // Phrase" button.
-    return result;
-  };
-
-  const defaultTimezones = timezones || [
-    'UTC',
-    'America/New_York',
-    'America/Los_Angeles',
-    'Europe/London',
-  ];
-
-  const totpProps = enableTotpSetup
-    ? {
-        enableTotpSetup: true,
-        onTotpSetup: setupTotp,
-        onTotpConfirm: confirmTotp,
-      }
-    : {};
-
-  return (
-    <RegisterForm
-      onSubmit={handleSubmit}
-      timezones={defaultTimezones}
-      getInitialTimezone={() =>
-        Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
-      }
-      {...totpProps}
-      {...componentProps}
-    />
-  );
-};

package/src/wrappers/ResetPasswordFormWrapper.tsx

@@ -1,57 +0,0 @@
-import { FC } from 'react';
-import { useNavigate, useSearchParams } from 'react-router';
-import {
-  SuiteCoreStringKey,
-  TranslatableSuiteError,
-} from '@digitaldefiance/suite-core-lib';
-import {
-  ResetPasswordForm,
-  ResetPasswordFormProps,
-} from '../components/ResetPasswordForm';
-import { useSuiteConfig } from '../contexts';
-
-export interface ResetPasswordFormWrapperProps {
-  onSuccess?: () => void;
-  redirectTo?: string;
-  componentProps?: Partial<Omit<ResetPasswordFormProps, 'onSubmit' | 'token'>>;
-}
-
-export const ResetPasswordFormWrapper: FC<ResetPasswordFormWrapperProps> = ({
-  onSuccess,
-  redirectTo,
-  componentProps = {},
-}) => {
-  const { baseUrl, routes } = useSuiteConfig();
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const token = searchParams.get('token');
-
-  const handleSubmit = async (resetToken: string, password: string) => {
-    const res = await fetch(`${baseUrl}/user/reset-password`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ token: resetToken, password }),
-    });
-    if (!res.ok) {
-      const body: { message?: string } = await res.json().catch(() => ({})) as { message?: string };
-      if (body.message) {
-        throw new Error(body.message);
-      }
-      throw new TranslatableSuiteError(
-        SuiteCoreStringKey.Error_PasswordChange,
-      );
-    }
-    if (onSuccess) {
-      onSuccess();
-    }
-    navigate(redirectTo || routes.login || '/login');
-  };
-
-  return (
-    <ResetPasswordForm
-      token={token}
-      onSubmit={handleSubmit}
-      {...componentProps}
-    />
-  );
-};

package/src/wrappers/UserSettingsFormWrapper.tsx

@@ -1,140 +0,0 @@
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { UserSettingsForm, UserSettingsFormValues, UserSettingsFormProps } from '../components/UserSettingsForm';
-import { useSuiteConfig } from '../contexts';
-import { useUserSettingsPublic } from '../hooks';
-import { getSuiteCoreTranslation, IConstants, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-import { createAuthService } from '../services/authService';
-import { createAuthenticatedApiClient } from '../services/authenticatedApi';
-import { IECIESConfig } from '@digitaldefiance/ecies-lib';
-
-export interface UserSettingsFormWrapperProps {
-  onSuccess?: () => void;
-  /**
-   * Constants for AuthService (required for TOTP methods).
-   * If not provided, TOTP callbacks will not be wired up.
-   */
-  constants?: IConstants;
-  /**
-   * ECIES config for AuthService (required for TOTP methods).
-   * If not provided, TOTP callbacks will not be wired up.
-   */
-  eciesConfig?: IECIESConfig;
-  /**
-   * Email domain for AuthService (required for TOTP methods).
-   */
-  emailDomain?: string;
-  /**
-   * When false (default), TOTP management controls are not shown.
-   * Set to true when TOTP_AVAILABLE is enabled in the server environment.
-   */
-  totpAvailable?: boolean;
-  componentProps?: Partial<Omit<UserSettingsFormProps, 'initialValues' | 'onSubmit' | 'languages'>>;
-}
-
-export const UserSettingsFormWrapper: FC<UserSettingsFormWrapperProps> = ({ 
-  onSuccess,
-  constants,
-  eciesConfig,
-  emailDomain = '',
-  totpAvailable = false,
-  componentProps = {},
-}) => {
-  const { settings, updateSettings } = useUserSettingsPublic();
-  const { languages, baseUrl } = useSuiteConfig();
-
-  // Fetch totpEnabled from the settings API
-  const [totpEnabled, setTotpEnabled] = useState<boolean | undefined>(undefined);
-
-  const authenticatedApi = useMemo(
-    () => createAuthenticatedApiClient(baseUrl),
-    [baseUrl],
-  );
-
-  const authService = useMemo(() => {
-    if (!constants || !eciesConfig) return null;
-    return createAuthService(constants, baseUrl, eciesConfig, emailDomain);
-  }, [constants, eciesConfig, baseUrl, emailDomain]);
-
-  // Fetch totpEnabled from GET /user/settings.
-  // We gate on totpAvailable (no point fetching if TOTP isn't enabled on this
-  // deployment) but NOT on isAuthenticated — isAuthenticated can be false
-  // transiently (e.g. verify 403 on page refresh with a stale token) even
-  // when the user has a valid session token in localStorage. The
-  // authenticatedApi interceptor attaches the token automatically; if the
-  // call fails we leave totpEnabled undefined so no TOTP controls are shown.
-  useEffect(() => {
-    if (!totpAvailable) return;
-    authenticatedApi
-      .get<{ settings: { totpEnabled?: boolean } }>('/user/settings')
-      .then((res) => {
-        setTotpEnabled(res.data?.settings?.totpEnabled ?? false);
-      })
-      .catch(() => {
-        // If the endpoint fails, leave totpEnabled undefined (no TOTP controls shown)
-      });
-  }, [totpAvailable, authenticatedApi]);
-
-  const handleSubmit = async (values: UserSettingsFormValues) => {
-    const result = await updateSettings(values);
-    if ('success' in result && result.success && onSuccess) {
-      onSuccess();
-    }
-    return result;
-  };
-
-  // TOTP callbacks — only wired when authService is available
-  const handleTotpSetup = useCallback(async () => {
-    if (!authService) return { error: 'AuthService not configured' };
-    return authService.setupTotp();
-  }, [authService]);
-
-  const handleTotpConfirm = useCallback(async (code: string) => {
-    if (!authService) return { error: 'AuthService not configured' };
-    const result = await authService.confirmTotp(code);
-    if ('success' in result && result.success) {
-      setTotpEnabled(true);
-    }
-    return result;
-  }, [authService]);
-
-  const handleTotpDisable = useCallback(async (code: string) => {
-    if (!authService) return { error: 'AuthService not configured' };
-    const result = await authService.disableTotp(code);
-    if ('success' in result && result.success) {
-      setTotpEnabled(false);
-    }
-    return result;
-  }, [authService]);
-
-  const handleTotpReset = useCallback(async (code: string) => {
-    if (!authService) return { error: 'AuthService not configured' };
-    return authService.resetTotp(code);
-  }, [authService]);
-
-  // Only show loading on initial load, not during updates
-  // Once we have settings, keep showing the form even during updates
-  if (!settings) {
-    return <div>{getSuiteCoreTranslation(SuiteCoreStringKey.Common_Loading)}...</div>;
-  }
-
-  // Only pass TOTP props when totpAvailable is true, authService is available, and totpEnabled has been fetched
-  const totpProps = totpAvailable && authService && totpEnabled !== undefined
-    ? {
-        totpEnabled,
-        onTotpSetup: handleTotpSetup,
-        onTotpConfirm: handleTotpConfirm,
-        onTotpDisable: handleTotpDisable,
-        onTotpReset: handleTotpReset,
-      }
-    : {};
-
-  return (
-    <UserSettingsForm
-      initialValues={settings}
-      onSubmit={handleSubmit}
-      languages={languages}
-      {...totpProps}
-      {...componentProps}
-    />
-  );
-};

package/src/wrappers/VerifyEmailPageWrapper.tsx

@@ -1,27 +0,0 @@
-import { FC, useCallback } from 'react';
-import { VerifyEmailPage } from '../components/VerifyEmailPage';
-import { useEmailVerification } from '../hooks';
-
-export interface VerifyEmailPageWrapperProps {
-  onSuccess?: () => void;
-  componentProps?: Partial<React.ComponentProps<typeof VerifyEmailPage>>;
-}
-
-export const VerifyEmailPageWrapper: FC<VerifyEmailPageWrapperProps> = ({ 
-  onSuccess,
-  componentProps = {},
-}) => {
-  const searchParams = new URLSearchParams(window.location.search);
-  const token = searchParams.get('token');
-  const { verifyEmail } = useEmailVerification();
-
-  const handleVerify = useCallback(async (verificationToken: string) => {
-    const result = await verifyEmail(verificationToken);
-    if (result.success && onSuccess) {
-      onSuccess();
-    }
-    return result;
-  }, [verifyEmail, onSuccess]);
-
-  return <VerifyEmailPage token={token} onVerify={handleVerify} {...componentProps} />;
-};