@digitaldefiance/express-suite-react-components 2.9.6 → 2.9.9

package/src/components/BackupCodeLoginForm.tsx

@@ -1,314 +0,0 @@
-import {
-  Box,
-  Button,
-  Checkbox,
-  Container,
-  FormControlLabel,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useFormik } from 'formik';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-import { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-import { useI18n } from '../contexts';
-
-export interface BackupCodeLoginFormValues {
-  email: string;
-  username: string;
-  code: string;
-  newPassword?: string;
-  confirmNewPassword?: string;
-  recoverMnemonic: boolean;
-}
-
-export interface BackupCodeLoginFormProps {
-  onSubmit: (
-    identifier: string,
-    code: string,
-    isEmail: boolean,
-    recoverMnemonic: boolean,
-    newPassword?: string
-  ) => Promise<
-    | { token: string; codeCount: number; mnemonic?: string; message?: string }
-    | { error: string; status?: number }
-  >;
-  onNavigate?: (path: string, state?: any) => void;
-  isAuthenticated?: boolean;
-  validationSchema?: Yup.ObjectSchema<any>;
-  labels?: {
-    title?: string;
-    email?: string;
-    username?: string;
-    code?: string;
-    newPassword?: string;
-    confirmPassword?: string;
-    recoverMnemonic?: string;
-    login?: string;
-    useUsername?: string;
-    useEmail?: string;
-    dashboard?: string;
-    generateNewCodes?: string;
-    mnemonicLabel?: string;
-    codesRemaining?: string;
-  };
-}
-
-export const BackupCodeLoginForm: FC<BackupCodeLoginFormProps> = ({
-  onSubmit,
-  onNavigate,
-  isAuthenticated = false,
-  validationSchema,
-  labels = {},
-}) => {
-  const { tComponent } = useI18n();
-  const [loginType, setLoginType] = useState<'email' | 'username'>('email');
-  const [loginError, setLoginError] = useState<string | null>(null);
-  const [recoveredMnemonic, setRecoveredMnemonic] = useState<string | null>(null);
-  const [successMessage, setSuccessMessage] = useState<string | null>(null);
-  const [codesRemaining, setCodesRemaining] = useState<number | null>(null);
-
-  const translatedLabels = {
-    title: labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_Title),
-    email: labels.email || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Email),
-    username: labels.username || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Username),
-    code: labels.code || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_BackupCode),
-    newPassword: labels.newPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_NewPassword),
-    confirmPassword: labels.confirmPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword),
-    recoverMnemonic: labels.recoverMnemonic || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_RecoverMnemonic),
-    login: labels.login || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_Login),
-    useUsername: labels.useUsername || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseUsername),
-    useEmail: labels.useEmail || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseEmailAddress),
-    dashboard: labels.dashboard || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Dashboard),
-    generateNewCodes: labels.generateNewCodes || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
-    mnemonicLabel: labels.mnemonicLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Mnemonic),
-    codesRemaining: labels.codesRemaining || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate),
-    unexpectedError: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UnexpectedError),
-  };
-
-  const yupFieldValidation = {
-    email: Yup.string()
-      .email(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidEmail))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    username: Yup.string()
-      .matches(Constants.UsernameRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    code: Yup.string()
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required))
-      .matches(Constants.BACKUP_CODES.DisplayRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidBackupCode)),
-    password: Yup.string()
-      .matches(Constants.PasswordRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate)),
-    confirmPassword: Yup.string()
-      .oneOf([Yup.ref('newPassword')], tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMatch)),
-  };
-
-  const formik = useFormik<BackupCodeLoginFormValues>({
-    initialValues: {
-      email: '',
-      username: '',
-      code: '',
-      newPassword: '',
-      confirmNewPassword: '',
-      recoverMnemonic: false,
-    },
-    validationSchema: validationSchema ?? Yup.object({
-      [loginType]: loginType === 'email' ? yupFieldValidation.email : yupFieldValidation.username,
-      code: yupFieldValidation.code,
-      newPassword: yupFieldValidation.password,
-      confirmNewPassword: yupFieldValidation.confirmPassword,
-    }),
-    enableReinitialize: true,
-    onSubmit: async (values, { setSubmitting }) => {
-      try {
-        const loginResult = await onSubmit(
-          loginType === 'email' ? values.email : values.username,
-          values.code,
-          loginType === 'email',
-          values.recoverMnemonic,
-          values.newPassword && values.newPassword.length > 0 ? values.newPassword : undefined
-        );
-        if ('error' in loginResult) {
-          setLoginError(loginResult.error);
-          setCodesRemaining(null);
-          setRecoveredMnemonic(null);
-          return;
-        }
-        setLoginError(null);
-        if (loginResult.codeCount) {
-          setCodesRemaining(loginResult.codeCount);
-        }
-        if (loginResult.mnemonic) {
-          setRecoveredMnemonic(loginResult.mnemonic);
-        }
-        if (loginResult.message) {
-          setSuccessMessage(loginResult.message);
-        }
-      } catch {
-        setLoginError(translatedLabels.unexpectedError);
-      } finally {
-        setSubmitting(false);
-      }
-    },
-  });
-
-  if (isAuthenticated && recoveredMnemonic === null && codesRemaining === null) {
-    onNavigate?.('/dashboard');
-    return null;
-  }
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <Box sx={{ marginTop: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <Typography component="h1" variant="h5">
-          {translatedLabels.title}
-        </Typography>
-        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
-          {!isAuthenticated && (
-            <>
-              <TextField
-                margin="normal"
-                fullWidth
-                id={loginType}
-                label={loginType === 'email' ? translatedLabels.email : translatedLabels.username}
-                name={loginType}
-                autoComplete={loginType === 'email' ? 'email' : 'username'}
-                autoFocus
-                value={loginType === 'email' ? formik.values.email : formik.values.username}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched[loginType] && Boolean(formik.errors[loginType])}
-                helperText={formik.touched[loginType] && formik.errors[loginType]}
-                disabled={isAuthenticated}
-              />
-              <TextField
-                margin="normal"
-                required
-                fullWidth
-                name="code"
-                label={translatedLabels.code}
-                id="code"
-                value={formik.values.code}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.code && Boolean(formik.errors.code)}
-                helperText={formik.touched.code && formik.errors.code}
-                disabled={isAuthenticated}
-              />
-              <TextField
-                margin="normal"
-                fullWidth
-                name="newPassword"
-                label={translatedLabels.newPassword}
-                type="password"
-                id="newPassword"
-                value={formik.values.newPassword}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.newPassword && Boolean(formik.errors.newPassword)}
-                helperText={formik.touched.newPassword && formik.errors.newPassword}
-                disabled={isAuthenticated}
-              />
-              <TextField
-                margin="normal"
-                fullWidth
-                name="confirmNewPassword"
-                label={translatedLabels.confirmPassword}
-                type="password"
-                id="confirmNewPassword"
-                value={formik.values.confirmNewPassword}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.confirmNewPassword && Boolean(formik.errors.confirmNewPassword)}
-                helperText={formik.touched.confirmNewPassword && formik.errors.confirmNewPassword}
-                disabled={isAuthenticated}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={formik.values.recoverMnemonic}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    name="recoverMnemonic"
-                  />
-                }
-                label={translatedLabels.recoverMnemonic}
-                disabled={isAuthenticated}
-              />
-            </>
-          )}
-          {successMessage && (
-            <Typography color="success.main" variant="body2" sx={{ mt: 1 }}>
-              {successMessage}
-            </Typography>
-          )}
-          {recoveredMnemonic && (
-            <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
-              <Typography variant="subtitle2" gutterBottom>
-                {translatedLabels.mnemonicLabel}:
-              </Typography>
-              <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>
-                {recoveredMnemonic}
-              </Typography>
-              <Button
-                fullWidth
-                variant="contained"
-                sx={{ mt: 2 }}
-                onClick={() => onNavigate?.('/dashboard')}
-              >
-                {translatedLabels.dashboard}
-              </Button>
-            </Box>
-          )}
-          {codesRemaining !== null && (
-            <Box sx={{ mt: 2 }}>
-              <Typography variant="body2">
-                {translatedLabels.codesRemaining.replace('{count}', String(codesRemaining))}
-              </Typography>
-              <Button
-                fullWidth
-                variant="contained"
-                sx={{ mt: 2 }}
-                onClick={() => onNavigate?.('/backup-codes', { codeCount: codesRemaining })}
-              >
-                {translatedLabels.generateNewCodes}
-              </Button>
-            </Box>
-          )}
-          {loginError && (
-            <Typography color="error" variant="body2" sx={{ mt: 1 }}>
-              {loginError}
-            </Typography>
-          )}
-          {!isAuthenticated && (
-            <>
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                sx={{ mt: 3, mb: 2 }}
-                disabled={formik.isSubmitting}
-              >
-                {translatedLabels.login}
-              </Button>
-              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                <Button
-                  fullWidth
-                  variant="text"
-                  onClick={() => {
-                    const newType = loginType === 'email' ? 'username' : 'email';
-                    formik.setFieldValue(loginType, '');
-                    setLoginType(newType);
-                  }}
-                >
-                  {loginType === 'email' ? translatedLabels.useUsername : translatedLabels.useEmail}
-                </Button>
-              </Box>
-            </>
-          )}
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default BackupCodeLoginForm;

