@digitaldefiance/express-suite-react-components 2.9.7 → 2.9.11

package/src/components/LoginForm.tsx

@@ -1,307 +0,0 @@
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-import {
-  Alert,
-  Box,
-  Button,
-  Container,
-  IconButton,
-  InputAdornment,
-  Link,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useFormik } from 'formik';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-import { SuiteCoreComponentId, SuiteCoreStringKey, Constants } from '@digitaldefiance/suite-core-lib';
-import { useI18n } from '../contexts';
-
-export interface LoginFormValues {
-  email?: string;
-  username?: string;
-  password?: string;
-  mnemonic?: string;
-  [key: string]: any;
-}
-
-export interface LoginFormProps {
-  onSubmit: (values: LoginFormValues) => Promise<void>;
-  loginType?: 'email' | 'username';
-  authType?: 'password' | 'mnemonic';
-  allowLoginTypeToggle?: boolean;
-  allowAuthTypeToggle?: boolean;
-  showForgotPassword?: boolean;
-  showSignUp?: boolean;
-  forgotPasswordLink?: string;
-  signUpLink?: string;
-  emailLabel?: string;
-  usernameLabel?: string;
-  passwordLabel?: string;
-  mnemonicLabel?: string;
-  signInButtonText?: string;
-  forgotPasswordText?: string;
-  signUpText?: string;
-  useUsernameText?: string;
-  useEmailText?: string;
-  useMnemonicText?: string;
-  usePasswordText?: string;
-  toggleVisibilityLabel?: string;
-  titleText?: string;
-  emailValidation?: Yup.StringSchema;
-  usernameValidation?: Yup.StringSchema;
-  passwordValidation?: Yup.StringSchema;
-  mnemonicValidation?: Yup.StringSchema;
-  additionalFields?: (formik: ReturnType<typeof useFormik<LoginFormValues>>) => React.ReactNode;
-  additionalInitialValues?: Record<string, any>;
-  additionalValidation?: Record<string, Yup.Schema>;
-}
-
-export const LoginForm: FC<LoginFormProps> = ({
-  onSubmit,
-  loginType: initialLoginType = 'email',
-  authType: initialAuthType = 'password',
-  allowLoginTypeToggle = true,
-  allowAuthTypeToggle = true,
-  showForgotPassword = true,
-  showSignUp = true,
-  forgotPasswordLink = '/forgot-password',
-  signUpLink = '/register',
-  emailLabel,
-  usernameLabel,
-  passwordLabel,
-  mnemonicLabel,
-  signInButtonText,
-  forgotPasswordText,
-  signUpText,
-  useUsernameText,
-  useEmailText,
-  useMnemonicText,
-  usePasswordText,
-  toggleVisibilityLabel,
-  titleText,
-  emailValidation,
-  usernameValidation,
-  passwordValidation,
-  mnemonicValidation,
-  additionalFields,
-  additionalInitialValues = {},
-  additionalValidation = {},
-}) => {
-  const { tComponent } = useI18n();
-  const [loginType, setLoginType] = useState<'email' | 'username'>(initialLoginType);
-  const [authType, setAuthType] = useState<'password' | 'mnemonic'>(initialAuthType);
-  const [showSecret, setShowSecret] = useState(false);
-
-  // Use translations with fallbacks
-  const labels = {
-    title: titleText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_Title),
-    email: emailLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Email),
-    username: usernameLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Username),
-    password: passwordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Password),
-    mnemonic: mnemonicLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Mnemonic),
-    signIn: signInButtonText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.SignInButton),
-    forgotPassword: forgotPasswordText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_ForgotPassword),
-    signUp: signUpText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_SignUp),
-    useUsername: useUsernameText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseUsername),
-    useEmail: useEmailText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseEmailAddress),
-    useMnemonic: useMnemonicText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UseMnemonic),
-    usePassword: usePasswordText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UsePassword),
-    toggleVisibility: toggleVisibilityLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.TogglePasswordVisibility),
-  };
-
-  const validation = {
-    email: emailValidation || Yup.string()
-      .email(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidEmail))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    username: usernameValidation || Yup.string()
-      .matches(Constants.UsernameRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    password: passwordValidation || Yup.string()
-      .min(1, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    mnemonic: mnemonicValidation || Yup.string()
-      .matches(Constants.MnemonicRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidMnemonic))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-  };
-
-  const formik = useFormik<LoginFormValues>({
-    initialValues: {
-      email: '',
-      username: '',
-      mnemonic: '',
-      password: '',
-      ...additionalInitialValues,
-    },
-    validationSchema: Yup.object({
-      [loginType]: loginType === 'email' ? validation.email : validation.username,
-      ...(authType === 'mnemonic'
-        ? { mnemonic: validation.mnemonic }
-        : { password: validation.password }),
-      ...additionalValidation,
-    }),
-    enableReinitialize: true,
-    onSubmit: async (values, { setStatus }) => {
-      try {
-        setStatus(null);
-        await onSubmit(values);
-      } catch (error: any) {
-        setStatus(error.message || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UnexpectedError));
-        throw error;
-      }
-    },
-  });
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <Box
-        sx={{
-          marginTop: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Typography component="h1" variant="h5">
-          {labels.title}
-        </Typography>
-        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
-          {formik.status && (
-            <Alert severity="error" sx={{ mb: 2 }}>
-              {formik.status}
-            </Alert>
-          )}
-          <TextField
-            margin="normal"
-            fullWidth
-            id={loginType}
-            label={loginType === 'email' ? labels.email : labels.username}
-            name={loginType}
-            autoComplete={loginType === 'email' ? 'email' : 'username'}
-            autoFocus
-            value={loginType === 'email' ? formik.values.email : formik.values.username}
-            onChange={formik.handleChange}
-            error={formik.touched[loginType] && Boolean(formik.errors[loginType])}
-            helperText={formik.touched[loginType] && formik.errors[loginType]}
-          />
-          {authType === 'password' ? (
-            <TextField
-              margin="normal"
-              required
-              fullWidth
-              name="password"
-              label={labels.password}
-              id="password"
-              type={showSecret ? 'text' : 'password'}
-              value={formik.values.password}
-              onChange={formik.handleChange}
-              error={formik.touched.password && Boolean(formik.errors.password)}
-              helperText={formik.touched.password && formik.errors.password}
-              slotProps={{
-                input: {
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <IconButton
-                        aria-label={labels.toggleVisibility}
-                        onClick={() => setShowSecret(!showSecret)}
-                        edge="end"
-                      >
-                        {showSecret ? <VisibilityOff /> : <Visibility />}
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                },
-              }}
-            />
-          ) : (
-            <TextField
-              margin="normal"
-              required
-              fullWidth
-              name="mnemonic"
-              label={labels.mnemonic}
-              id="mnemonic"
-              multiline
-              rows={3}
-              value={formik.values.mnemonic}
-              onChange={formik.handleChange}
-              error={formik.touched.mnemonic && Boolean(formik.errors.mnemonic)}
-              helperText={formik.touched.mnemonic && formik.errors.mnemonic}
-              type={showSecret ? 'text' : 'password'}
-              slotProps={{
-                input: {
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <IconButton
-                        aria-label={labels.toggleVisibility}
-                        onClick={() => setShowSecret(!showSecret)}
-                        edge="end"
-                      >
-                        {showSecret ? <VisibilityOff /> : <Visibility />}
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                },
-              }}
-            />
-          )}
-          {additionalFields && additionalFields(formik)}
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {labels.signIn}
-          </Button>
-          {(showForgotPassword || showSignUp) && (
-            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-              {showForgotPassword && (
-                <Link href={forgotPasswordLink} variant="body2">
-                  {labels.forgotPassword}
-                </Link>
-              )}
-              {showSignUp && (
-                <Link href={signUpLink} variant="body2">
-                  {labels.signUp}
-                </Link>
-              )}
-            </Box>
-          )}
-          {(allowLoginTypeToggle || allowAuthTypeToggle) && (
-            <Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
-              {allowLoginTypeToggle && (
-                <Button
-                  fullWidth
-                  variant="text"
-                  onClick={() => {
-                    const newType = loginType === 'email' ? 'username' : 'email';
-                    formik.setFieldValue(loginType, '');
-                    setLoginType(newType);
-                  }}
-                >
-                  {loginType === 'email' ? labels.useUsername : labels.useEmail}
-                </Button>
-              )}
-              {allowAuthTypeToggle && (
-                <Button
-                  fullWidth
-                  variant="text"
-                  onClick={() => {
-                    const newType = authType === 'password' ? 'mnemonic' : 'password';
-                    formik.setFieldValue(authType, '');
-                    setAuthType(newType);
-                  }}
-                >
-                  {authType === 'password' ? labels.useMnemonic : labels.usePassword}
-                </Button>
-              )}
-            </Box>
-          )}
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default LoginForm;

package/src/components/LogoutPage.tsx

@@ -1,21 +0,0 @@
-import { useEffect } from 'react';
-
-export interface LogoutPageProps {
-  onLogout: () => Promise<void> | void;
-  onNavigate?: (path: string) => void;
-  redirectTo?: string;
-}
-
-export const LogoutPage = ({ onLogout, onNavigate, redirectTo = '/login' }: LogoutPageProps) => {
-  useEffect(() => {
-    const performLogout = async () => {
-      await onLogout();
-      onNavigate?.(redirectTo);
-    };
-    performLogout();
-  }, [onLogout, onNavigate, redirectTo]);
-
-  return null;
-};
-
-export default LogoutPage;

package/src/components/RegisterForm.tsx

@@ -1,354 +0,0 @@
-import {
-  Alert,
-  AlertTitle,
-  Box,
-  Button,
-  Checkbox,
-  Container,
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  InputLabel,
-  Link,
-  MenuItem,
-  Select,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useFormik } from 'formik';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-import { SuiteCoreComponentId, SuiteCoreStringKey, Constants } from '@digitaldefiance/suite-core-lib';
-import { useI18n } from '../contexts';
-
-export interface RegisterFormValues {
-  username: string;
-  email: string;
-  timezone: string;
-  password?: string;
-  confirmPassword?: string;
-  [key: string]: any;
-}
-
-export interface RegisterFormProps {
-  onSubmit: (values: RegisterFormValues, usePassword: boolean) => Promise<
-    | { success: boolean; message: string; mnemonic?: string }
-    | { error: string; errorType?: string; field?: string; errors?: Array<{ path: string; msg: string }> }
-  >;
-  timezones: string[];
-  getInitialTimezone: () => string;
-  usernameValidation?: Yup.StringSchema;
-  emailValidation?: Yup.StringSchema;
-  timezoneValidation?: Yup.StringSchema;
-  passwordValidation?: Yup.StringSchema;
-  confirmPasswordValidation?: Yup.StringSchema;
-  additionalFields?: (formik: any, usePassword: boolean) => React.ReactNode;
-  additionalInitialValues?: Record<string, any>;
-  additionalValidation?: Record<string, Yup.Schema>;
-  labels?: {
-    title?: string;
-    username?: string;
-    email?: string;
-    timezone?: string;
-    password?: string;
-    confirmPassword?: string;
-    useMnemonic?: string;
-    usePassword?: string;
-    registering?: string;
-    register?: string;
-    successTitle?: string;
-    mnemonicSuccess?: string;
-    proceedToLogin?: string;
-    loginLink?: string;
-  };
-}
-
-export const RegisterForm: FC<RegisterFormProps> = ({
-  onSubmit,
-  timezones,
-  getInitialTimezone,
-  usernameValidation,
-  emailValidation,
-  timezoneValidation,
-  passwordValidation,
-  confirmPasswordValidation,
-  additionalFields,
-  additionalInitialValues = {},
-  additionalValidation = {},
-  labels = {},
-}) => {
-  const { t, tComponent } = useI18n();
-  const [apiErrors, setApiErrors] = useState<Record<string, string>>({});
-  const [mnemonic, setMnemonic] = useState<string | null>(null);
-  const [usePassword, setUsePassword] = useState(true);
-  const [registrationSuccess, setRegistrationSuccess] = useState(false);
-  const [registering, setRegistering] = useState(false);
-
-  const validation = {
-    username: usernameValidation || Yup.string()
-      .min(Constants.UsernameMinLength, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameMinLengthTemplate))
-      .max(Constants.UsernameMaxLength, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameMaxLengthTemplate))
-      .matches(Constants.UsernameRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    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))
-      .oneOf(timezones, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_TimezoneInvalid)),
-    password: passwordValidation || Yup.string()
-      .matches(Constants.PasswordRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate))
-      .min(8, 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 formik = useFormik<RegisterFormValues>({
-    initialValues: {
-      username: '',
-      email: '',
-      timezone: getInitialTimezone(),
-      password: '',
-      confirmPassword: '',
-      directChallenge: false,
-      ...additionalInitialValues,
-    },
-    enableReinitialize: true,
-    validationSchema: Yup.object({
-      username: validation.username,
-      email: validation.email,
-      timezone: validation.timezone,
-      ...(usePassword
-        ? {
-            password: validation.password,
-            confirmPassword: validation.confirmPassword,
-          }
-        : {}),
-      ...additionalValidation,
-    }),
-    onSubmit: async (values, { setSubmitting, setFieldError, setTouched }) => {
-      setRegistering(true);
-      const registerResult = await onSubmit(values, usePassword);
-      
-      if ('success' in registerResult && registerResult.success) {
-        setRegistrationSuccess(true);
-        if (!usePassword && registerResult?.mnemonic) {
-          setMnemonic(registerResult.mnemonic);
-        }
-      } else {
-        setRegistrationSuccess(false);
-        const newApiErrors: Record<string, string> = {};
-        const fieldsToTouch: Record<string, boolean> = {};
-
-        if ('field' in registerResult && registerResult.field) {
-          setFieldError(registerResult.field, registerResult.error);
-          fieldsToTouch[registerResult.field] = true;
-        }
-
-        if ('errors' in registerResult && registerResult.errors) {
-          registerResult.errors.forEach((err) => {
-            if (err.path && err.msg) {
-              setFieldError(err.path, err.msg);
-              fieldsToTouch[err.path] = true;
-            }
-          });
-        }
-
-        if ('error' in registerResult && registerResult.error && !Object.keys(newApiErrors).length) {
-          newApiErrors.general = registerResult.error;
-        }
-
-        setApiErrors(newApiErrors);
-        setTouched(fieldsToTouch, false);
-      }
-      setSubmitting(false);
-      setRegistering(false);
-      setApiErrors({});
-    },
-  });
-
-  return (
-    <Container maxWidth="sm">
-      <Box sx={{ mt: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          {labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Registration)}
-        </Typography>
-
-        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
-          <TextField
-            fullWidth
-            id="username"
-            name="username"
-            label={labels.username || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Username)}
-            value={formik.values.username}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(formik.touched.username && (formik.errors.username || apiErrors.username))}
-            helperText={formik.touched.username && (formik.errors.username || apiErrors.username)}
-            margin="normal"
-          />
-          <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)}
-            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>
-
-          <Box sx={{ display: 'flex', alignItems: 'center', mt: 2 }}>
-            <Button variant="text" onClick={() => setUsePassword(!usePassword)}>
-              {usePassword 
-                ? labels.useMnemonic || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UseMnemonic)
-                : labels.usePassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UsePassword)}
-            </Button>
-          </Box>
-
-          {usePassword && (
-            <>
-              <TextField
-                fullWidth
-                id="password"
-                name="password"
-                label={labels.password || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_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={labels.confirmPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword)}
-                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"
-              />
-            </>
-          )}
-
-          <FormControl fullWidth margin="normal">
-            <FormControlLabel
-              control={
-                <Checkbox
-                  id="directChallenge"
-                  name="directChallenge"
-                  checked={formik.values.directChallenge || false}
-                  onChange={formik.handleChange}
-                />
-              }
-              label={tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_DirectChallengeLabel)}
-            />
-            <FormHelperText>
-              {tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_DirectChallengeHelper)}
-            </FormHelperText>
-          </FormControl>
-
-          {additionalFields && additionalFields(formik, usePassword)}
-
-          {apiErrors.general && (
-            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
-              {apiErrors.general}
-            </Alert>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {registering 
-              ? labels.registering || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_Registering)
-              : labels.register || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_RegisterButton)}
-          </Button>
-
-          {registering && (
-            <Alert severity="success" sx={{ mt: 2, mb: 2, whiteSpace: 'pre-wrap' }}>
-              <AlertTitle>{labels.registering || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_Registering)}</AlertTitle>
-              <Typography variant="body2" component="div">
-                {tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_RegisteringMessage)}
-              </Typography>
-            </Alert>
-          )}
-
-          {mnemonic && (
-            <Alert severity="success" sx={{ mt: 2, mb: 2, whiteSpace: 'pre-wrap' }}>
-              <AlertTitle>{labels.successTitle || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_SuccessTitle)}</AlertTitle>
-              <Typography variant="body2" component="div">
-                {labels.mnemonicSuccess || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_MnemonicSuccess)}
-                <Typography variant="body1" component="div" sx={{ mt: 1, fontFamily: 'monospace' }}>
-                  {mnemonic}
-                </Typography>
-                <Box sx={{ textAlign: 'center' }}>
-                  <Link href="/login">{labels.proceedToLogin || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ProceedToLogin)}</Link>
-                </Box>
-              </Typography>
-            </Alert>
-          )}
-
-          {registrationSuccess && (
-            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
-              <AlertTitle>{labels.successTitle || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_SuccessTitle)}</AlertTitle>
-              <Typography variant="body2" component="div">
-                {tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_Success)}
-                <Box sx={{ textAlign: 'center' }}>
-                  <Link href="/login">{labels.proceedToLogin || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ProceedToLogin)}</Link>
-                </Box>
-              </Typography>
-            </Alert>
-          )}
-          {!mnemonic && !registrationSuccess && (
-            <Box sx={{ textAlign: 'center' }}>
-              <Link href="/login" variant="body2">
-                {labels.loginLink || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_LoginLink)}
-              </Link>
-            </Box>
-          )}
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default RegisterForm;