From ed44d40e690342b540abe82e7a24b304c03005cc Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Sun, 4 Jun 2023 14:58:14 -0500
Subject: [PATCH] Create and use helper component `FinalFormField`

---
 client/common/FinalFormField.jsx              |  51 ++++++++
 client/common/FormField.jsx                   |  32 +++++
 .../modules/User/components/AccountForm.jsx   | 111 +++++------------
 client/modules/User/components/LoginForm.jsx  |  57 +++------
 .../User/components/NewPasswordForm.jsx       |  57 +++------
 .../User/components/ResetPasswordForm.jsx     |  32 ++---
 client/modules/User/components/SignupForm.jsx | 113 ++++++------------
 7 files changed, 197 insertions(+), 256 deletions(-)
 create mode 100644 client/common/FinalFormField.jsx
 create mode 100644 client/common/FormField.jsx

diff --git a/client/common/FinalFormField.jsx b/client/common/FinalFormField.jsx
new file mode 100644
index 0000000000..74914cc292
--- /dev/null
+++ b/client/common/FinalFormField.jsx
@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Field } from 'react-final-form';
+import FormField from './FormField';
+
+function FinalFormField({
+  name,
+  validate,
+  validateFields,
+  initialValue,
+  ...rest
+}) {
+  return (
+    <Field
+      name={name}
+      validate={validate}
+      validateFields={validateFields}
+      initialValue={initialValue}
+    >
+      {(field) => (
+        <FormField
+          {...rest}
+          {...field.input}
+          hasError={field.meta.touched && !!field.meta.error}
+          error={field.meta.error}
+        />
+      )}
+    </Field>
+  );
+}
+
+FinalFormField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  validate: PropTypes.func,
+  validateFields: PropTypes.arrayOf(PropTypes.string),
+  initialValue: PropTypes.string
+};
+
+FinalFormField.defaultProps = {
+  autoComplete: undefined,
+  validate: undefined,
+  validateFields: undefined,
+  initialValue: ''
+};
+
+export default FinalFormField;
diff --git a/client/common/FormField.jsx b/client/common/FormField.jsx
new file mode 100644
index 0000000000..c0f5d89767
--- /dev/null
+++ b/client/common/FormField.jsx
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function FormField({ id, label, ariaLabel, hasError, error, ...rest }) {
+  return (
+    <p className="form__field">
+      <label htmlFor={id} className="form__label">
+        {label}
+      </label>
+      <input className="form__input" aria-label={ariaLabel} id={id} {...rest} />
+      {hasError && <span className="form-error">{error}</span>}
+    </p>
+  );
+}
+
+FormField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
+  hasError: PropTypes.bool,
+  error: PropTypes.string
+};
+
+FormField.defaultProps = {
+  autoComplete: null,
+  hasError: false,
+  error: null
+};
+
+export default FormField;
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
index 02578a9ee3..81b7b638ff 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Form, Field } from 'react-final-form';
+import { Form } from 'react-final-form';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import Button from '../../../common/Button';
+import FinalFormField from '../../../common/FinalFormField';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import { updateSettings, initiateVerification } from '../actions';
 import apiClient from '../../../utils/apiClient';
@@ -60,30 +61,17 @@ function AccountForm() {
             handleSubmit(event).then(restart);
           }}
         >
-          <Field
+          <FinalFormField
             name="email"
+            id="email"
+            type="email"
+            autoComplete="email"
+            label={t('AccountForm.Email')}
+            ariaLabel={t('AccountForm.EmailARIA')}
             validate={validateEmail}
             validateFields={[]}
             initialValue={user.email}
-          >
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="email" className="form__label">
-                  {t('AccountForm.Email')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('AccountForm.EmailARIA')}
-                  type="text"
-                  id="email"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
+          />
           {user.verified !== 'verified' && (
             <p className="form__context">
               <span className="form__status">
@@ -101,68 +89,33 @@ function AccountForm() {
               )}
             </p>
           )}
-          <Field
+          <FinalFormField
             name="username"
+            id="username"
+            type="text"
+            autoComplete="username"
+            label={t('AccountForm.UserName')}
+            ariaLabel={t('AccountForm.UserNameARIA')}
             validate={validateUsername}
             validateFields={[]}
             initialValue={user.username}
