Next round of refactoring done

public/locales/en/common.json

@@ -1,7 +1,10 @@
 {
   "Activate": "Activate",
   "Admin": "Admin",
+  "AnEmailWithPasswordResetLinkHasBeenSent": "An email with a password reset link has been sent.",
   "AnErrorOccurred": "An error occurred",
+  "Application": "Application",
+  "Applications": "Applications",
   "AuditLog": "Audit Logs",
   "AuditLogs": "Audit Logs",
   "BlockedIPAddresses": "Blocked IP addresses",
@@ -13,42 +16,49 @@
   "ConfirmPassword": "Confirm Password",
   "CustomFieldManager": "Custom Field Manager",
   "CustomFields": "Custom Fields",
+  "DisableAuthenticator": "Disable Authenticator",
   "DisplayName": "Display Name",
-  "EntityDisplayName": "Entity Display Name",
   "e-print": "e-print",
   "e-suite": "e-suite",
+  "e-suiteLogo": "e-suite logo",
+  "EntityDisplayName": "Entity Display Name",
   "ErrorLogs": "Error Logs",
   "ExceptionJson": "Exception JSON",
   "ExceptionLogs": "Exception Logs",
+  "FailedToDisableAuthenticator": "Failed to disable authenticator:",
   "Forms": "Forms",
   "FormTemplateManager": "Form Template Manager",
   "Glossaries": "Glossaries",
   "GlossaryManager": "Glossary Manager",
   "Home": "Home",
   "Id": "Id",
-  "Application": "Application",
-  "Message": "Message",
-  "ShowJSON": "Show JSON",
-  "ShowStackTrace": "Show stack trace",
-  "OccuredAt": "Occured At",
   "IPAddress": "IP Address",
   "IPAddressUnblocked": "IP Address '{{ip}}' unblocked.",
   "Loading": "Loading",
+  "LoggingOut": "Logging out",
+  "Message": "Message",
   "Name": "Name",
-  "NumberOfAttempts": "Number Of Attempts",
+  "NewPassword": "New Password",
   "NewValue": "New Value",
+  "NotFound": "Not found",
+  "NumberOfAttempts": "Number Of Attempts",
+  "OccuredAt": "Occured At",
   "OldValue": "Old Value",
   "Password": "Password",
   "PasswordIsRequired": "Password is required",
   "PasswordMinLength": "Password must be at least {{minPasswordLength}} characters",
   "PasswordsMustMatch": "You need to confirm by typing exactly the same as the new password",
   "PressAgainToUnblock": "Press again to unblock",
+  "ResetPassword": "Reset Password",
+  "Save": "Save",
   "Sequence": "Sequence",
   "SequenceManager": "Sequence Manager",
+  "ShowJSON": "Show JSON",
+  "ShowStackTrace": "Show stack trace",
   "SiteManager": "Site Manager",
   "SpecificationManager": "Specification Manager",
-  "StackTrace": "Stack Trace",
   "SsoManager": "Sso Manager",
+  "StackTrace": "Stack Trace",
   "Support": "Support",
   "SupportingData": "Supporting Data",
   "Timing": "Timing",
@@ -56,5 +66,7 @@
   "UnblockedInMinutes": "Unblocked In (Minutes)",
   "UserManager": "User Manager",
   "UserName": "User Name",
+  "UsernameIsRequired": "Username is required",
+  "UsernameMustBeValidEmail": "Username must be a valid email",
   "Users": "Users"
 }

src/img/logo.tsx

@@ -1,15 +1,26 @@
 import { FunctionComponent } from "react";
-import logo from "./E-SUITE_logo.svg"
+import logo from "./E-SUITE_logo.svg";
+import { useTranslation } from "react-i18next";
+import { Namespaces } from "../i18n/i18n";
 
 interface LogoProps {
   className?: string;
-    height? : string
+  height?: string;
-    width? : string
+  width?: string;
-    alt?: string
 }
 
 const Logo: FunctionComponent<LogoProps> = (props: LogoProps) => {
-    return ( <img className={props.className} height={props.height} width={props.width} alt={props.alt} src={logo}/>);
+  const { t } = useTranslation(Namespaces.Common);
-}
+
+  return (
+    <img
+      className={props.className}
+      height={props.height}
+      width={props.width}
+      alt={t("e-suiteLogo") as string}
+      src={logo}
+    />
+  );
+};
 
 export default Logo;

src/modules/errorLogs/components/errorLogsTable.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { Namespaces } from "../../../i18n/i18n";
 
 import ExpandableCell from "../../../components/common/ExpandableCell";
