Merge remote-tracking branch 'origin/v3.4' into dev

interface/src/components/inputs/BlockFormControlLabel.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { FormControlLabel, FormControlLabelProps } from '@mui/material';
+
+const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
+  <div>
+    <FormControlLabel {...props} />
+  </div>
+);
+
+export default BlockFormControlLabel;

interface/src/components/inputs/ValidatedPasswordField.tsx

@@ -0,0 +1,36 @@
+import { FC, useState } from 'react';
+
+import { IconButton, InputAdornment } from '@mui/material';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+
+import ValidatedTextField, { ValidatedTextFieldProps } from './ValidatedTextField';
+
+type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
+
+const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ InputProps, ...props }) => {
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+
+  return (
+    <ValidatedTextField
+      {...props}
+      type={showPassword ? 'text' : 'password'}
+      InputProps={{
+        ...InputProps,
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={() => setShowPassword(!showPassword)}
+              edge="end"
+            >
+              {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
+            </IconButton>
+          </InputAdornment>
+        )
+      }}
+    />
+  );
+};
+
+export default ValidatedPasswordField;

interface/src/components/inputs/ValidatedTextField.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { ValidateFieldsError } from 'async-validator';
+
+import { FormHelperText, TextField, TextFieldProps } from '@mui/material';
+
+interface ValidatedFieldProps {
+  fieldErrors?: ValidateFieldsError;
+  name: string;
+}
+
+export type ValidatedTextFieldProps = ValidatedFieldProps & TextFieldProps;
+
+const ValidatedTextField: FC<ValidatedTextFieldProps> = ({ fieldErrors, ...rest }) => {
+  const errors = fieldErrors && fieldErrors[rest.name];
+  const renderErrors = () => errors && errors.map((e, i) => <FormHelperText key={i}>{e.message}</FormHelperText>);
+  return (
+    <>
+      <TextField error={!!errors} {...rest} />
+      {renderErrors()}
+    </>
+  );
+};
+
+export default ValidatedTextField;

interface/src/components/inputs/index.ts

@@ -0,0 +1,3 @@
+export { default as BlockFormControlLabel } from './BlockFormControlLabel';
+export { default as ValidatedPasswordField } from './ValidatedPasswordField';
+export { default as ValidatedTextField } from './ValidatedTextField';