-          >
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="username" className="form__label">
-                  {t('AccountForm.UserName')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('AccountForm.UserNameARIA')}
-                  type="text"
-                  id="username"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
-          <Field name="currentPassword">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="current password" className="form__label">
-                  {t('AccountForm.CurrentPassword')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('AccountForm.CurrentPasswordARIA')}
-                  type="password"
-                  id="currentPassword"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
-          <Field name="newPassword">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="new password" className="form__label">
-                  {t('AccountForm.NewPassword')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('AccountForm.NewPasswordARIA')}
-                  type="password"
-                  id="newPassword"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
+          />
+          <FinalFormField
+            name="currentPassword"
+            id="currentPassword"
+            type="password"
+            autoComplete="current-password"
+            label={t('AccountForm.CurrentPassword')}
+            ariaLabel={t('AccountForm.CurrentPasswordARIA')}
+          />
+          <FinalFormField
+            name="newPassword"
+            id="newPassword"
+            type="password"
+            autoComplete="new-password"
+            label={t('AccountForm.NewPassword')}
+            ariaLabel={t('AccountForm.NewPasswordARIA')}
+          />
           <Button type="submit" disabled={submitting || invalid}>
             {t('AccountForm.SubmitSaveAllSettings')}
           </Button>
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 0e45fd85c2..2eadf5a7db 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Field } from 'react-final-form';
+import { Form } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import Button from '../../../common/Button';
+import FinalFormField from '../../../common/FinalFormField';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
 
