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

package/src/types/MenuType.ts

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

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

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

package/src/types/translation.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+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} />;
+};