From 70c35be1b775446a0843844c92404137053c51c8 Mon Sep 17 00:00:00 2001
From: Adam Prins <AdamPrins@cmail.carleton.ca>
Date: Wed, 18 Aug 2021 13:03:39 -0400
Subject: [PATCH 1/5] reformat fieldRequirements

the object is now formatted using yup
createValidationSchema can create a schema from the passed keys
custom validation schemas can be created with getRequirment and schemaToValidation
---
 frontend/src/utilities/fieldRequirements.js | 145 ++++++++++++--------
 1 file changed, 90 insertions(+), 55 deletions(-)

diff --git a/frontend/src/utilities/fieldRequirements.js b/frontend/src/utilities/fieldRequirements.js
index f945a1481d..4b60b9aca8 100644
--- a/frontend/src/utilities/fieldRequirements.js
+++ b/frontend/src/utilities/fieldRequirements.js
@@ -1,58 +1,93 @@
-import { ref } from 'yup'
+import { array, number, object, ref, string } from 'yup'
 import { t } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import {
+  array as arrayProp,
+  object as objectProp,
+  string as stringProp,
+} from 'prop-types'
 
-export const fieldRequirements = {
-  email: {
-    required: { message: t`Email cannot be empty` },
-    email: { message: t`Invalid email` },
-  },
-  displayName: { required: { message: t`Display name cannot be empty` } },
-  password: {
-    required: { message: t`Password cannot be empty` },
-    min: {
-      minLength: 12,
-      message: t`Password must be at least 12 characters long`,
-    },
-  },
-  confirmPassword: {
-    required: { message: t`Password confirmation cannot be empty` },
-    oneOf: { types: [ref('password')], message: t`Passwords must match` },
-  },
-  lang: {
-    required: { message: t`Please choose your preferred language` },
-    oneOf: { types: ['ENGLISH', 'FRENCH'], message: '' },
-  },
-  twoFactorCode: {
-    typeError: { message: t`Verification code must only contains numbers` },
-    required: { message: t`Code field must not be empty` },
-  },
-  domainUrl: {
-    required: { message: t`Domain url field must not be empty` },
-  },
-  phoneNumber: {
-    matches: {
-      message: t`Phone number must be a valid phone number that is 10-15 digits long`,
-    },
-    required: { message: t`Phone number field must not be empty` },
-  },
-  acronym: {
-    matches: {
-      regex: /^[A-Z]+(?:_[A-Z]+)*$/gm,
-      message: t`Acronyms can only use upper case letters and underscores`,
-    },
-    max: {
-      maxLength: 50,
-      message: t`Acronyms must be at most 50 characters`,
-    },
-  },
-  field: {
-    required: { message: t`This field cannot be empty` },
-  },
-  selector: {
-    required: { message: t`Selector cannot be empty` },
-    matches: {
-      regex: /^([\S]+)([.]_domainkey)$/gm,
-      message: t`Selector must be string ending in '._domainkey'`,
-    },
-  },
+const getSchema = () => {
+  return {
+    email: string()
+      .required(i18n._(t`Email cannot be empty`))
+      .email(i18n._(t`Invalid email`)),
+    confirmEmail: string()
+      .required(i18n._(t`Email cannot be empty`))
+      .oneOf([ref('userName')], t`User email does not match`),
+    displayName: string().required(i18n._(t`Display name cannot be empty`)),
+    password: string()
+      .required(i18n._(t`Password cannot be empty`))
+      .min(12, i18n._(t`Password must be at least 12 characters long`)),
+    passwordSignIn: string().required(i18n._(t`Password cannot be empty`)),
+    confirmPassword: string()
+      .required(i18n._(t`Password confirmation cannot be empty`))
+      .oneOf([ref('password')], t`Passwords must match`),
+    currentPassword: string().required(
+      i18n._(t`Please enter your current password.`),
+    ),
+    lang: string()
+      .required(i18n._(t`Please choose your preferred language`))
+      .oneOf(['ENGLISH', 'FRENCH'], ''),
+    twoFactorCode: number()
+      .typeError(i18n._(t`Verification code must only contains numbers`))
+      .required(i18n._(t`Code field must not be empty`)),
+    domainUrl: string().required(i18n._(t`Domain url field must not be empty`)),
+    phoneNumber: string()
+      .required(i18n._(t`Phone number field must not be empty`))
+      .matches(
+        /^[1-9]\d{9,14}$/,
+        i18n._(
+          t`Phone number must be a valid phone number that is 10-15 digits long`,
+        ),
+      ),
+    acronym: string()
+      .matches(
+        /^[A-Z]+(?:_[A-Z]+)*$/gm,
+        i18n._(t`Acronyms can only use upper case letters and underscores`),
+      )
+      .max(50, i18n._(t`Acronyms must be at most 50 characters`)),
+    field: string().required(i18n._(t`This field cannot be empty`)),
+    selectors: array().of(
+      string()
+        .required(i18n._(t`Selector cannot be empty`))
+        .matches(
+          /^([\S]+)([.]_domainkey)$/gm,
+          i18n._(t`Selector must be string ending in '._domainkey'`),
+        ),
+    ),
+  }
+}
+
+const filterSchema = (keyArray) => {
+  const schema = getSchema()
+
+  return keyArray.reduce((selectedSchema, currentKey) => {
+    selectedSchema[currentKey] = schema[currentKey]
+    return selectedSchema
+  }, {})
+}
+
+export const getRequirment = (key) => {
+  return getSchema()[key]
+}
+
+export const schemaToValidation = (schema) => {
+  return object().shape(schema)
+}
+
+export const createValidationSchema = (keyArray) => {
+  return schemaToValidation(filterSchema(keyArray))
+}
+
+getRequirment.propTypes = {
+  keyArray: stringProp.isRequired,
+}
+
+schemaToValidation.propTypes = {
+  schema: objectProp.isRequired,
+}
+
+createValidationSchema.propTypes = {
+  keyArray: arrayProp.isRequired,
 }

From 9a5977131c5fa311b0b002b926cb5a4a5b78e275 Mon Sep 17 00:00:00 2001
From: Adam Prins <AdamPrins@cmail.carleton.ca>
Date: Wed, 18 Aug 2021 13:05:17 -0400
Subject: [PATCH 2/5] updates code to use new fieldRequirments

---
 frontend/src/admin/AdminDomains.js            | 23 +-------
 frontend/src/admin/OrganizationInformation.js | 29 ++++-----
 frontend/src/admin/UserListModal.js           | 29 ++++-----
 frontend/src/auth/CreateUserPage.js           | 36 +++--------
 frontend/src/auth/SignInPage.js               | 16 +++--
 .../src/auth/TwoFactorAuthenticatePage.js     | 11 +---
 .../CreateOrganizationPage.js                 | 59 +++++++------------
 frontend/src/domains/ScanDomain.js            | 18 ++----
 .../src/domains/__tests__/ScanDomain.test.js  |  8 +--
 frontend/src/user/EditableUserDisplayName.js  | 12 +---
 frontend/src/user/EditableUserEmail.js        | 12 +---
 frontend/src/user/EditableUserLanguage.js     | 12 +---
 frontend/src/user/EditableUserPassword.js     | 28 ++-------
 frontend/src/user/EditableUserPhoneNumber.js  | 25 +-------
 frontend/src/user/PhoneNumberField.js         | 12 +---
 frontend/src/user/UserPage.js                 | 17 ++----
 16 files changed, 92 insertions(+), 255 deletions(-)

diff --git a/frontend/src/admin/AdminDomains.js b/frontend/src/admin/AdminDomains.js
index e994fc6407..c4e53adb4f 100644
--- a/frontend/src/admin/AdminDomains.js
+++ b/frontend/src/admin/AdminDomains.js
@@ -25,11 +25,6 @@ import { AddIcon, EditIcon, MinusIcon, PlusSquareIcon } from '@chakra-ui/icons'
 import { useMutation } from '@apollo/client'
 import { useLingui } from '@lingui/react'
 import { number, string } from 'prop-types'
-import {
-  array as yupArray,
-  object as yupObject,
-  string as yupString,
-} from 'yup'
 
 import { AdminDomainModal } from './AdminDomainModal'
 import { AdminDomianCard } from './AdminDomianCard'
@@ -39,7 +34,7 @@ import { LoadingMessage } from '../components/LoadingMessage'
 import { ErrorFallbackMessage } from '../components/ErrorFallbackMessage'
 import { RelayPaginationControls } from '../components/RelayPaginationControls'
 import { useDebouncedFunction } from '../utilities/useDebouncedFunction'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { usePaginatedCollection } from '../utilities/usePaginatedCollection'
 import { PAGINATED_ORG_DOMAINS_ADMIN_PAGE as FORWARD } from '../graphql/queries'
 import { REMOVE_DOMAIN } from '../graphql/mutations'
@@ -141,20 +136,6 @@ export function AdminDomains({ orgSlug, domainsPerPage, orgId }) {
     },
   )
 