@@ -28,44 +29,22 @@ function LoginForm() {
         modifiedSinceLastSubmit
       }) => (
         <form className="form" onSubmit={handleSubmit}>
-          <Field name="email">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="email" className="form__label">
-                  {t('LoginForm.UsernameOrEmail')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('LoginForm.UsernameOrEmailARIA')}
-                  type="text"
-                  id="email"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
-          <Field name="password">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('LoginForm.Password')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('LoginForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
+          <FinalFormField
+            name="email"
+            id="email"
+            type="text"
+            autoComplete="username"
+            label={t('LoginForm.UsernameOrEmail')}
+            ariaLabel={t('LoginForm.UsernameOrEmailARIA')}
+          />
+          <FinalFormField
+            name="password"
+            id="password"
+            type="password"
+            autoComplete="current-password"
+            label={t('LoginForm.Password')}
+            ariaLabel={t('LoginForm.PasswordARIA')}
+          />
           {submitError && !modifiedSinceLastSubmit && (
             <span className="form-error">{submitError}</span>
           )}
diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.jsx
index 26af961fc5..434b383ce1 100644
--- a/client/modules/User/components/NewPasswordForm.jsx
+++ b/client/modules/User/components/NewPasswordForm.jsx
@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Form, Field } from 'react-final-form';
+import { Form } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import FinalFormField from '../../../common/FinalFormField';
 import { validateNewPassword } from '../../../utils/reduxFormUtils';
 import { updatePassword } from '../actions';
 import Button from '../../../common/Button';
@@ -24,44 +25,22 @@ function NewPasswordForm(props) {
     >
       {({ handleSubmit, submitting, invalid, pristine }) => (
         <form className="form" onSubmit={handleSubmit}>
-          <Field name="password">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('NewPasswordForm.Title')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('NewPasswordForm.TitleARIA')}
-                  type="password"
-                  id="Password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
-          <Field name="confirmPassword">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="confirm password" className="form__label">
-                  {t('NewPasswordForm.ConfirmPassword')}
-                </label>
-                <input
-                  className="form__input"
-                  type="password"
-                  aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
-                  id="confirm password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
+          <FinalFormField
+            name="password"
+            id="Password"
+            type="password"
+            autoComplete="new-password"
+            label={t('NewPasswordForm.Title')}
+            ariaLabel={t('NewPasswordForm.TitleARIA')}
+          />
+          <FinalFormField
+            name="confirmPassword"
+            id="confirmPassword"
+            type="password"
+            autoComplete="new-password"
+            label={t('NewPasswordForm.ConfirmPassword')}
+            ariaLabel={t('NewPasswordForm.ConfirmPasswordARIA')}
+          />
           <Button type="submit" disabled={submitting || invalid || pristine}>
             {t('NewPasswordForm.SubmitSetNewPassword')}
           </Button>
diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx
index f44e7649bd..d1a5b5c32e 100644
--- a/client/modules/User/components/ResetPasswordForm.jsx
+++ b/client/modules/User/components/ResetPasswordForm.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Field } from 'react-final-form';
+import { Form } from 'react-final-form';
 import { useDispatch, useSelector } from 'react-redux';
+import FinalFormField from '../../../common/FinalFormField';
 import { validateResetPassword } from '../../../utils/reduxFormUtils';
 import { initiateResetPassword } from '../actions';
 import Button from '../../../common/Button';
 
-function ResetPasswordForm(props) {
+function ResetPasswordForm() {
   const { t } = useTranslation();
   const resetPasswordInitiate = useSelector(
     (state) => state.user.resetPasswordInitiate
@@ -25,25 +26,14 @@ function ResetPasswordForm(props) {
     >
       {({ handleSubmit, submitting, pristine, invalid }) => (
         <form className="form" onSubmit={handleSubmit}>
-          <Field name="email">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="email" className="form__label">
-                  {t('ResetPasswordForm.Email')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('ResetPasswordForm.EmailARIA')}
-                  type="text"
-                  id="email"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
+          <FinalFormField
+            name="email"
+            id="email"
+            type="email"
+            autoComplete="email"
+            label={t('ResetPasswordForm.Email')}
+            ariaLabel={t('ResetPasswordForm.EmailARIA')}
+          />
           <Button
             type="submit"
             disabled={
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index a01c6dfa91..b7acd7c391 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Field } from 'react-final-form';
+import { Form } from 'react-final-form';
 import { useDispatch } from 'react-redux';
+import FinalFormField from '../../../common/FinalFormField';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import Button from '../../../common/Button';
@@ -47,86 +48,42 @@ function SignupForm() {
     >
       {({ handleSubmit, pristine, submitting, invalid }) => (
         <form className="form" onSubmit={handleSubmit}>
-          <Field
+          <FinalFormField
             name="username"
+            id="username"
+            type="text"
+            autoComplete="username"
+            label={t('SignupForm.Title')}
+            ariaLabel={t('SignupForm.TitleARIA')}
             validate={validateUsername}
             validateFields={[]}
-          >
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="username" className="form__label">
-                  {t('SignupForm.Title')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('SignupForm.TitleARIA')}
-                  type="text"
-                  id="username"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
-          <Field name="email" validate={validateEmail} validateFields={[]}>
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="email" className="form__label">
-                  {t('SignupForm.Email')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('SignupForm.EmailARIA')}
-                  type="text"
-                  id="email"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
-          <Field name="password">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('SignupForm.Password')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('SignupForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
-          <Field name="confirmPassword">
-            {(field) => (
-              <p className="form__field">
-                <label htmlFor="confirm password" className="form__label">
-                  {t('SignupForm.ConfirmPassword')}
-                </label>
-                <input
-                  className="form__input"
-                  type="password"
-                  aria-label={t('SignupForm.ConfirmPasswordARIA')}
-                  id="confirm password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
-            )}
-          </Field>
+          />
+          <FinalFormField
+            name="email"
+            id="email"
+            type="email"
+            autoComplete="email"
+            label={t('SignupForm.Email')}
+            ariaLabel={t('SignupForm.EmailARIA')}
+            validate={validateEmail}
+            validateFields={[]}
+          />
+          <FinalFormField
+            name="password"
+            id="password"
+            type="password"
+            autoComplete="new-password"
+            label={t('SignupForm.Password')}
+            ariaLabel={t('SignupForm.PasswordARIA')}
+          />
+          <FinalFormField
+            name="confirmPassword"
+            id="confirmPassword"
+            type="password"
+            autoComplete="new-password"
+            label={t('SignupForm.ConfirmPassword')}
+            ariaLabel={t('SignupForm.ConfirmPasswordARIA')}
+          />
           <Button type="submit" disabled={submitting || invalid || pristine}>
             {t('SignupForm.SubmitSignup')}
           </Button>