-import { max } from "date-fns";
 
 export default function ErrorLogsTable(
   props: PublishedTableProps<ErrorLog>,

src/modules/frame/components/EmailUserActionDisableTwoFactorAuthentication.tsx

@@ -1,33 +1,28 @@
-import Form, { FormState, FormData } from "../../../components/common/Form";
+import React, { useState } from "react";
-import Joi from "joi";
 import authentication from "../services/authenticationService";
 import { IEmailUserAction } from "../models/IEmailUserAction";
+import { FormData } from "../../../components/common/Form";
 import Button, { ButtonType } from "../../../components/common/Button";
+import { useTranslation } from "react-i18next";
+import { Namespaces } from "../../../i18n/i18n";
 
 export interface EmailUserActionDiableTwoFactorAuthenticationData extends FormData {
   authenticatorDisabled: boolean;
 }
 
-export interface EmailUserActionDiableTwoFactorAuthenticationState extends FormState {
+interface Props {
-    data: EmailUserActionDiableTwoFactorAuthenticationData;
+  emailUserAction: IEmailUserAction;
 }
 
-class EmailUserActionDiableTwoFactorAuthentication extends Form<any, any, EmailUserActionDiableTwoFactorAuthenticationState> {
+const EmailUserActionDiableTwoFactorAuthentication: React.FC<Props> = ({
-    state = {
+  emailUserAction,
-        loaded: true,
+}) => {
-        data: { authenticatorDisabled: false },
+  const { t } = useTranslation<typeof Namespaces.Common>();
-        errors: {},
+  const [authenticatorDisabled, setAuthenticatorDisabled] = useState(false);
-    };
 
-    labelChangePassword = "Disable Authenticator";
+  const LABEL_DISABLE_AUTHENTICATOR = t("DisableAuthenticator");
-
-    schema = {
-        authenticatorDisabled: Joi.boolean(),
-    };
-
-    doSubmit = async () => {
-        const { emailUserAction } = this.props;
 
+  const handleSubmit = async () => {
     const action: IEmailUserAction = {
       email: emailUserAction.email,
       token: emailUserAction.token,
@@ -35,29 +30,34 @@ class EmailUserActionDiableTwoFactorAuthentication extends Form<any, any, EmailU
       emailActionType: emailUserAction.emailActionType,
     };
 
+    try {
       const callResult = await authentication.completeEmailAction(action);
       if (callResult === 1) {
-            let data = { ...this.state.data };
+        setAuthenticatorDisabled(true);
-            data.authenticatorDisabled = true;
+      }
-            this.setState({ data });
+    } catch (error) {
+      console.error(t("FailedToDisableAuthenticator"), error);
     }
   };
 
-    render() {
-        const { authenticatorDisabled } = this.state.data;
-
   if (authenticatorDisabled) {
-            return <div>Your authenticator has been disabled. You can now log in without two factor authentication</div>;
+    return (
+      <div>
+        Your authenticator has been disabled. You can now log in without two
+        factor authentication
+      </div>
+    );
   }
 
   return (
     <>
       <div>Disable two factor authentication</div>
 
-                <Button buttonType={ButtonType.link} onClick={this.doSubmit}>Disable Authenticator</Button>
+      <Button buttonType={ButtonType.link} onClick={handleSubmit}>
+        {LABEL_DISABLE_AUTHENTICATOR}
+      </Button>
     </>
   );
-    }
+};
-}
 
 export default EmailUserActionDiableTwoFactorAuthentication;

src/modules/frame/components/EmailUserActionPasswordReset.tsx

@@ -1,8 +1,13 @@
-import Joi from "joi";
+import React, { useState } from "react";
-import Form, { businessValidationResult, FormData, FormState } from "../../../components/common/Form";
 import { InputType } from "../../../components/common/Input";
 import { IEmailUserAction } from "../models/IEmailUserAction";
 import authentication from "../services/authenticationService";
+import { FormData } from "../../../components/common/Form";
+import Input from "../../../components/common/Input";
+import Button, { ButtonType } from "../../../components/common/Button";
+import ErrorBlock from "../../../components/common/ErrorBlock";
+import { useTranslation } from "react-i18next";
+import { Namespaces } from "../../../i18n/i18n";
 
 export interface EmailUserActionPasswordResetData extends FormData {
   password: string;
@@ -10,78 +15,74 @@ export interface EmailUserActionPasswordResetData extends FormData {
   passwordChanged: boolean;
 }
 
-export interface EmailUserActionPasswordResetState extends FormState {
+interface Props {
-    data: EmailUserActionPasswordResetData;
+  emailUserAction: IEmailUserAction;
 }
 
-class EmailUserActionPasswordReset extends Form<any, any, EmailUserActionPasswordResetState> {
+const EmailUserActionPasswordReset: React.FC<Props> = ({ emailUserAction }) => {
-    state = {
+  const { t } = useTranslation<typeof Namespaces.Common>();
-        loaded: true,
+  const [password, setPassword] = useState("");
-        passwordMaxLenght: 255,
+  const [confirmPassword, setConfirmPassword] = useState("");
-        data: { password: "", confirmPassword: "", passwordChanged: false },
+  const [passwordChanged, setPasswordChanged] = useState(false);
-        errors: {},
+  const [generalError, setGeneralError] = useState("");
-        hasTwelveCharacters: false,
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
-        hasSpecialCharacter: false,
+  const [hasTwelveCharacters, setHasTwelveCharacters] = useState(false);
-        hasUppercaseLetter: false,
+  const [hasSpecialCharacter, setHasSpecialCharacter] = useState(false);
-        hasLowercaseLetter: false,
+  const [hasUppercaseLetter, setHasUppercaseLetter] = useState(false);
-        hasNumber: false
+  const [hasLowercaseLetter, setHasLowercaseLetter] = useState(false);
+  const [hasNumber, setHasNumber] = useState(false);
+
+  const LABEL_PASSWORD = t("NewPassword");
+  const LABEL_CONFIRM_PASSWORD = t("ConfirmPassword");
+  const LABEL_CHANGE_PASSWORD = t("Save");
+  const PASSWORD_MAX_LENGTH = 255;
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newPassword = e.currentTarget.value;
+    setPassword(newPassword);
+    setConfirmPassword("");
+    setHasNumber(/\d+/g.test(newPassword));
+    setHasLowercaseLetter(/[a-z]/g.test(newPassword));
+    setHasUppercaseLetter(/[A-Z]/g.test(newPassword));
+    setHasSpecialCharacter(
+      /[ ~`! @#$%^&*()_+\-=[\]{};:\\|,.'"<>/?]/.test(newPassword),
+    );
+    setHasTwelveCharacters(newPassword.length >= 12);
   };
 
-    labelPassword = "New Password";
+  const handleConfirmPasswordChange = (
-    labelConfirmPassword = "Confirm Password";
+    e: React.ChangeEvent<HTMLInputElement>,
-    labelChangePassword = "Save";
+  ) => {
-
+    setConfirmPassword(e.currentTarget.value);
-    schema = {
-        password: Joi.string().required().min(12).label(this.labelPassword),
-        confirmPassword: Joi.string()
-            .when("password", {
-                is: "",
-                then: Joi.optional(),
-                otherwise: Joi.valid(Joi.ref("password")).error(() => {
-                    const e = new Error("Passwords must match");
-                    e.name = "confirmPassword";
-                    return e;
-                }),
-            })
-            .label(this.labelConfirmPassword),
-
-        passwordChanged: Joi.boolean(),
   };
 
-    BusinessValidation(): businessValidationResult | null {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        const { password, confirmPassword } = this.state.data;
+    e.preventDefault();
+    const newErrors: { [key: string]: string } = {};
 
-        if (password !== confirmPassword) {
+    const minPasswordLength = 12;
-            return {
+
-                details: [
+    // Validation
-                    {
+    if (!password) {
-                        path: "confirmPassword",
+      newErrors.password = t("PasswordIsRequired");
-                        message: "You need to confirm by typing exactly the same as the new password",
+    } else if (password.length < minPasswordLength) {
-                    },
+      newErrors.password = t("PasswordMinLength", {
-                ],
+        minPasswordLength: minPasswordLength,
-            };
+      });
     }
 
-        return null;
+    if (password && password !== confirmPassword) {
+      newErrors.confirmPassword = t("PasswordsMustMatch");
     }
 
-    handlePasswordChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (Object.keys(newErrors).length > 0) {
-        const { data } = this.state;
+      setErrors(newErrors);
-        data.password = e.currentTarget.value;
+      return;
-        data.confirmPassword = "";
+    }
-        const stateData = this.state;
-        stateData.hasNumber = /\d+/g.test(data.password);
-        stateData.hasLowercaseLetter = /[a-z]/g.test(data.password);
-        stateData.hasUppercaseLetter = /[A-Z]/g.test(data.password);;
-        stateData.hasSpecialCharacter = /[ ~`! @#$%^&*()_+\-=[\]{};:\\|,.'"<>/?]/.test(data.password);
-        stateData.hasTwelveCharacters = data.password.length >= 12;
-        this.setState(stateData);
-    };
 
-    doSubmit = async (buttonName: string) => {
+    setErrors({});
-        const { emailUserAction } = this.props;
-        const { password } = this.state.data;
 
+    try {
       const action: IEmailUserAction = {
         email: emailUserAction.email,
         token: emailUserAction.token,
@@ -89,48 +90,84 @@ class EmailUserActionPasswordReset extends Form<any, any, EmailUserActionPasswor
         emailActionType: emailUserAction.emailActionType,
       };
 
-        try {
       const callResult = await authentication.completeEmailAction(action);
       if (callResult === 1) {
-                let data = { ...this.state.data };
+        setPasswordChanged(true);
-                data.passwordChanged = true;
+        setTimeout(() => {
-                this.setState({ data });
+          window.location.replace("/login");
-                setTimeout(function () {
-                    window.location.replace('/login');
         }, 1000);
       }
-        }
+    } catch (ex: any) {
-        catch (ex: any) {
+      setGeneralError(ex?.message || t("AnErrorOccurred"));
-            this.handleGeneralError(ex);
     }
   };
 
-    render() {
+  const isFormValid =
-        const { passwordChanged, password, confirmPassword } = this.state.data;
+    password !== "" &&
-        const { hasNumber, hasLowercaseLetter, hasSpecialCharacter, hasUppercaseLetter, hasTwelveCharacters, passwordMaxLenght } = this.state;
+    password === confirmPassword &&
-        const isFormValid = password !== "" && password === confirmPassword && hasNumber && hasLowercaseLetter && hasSpecialCharacter && hasUppercaseLetter && hasTwelveCharacters;
+    hasNumber &&
+    hasLowercaseLetter &&
+    hasSpecialCharacter &&
+    hasUppercaseLetter &&
+    hasTwelveCharacters;
+
   if (passwordChanged) {
-            return <div className="alert alert-info">Your password has been reset. Please contact your admin if this wasn't you.</div>;
+    return (
+      <div className="alert alert-info">
+        Your password has been reset. Please contact your admin if this wasn't
+        you.
+      </div>
+    );
   }
 
   return (
     <>
-                <form onSubmit={this.handleSubmit}>
+      <form onSubmit={handleSubmit}>
-                    {this.renderError("_general")}
+        {generalError && <ErrorBlock error={generalError} />}
-                    {this.renderInputWithChangeEvent("password", "", InputType.password, undefined, this.handlePasswordChange, undefined, this.labelPassword, passwordMaxLenght)}
+        <Input
-                    <div className={hasTwelveCharacters ? "checked" : "unchecked"}>Password requires a minimum of 12 characters containing a combination of:</div>
+          name="password"
+          label={LABEL_PASSWORD}
+          type={InputType.password}
+          value={password}
+          onChange={handlePasswordChange}
+          maxLength={PASSWORD_MAX_LENGTH}
+          error={errors.password}
+        />
+        <div className={hasTwelveCharacters ? "checked" : "unchecked"}>
+          Password requires a minimum of 12 characters containing a combination
+          of:
+        </div>
         <ul>
-                        <li className={hasSpecialCharacter ? "checked" : ""}>At least 1 symbol</li>
+          <li className={hasSpecialCharacter ? "checked" : ""}>
+            At least 1 symbol
+          </li>
           <li className={hasNumber ? "checked" : ""}>At least 1 number</li>
-                        <li className={hasLowercaseLetter ? "checked" : ""}>At least 1 lowercase letter</li>
+          <li className={hasLowercaseLetter ? "checked" : ""}>
-                        <li className={hasUppercaseLetter ? "checked" : ""}>At least 1 uppercase letter</li>
+            At least 1 lowercase letter
+          </li>
+          <li className={hasUppercaseLetter ? "checked" : ""}>
+            At least 1 uppercase letter
+          </li>
         </ul>
-                    {this.renderInput("confirmPassword", "", InputType.password, undefined, undefined, this.labelConfirmPassword, passwordMaxLenght)}
+        <Input
-                    {this.renderButton(this.labelChangePassword, "save", undefined, undefined, isFormValid)}
+          name="confirmPassword"
+          label={LABEL_CONFIRM_PASSWORD}
+          type={InputType.password}
+          value={confirmPassword}
+          onChange={handleConfirmPasswordChange}
+          maxLength={PASSWORD_MAX_LENGTH}
+          error={errors.confirmPassword}
+        />
+        <Button
+          buttonType={ButtonType.primary}
+          disabled={!isFormValid}
+          onClick={() => {}}
+        >
+          {LABEL_CHANGE_PASSWORD}
+        </Button>
       </form>
     </>
   );
-    }
+};
-}
 
 export default EmailUserActionPasswordReset;

src/modules/frame/components/ForgotPassword.tsx

@@ -1,58 +1,76 @@
-import Joi from "joi";
+import React, { useState } from "react";
-import Form, { FormData, FormState } from "../../../components/common/Form";
+import { FormData } from "../../../components/common/Form";
 import authentication from "../services/authenticationService";
+import Input, { InputType } from "../../../components/common/Input";
+import Button, { ButtonType } from "../../../components/common/Button";
+import ErrorBlock from "../../../components/common/ErrorBlock";
+import { useTranslation } from "react-i18next";
+import { Namespaces } from "../../../i18n/i18n";
 
 export interface ForgotPasswordData extends FormData {
   username: string;
   emailSent: boolean;
 }
 
-export interface ForgotPasswordtate extends FormState {
+const ForgotPassword: React.FC = () => {
-    data: ForgotPasswordData;
+  const { t } = useTranslation<typeof Namespaces.Common>();
+  const [username, setUsername] = useState("");
+  const [emailSent, setEmailSent] = useState(false);
+  const [generalError, setGeneralError] = useState("");
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const newErrors: { [key: string]: string } = {};
+
+    // Validation
+    if (!username) {
+      newErrors.username = t("UsernameIsRequired");
+    } else if (!validateEmail(username)) {
+      newErrors.username = t("UsernameMustBeValidEmail");
     }
 
-class ForgotPassword extends Form<any, any, ForgotPasswordtate> {
+    if (Object.keys(newErrors).length > 0) {
-    state = {
+      setErrors(newErrors);
-        loaded: true,
+      return;
-        data: { username: "", emailSent: false },
+    }
-        errors: {},
-    };
 
-    schema = {
+    setErrors({});
-        username: Joi.string()
-            .required()
-            .email({ tlds: { allow: false } })
-            .label("Username"),
-        emailSent: Joi.boolean().required(),
-    };
 
-    doSubmit = async (buttonName : string) => {
     try {
-            let { data } = this.state;
+      const response = await authentication.forgotPassword(username);
-
-            const response = await authentication.forgotPassword(data.username);
       if (response) {
-                data.emailSent = true;
+        setEmailSent(true);
-                this.setState({ data });
       }
-        }
+    } catch (ex: any) {
-        catch(ex: any) {
+      setGeneralError(ex?.message || t("AnErrorOccurred"));
-            this.handleGeneralError(ex);
     }
   };
 
-    render() {
-        const { emailSent } = this.state.data;
-
   let content = (
-            <form onSubmit={this.handleSubmit}>
+    <form onSubmit={handleSubmit}>
-                {this.renderError("_general")}
+      {generalError && <ErrorBlock error={generalError} />}
-                {this.renderInput("username", "Username")}
+      <Input
-                {this.renderButton("Reset password")}
+        type={InputType.text}
+        name="username"
+        label={t("Username")}
+        value={username}
+        onChange={(e) => setUsername(e.currentTarget.value)}
+        error={errors.username}
+      />
+      <Button buttonType={ButtonType.primary} onClick={() => {}}>
+        {t("ResetPassword")}
+      </Button>
     </form>
   );
+
   if (emailSent) {
-            content = <div>An email with a password reset link has been sent.</div>;
+    content = <div>{t("AnEmailWithPasswordResetLinkHasBeenSent")}</div>;
   }
 
   return (
@@ -63,7 +81,6 @@ class ForgotPassword extends Form<any, any, ForgotPasswordtate> {
       {content}
     </div>
   );
-    }
+};
-}
 
 export default ForgotPassword;

src/modules/frame/components/LeftMenuItem.tsx

@@ -1,49 +1,45 @@
 import { IconDefinition } from "@fortawesome/pro-thin-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { Component } from "react";
+import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
-import withRouter, { RouterProps } from "../../../utils/withRouter";
 
-interface LeftMenuItemProps extends RouterProps {
+interface LeftMenuItemProps {
   to: string;
   icon?: IconDefinition;
   label: string;
 }
 
-class LOCLeftMenuItem extends Component<LeftMenuItemProps> {
+const LeftMenuItem: React.FC<LeftMenuItemProps> = ({ to, icon, label }) => {
-    isSelected = ():boolean => {
+  const location = useLocation();
-        const { to } = this.props;
-        const { pathname } = this.props.router.location;
-        let isSelected : boolean = false;
-        if (to === '/' ? (pathname === to) : pathname.toLowerCase().startsWith(to)){
-            isSelected = true;
-        }
 
-        return isSelected;
+  const isSelected = (): boolean => {
-    }
+    const pathname = location.pathname;
-
+    return to === "/" ? pathname === to : pathname.toLowerCase().startsWith(to);
-    render() {
+  };
-        const { to, icon, label } = this.props;       
 
   let className = "";
 
-        if (this.isSelected()) {
+  if (isSelected()) {
     className += " leftMenuSelected";
   }
 
   if (icon) {
     return (
-                <div className="LeftMenuItem"><Link className={className} to={to} ><FontAwesomeIcon className="leftMenuItemIcon" icon={icon}/><div className="leftMenuItemLabel">{label}</div></Link></div>
+      <div className="LeftMenuItem">
+        <Link className={className} to={to}>
+          <FontAwesomeIcon className="leftMenuItemIcon" icon={icon} />
+          <div className="leftMenuItemLabel">{label}</div>
+        </Link>
+      </div>
     );
   }
 
   return (
-            <Link className={className} to={to} >{label}</Link>
+    <Link className={className} to={to}>
+      {label}
+    </Link>
   );
-    }
+};
-}
-
-const LeftMenuItem = withRouter(LOCLeftMenuItem);
 
 export default LeftMenuItem;
-export { LOCLeftMenuItem };
+export { LeftMenuItem as LOCLeftMenuItem };

src/modules/frame/components/LeftMenuSubMenu.tsx

@@ -11,47 +11,45 @@ interface LeftMenuSubMenuProps extends RouterProps{
   onClick?: (menuItem: LOCLeftMenuSubMenu) => void;
 }
 
-interface LeftMenuSubMenuState {
+interface LeftMenuSubMenuState {}
 
-}
+class LOCLeftMenuSubMenu extends React.Component<
+  LeftMenuSubMenuProps,
+  LeftMenuSubMenuState
+> {
+  state = {};
 
-class LOCLeftMenuSubMenu extends React.Component<LeftMenuSubMenuProps, LeftMenuSubMenuState> {
+  handleClick = (): void => {
-    state = {  }
-
-    handleClick = (): void =>
-    {
     const { onClick } = this.props;
 
-        if (onClick !== undefined)
+    if (onClick !== undefined) onClick(this);
-            onClick(this);
+  };
-    }
 
   isChildSelected = (child: JSX.Element): boolean => {
     const { to } = child.props;
     const { pathname } = this.props.router.location;
     let isSelected: boolean = false;
-        if (to === '/' ? (pathname === to) : pathname.toLowerCase().startsWith(to)){
+    if (to === "/" ? pathname === to : pathname.toLowerCase().startsWith(to)) {
       isSelected = true;
     }
 
     return isSelected;
-    }
+  };
 
   isAnyChildSelected = (): boolean => {
     const { children } = this.props;
 
     let childIsSelected = false;
-        children.forEach(child => {
+    children.forEach((child) => {
       if (child === false) {
         return;
       }
 
-            if (this.isChildSelected(child))
+      if (this.isChildSelected(child)) childIsSelected = true;
-                childIsSelected = true;
     });
 
     return childIsSelected;
-    }
+  };
 
   render() {
     const { icon, label, openMenu } = this.props;
@@ -64,10 +62,15 @@ class LOCLeftMenuSubMenu extends React.Component<LeftMenuSubMenuProps, LeftMenuS
       className += " leftMenuSubMenuOpen";
     }
 
-        return ( <div className={className} onClick={this.handleClick}><FontAwesomeIcon className="leftMenuItemIcon" icon={icon}/><div className="leftMenuItemLabel">{label}</div></div> );
+    return (
+      <div className={className} onClick={this.handleClick}>
+        <FontAwesomeIcon className="leftMenuItemIcon" icon={icon} />
+        <div className="leftMenuItemLabel">{label}</div>
+      </div>
+    );
   }
 }
 
 const LeftMenuSubMenu = withRouter(LOCLeftMenuSubMenu);
 export default LeftMenuSubMenu;
-export {LOCLeftMenuSubMenu}
+export { LOCLeftMenuSubMenu };

src/modules/frame/components/LoginForm.tsx

@@ -16,9 +16,9 @@ export interface LoginFormStateData extends FormData {
 }
 
 export interface LoginFormState extends FormState {
-    passwordMaxLength: number,
+  passwordMaxLength: number;
-    isInNextStage: boolean,
+  isInNextStage: boolean;
-    emailSent: boolean,
+  emailSent: boolean;
   data: LoginFormStateData;
 }
 
@@ -62,7 +62,7 @@ class LoginForm extends Form<any, any, LoginFormState> {
       stateData.isInNextStage = true;
       this.setState(stateData);
     }
-    }
+  };
 
   handleForgetPassword = async () => {
     try {
@@ -72,8 +72,7 @@ class LoginForm extends Form<any, any, LoginFormState> {
       stateData.data.username = "";
       stateData.data.password = "";
       this.setState(stateData);
-        }
+    } catch (ex: any) {
-        catch (ex: any) {
       this.handleGeneralError(ex);
     }
   };
@@ -89,7 +88,12 @@ class LoginForm extends Form<any, any, LoginFormState> {
 
   private async performLogin(data: LoginFormStateData) {
     try {
-            let result = await authentication.login(data.username, data.password, data.securityCode, data.requestTfaRemoval);
+      let result = await authentication.login(
+        data.username,
+        data.password,
+        data.securityCode,
+        data.requestTfaRemoval,
+      );
 
       switch (result) {
         case 1: //requires tfa
@@ -120,26 +124,82 @@ class LoginForm extends Form<any, any, LoginFormState> {
     const { tfaNeeded, requestTfaRemoval } = this.state.data;
     const { isInNextStage, data, emailSent, passwordMaxLength } = this.state;
     const result = this.schema.username.validate(data.username);
-        const validEmail = (result.error === undefined) ? true : false;
+    const validEmail = result.error === undefined ? true : false;
 
     if (authentication.getCurrentUser()) return <Navigate to="/" />;
 
-        const requestTfaRemovalPanel = <div>An email has been sent to you so that you can regain control of your account.</div>;
+    const requestTfaRemovalPanel = (
+      <div>
+        An email has been sent to you so that you can regain control of your
+        account.
+      </div>
+    );
 
     const loginPanel = (
-            <><form onSubmit={this.handleSubmit}>
+      <>
-                {this.renderInput("username", "", InputType.text, isInNextStage, undefined, "Email", undefined, undefined,"username")}
+        <form onSubmit={this.handleSubmit}>
-                {this.renderInput("password", "", InputType.password, emailSent, undefined, "Password", passwordMaxLength, isInNextStage, "current-password")}
+          {this.renderInput(
-                {!isInNextStage && this.renderButton("Next", "login", this.handleNextClick, "next", validEmail, ButtonType.primary, true)}
+            "username",
-                {isInNextStage && <div className="clickables">
+            "",
-                    {this.renderButton("Login", "login", undefined, "login", !emailSent)}
+            InputType.text,
+            isInNextStage,
+            undefined,
+            "Email",
+            undefined,
+            undefined,
+            "username",
+          )}
+          {this.renderInput(
+            "password",
+            "",
+            InputType.password,
+            emailSent,
+            undefined,
+            "Password",
+            passwordMaxLength,
+            isInNextStage,
+            "current-password",
+          )}
+          {!isInNextStage &&
+            this.renderButton(
+              "Next",
+              "login",
+              this.handleNextClick,
+              "next",
+              validEmail,
+              ButtonType.primary,
+              true,
+            )}
+          {isInNextStage && (
+            <div className="clickables">
+              {this.renderButton(
+                "Login",
+                "login",
+                undefined,
+                "login",
+                !emailSent,
+              )}
             </div>
-                }
+          )}
         </form>
-                {isInNextStage && <div className="forgottenLink">
+        {isInNextStage && (
-                    {this.renderButton("Forgotten Password", "forgot-password", this.handleForgetPassword, "forgot-password", validEmail, ButtonType.secondary, true)}
+          <div className="forgottenLink">
-                </div>}
+            {this.renderButton(
-                {emailSent && <div className="alert alert-info emailSent">If you have a registered account, you will receive an email.</div>}
+              "Forgotten Password",
+              "forgot-password",
+              this.handleForgetPassword,
+              "forgot-password",
+              validEmail,
+              ButtonType.secondary,
+              true,
+            )}
+          </div>
+        )}
+        {emailSent && (
+          <div className="alert alert-info emailSent">
+            If you have a registered account, you will receive an email.
+          </div>
+        )}
         {this.renderError("_general")}
       </>
     );
@@ -157,7 +217,11 @@ class LoginForm extends Form<any, any, LoginFormState> {
 
     return (
       <div>
-                {requestTfaRemoval ? requestTfaRemovalPanel : tfaNeeded ? tfaPanel : loginPanel}
+        {requestTfaRemoval
+          ? requestTfaRemovalPanel
+          : tfaNeeded
+            ? tfaPanel
+            : loginPanel}
       </div>
     );
   }

src/modules/frame/components/Logout.tsx

@@ -1,20 +1,20 @@
-import * as React from "react";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import authentication from "../services/authenticationService";
 
-class Logout extends React.Component {
+const Logout: React.FC = () => {
-    componentDidMount() {
+  const { t } = useTranslation();
+
+  useEffect(() => {
     authentication.logout();
     if (window.__RUNTIME_CONFIG__.EXTERNAL_LOGIN) {
-            window.location.href = "/account/logout"
+      window.location.href = "/account/logout";
-        }
+    } else {
-        else {
+      window.location.href = "/";
-            window.location.href = "/"
-        }
     }
+  }, []);
 
-    render() {
+  return <div>{t("LoggingOut")}</div>;
-        return <div>Logging out</div>;
+};
-    }
-}
 
 export default Logout;

src/modules/frame/components/Mainframe.tsx

@@ -1,23 +1,23 @@
-import * as React from "react";
+import React from "react";
 import TopMenu from "./TopMenu";
 import LeftMenu from "./LeftMenu";
 
 import "../../../Sass/_frame.scss";
 
 type MainFrameProps = {
-  title?: string | undefined | null;
+  title?: string | null;
-  children?: React.ReactNode; // 👈️ type children
+  children?: React.ReactNode;
 };
 
-const Mainframe = (props: MainFrameProps): JSX.Element => {
+const Mainframe: React.FC<MainFrameProps> = ({ title, children }) => {
   return (
     <div className="frame">
-      <TopMenu title={props.title ? props.title : undefined} />
+      <TopMenu title={title} />
       <div className="frame-row">
         <div className="frame-leftMenu">
           <LeftMenu />
         </div>
-        <div className="frame-workArea">{props.children}</div>
+        <div className="frame-workArea">{children}</div>
       </div>
     </div>
   );

src/modules/frame/components/NotFound.tsx

@@ -1,7 +1,10 @@
-import * as React from "react";
+import React from "react";
+import { useTranslation } from "react-i18next";
 
-function NotFound() {
+const NotFound: React.FC = () => {
-    return <h1>Not found</h1>;
+  const { t } = useTranslation();
-}
+
+  return <h1>{t("NotFound")}</h1>;
+};
 
 export default NotFound;

src/modules/frame/components/Switch.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-
-export interface SwitchProps {
-    children: React.ReactNode;
-}
-
-export class Switch extends React.PureComponent<SwitchProps> {
-    render() {
-        const children = React.Children.toArray(this.props.children);
-        
-        let caseComponent: any = children.filter((c:any) => {
-            return c.type === Case && c.props.condition === true;
-        });
-
-        if (!caseComponent || caseComponent.length === 0) {
-            caseComponent = children.filter((c: any) => c.type === Else);
-        }
-
-        return (
-            <React.Fragment>
-                { caseComponent }
-            </React.Fragment>
-        );
-    }
-}
-
-export interface CaseProps {
-    condition: boolean;
-    children: React.ReactNode;
-}
-
-export class Case extends React.PureComponent<CaseProps> {
-    render() {
-        const { condition, children } = this.props;
-
-        return (
-            <React.Fragment>
-                { condition ? children : null }
-            </React.Fragment>
-        );
-    }
-}
-
-export class Else extends React.PureComponent<SwitchProps>
-{
-    render() {
-        return this.props.children;
-    }
-}

src/modules/frame/components/TopMenu.tsx

@@ -12,7 +12,7 @@ import { getCurrentUser } from "../services/authenticationService";
 import { LanguageSelectorMenuItem } from "./LanguageSelector";
 
 export interface TopMenuProps {
-  title?: string;
+  title: string | undefined | null;
 }
 
 function TopMenu(props: TopMenuProps) {
@@ -21,7 +21,7 @@ function TopMenu(props: TopMenuProps) {
   return (
     <Navbar className="navbar bg-body-tertiary px-4 Header">
       <Navbar.Brand href="/">
-        <Logo alt="esuite logo" />
+        <Logo />
       </Navbar.Brand>
       <div className="navbar-left">{props.title}</div>
       <div className="navbar-right">

src/modules/frame/components/loginFrame.tsx

@@ -5,34 +5,24 @@ import "../../../Sass/login.scss";
 import Logo from "../../../img/logo";
 
 interface LoginFrameProps {
-    children?: JSX.Element
+  children?: JSX.Element;
 }
 
-interface LoginFrameState {
+const LoginFrame: React.FC<LoginFrameProps> = ({ children }) => {
-
+  return (
-}
+    <div className="container-fluid vh-100">
-
-class LoginFrame extends React.Component<LoginFrameProps, LoginFrameState> {
-
-    render() {
-        const { children } = this.props;
-
-        return (<div className="container-fluid vh-100">
       <div className="col-md-2">
         <div className="loginFormContainer">
           <div className="col-12 logo">
-                        <Logo alt="esuite logo" height="120px" width="120px" />
+            <Logo height="120px" width="120px" />
-                    </div>
-                    <div className="col-12">
-                        {children}
           </div>
+          <div className="col-12">{children}</div>
         </div>
       </div>
 
       <div className="col-md-8"></div>
-
+    </div>
-        </div>);
+  );
-    }
+};
-}
 
 export default LoginFrame;

src/modules/homepage/Env.tsx

@@ -1,13 +1,23 @@
-import * as React from "react";
+import React from "react";
 
-function EnvPage() {
+const EnvPage: React.FC = () => {
   return (
     <>
       <p>This is the Environment</p>
-            <br></br>
+      <br />
-            <p>window.__RUNTIME_CONFIG__.API_URL = {window.__RUNTIME_CONFIG__.API_URL}</p>
+      <p>
+        window.__RUNTIME_CONFIG__.NODE_ENV ={" "}
+        {window.__RUNTIME_CONFIG__.NODE_ENV}
+      </p>
+      <p>
+        window.__RUNTIME_CONFIG__.API_URL = {window.__RUNTIME_CONFIG__.API_URL}
+      </p>
+      <p>
+        window.__RUNTIME_CONFIG__.EXTERNAL_LOGIN ={" "}
+        {window.__RUNTIME_CONFIG__.EXTERNAL_LOGIN ? "true" : "false"}
+      </p>
     </>
   );
-}
+};
 
 export default EnvPage;

src/modules/homepage/HomePage.tsx

@@ -1,20 +1,24 @@
-import * as React from "react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const HomePage: React.FC = () => {
+  const { t } = useTranslation();
 
-function HomePage() {
   const redirect = () => {
-        window.location.href = '/organisations'
+    window.location.href = "/organisations";
-    }
+  };
 
   return (
     <div className="fluid-container">
-            <h3>Applications</h3>
+      <h3>{t("Applications")}</h3>
       <div className="e-printWidget" onClick={redirect}>
         <div className="e-print">
-                    <div className="thumbnail alert"></div><div className="label">E-print</div>
+          <div className="thumbnail alert"></div>
+          <div className="label">{t("e-print")}</div>
         </div>
       </div>
     </div>
   );
-}
+};
 
 export default HomePage;

src/modules/manager/customfields/customFieldDetails.tsx

@@ -7,11 +7,16 @@ import { InputType } from "../../../components/common/Input";
 import { FormState } from "../../../components/common/Form";
 import withRouter from "../../../utils/withRouter";
 import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
-import customFieldsService, { numberParams, textParams } from "./services/customFieldsService";
+import customFieldsService, {
+  numberParams,
+  textParams,
+} from "./services/customFieldsService";
 import Option from "../../../components/common/option";
 import { GeneralIdRef } from "./../../../utils/GeneralIdRef";
-import { Case, Else, Switch } from "../../frame/components/Switch";
+import {
-import { CustomFieldValue, SystemGlossaries } from "../glossary/services/glossaryService";
+  CustomFieldValue,
+  SystemGlossaries,
+} from "../glossary/services/glossaryService";
 import Loading from "../../../components/common/Loading";
 
 interface CustomFieldDetailsState extends FormState {
@@ -89,7 +94,7 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
               id: Joi.optional(),
               guid: Joi.optional(),
             }).required(),
-                    })
+          }),
         )
         .required(),
     }),
@@ -107,14 +112,22 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
         then: Joi.number(),
         otherwise: Joi.number()
           .min(Joi.ref("minValue"))
-                    .message('"Default Value" must be greater than or equal to "' + this.labelMinValue + '"'),
+          .message(
+            '"Default Value" must be greater than or equal to "' +
+              this.labelMinValue +
+              '"',
+          ),
       })
         .when("maxValue", {
           is: Joi.any().valid(null, ""),
           then: Joi.number(),
           otherwise: Joi.number()
             .max(Joi.ref("maxValue"))
-                        .message('"Default Value" must be less than or equal to "' + this.labelMaxValue + '"'),
+            .message(
+              '"Default Value" must be less than or equal to "' +
+                this.labelMaxValue +
+                '"',
+            ),
         })
         .allow(""),
       otherwise: Joi.string().allow(""),
@@ -124,7 +137,8 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
   doSubmit = async (buttonName: string) => {
     try {
       const { name, fieldType } = this.state.data;
-            let { refElementId, defaultValue, minEntries, maxEntries, required } = this.state.data;
+      let { refElementId, defaultValue, minEntries, maxEntries, required } =
+        this.state.data;
       let numberParams: numberParams | undefined = undefined;
       let textParams: textParams | undefined = undefined;
       let params;
@@ -151,7 +165,8 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
           minEntries = required ? 1 : 0;
           maxEntries = maxEntries === 0 ? undefined : maxEntries;
           defaultValue = "";
-                    refElementIdValue = (refElementId as CustomFieldValue[])[0].value as GeneralIdRef;
+          refElementIdValue = (refElementId as CustomFieldValue[])[0]
+            .value as GeneralIdRef;
           break;
         case "Text":
           minEntries = 1;
@@ -173,7 +188,8 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
           refElementIdValue = undefined;
       }
 
-            const cleanMaxEntries: Number | undefined = maxEntries === "" ? undefined : Number(maxEntries);
+      const cleanMaxEntries: Number | undefined =
+        maxEntries === "" ? undefined : Number(maxEntries);
 
       if (this.isEditMode()) {
         const { customFieldId } = this.props.router.params;
@@ -187,19 +203,28 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
           minEntries,
           cleanMaxEntries,
           refElementIdValue,
-                    params
+          params,
         );
         if (response) {
           toast.info("Custom Field edited");
         }
       } else {
-                const response = await customFieldsService.postField(name, fieldType, defaultValue, minEntries, cleanMaxEntries, refElementIdValue, params);
+        const response = await customFieldsService.postField(
+          name,
+          fieldType,
+          defaultValue,
+          minEntries,
+          cleanMaxEntries,
+          refElementIdValue,
+          params,
+        );
         if (response) {
           toast.info("New Custom Field added");
         }
       }
 
-            if (buttonName === this.labelSave) this.setState({ redirect: "/customfields" });
+      if (buttonName === this.labelSave)
+        this.setState({ redirect: "/customfields" });
     } catch (ex: any) {
       this.handleGeneralError(ex);
     }
@@ -245,13 +270,17 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
             switch (data.fieldType) {
               case "Number":
                 data.required = loadedData.minEntries > 0;
-                                const parameters: numberParams = JSON.parse(loadedData.parameters);
+                const parameters: numberParams = JSON.parse(
+                  loadedData.parameters,
+                );
                 data.minValue = parameters.minValue ?? undefined;
                 data.maxValue = parameters.maxValue ?? undefined;
                 data.step = parameters.step ?? undefined;
                 break;
               case "Text":
-                                const textParameters: textParams = JSON.parse(loadedData.parameters);
+                const textParameters: textParams = JSON.parse(
+                  loadedData.parameters,
+                );
                 data.multiLine = textParameters.multiLine ?? false;
                 break;
             }
@@ -309,43 +338,139 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
         <form onSubmit={this.handleSubmit}>
           {this.renderError("_general")}
           {this.renderInput("name", this.labelName, InputType.text)}
-                    {this.renderSelect("fieldType", this.labelFieldType, fieldTypeOptions)}
+          {this.renderSelect(
-                    <Switch>
+            "fieldType",
-                        <Case condition={this.state.data.fieldType === "Domain"}>
+            this.labelFieldType,
-                            {this.renderInput("required", this.labelRequired, InputType.checkbox)}
+            fieldTypeOptions,
-                            {this.renderInput("maxEntries", this.labelMaxEntries, InputType.number)}
+          )}
-                        </Case>
+          {this.state.data.fieldType === "Domain" && (
-                        <Case condition={this.state.data.fieldType === "Glossary"}>
+            <>
-                            {this.renderGlossaryPicker(true, "refElementId", this.labelRefElementId, 1, SystemGlossaries)}
+              {this.renderInput(
-                            {this.renderInput("required", this.labelRequired, InputType.checkbox)}
+                "required",
-                            {this.renderInput("maxEntries", this.labelMaxEntries, InputType.number)}
+                this.labelRequired,
-                        </Case>
+                InputType.checkbox,
-                        <Case condition={this.state.data.fieldType === "Sequence"}>
+              )}
-                            {this.renderSequencePicker(true, "refElementId", this.labelRefElementId)}
+              {this.renderInput(
-                        </Case>
+                "maxEntries",
-                        <Case condition={this.state.data.fieldType === "FormTemplate"}>
+                this.labelMaxEntries,
-                            <></>
+                InputType.number,
-                        </Case>
+              )}
-                        <Case condition={this.state.data.fieldType === "Text"}>
+            </>
-                            {this.renderInput("multiLine", this.labelMultiLine, InputType.checkbox)}
+          )}
-                            <Case condition={this.state.data.multiLine === true}>{this.renderInputTextarea(true, "defaultValue", this.labelDefaultValue)}</Case>
+          {this.state.data.fieldType === "Glossary" && (
-                            <Case condition={this.state.data.multiLine === false}>
+            <>
-                                {this.renderInput("defaultValue", this.labelDefaultValue, InputType.text)}
+              {this.renderGlossaryPicker(
-                            </Case>
+                true,
-                        </Case>
+                "refElementId",
-                        <Case condition={this.state.data.fieldType === "Number"}>
+                this.labelRefElementId,
-                            {this.renderInput("required", this.labelRequired, InputType.checkbox)}
+                1,
-                            {this.renderInputNumber("minValue", this.labelMinValue, false, undefined, undefined, maxValue, undefined)}
+                SystemGlossaries,
-                            {this.renderInputNumber("maxValue", this.labelMaxValue, false, undefined, minValue, undefined, undefined)}
+              )}
+              {this.renderInput(
+                "required",
+                this.labelRequired,
+                InputType.checkbox,
+              )}
+              {this.renderInput(
+                "maxEntries",
+                this.labelMaxEntries,
+                InputType.number,
+              )}
+            </>
+          )}
+          {this.state.data.fieldType === "Sequence" && (
+            <>
+              {this.renderSequencePicker(
+                true,
+                "refElementId",
+                this.labelRefElementId,
+              )}
+            </>
+          )}
+          {this.state.data.fieldType === "Text" && (
+            <>
+              {this.renderInput(
+                "multiLine",
+                this.labelMultiLine,
+                InputType.checkbox,
+              )}
+              {this.state.data.multiLine === true &&
+                this.renderInputTextarea(
+                  true,
+                  "defaultValue",
+                  this.labelDefaultValue,
+                )}
+              {this.state.data.multiLine === false &&
+                this.renderInput(
+                  "defaultValue",
+                  this.labelDefaultValue,
+                  InputType.text,
+                )}
+            </>
+          )}
+          {this.state.data.fieldType === "Number" && (
+            <>
+              {this.renderInput(
+                "required",
+                this.labelRequired,
+                InputType.checkbox,
+              )}
+              {this.renderInputNumber(
+                "minValue",
+                this.labelMinValue,
+                false,
+                undefined,
+                undefined,
+                maxValue,
+                undefined,
+              )}
+              {this.renderInputNumber(
+                "maxValue",
+                this.labelMaxValue,
+                false,
+                undefined,
+                minValue,
+                undefined,
+                undefined,
+              )}
               {this.renderInput("step", this.labelStep, InputType.number)}
-                            {this.renderInputNumber("defaultValue", this.labelDefaultValue, false, undefined, minValue, maxValue, step)}
+              {this.renderInputNumber(
-                        </Case>
+                "defaultValue",
-                        <Else>
+                this.labelDefaultValue,
-                            {this.renderInput("defaultValue", this.labelDefaultValue, InputType.text)}
+                false,
-                            {this.renderInput("minEntries", this.labelMinEntries, InputType.number)}
+                undefined,
-                            {this.renderInput("maxEntries", this.labelMaxEntries, InputType.number)}
+                minValue,
-                        </Else>
+                maxValue,
-                    </Switch>
+                step,
+              )}
+            </>
+          )}
+          {![
+            "Domain",
+            "Glossary",
+            "Sequence",
+            "FormTemplate",
+            "Text",
+            "Number",
+          ].includes(this.state.data.fieldType) && (
+            <>
+              {this.renderInput(
+                "defaultValue",
+                this.labelDefaultValue,
+                InputType.text,
+              )}
+              {this.renderInput(
+                "minEntries",
+                this.labelMinEntries,
+                InputType.number,
+              )}
+              {this.renderInput(
+                "maxEntries",
+                this.labelMaxEntries,
+                InputType.number,
+              )}
+            </>
+          )}
           {this.isEditMode() && this.renderButton(this.labelApply)}
           {this.renderButton(this.labelSave)}
         </form>