package/src/components/BackupCodesForm.tsx

@@ -1,198 +0,0 @@
-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 { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-import { useI18n } from '../contexts';
-
-export interface BackupCodesFormValues {
-  password?: string;
-  mnemonic?: string;
-}
-
-export interface BackupCodesFormProps {
-  onSubmit: (values: BackupCodesFormValues) => Promise<{
-    message: string;
-    backupCodes: string[];
-  }>;
-  backupCodesRemaining?: number | null;
-  mnemonicValidation?: Yup.StringSchema;
-  passwordValidation?: Yup.StringSchema;
-  labels?: {
-    title?: string;
-    codesRemaining?: string;
-    mnemonic?: string;
-    password?: string;
-    generateButton?: string;
-    successTitle?: string;
-  };
-}
-
-export const BackupCodesForm: FC<BackupCodesFormProps> = ({
-  onSubmit,
-  backupCodesRemaining = null,
-  mnemonicValidation,
-  passwordValidation,
-  labels = {},
-}) => {
-  const { t, tComponent } = useI18n();
-  const [apiError, setApiError] = useState<string | null>(null);
-  const [apiSuccess, setApiSuccess] = useState<string | null>(null);
-  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
-
-  const validation = {
-    mnemonic: mnemonicValidation || Yup.string()
-      .trim()
-      .matches(Constants.MnemonicRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_MnemonicRegex))
-      .optional(),
-    password: passwordValidation || Yup.string()
-      .trim()
-      .matches(Constants.PasswordRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate))
-      .optional(),
-  };
-
-  const translatedLabels = {
-    codesRemaining: labels.codesRemaining || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate),
-    mnemonic: labels.mnemonic || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Mnemonic),
-    password: labels.password || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Password),
-    generateButton: labels.generateButton || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
-    successTitle: labels.successTitle || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_YourNewCodes),
-    xorError: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_MnemonicOrPasswordRequired),
-    unexpectedError: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UnexpectedError),
-  };
-
-  const validationSchema = Yup.object({
-    mnemonic: validation.mnemonic,
-    password: validation.password,
-  })
-    .test('xor-mnemonic-password-mnemonic', translatedLabels.xorError, function (value) {
-      const mnemonic = value?.mnemonic?.trim() ?? '';
-      const password = value?.password?.trim() ?? '';
-      const hasMnemonic = mnemonic.length > 0;
-      const hasPassword = password.length > 0;
-
-      if (!hasMnemonic && !hasPassword) {
-        return this.createError({
-          path: 'mnemonic',
-          message: translatedLabels.xorError,
-        });
-      }
-      if (hasMnemonic && hasPassword) {
-        return this.createError({
-          path: 'mnemonic',
-          message: translatedLabels.xorError,
-        });
-      }
-      return true;
-    })
-    .test('xor-mnemonic-password-password', translatedLabels.xorError, function (value) {
-      const mnemonic = value?.mnemonic?.trim() ?? '';
-      const password = value?.password?.trim() ?? '';
-      const hasMnemonic = mnemonic.length > 0;
-      const hasPassword = password.length > 0;
-
-      if (!hasMnemonic && !hasPassword) {
-        return this.createError({
-          path: 'password',
-          message: translatedLabels.xorError,
-        });
-      }
-      if (hasMnemonic && hasPassword) {
-        return this.createError({
-          path: 'password',
-          message: translatedLabels.xorError,
-        });
-      }
-      return true;
-    });
-
-  const formik = useFormik<BackupCodesFormValues>({
-    initialValues: {
-      password: '',
-      mnemonic: '',
-    },
-    validationSchema,
-    onSubmit: async (values, { setSubmitting }) => {
-      try {
-        const result = await onSubmit(values);
-        if (result && result.backupCodes) {
-          setApiSuccess(translatedLabels.successTitle);
-          setBackupCodes(result.backupCodes);
-        }
-        if (result && result.message) {
-          setApiSuccess(result.message);
-        }
-        setApiError(null);
-      } catch (e: any) {
-        setApiSuccess(null);
-        setApiError(e.response?.data?.message ?? translatedLabels.unexpectedError);
-      } finally {
-        setSubmitting(false);
-      }
-    },
-  });
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <Box>
-        <Typography component="h1" variant="h5">
-          {translatedLabels.codesRemaining.replace('{count}', String(backupCodesRemaining ?? 0))}
-        </Typography>
-      </Box>
-      <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
-        <TextField
-          margin="normal"
-          fullWidth
-          id="mnemonic"
-          label={translatedLabels.mnemonic}
-          type="password"
-          name="mnemonic"
-          autoComplete="mnemonic"
-          autoFocus
-          value={formik.values.mnemonic}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          error={(formik.touched.mnemonic || formik.submitCount > 0) && Boolean(formik.errors.mnemonic)}
-          helperText={(formik.touched.mnemonic || formik.submitCount > 0) && formik.errors.mnemonic}
-        />
-        <TextField
-          margin="normal"
-          fullWidth
-          name="password"
-          label={translatedLabels.password}
-          type="password"
-          id="password"
-          value={formik.values.password}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          error={(formik.touched.password || formik.submitCount > 0) && Boolean(formik.errors.password)}
-          helperText={(formik.touched.password || formik.submitCount > 0) && formik.errors.password}
-        />
-        <Button type="submit" fullWidth variant="contained" sx={{ mt: 2 }}>
-          {translatedLabels.generateButton}
-        </Button>
-      </Box>
-      {apiError && (
-        <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
-          {apiError}
-        </Alert>
-      )}
-      {backupCodes && apiSuccess && (
-        <Box sx={{ mt: 2, mb: 2 }}>
-          <Typography component="h2" variant="h6">
-            {apiSuccess}
-          </Typography>
-          <ul>
-            {backupCodes.map((code, index) => (
-              <li key={index}>
-                <pre>{code}</pre>
-              </li>
-            ))}
-          </ul>
-        </Box>
-      )}
-    </Container>
-  );
-};
-
-export default BackupCodesForm;

