refactor(create-new-vault): Replace deprecated TextField with FormTextField

ui/components/app/create-new-vault/create-new-vault.js

@@ -1,8 +1,13 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import TextField from '../../ui/text-field';
-import { ButtonVariant, Button, Checkbox } from '../../component-library';
+import {
+  ButtonVariant,
+  Button,
+  Checkbox,
+  FormTextField,
+  TextFieldType,
+} from '../../component-library';
 import SrpInput from '../srp-input';
 import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
 import { useSignOut } from '../../../hooks/identity/useAuthentication';
@@ -102,29 +107,27 @@ export default function CreateNewVault({
     <form className="create-new-vault__form" onSubmit={onImport}>
       <SrpInput onChange={setSeedPhrase} srpText={t('secretRecoveryPhrase')} />
       <div className="create-new-vault__create-password">
-        <TextField
-          data-testid="create-vault-password"
+        <FormTextField
+          inputProps={{ 'data-testid': 'create-vault-password' }}
           id="password"
           label={t('newPassword')}
-          type="password"
+          type={TextFieldType.Password}
           value={password}
           onChange={(event) => onPasswordChange(event.target.value)}
-          error={passwordError}
+          error={Boolean(passwordError)}
+          helpText={passwordError}
           autoComplete="new-password"
-          margin="normal"
-          largeLabel
         />
-        <TextField
-          data-testid="create-vault-confirm-password"
+        <FormTextField
+          inputProps={{ 'data-testid': 'create-vault-confirm-password' }}
           id="confirm-password"
           label={t('confirmPassword')}
-          type="password"
+          type={TextFieldType.Password}
           value={confirmPassword}
           onChange={(event) => onConfirmPasswordChange(event.target.value)}
-          error={confirmPasswordError}
+          error={Boolean(confirmPasswordError)}
+          helpText={confirmPasswordError}
           autoComplete="new-password"
-          margin="normal"
-          largeLabel
         />
       </div>
       {includeTerms ? (