-  const updatedDomainValidationSchema = yupObject().shape({
-    domainUrl: yupString().required(
-      i18n._(fieldRequirements.domainUrl.required.message),
-    ),
-    selectors: yupArray().of(
-      yupString()
-        .required(i18n._(fieldRequirements.selector.required.message))
-        .matches(
-          fieldRequirements.selector.matches.regex,
-          i18n._(fieldRequirements.selector.matches.message),
-        ),
-    ),
-  })
-
   if (error) return <ErrorFallbackMessage error={error} />
 
   const adminDomainList = loading ? (
@@ -279,7 +260,7 @@ export function AdminDomains({ orgSlug, domainsPerPage, orgId }) {
       <AdminDomainModal
         isOpen={updateIsOpen}
         onClose={updateOnClose}
-        validationSchema={updatedDomainValidationSchema}
+        validationSchema={createValidationSchema(['domainUrl', 'selectors'])}
         orgId={orgId}
         orgSlug={orgSlug}
         selectorInputList={selectorInputList}
diff --git a/frontend/src/admin/OrganizationInformation.js b/frontend/src/admin/OrganizationInformation.js
index fce86647d2..1b76e8a52c 100644
--- a/frontend/src/admin/OrganizationInformation.js
+++ b/frontend/src/admin/OrganizationInformation.js
@@ -23,8 +23,6 @@ import { CheckCircleIcon, MinusIcon, EditIcon } from '@chakra-ui/icons'
 import { func, string } from 'prop-types'
 import { useMutation, useQuery } from '@apollo/client'
 import { t, Trans } from '@lingui/macro'
-import { object, string as yupString } from 'yup'
-import { useLingui } from '@lingui/react'
 import { Formik } from 'formik'
 
 import { ORGANIZATION_INFORMATION } from '../graphql/queries'
@@ -32,7 +30,10 @@ import { REMOVE_ORGANIZATION, UPDATE_ORGANIZATION } from '../graphql/mutations'
 import { FormField } from '../components/FormField'
 import { LoadingMessage } from '../components/LoadingMessage'
 import { ErrorFallbackMessage } from '../components/ErrorFallbackMessage'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import {
+  getRequirment,
+  schemaToValidation,
+} from '../utilities/fieldRequirements'
 
 export function OrganizationInformation({
   orgSlug,
@@ -46,7 +47,6 @@ export function OrganizationInformation({
     onClose: onRemovalClose,
   } = useDisclosure()
   const removeOrgBtnRef = useRef()
-  const { i18n } = useLingui()
   const [isEditingOrg, setIsEditingOrg] = useState(false)
 
   const { loading, error, data } = useQuery(ORGANIZATION_INFORMATION, {
@@ -193,21 +193,16 @@ export function OrganizationInformation({
 
   const org = data.findOrganizationBySlug
 
-  const updateOrgValidationSchema = object().shape({
-    acronymEN: yupString().matches(
-      fieldRequirements.acronym.matches.regex,
-      i18n._(fieldRequirements.acronym.matches.message),
-    ),
-    acronymFR: yupString().matches(
-      fieldRequirements.acronym.matches.regex,
-      i18n._(fieldRequirements.acronym.matches.message),
-    ),
+  const updateOrgValidationSchema = schemaToValidation({
+    acronymEN: getRequirment('acronym'),
+    acronymFR: getRequirment('acronym'),
   })
 
-  const removeOrgValidationSchema = object().shape({
-    orgName: yupString()
-      .required(i18n._(fieldRequirements.field.required.message))
-      .matches(org.name, t`Organization name does not match.`),
+  const removeOrgValidationSchema = schemaToValidation({
+    orgName: getRequirment('field').matches(
+      org.name,
+      t`Organization name does not match.`,
+    ),
   })
 
   return (
diff --git a/frontend/src/admin/UserListModal.js b/frontend/src/admin/UserListModal.js
index 1c054258da..af6cefb4f6 100644
--- a/frontend/src/admin/UserListModal.js
+++ b/frontend/src/admin/UserListModal.js
@@ -25,10 +25,9 @@ import { useMutation } from '@apollo/client'
 import { useLingui } from '@lingui/react'
 import { EmailIcon } from '@chakra-ui/icons'
 import { bool, func, string } from 'prop-types'
-import { object as yupObject, string as yupString } from 'yup'
 
 import { UPDATE_USER_ROLE, INVITE_USER_TO_ORG } from '../graphql/mutations'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 
 export function UserListModal({
   isOpen,
@@ -156,13 +155,9 @@ export function UserListModal({
           validateOnBlur={false}
           initialValues={{
             role: editingUserRole,
-            userName: editingUserName,
+            email: editingUserName,
           }}
-          validationSchema={yupObject().shape({
-            userName: yupString()
-              .required(i18n._(fieldRequirements.email.required.message))
-              .email(i18n._(fieldRequirements.email.email.message)),
-          })}
+          validationSchema={createValidationSchema(['email'])}
           onSubmit={async (values) => {
             // Submit update role mutation
             if (mutation === 'update') {
@@ -170,7 +165,7 @@ export function UserListModal({
                 variables: {
                   orgId: orgId,
                   role: values.role,
-                  userName: values.userName,
+                  userName: values.email,
                 },
               })
             } else if (mutation === 'create') {
@@ -178,7 +173,7 @@ export function UserListModal({
                 variables: {
                   orgId: orgId,
                   requestedRole: values.role,
-                  userName: values.userName,
+                  userName: values.email,
                   preferredLang: 'ENGLISH',
                 },
               })
@@ -204,15 +199,13 @@ export function UserListModal({
                     <Text>{editingUserName}</Text>
                   </Stack>
                 ) : (
-                  <Field id="userName" name="userName">
+                  <Field id="email" name="email">
                     {({ field, form }) => (
                       <FormControl
-                        isInvalid={
-                          form.errors.userName && form.touched.userName
-                        }
+                        isInvalid={form.errors.email && form.touched.email}
                       >
                         <Stack isInline align="center">
-                          <FormLabel htmlFor="userName" fontWeight="bold">
+                          <FormLabel htmlFor="email" fontWeight="bold">
                             <Trans>User:</Trans>
                           </FormLabel>
                           <InputGroup>
@@ -222,15 +215,13 @@ export function UserListModal({
                             <Input
                               mb="2"
                               {...field}
-                              id="userName"
+                              id="email"
                               placeholder={i18n._(t`user email`)}
                               ref={initialFocusRef}
                             />
                           </InputGroup>
                         </Stack>
-                        <FormErrorMessage>
-                          {form.errors.userName}
-                        </FormErrorMessage>
+                        <FormErrorMessage>{form.errors.email}</FormErrorMessage>
                       </FormControl>
                     )}
                   </Field>
diff --git a/frontend/src/auth/CreateUserPage.js b/frontend/src/auth/CreateUserPage.js
index 366f6dca64..e5016e5d32 100644
--- a/frontend/src/auth/CreateUserPage.js
+++ b/frontend/src/auth/CreateUserPage.js
@@ -9,11 +9,9 @@ import {
   useToast,
 } from '@chakra-ui/react'
 import { useMutation } from '@apollo/client'
-import { object, string } from 'yup'
 import { Link as RouteLink, useParams } from 'react-router-dom'
 import { Formik } from 'formik'
 import { t, Trans } from '@lingui/macro'
-import { i18n } from '@lingui/core'
 import { ArrowForwardIcon, CheckCircleIcon } from '@chakra-ui/icons'
 
 import { LanguageSelect } from './LanguageSelect'
@@ -22,7 +20,7 @@ import { EmailField } from '../components/EmailField'
 import { DisplayNameField } from '../components/DisplayNameField'
 import { PasswordConfirmation } from '../components/PasswordConfirmation'
 import { LoadingMessage } from '../components/LoadingMessage'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { useUserVar } from '../utilities/userState'
 import { activate } from '../utilities/i18n.config'
 import TermsConditionsPage from '../termsConditions/TermsConditionsPage'
@@ -34,30 +32,6 @@ export default function CreateUserPage() {
   const userOrgToken = useParams().userOrgToken || ''
   const [showVerifyMessage, setShowVerifyMessage] = useState(false)
 
-  const validationSchema = object().shape({
-    email: string()
-      .required(i18n._(fieldRequirements.email.required.message))
-      .email(i18n._(fieldRequirements.email.email.message)),
-    displayName: string().required(
-      i18n._(fieldRequirements.displayName.required.message),
-    ),
-    password: string()
-      .required(i18n._(fieldRequirements.password.required.message))
-      .min(
-        fieldRequirements.password.min.minLength,
-        i18n._(fieldRequirements.password.min.message),
-      ),
-    confirmPassword: string()
-      .required(i18n._(fieldRequirements.confirmPassword.required.message))
-      .oneOf(
-        fieldRequirements.confirmPassword.oneOf.types,
-        i18n._(fieldRequirements.confirmPassword.oneOf.message),
-      ),
-    lang: string()
-      .required(i18n._(fieldRequirements.lang.required.message))
-      .oneOf(fieldRequirements.lang.oneOf.types),
-  })
-
   const [signUp, { loading }] = useMutation(SIGN_UP, {
     onError(error) {
       toast({
@@ -159,7 +133,13 @@ export default function CreateUserPage() {
   return (
     <Box px="4" mx="auto" overflow="hidden">
       <Formik
-        validationSchema={validationSchema}
+        validationSchema={createValidationSchema([
+          'email',
+          'displayName',
+          'password',
+          'confirmPassword',
+          'lang',
+        ])}
         initialValues={{
           email: '',
           displayName: '',
diff --git a/frontend/src/auth/SignInPage.js b/frontend/src/auth/SignInPage.js
index aa2f30a3fe..075b6b8c4b 100644
--- a/frontend/src/auth/SignInPage.js
+++ b/frontend/src/auth/SignInPage.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import { t, Trans } from '@lingui/macro'
-import { object, string } from 'yup'
 import {
   Box,
   Button,
@@ -21,7 +20,10 @@ import { PasswordField } from '../components/PasswordField'
 import { LoadingMessage } from '../components/LoadingMessage'
 import { useUserVar } from '../utilities/userState'
 import { activate } from '../utilities/i18n.config'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import {
+  getRequirment,
+  schemaToValidation,
+} from '../utilities/fieldRequirements'
 import { SIGN_IN } from '../graphql/mutations'
 
 export default function SignInPage() {
@@ -33,13 +35,9 @@ export default function SignInPage() {
 
   const { from } = location.state || { from: { pathname: '/' } }
 
-  const validationSchema = object().shape({
-    password: string().required(
-      i18n._(fieldRequirements.password.required.message),
-    ),
-    email: string()
-      .required(i18n._(fieldRequirements.email.required.message))
-      .email(i18n._(fieldRequirements.email.email.message)),
+  const validationSchema = schemaToValidation({
+    email: getRequirment('email'),
+    password: getRequirment('passwordSignIn'),
   })
 
   const [signIn, { loading }] = useMutation(SIGN_IN, {
diff --git a/frontend/src/auth/TwoFactorAuthenticatePage.js b/frontend/src/auth/TwoFactorAuthenticatePage.js
index 9c61665697..a3f35067ca 100644
--- a/frontend/src/auth/TwoFactorAuthenticatePage.js
+++ b/frontend/src/auth/TwoFactorAuthenticatePage.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { t, Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { number, object } from 'yup'
 import { Box, Button, Heading, Stack, useToast } from '@chakra-ui/react'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
@@ -12,7 +11,7 @@ import { AuthenticateField } from '../components/AuthenticateField'
 import { ErrorFallbackMessage } from '../components/ErrorFallbackMessage'
 import { activate } from '../utilities/i18n.config'
 import { useUserVar } from '../utilities/userState'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { AUTHENTICATE } from '../graphql/mutations'
 
 export default function TwoFactorAuthenticatePage() {
@@ -24,12 +23,6 @@ export default function TwoFactorAuthenticatePage() {
   const { sendMethod, authenticateToken } = useParams()
   const { from } = location.state || { from: { pathname: '/' } }
 
-  const validationSchema = object().shape({
-    twoFactorCode: number()
-      .typeError(i18n._(fieldRequirements.twoFactorCode.typeError))
-      .required(i18n._(fieldRequirements.twoFactorCode.required)),
-  })
-
   const [authenticate, { loading, error }] = useMutation(AUTHENTICATE, {
     onError() {
       toast({
@@ -99,7 +92,7 @@ export default function TwoFactorAuthenticatePage() {
   return (
     <Box w="100%">
       <Formik
-        validationSchema={validationSchema}
+        validationSchema={createValidationSchema(['twoFactorCode'])}
         initialValues={{
           twoFactorCode: '',
           authenticateToken: authenticateToken,
diff --git a/frontend/src/createOrganization/CreateOrganizationPage.js b/frontend/src/createOrganization/CreateOrganizationPage.js
index 001fa8db96..62ef18e5be 100644
--- a/frontend/src/createOrganization/CreateOrganizationPage.js
+++ b/frontend/src/createOrganization/CreateOrganizationPage.js
@@ -12,14 +12,16 @@ import { t, Trans } from '@lingui/macro'
 import { useMutation } from '@apollo/client'
 import { Formik } from 'formik'
 import { Link as RouteLink, useHistory } from 'react-router-dom'
-import { object, string } from 'yup'
 import { useLingui } from '@lingui/react'
 
 import { CreateOrganizationField } from './CreateOrganizationField'
 
 import { InfoButton, InfoBox, InfoPanel } from '../components/InfoPanel'
 import { LoadingMessage } from '../components/LoadingMessage'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import {
+  getRequirment,
+  schemaToValidation,
+} from '../utilities/fieldRequirements'
 import { CREATE_ORGANIZATION } from '../graphql/mutations'
 
 export default function CreateOrganizationPage() {
@@ -31,43 +33,22 @@ export default function CreateOrganizationPage() {
     isVisible: false,
   })
 
-  const validationSchema = object().shape({
-    nameEN: string().required(i18n._(fieldRequirements.field.required.message)),
-    nameFR: string().required(i18n._(fieldRequirements.field.required.message)),
-    acronymEN: string()
-      .matches(
-        fieldRequirements.acronym.matches.regex,
-        i18n._(fieldRequirements.acronym.matches.message),
-      )
-      .max(
-        fieldRequirements.acronym.max.maxLength,
-        i18n._(fieldRequirements.acronym.max.message),
-      )
-      .required(i18n._(fieldRequirements.field.required.message)),
-    acronymFR: string()
-      .matches(
-        fieldRequirements.acronym.matches.regex,
-        i18n._(fieldRequirements.acronym.matches.message),
-      )
-      .max(
-        fieldRequirements.acronym.max.maxLength,
-        i18n._(fieldRequirements.acronym.max.message),
-      )
-      .required(i18n._(fieldRequirements.field.required.message)),
-    cityEN: string().required(i18n._(fieldRequirements.field.required.message)),
-    cityFR: string().required(i18n._(fieldRequirements.field.required.message)),
-    provinceEN: string().required(
-      i18n._(fieldRequirements.field.required.message),
-    ),
-    provinceFR: string().required(
-      i18n._(fieldRequirements.field.required.message),
-    ),
-    countryEN: string().required(
-      i18n._(fieldRequirements.field.required.message),
-    ),
-    countryFR: string().required(
-      i18n._(fieldRequirements.field.required.message),
-    ),
+  const fieldRequirement = getRequirment('field')
+  const acronymRequirement = getRequirment('acronym').required(
+    i18n._(t`This field cannot be empty`),
+  )
+
+  const validationSchema = schemaToValidation({
+    nameEN: fieldRequirement,
+    nameFR: fieldRequirement,
+    acronymEN: acronymRequirement,
+    acronymFR: acronymRequirement,
+    cityEN: fieldRequirement,
+    cityFR: fieldRequirement,
+    provinceEN: fieldRequirement,
+    provinceFR: fieldRequirement,
+    countryEN: fieldRequirement,
+    countryFR: fieldRequirement,
   })
 
   const [createOrganization, { loading }] = useMutation(CREATE_ORGANIZATION, {
diff --git a/frontend/src/domains/ScanDomain.js b/frontend/src/domains/ScanDomain.js
index 8482e7fe22..523dff3542 100644
--- a/frontend/src/domains/ScanDomain.js
+++ b/frontend/src/domains/ScanDomain.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import { t, Trans } from '@lingui/macro'
-import { i18n } from '@lingui/core'
 import { Formik } from 'formik'
 import {
   Accordion,
@@ -24,7 +23,6 @@ import {
 } from '@chakra-ui/react'
 import { WarningTwoIcon } from '@chakra-ui/icons'
 import { useMutation, useQuery } from '@apollo/client'
-import { object, string } from 'yup'
 
 import { DomainField } from './DomainField'
 import { StatusBadge } from './StatusBadge'
@@ -32,17 +30,12 @@ import { StatusBadge } from './StatusBadge'
 import { ScanCategoryDetails } from '../guidance/ScanCategoryDetails'
 import { LoadingMessage } from '../components/LoadingMessage'
 import { StatusIcon } from '../components/StatusIcon'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { GET_ONE_TIME_SCANS } from '../graphql/queries'
 import { REQUEST_SCAN } from '../graphql/mutations'
 
 export function ScanDomain() {
   const toast = useToast()
-  const validationSchema = object().shape({
-    domain: string().required(
-      i18n._(fieldRequirements.domainUrl.required.message),
-    ),
-  })
 
   const [requestScan, { loading }] = useMutation(REQUEST_SCAN, {
     onError(error) {
@@ -156,12 +149,12 @@ export function ScanDomain() {
   return (
     <Box px="2" mx="auto" overflow="hidden">
       <Formik
-        validationSchema={validationSchema}
-        initialValues={{ domain: '' }}
+        validationSchema={createValidationSchema(['domainURL'])}
+        initialValues={{ domainURL: '' }}
         onSubmit={async (values) =>
           requestScan({
             variables: {
-              domainUrl: values.domain.toLowerCase(),
+              domainUrl: values.domainURL.toLowerCase(),
             },
           })
         }
@@ -182,13 +175,14 @@ export function ScanDomain() {
                 >
                   <Trans>Request a domain to be scanned:</Trans>
                 </Text>
-                <DomainField name="domain" mb="4" />
+                <DomainField name="domainURL" mb="4" />
 
                 <Button
                   w={{ base: '100%', md: '25%' }}
                   variant="primary"
                   isLoading={isSubmitting}
                   type="submit"
+                  name="submitBtn"
                   id="submitBtn"
                   fontSize="lg"
                 >
diff --git a/frontend/src/domains/__tests__/ScanDomain.test.js b/frontend/src/domains/__tests__/ScanDomain.test.js
index 4cb5f3dfae..5fb1adfe67 100644
--- a/frontend/src/domains/__tests__/ScanDomain.test.js
+++ b/frontend/src/domains/__tests__/ScanDomain.test.js
@@ -70,7 +70,7 @@ describe('<ScanDomain />', () => {
         </MockedProvider>,
       )
 
-      const submit = getByRole('button')
+      const submit = getByRole('button', { name: /Scan Domain/i })
       clickOn(submit)
 
       await waitFor(() => {
@@ -103,10 +103,10 @@ describe('<ScanDomain />', () => {
         </MockedProvider>,
       )
 
-      const domain = container.querySelector('#domain')
-      const submit = getByRole('button')
+      const domainURL = container.querySelector('#domainURL')
+      const submit = getByRole('button', { name: /Scan Domain/i })
 
-      fillIn(domain, {
+      fillIn(domainURL, {
         with: values.domain,
       })
 
diff --git a/frontend/src/user/EditableUserDisplayName.js b/frontend/src/user/EditableUserDisplayName.js
index da55ed49cb..22384cf46c 100644
--- a/frontend/src/user/EditableUserDisplayName.js
+++ b/frontend/src/user/EditableUserDisplayName.js
@@ -18,13 +18,11 @@ import {
 import { PersonIcon } from '../theme/Icons'
 import { Formik } from 'formik'
 import { t, Trans } from '@lingui/macro'
-import { i18n } from '@lingui/core'
 import { useMutation } from '@apollo/client'
-import { object, string as yupString } from 'yup'
 import { string } from 'prop-types'
 
 import { DisplayNameField } from '../components/DisplayNameField'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { UPDATE_USER_PROFILE } from '../graphql/mutations'
 
 export function EditableUserDisplayName({ detailValue }) {
@@ -82,12 +80,6 @@ export function EditableUserDisplayName({ detailValue }) {
     },
   )
 
-  const validationSchema = object().shape({
-    displayName: yupString().required(
-      i18n._(fieldRequirements.displayName.required.message),
-    ),
-  })
-
   return (
     <Stack>
       <Heading as="h3" size="md">
@@ -129,7 +121,7 @@ export function EditableUserDisplayName({ detailValue }) {
             initialTouched={{
               displayName: true,
             }}
-            validationSchema={validationSchema}
+            validationSchema={createValidationSchema(['displayName'])}
             onSubmit={async (values) => {
               // Submit update detail mutation
               await updateUserProfile({
diff --git a/frontend/src/user/EditableUserEmail.js b/frontend/src/user/EditableUserEmail.js
index e7c62fcb87..cabb9f84ad 100644
--- a/frontend/src/user/EditableUserEmail.js
+++ b/frontend/src/user/EditableUserEmail.js
@@ -18,12 +18,10 @@ import {
 import { EmailIcon } from '@chakra-ui/icons'
 import { Formik } from 'formik'
 import { t, Trans } from '@lingui/macro'
-import { i18n } from '@lingui/core'
 import { useMutation } from '@apollo/client'
-import { object, string as yupString } from 'yup'
 import { string } from 'prop-types'
 
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { EmailField } from '../components/EmailField'
 import { UPDATE_USER_PROFILE } from '../graphql/mutations'
 
@@ -82,12 +80,6 @@ export function EditableUserEmail({ detailValue }) {
     },
   )
 
-  const validationSchema = object().shape({
-    email: yupString()
-      .required(i18n._(fieldRequirements.email.required.message))
-      .email(i18n._(fieldRequirements.email.email.message)),
-  })
-
   return (
     <Stack>
       <Heading as="h3" size="md">
@@ -124,7 +116,7 @@ export function EditableUserEmail({ detailValue }) {
             initialTouched={{
               email: true,
             }}
-            validationSchema={validationSchema}
+            validationSchema={createValidationSchema(['email'])}
             onSubmit={async (values) => {
               // Submit update detail mutation
               await updateUserProfile({
diff --git a/frontend/src/user/EditableUserLanguage.js b/frontend/src/user/EditableUserLanguage.js
index d0a5932399..e3f4b007dc 100644
--- a/frontend/src/user/EditableUserLanguage.js
+++ b/frontend/src/user/EditableUserLanguage.js
@@ -2,14 +2,12 @@ import React from 'react'
 
 import { Button, Heading, Select, Stack, useToast } from '@chakra-ui/react'
 import { t, Trans } from '@lingui/macro'
-import { i18n } from '@lingui/core'
 import { Field, Formik } from 'formik'
 import { useMutation } from '@apollo/client'
-import { object, string as yupString } from 'yup'
 import { string } from 'prop-types'
 
 import { UPDATE_USER_PROFILE } from '../graphql/mutations'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 
 export function EditableUserLanguage({ currentLang }) {
   const toast = useToast()
@@ -63,12 +61,6 @@ export function EditableUserLanguage({ currentLang }) {
     },
   )
 
-  const validationSchema = object().shape({
-    lang: yupString()
-      .required(i18n._(fieldRequirements.lang.required.message))
-      .oneOf(fieldRequirements.lang.oneOf.types),
-  })
-
   return (
     <Stack spacing="4">
       <Heading as="h3" size="md">
@@ -78,7 +70,7 @@ export function EditableUserLanguage({ currentLang }) {
       <Formik
         validateOnBlur={false}
         initialValues={{ lang: currentLang }}
-        validationSchema={validationSchema}
+        validationSchema={createValidationSchema(['lang'])}
         onSubmit={async (values) => {
           // Submit update detail mutation
           await updateUserProfile({
diff --git a/frontend/src/user/EditableUserPassword.js b/frontend/src/user/EditableUserPassword.js
index c4ed404a48..457c664319 100644
--- a/frontend/src/user/EditableUserPassword.js
+++ b/frontend/src/user/EditableUserPassword.js
@@ -18,13 +18,11 @@ import {
 import { LockIcon } from '@chakra-ui/icons'
 import { Formik } from 'formik'
 import { t, Trans } from '@lingui/macro'
-import { i18n } from '@lingui/core'
 import { useMutation } from '@apollo/client'
-import { object, string as yupString } from 'yup'
 
 import { PasswordField } from '../components/PasswordField'
 import { PasswordConfirmation } from '../components/PasswordConfirmation'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { UPDATE_USER_PASSWORD } from '../graphql/mutations'
 
 export function EditableUserPassword() {
@@ -85,24 +83,6 @@ export function EditableUserPassword() {
     },
   )
 
-  const validationSchema = object().shape({
-    password: yupString()
-      .required(i18n._(fieldRequirements.password.required.message))
-      .min(
-        fieldRequirements.password.min.minLength,
-        i18n._(fieldRequirements.password.min.message),
-      ),
-    confirmPassword: yupString()
-      .required(i18n._(fieldRequirements.confirmPassword.required.message))
-      .oneOf(
-        fieldRequirements.confirmPassword.oneOf.types,
-        i18n._(fieldRequirements.confirmPassword.oneOf.message),
-      ),
-    currentPassword: yupString().required(
-      t`Please enter your current password.`,
-    ),
-  })
-
   return (
     <Stack>
       <Heading as="h3" size="md">
@@ -141,7 +121,11 @@ export function EditableUserPassword() {
             initialTouched={{
               currentPassword: true,
             }}
-            validationSchema={validationSchema}
+            validationSchema={createValidationSchema([
+              'password',
+              'confirmPassword',
+              'currentPassword',
+            ])}
             onSubmit={async (values) => {
               // Submit update detail mutation
               await updateUserPassword({
diff --git a/frontend/src/user/EditableUserPhoneNumber.js b/frontend/src/user/EditableUserPhoneNumber.js
index 0bbf23006d..d24c261986 100644
--- a/frontend/src/user/EditableUserPhoneNumber.js
+++ b/frontend/src/user/EditableUserPhoneNumber.js
@@ -18,15 +18,13 @@ import {
 import { PhoneIcon } from '@chakra-ui/icons'
 import { Formik } from 'formik'
 import { t, Trans } from '@lingui/macro'
-import { i18n } from '@lingui/core'
 import { useMutation } from '@apollo/client'
-import { number, object, string as yupString } from 'yup'
 import { string } from 'prop-types'
 
 import { PhoneNumberField } from './PhoneNumberField'
 
 import { AuthenticateField } from '../components/AuthenticateField'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { SET_PHONE_NUMBER, VERIFY_PHONE_NUMBER } from '../graphql/mutations'
 
 export function EditableUserPhoneNumber({ detailValue }) {
@@ -128,23 +126,6 @@ export function EditableUserPhoneNumber({ detailValue }) {
     },
   )
 
-  const PHONE_NUMBER_REGEX = /^[1-9]\d{9,14}$/
-
-  const phoneValidationSchema = object().shape({
-    phoneNumber: yupString()
-      .required(i18n._(fieldRequirements.phoneNumber.required.message))
-      .matches(
-        PHONE_NUMBER_REGEX,
-        i18n._(fieldRequirements.phoneNumber.matches.message),
-      ),
-  })
-
-  const tfaValidationSchema = object().shape({
-    twoFactorCode: number()
-      .typeError(i18n._(fieldRequirements.twoFactorCode.typeError))
-      .required(i18n._(fieldRequirements.twoFactorCode.required)),
-  })
-
   const setPhoneModal = (
     <Modal
       isOpen={isOpen}
@@ -160,7 +141,7 @@ export function EditableUserPhoneNumber({ detailValue }) {
           initialValues={{
             phoneNumber: '',
           }}
-          validationSchema={phoneValidationSchema}
+          validationSchema={createValidationSchema(['phoneNumber'])}
           onSubmit={async (values) => {
             // Submit update detail mutation
             await setPhoneNumber({
@@ -227,7 +208,7 @@ export function EditableUserPhoneNumber({ detailValue }) {
           initialValues={{
             twoFactorCode: '',
           }}
-          validationSchema={tfaValidationSchema}
+          validationSchema={createValidationSchema(['twoFactorCode'])}
           onSubmit={async (values) => {
             // Submit update detail mutation
             await verifyPhoneNumber({
diff --git a/frontend/src/user/PhoneNumberField.js b/frontend/src/user/PhoneNumberField.js
index 0698aab117..13ecb18730 100644
--- a/frontend/src/user/PhoneNumberField.js
+++ b/frontend/src/user/PhoneNumberField.js
@@ -1,27 +1,17 @@
 import React from 'react'
 import { lazyWithRetry } from '../utilities/lazyWithRetry'
 import { string } from 'prop-types'
-import { useLingui } from '@lingui/react'
 import { Trans } from '@lingui/macro'
 import { Box, FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react'
 import { useField, useFormikContext } from 'formik'
-import { fieldRequirements } from '../utilities/fieldRequirements'
 const PhoneInput = lazyWithRetry(() => import('react-phone-input-2'))
 
 export function PhoneNumberField({ name, label }) {
   const [, meta] = useField(name)
   const { values, setFieldValue } = useFormikContext()
-  const { i18n } = useLingui()
 
   const labelText = label === undefined ? <Trans>Phone Number:</Trans> : label
 
-  const errorText =
-    meta.error !== i18n._(fieldRequirements.phoneNumber.matches.message) ? (
-      <FormErrorMessage>{meta.error}</FormErrorMessage>
-    ) : (
-      ''
-    )
-
   return (
     <FormControl isInvalid={meta.error && meta.touched}>
       <FormLabel htmlFor="phoneNumber" fontWeight="bold">
@@ -47,7 +37,7 @@ export function PhoneNumberField({ name, label }) {
         />
       </Box>
 
-      {errorText}
+      <FormErrorMessage>{meta.error}</FormErrorMessage>
     </FormControl>
   )
 }
diff --git a/frontend/src/user/UserPage.js b/frontend/src/user/UserPage.js
index 33cf8fbba5..05eee1ea3c 100644
--- a/frontend/src/user/UserPage.js
+++ b/frontend/src/user/UserPage.js
@@ -23,7 +23,6 @@ import { t, Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Formik } from 'formik'
 import { string } from 'prop-types'
-import { object, string as yupString } from 'yup'
 
 import { EditableUserLanguage } from './EditableUserLanguage'
 import { EditableUserDisplayName } from './EditableUserDisplayName'
@@ -35,7 +34,7 @@ import { EditableUserPhoneNumber } from './EditableUserPhoneNumber'
 import { FormField } from '../components/FormField'
 import { LoadingMessage } from '../components/LoadingMessage'
 import { ErrorFallbackMessage } from '../components/ErrorFallbackMessage'
-import { fieldRequirements } from '../utilities/fieldRequirements'
+import { createValidationSchema } from '../utilities/fieldRequirements'
 import { useUserVar } from '../utilities/userState'
 import {
   SEND_EMAIL_VERIFICATION,
@@ -167,12 +166,6 @@ export default function UserPage() {
     phoneValidated,
   } = queryUserData?.userPage
 
-  const closeAccountValidationSchema = object().shape({
-    userNameConfirm: yupString()
-      .required(i18n._(fieldRequirements.field.required.message))
-      .matches(userName, t`User email does not match.`),
-  })
-
   return (
     <SimpleGrid columns={{ base: 1, md: 2 }} width="100%">
       <Stack py={25} px="4">
@@ -239,12 +232,12 @@ export default function UserPage() {
         <Formik
           validateOnBlur={false}
           initialValues={{
-            userNameConfirm: '',
+            confirmEmail: '',
           }}
           initialTouched={{
-            userNameConfirm: true,
+            confirmEmail: true,
           }}
-          validationSchema={closeAccountValidationSchema}
+          validationSchema={createValidationSchema(['confirmEmail'])}
           onSubmit={async () => {
             await closeAccount({})
             signOut()
@@ -272,7 +265,7 @@ export default function UserPage() {
                   </Text>
 
                   <FormField
-                    name="userNameConfirm"
+                    name="confirmEmail"
                     label={t`User Email`}
                     placeholder={userName}
                   />

From 1c0333f7f9ad8e0c05d68739a5734b4a4f5a7b4d Mon Sep 17 00:00:00 2001
From: Adam Prins <AdamPrins@cmail.carleton.ca>
Date: Fri, 20 Aug 2021 08:30:06 -0400
Subject: [PATCH 3/5] add remained of Field changes

---
 frontend/src/admin/AdminDomainModal.js        | 31 ++--------
 frontend/src/admin/UserListModal.js           | 38 +------------
 .../src/admin/__tests__/AdminDomains.test.js  | 10 ++--
 frontend/src/components/FormField.js          |  2 +-
 .../CreateOrganizationField.js                | 35 +++++-------
 .../__tests__/CreateOrganizationField.test.js |  6 +-
 frontend/src/domains/DomainField.js           | 56 +++++++++----------
 frontend/src/domains/ScanDomain.js            |  8 +--
 .../src/domains/__tests__/DomainField.test.js |  4 +-
 .../src/domains/__tests__/ScanDomain.test.js  |  4 +-
 10 files changed, 66 insertions(+), 128 deletions(-)

diff --git a/frontend/src/admin/AdminDomainModal.js b/frontend/src/admin/AdminDomainModal.js
index f4c1632065..5644a80f99 100644
--- a/frontend/src/admin/AdminDomainModal.js
+++ b/frontend/src/admin/AdminDomainModal.js
@@ -6,7 +6,6 @@ import {
   Button,
   FormControl,
   FormErrorMessage,
-  FormLabel,
   Grid,
   IconButton,
   Input,
@@ -26,6 +25,7 @@ import { array, bool, func, object, string } from 'prop-types'
 import { Field, FieldArray, Formik } from 'formik'
 import { useMutation } from '@apollo/client'
 
+import { DomainField } from '../domains/DomainField'
 import { CREATE_DOMAIN, UPDATE_DOMAIN } from '../graphql/mutations'
 
 export function AdminDomainModal({
@@ -193,30 +193,11 @@ export function AdminDomainModal({
               <ModalCloseButton />
               <ModalBody>
                 <Stack spacing={4} p={25}>
-                  <Field id="domainUrl" name="domainUrl">
-                    {({ field, form }) => (
-                      <FormControl
-                        isInvalid={
-                          form.errors.domainUrl && form.touched.domainUrl
-                        }
-                      >
-                        <FormLabel htmlFor="domainUrl" fontWeight="bold">
-                          <Trans>New Domain URL:</Trans>
-                        </FormLabel>
-
-                        <Input
-                          mb="2"
-                          {...field}
-                          id="domainUrl"
-                          placeholder={i18n._(t`New Domain URL`)}
-                          ref={initialFocusRef}
-                        />
-                        <FormErrorMessage>
-                          {form.errors.domainUrl}
-                        </FormErrorMessage>
-                      </FormControl>
-                    )}
-                  </Field>
+                  <DomainField
+                    name="domainUrl"
+                    label={t`New Domain URL:`}
+                    placeholder={i18n._(t`New Domain URL`)}
+                  />
 
                   <FieldArray
                     name="selectors"
diff --git a/frontend/src/admin/UserListModal.js b/frontend/src/admin/UserListModal.js
index af6cefb4f6..9337bf86db 100644
--- a/frontend/src/admin/UserListModal.js
+++ b/frontend/src/admin/UserListModal.js
@@ -2,7 +2,6 @@ import React, { useRef } from 'react'
 import {
   Button,
   FormLabel,
-  Input,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -13,19 +12,14 @@ import {
   Stack,
   useToast,
   Select,
-  FormControl,
-  FormErrorMessage,
   Text,
-  InputGroup,
-  InputLeftElement,
 } from '@chakra-ui/react'
 import { t, Trans } from '@lingui/macro'
-import { Field, Formik } from 'formik'
+import { Formik } from 'formik'
 import { useMutation } from '@apollo/client'
-import { useLingui } from '@lingui/react'
-import { EmailIcon } from '@chakra-ui/icons'
 import { bool, func, string } from 'prop-types'
 
+import { EmailField } from '../components/EmailField'
 import { UPDATE_USER_ROLE, INVITE_USER_TO_ORG } from '../graphql/mutations'
 import { createValidationSchema } from '../utilities/fieldRequirements'
 
@@ -41,7 +35,6 @@ export function UserListModal({
 }) {
   const toast = useToast()
   const initialFocusRef = useRef()
-  const { i18n } = useLingui()
 
   const [addUser, { loading: _addUserLoading }] = useMutation(
     INVITE_USER_TO_ORG,
@@ -199,32 +192,7 @@ export function UserListModal({
                     <Text>{editingUserName}</Text>
                   </Stack>
                 ) : (
-                  <Field id="email" name="email">
-                    {({ field, form }) => (
-                      <FormControl
-                        isInvalid={form.errors.email && form.touched.email}
-                      >
-                        <Stack isInline align="center">
-                          <FormLabel htmlFor="email" fontWeight="bold">
-                            <Trans>User:</Trans>
-                          </FormLabel>
-                          <InputGroup>
-                            <InputLeftElement aria-hidden="true">
-                              <EmailIcon color="gray.300" />
-                            </InputLeftElement>
-                            <Input
-                              mb="2"
-                              {...field}
-                              id="email"
-                              placeholder={i18n._(t`user email`)}
-                              ref={initialFocusRef}
-                            />
-                          </InputGroup>
-                        </Stack>
-                        <FormErrorMessage>{form.errors.email}</FormErrorMessage>
-                      </FormControl>
-                    )}
-                  </Field>
+                  <EmailField />
                 )}
                 <Stack isInline align="center">
                   <FormLabel htmlFor="role" fontWeight="bold" mt="2">
diff --git a/frontend/src/admin/__tests__/AdminDomains.test.js b/frontend/src/admin/__tests__/AdminDomains.test.js
index aa4e8938c5..9c797ceab2 100644
--- a/frontend/src/admin/__tests__/AdminDomains.test.js
+++ b/frontend/src/admin/__tests__/AdminDomains.test.js
@@ -229,7 +229,7 @@ describe('<AdminDomains />', () => {
         },
       ]
 
-      const { getByText, getByRole, findByRole } = render(
+      const { getByText, getByRole, getByLabelText } = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <UserVarProvider
             userVar={makeVar({
@@ -253,9 +253,7 @@ describe('<AdminDomains />', () => {
         </MockedProvider>,
       )
 
-      const domainUrlInput = await findByRole('textbox', {
-        name: 'Search by Domain URL',
-      })
+      const domainUrlInput = getByLabelText(/Search by Domain URL/)
 
       userEvent.type(domainUrlInput, 'test-domain.gc.ca')
 
@@ -406,7 +404,7 @@ describe('<AdminDomains />', () => {
         queryAllByText,
         findByText,
         queryByText,
-        getByRole,
+        getByLabelText,
       } = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <UserVarProvider
@@ -438,7 +436,7 @@ describe('<AdminDomains />', () => {
         expect(getByText(/Add Domain Details/)).toBeInTheDocument(),
       )
 
-      const domainInput = getByRole('textbox', { name: /New Domain URL/ })
+      const domainInput = getByLabelText(/New Domain URL/)
       expect(domainInput).toBeInTheDocument()
       userEvent.type(domainInput, 'test.domain.gc.ca')
 
diff --git a/frontend/src/components/FormField.js b/frontend/src/components/FormField.js
index 5601b9575a..12bfc1dfa2 100644
--- a/frontend/src/components/FormField.js
+++ b/frontend/src/components/FormField.js
@@ -53,7 +53,7 @@ function FormField({
           )}
         </InputGroup>
 
-        <FormErrorMessage>{meta.error}</FormErrorMessage>
+        <FormErrorMessage mt={0}>{meta.error}</FormErrorMessage>
       </Stack>
     </FormControl>
   )
diff --git a/frontend/src/createOrganization/CreateOrganizationField.js b/frontend/src/createOrganization/CreateOrganizationField.js
index b6fccb9687..1ad449ad55 100644
--- a/frontend/src/createOrganization/CreateOrganizationField.js
+++ b/frontend/src/createOrganization/CreateOrganizationField.js
@@ -1,36 +1,26 @@
 import React from 'react'
 import { func, object, oneOfType, shape, string } from 'prop-types'
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-} from '@chakra-ui/react'
-import { useField } from 'formik'
+
+import { FormField } from '../components/FormField'
 
 function OrganizationCreateField({
   name,
   label,
   language,
   forwardedRef,
+  inputProps,
   ...props
 }) {
-  const [field, meta] = useField(name)
-
   return (
-    <FormControl isInvalid={meta.error && meta.touched} {...props}>
-      <FormLabel htmlFor={name} fontWeight="bold">
-        {label} ({language})
-      </FormLabel>
-      <Input
-        {...field}
-        id={name}
-        name={name}
-        ref={forwardedRef}
-        placeholder={`${label} (${language})`}
-      />
-      <FormErrorMessage>{meta.error}</FormErrorMessage>
-    </FormControl>
+    <FormField
+      name={name}
+      label={`${label} (${language})`}
+      type="string"
+      placeholder={`${label} (${language})`}
+      ref={forwardedRef}
+      inputProps={inputProps}
+      {...props}
+    />
   )
 }
 
@@ -38,6 +28,7 @@ OrganizationCreateField.propTypes = {
   name: string.isRequired,
   label: string,
   language: string,
+  inputProps: object,
   forwardedRef: oneOfType([func, shape({ current: object })]),
 }
 
diff --git a/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js b/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js
index 31791ee9ad..023af6a199 100644
--- a/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js
+++ b/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js
@@ -25,7 +25,7 @@ describe('<CreateOrganizationField />', () => {
         acronym: string().required('sadness'),
       })
 
-      const { getByText, getByRole } = render(
+      const { getByText, getByLabelText } = render(
         <I18nProvider i18n={i18n}>
           <ChakraProvider theme={theme}>
             <Formik
@@ -47,8 +47,8 @@ describe('<CreateOrganizationField />', () => {
         </I18nProvider>,
       )
 
-      const createOrgInput = getByRole('textbox', { name: /Create Org Field/ })
-      fireEvent.blur(createOrgInput)
+      const input = getByLabelText(/Create Org Field/)
+      fireEvent.blur(input)
 
       await waitFor(() => {
         expect(getByText(/sadness/)).toBeInTheDocument()
diff --git a/frontend/src/domains/DomainField.js b/frontend/src/domains/DomainField.js
index e679b85fb3..22df8df567 100644
--- a/frontend/src/domains/DomainField.js
+++ b/frontend/src/domains/DomainField.js
@@ -1,44 +1,44 @@
 import React from 'react'
 import { func, object, oneOfType, shape, string } from 'prop-types'
-import { t, Trans } from '@lingui/macro'
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  InputGroup,
-} from '@chakra-ui/react'
-import { useField } from 'formik'
+import { t } from '@lingui/macro'
 
-function DomainField({ name, label, forwardedRef, ...props }) {
-  const [field, meta] = useField(name)
-
-  const labelText = label === undefined ? <Trans>Domain URL:</Trans> : label
+import { FormField } from '../components/FormField'
 
+function DomainField({
+  name,
+  label,
+  placeholder,
+  forwardedRef,
+  inputProps,
+  ...props
+}) {
   return (
-    <FormControl isInvalid={meta.error && meta.touched} {...props}>
-      <FormLabel htmlFor="domain" fontWeight="bold">
-        {labelText}
-      </FormLabel>
-      <InputGroup>
-        <Input
-          {...field}
-          id="domain"
-          ref={forwardedRef}
-          placeholder={t`Domain URL`}
-        />
-      </InputGroup>
-      <FormErrorMessage>{meta.error}</FormErrorMessage>
-    </FormControl>
+    <FormField
+      name={name}
+      label={label}
+      type="string"
+      placeholder={placeholder}
+      ref={forwardedRef}
+      inputProps={inputProps}
+      {...props}
+    />
   )
 }
 
 DomainField.propTypes = {
-  name: string.isRequired,
+  name: string,
   label: string,
+  placeholder: string,
+  inputProps: object,
   forwardedRef: oneOfType([func, shape({ current: object })]),
 }
 
+DomainField.defaultProps = {
+  name: 'domainURL',
+  label: t`Domain URL:`,
+  placeholder: t`Domain URL`,
+}
+
 const withForwardedRef = React.forwardRef((props, ref) => {
   return <DomainField {...props} forwardedRef={ref} />
 })
diff --git a/frontend/src/domains/ScanDomain.js b/frontend/src/domains/ScanDomain.js
index 523dff3542..0aea352998 100644
--- a/frontend/src/domains/ScanDomain.js
+++ b/frontend/src/domains/ScanDomain.js
@@ -149,12 +149,12 @@ export function ScanDomain() {
   return (
     <Box px="2" mx="auto" overflow="hidden">
       <Formik
-        validationSchema={createValidationSchema(['domainURL'])}
-        initialValues={{ domainURL: '' }}
+        validationSchema={createValidationSchema(['domainUrl'])}
+        initialValues={{ domainUrl: '' }}
         onSubmit={async (values) =>
           requestScan({
             variables: {
-              domainUrl: values.domainURL.toLowerCase(),
+              domainUrl: values.domainUrl.toLowerCase(),
             },
           })
         }
@@ -175,7 +175,7 @@ export function ScanDomain() {
                 >
                   <Trans>Request a domain to be scanned:</Trans>
                 </Text>
-                <DomainField name="domainURL" mb="4" />
+                <DomainField name="domainUrl" mb="4" />
 
                 <Button
                   w={{ base: '100%', md: '25%' }}
diff --git a/frontend/src/domains/__tests__/DomainField.test.js b/frontend/src/domains/__tests__/DomainField.test.js
index 0891d151cb..e862069fbc 100644
--- a/frontend/src/domains/__tests__/DomainField.test.js
+++ b/frontend/src/domains/__tests__/DomainField.test.js
@@ -25,7 +25,7 @@ describe('<DomainField />', () => {
         domain: string().required('sadness'),
       })
 
-      const { getByRole, getByText } = render(
+      const { getByText, getByLabelText } = render(
         <I18nProvider i18n={i18n}>
           <ChakraProvider theme={theme}>
             <Formik
@@ -41,7 +41,7 @@ describe('<DomainField />', () => {
         </I18nProvider>,
       )
 
-      const input = getByRole('textbox', { name: /Domain Field/ })
+      const input = getByLabelText(/Domain Field/)
       fireEvent.blur(input)
 
       await waitFor(() => {
diff --git a/frontend/src/domains/__tests__/ScanDomain.test.js b/frontend/src/domains/__tests__/ScanDomain.test.js
index 5fb1adfe67..f57b470a2b 100644
--- a/frontend/src/domains/__tests__/ScanDomain.test.js
+++ b/frontend/src/domains/__tests__/ScanDomain.test.js
@@ -83,7 +83,7 @@ describe('<ScanDomain />', () => {
 
   describe('given a domain as input', () => {
     it('submits a domain for scan', async () => {
-      const { container, getByRole, queryByText } = render(
+      const { getByRole, queryByText, getByLabelText } = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <UserVarProvider
             userVar={makeVar({
@@ -103,7 +103,7 @@ describe('<ScanDomain />', () => {
         </MockedProvider>,
       )
 
-      const domainURL = container.querySelector('#domainURL')
+      const domainURL = getByLabelText(/Domain URL/)
       const submit = getByRole('button', { name: /Scan Domain/i })
 
       fillIn(domainURL, {

From 25ff257b08fddc99d63f9b1e48377a6d91a38b61 Mon Sep 17 00:00:00 2001
From: Adam Prins <AdamPrins@cmail.carleton.ca>
Date: Fri, 20 Aug 2021 13:41:09 -0400
Subject: [PATCH 4/5] Fix type="string"

---
 frontend/src/admin/__tests__/AdminDomains.test.js      | 10 ++++++----
 .../src/createOrganization/CreateOrganizationField.js  |  1 -
 .../__tests__/CreateOrganizationField.test.js          |  4 ++--
 frontend/src/domains/DomainField.js                    |  1 -
 frontend/src/domains/__tests__/DomainField.test.js     |  4 ++--
 frontend/src/domains/__tests__/ScanDomain.test.js      |  4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/admin/__tests__/AdminDomains.test.js b/frontend/src/admin/__tests__/AdminDomains.test.js
index 9c797ceab2..04f27c7229 100644
--- a/frontend/src/admin/__tests__/AdminDomains.test.js
+++ b/frontend/src/admin/__tests__/AdminDomains.test.js
@@ -229,7 +229,7 @@ describe('<AdminDomains />', () => {
         },
       ]
 
-      const { getByText, getByRole, getByLabelText } = render(
+      const { getByText, getByRole } = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <UserVarProvider
             userVar={makeVar({
@@ -253,7 +253,9 @@ describe('<AdminDomains />', () => {
         </MockedProvider>,
       )
 
-      const domainUrlInput = getByLabelText(/Search by Domain URL/)
+      const domainUrlInput = await getByRole('textbox', {
+        name: 'Search by Domain URL',
+      })
 
       userEvent.type(domainUrlInput, 'test-domain.gc.ca')
 
@@ -404,7 +406,7 @@ describe('<AdminDomains />', () => {
         queryAllByText,
         findByText,
         queryByText,
-        getByLabelText,
+        getByRole,
       } = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <UserVarProvider
@@ -436,7 +438,7 @@ describe('<AdminDomains />', () => {
         expect(getByText(/Add Domain Details/)).toBeInTheDocument(),
       )
 
-      const domainInput = getByLabelText(/New Domain URL/)
+      const domainInput = getByRole('textbox', { name: /New Domain URL/ })
       expect(domainInput).toBeInTheDocument()
       userEvent.type(domainInput, 'test.domain.gc.ca')
 
diff --git a/frontend/src/createOrganization/CreateOrganizationField.js b/frontend/src/createOrganization/CreateOrganizationField.js
index 1ad449ad55..c2e1a1eac9 100644
--- a/frontend/src/createOrganization/CreateOrganizationField.js
+++ b/frontend/src/createOrganization/CreateOrganizationField.js
@@ -15,7 +15,6 @@ function OrganizationCreateField({
     <FormField
       name={name}
       label={`${label} (${language})`}
-      type="string"
       placeholder={`${label} (${language})`}
       ref={forwardedRef}
       inputProps={inputProps}
diff --git a/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js b/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js
index 023af6a199..fcdde00ae5 100644
--- a/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js
+++ b/frontend/src/createOrganization/__tests__/CreateOrganizationField.test.js
@@ -25,7 +25,7 @@ describe('<CreateOrganizationField />', () => {
         acronym: string().required('sadness'),
       })
 
-      const { getByText, getByLabelText } = render(
+      const { getByText, getByRole } = render(
         <I18nProvider i18n={i18n}>
           <ChakraProvider theme={theme}>
             <Formik
@@ -47,7 +47,7 @@ describe('<CreateOrganizationField />', () => {
         </I18nProvider>,
       )
 
-      const input = getByLabelText(/Create Org Field/)
+      const input = getByRole('textbox', { name: /Create Org Field/ })
       fireEvent.blur(input)
 
       await waitFor(() => {
diff --git a/frontend/src/domains/DomainField.js b/frontend/src/domains/DomainField.js
index 22df8df567..f0f86ba0dd 100644
--- a/frontend/src/domains/DomainField.js
+++ b/frontend/src/domains/DomainField.js
@@ -16,7 +16,6 @@ function DomainField({
     <FormField
       name={name}
       label={label}
-      type="string"
       placeholder={placeholder}
       ref={forwardedRef}
       inputProps={inputProps}
diff --git a/frontend/src/domains/__tests__/DomainField.test.js b/frontend/src/domains/__tests__/DomainField.test.js
index e862069fbc..0acfd355bf 100644
--- a/frontend/src/domains/__tests__/DomainField.test.js
+++ b/frontend/src/domains/__tests__/DomainField.test.js
@@ -25,7 +25,7 @@ describe('<DomainField />', () => {
         domain: string().required('sadness'),
       })
 
-      const { getByText, getByLabelText } = render(
+      const { getByText, getByRole } = render(
         <I18nProvider i18n={i18n}>
           <ChakraProvider theme={theme}>
             <Formik
@@ -41,7 +41,7 @@ describe('<DomainField />', () => {
         </I18nProvider>,
       )
 
-      const input = getByLabelText(/Domain Field/)
+      const input = getByRole('textbox', { name: /Domain Field/ })
       fireEvent.blur(input)
 
       await waitFor(() => {
diff --git a/frontend/src/domains/__tests__/ScanDomain.test.js b/frontend/src/domains/__tests__/ScanDomain.test.js
index f57b470a2b..21d697fd7c 100644
--- a/frontend/src/domains/__tests__/ScanDomain.test.js
+++ b/frontend/src/domains/__tests__/ScanDomain.test.js
@@ -83,7 +83,7 @@ describe('<ScanDomain />', () => {
 
   describe('given a domain as input', () => {
     it('submits a domain for scan', async () => {
-      const { getByRole, queryByText, getByLabelText } = render(
+      const { getByRole, queryByText } = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <UserVarProvider
             userVar={makeVar({
@@ -103,7 +103,7 @@ describe('<ScanDomain />', () => {
         </MockedProvider>,
       )
 
-      const domainURL = getByLabelText(/Domain URL/)
+      const domainURL = getByRole('textbox', { name: /Domain URL/ })
       const submit = getByRole('button', { name: /Scan Domain/i })
 
       fillIn(domainURL, {

From 002d2a7293922f19532f0dfdba727838553ba1cb Mon Sep 17 00:00:00 2001
From: Adam Prins <AdamPrins@cmail.carleton.ca>
Date: Fri, 20 Aug 2021 13:45:05 -0400
Subject: [PATCH 5/5] remove await

---
 frontend/src/admin/__tests__/AdminDomains.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/admin/__tests__/AdminDomains.test.js b/frontend/src/admin/__tests__/AdminDomains.test.js
index 04f27c7229..dc78efdc36 100644
--- a/frontend/src/admin/__tests__/AdminDomains.test.js
+++ b/frontend/src/admin/__tests__/AdminDomains.test.js
@@ -253,7 +253,7 @@ describe('<AdminDomains />', () => {
         </MockedProvider>,
       )
 
-      const domainUrlInput = await getByRole('textbox', {
+      const domainUrlInput = getByRole('textbox', {
         name: 'Search by Domain URL',
       })