package/src/components/ChangePasswordForm.tsx

@@ -1,182 +0,0 @@
-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 { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-import { useI18n } from '../contexts';
-
-export interface ChangePasswordFormValues {
-  currentPassword: string;
-  newPassword: string;
-  confirmPassword: string;
-}
-
-export interface ChangePasswordFormProps {
-  onSubmit: (values: ChangePasswordFormValues) => Promise<{ success?: boolean; error?: string }>;
-  titleText?: string;
-  currentPasswordLabel?: string;
-  newPasswordLabel?: string;
-  confirmPasswordLabel?: string;
-  submitButtonText?: string;
-  submittingButtonText?: string;
-  successMessage?: string;
-  currentPasswordValidation?: Yup.StringSchema;
-  newPasswordValidation?: Yup.StringSchema;
-  confirmPasswordValidation?: Yup.StringSchema;
-}
-
-export const ChangePasswordForm: FC<ChangePasswordFormProps> = ({
-  onSubmit,
-  titleText,
-  currentPasswordLabel,
-  newPasswordLabel,
-  confirmPasswordLabel,
-  submitButtonText,
-  submittingButtonText,
-  successMessage,
-  currentPasswordValidation,
-  newPasswordValidation,
-  confirmPasswordValidation,
-}) => {
-  const { t, tComponent } = useI18n();
-  const [success, setSuccess] = useState(false);
-  const [apiError, setApiError] = useState<string>('');
-
-  const validation = {
-    currentPassword: currentPasswordValidation || Yup.string().required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    newPassword: newPasswordValidation || 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('newPassword')], tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMatch))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-  };
-
-  const labels = {
-    title: titleText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ChangePassword),
-    currentPassword: currentPasswordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_CurrentPassword),
-    newPassword: newPasswordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_NewPassword),
-    confirmPassword: confirmPasswordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword),
-    submitButton: submitButtonText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ChangePassword),
-    submittingButton: submittingButtonText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ChangingPassword),
-    success: successMessage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordChange_Success),
-  };
-
-  const formik = useFormik<ChangePasswordFormValues>({
-    initialValues: {
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: '',
-    },
-    validationSchema: Yup.object({
-      currentPassword: validation.currentPassword,
-      newPassword: validation.newPassword,
-      confirmPassword: validation.confirmPassword,
-    }),
-    onSubmit: async (values, { resetForm }) => {
-      const result = await onSubmit(values);
-
-      if ('success' in result) {
-        setSuccess(true);
-        setApiError('');
-        resetForm();
-      } else if ('error' in result && result.error) {
-        setApiError(result.error);
-        setSuccess(false);
-      }
-    },
-  });
-
-  return (
-    <Container maxWidth="sm">
-      <Box
-        sx={{
-          mt: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" gutterBottom>
-          {labels.title}
-        </Typography>
-
-        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
-          <TextField
-            fullWidth
-            id="currentPassword"
-            name="currentPassword"
-            label={labels.currentPassword}
-            type="password"
-            value={formik.values.currentPassword}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(formik.touched.currentPassword && formik.errors.currentPassword)}
-            helperText={formik.touched.currentPassword && formik.errors.currentPassword}
-            margin="normal"
-          />
-
-          <TextField
-            fullWidth
-            id="newPassword"
-            name="newPassword"
-            label={labels.newPassword}
-            type="password"
-            value={formik.values.newPassword}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(formik.touched.newPassword && formik.errors.newPassword)}
-            helperText={formik.touched.newPassword && formik.errors.newPassword}
-            margin="normal"
-          />
-
-          <TextField
-            fullWidth
-            id="confirmPassword"
-            name="confirmPassword"
-            label={labels.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 }}>
-              {labels.success}
-            </Alert>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {formik.isSubmitting ? labels.submittingButton : labels.submitButton}
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default ChangePasswordForm;