Field requirements (canada-ca#2866)

* 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

* updates code to use new fieldRequirments

* add remained of Field changes

* Fix type="string"

* remove await

Author: EveningStarlight

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"

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}

frontend/src/admin/OrganizationInformation.js

@@ -23,16 +23,17 @@ 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'
 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 (

frontend/src/admin/UserListModal.js

@@ -2,7 +2,6 @@ import React, { useRef } from 'react'
 import {
   Button,
   FormLabel,
-  Input,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -13,22 +12,16 @@ 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 { object as yupObject, string as yupString } from 'yup'
 
+import { EmailField } from '../components/EmailField'
 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,
@@ -42,7 +35,6 @@ export function UserListModal({
 }) {
   const toast = useToast()
   const initialFocusRef = useRef()
-  const { i18n } = useLingui()
 
   const [addUser, { loading: _addUserLoading }] = useMutation(
     INVITE_USER_TO_ORG,
@@ -156,29 +148,25 @@ 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') {
               await updateUserRole({
                 variables: {
                   orgId: orgId,
                   role: values.role,
-                  userName: values.userName,
+                  userName: values.email,
                 },
               })
             } else if (mutation === 'create') {
               await addUser({
                 variables: {
                   orgId: orgId,
                   requestedRole: values.role,
-                  userName: values.userName,
+                  userName: values.email,
                   preferredLang: 'ENGLISH',
                 },
               })
@@ -204,36 +192,7 @@ export function UserListModal({
                     <Text>{editingUserName}</Text>
                   </Stack>
                 ) : (
-                  <Field id="userName" name="userName">
-                    {({ field, form }) => (
-                      <FormControl
-                        isInvalid={
-                          form.errors.userName && form.touched.userName
-                        }
-                      >
-                        <Stack isInline align="center">
-                          <FormLabel htmlFor="userName" fontWeight="bold">
-                            <Trans>User:</Trans>
-                          </FormLabel>
-                          <InputGroup>
-                            <InputLeftElement aria-hidden="true">
-                              <EmailIcon color="gray.300" />
-                            </InputLeftElement>
-                            <Input
-                              mb="2"
-                              {...field}
-                              id="userName"
-                              placeholder={i18n._(t`user email`)}
-                              ref={initialFocusRef}
-                            />
-                          </InputGroup>
-                        </Stack>
-                        <FormErrorMessage>
-                          {form.errors.userName}
-                        </FormErrorMessage>
-                      </FormControl>
-                    )}
-                  </Field>
+                  <EmailField />
                 )}
                 <Stack isInline align="center">
                   <FormLabel htmlFor="role" fontWeight="bold" mt="2">

frontend/src/admin/__tests__/AdminDomains.test.js

@@ -229,7 +229,7 @@ describe('<AdminDomains />', () => {
         },
       ]
 
-      const { getByText, getByRole, findByRole } = render(
+      const { getByText, getByRole } = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <UserVarProvider
             userVar={makeVar({
@@ -253,7 +253,7 @@ describe('<AdminDomains />', () => {
         </MockedProvider>,
       )
 
-      const domainUrlInput = await findByRole('textbox', {
+      const domainUrlInput = getByRole('textbox', {
         name: 'Search by Domain URL',
       })
 

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: '',

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, {