feat: extract and reuse email field as a separate component

src/components/auth/forgottenPassword/ForgottenPasswordForm.tsx

@@ -5,7 +5,7 @@ import { Typography, Grid } from '@mui/material'
 
 import SubmitButton from 'components/common/form/SubmitButton'
 import GenericForm from 'components/common/form/GenericForm'
-import FormTextField from 'components/common/form/FormTextField'
+import EmailField from 'components/common/form/EmailField'
 import { useMutation } from '@tanstack/react-query'
 import { AxiosError, AxiosResponse } from 'axios'
 import { ApiErrors } from 'service/apiErrors'
@@ -62,7 +62,7 @@ export default function ForgottenPasswordForm({
       </Typography>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <FormTextField type="text" label="auth:fields.email" name="email" />
+          <EmailField label="auth:fields.email" name="email" />
         </Grid>
         <Grid item xs={12}>
           <SubmitButton loading={loading} fullWidth label="auth:cta.send" />

src/components/auth/login/LoginForm.tsx

@@ -10,7 +10,7 @@ import { AlertStore } from 'stores/AlertStore'
 import FormInput from 'components/common/form/FormInput'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
-import FormTextField from 'components/common/form/FormTextField'
+import EmailField from 'components/common/form/EmailField'
 import Google from 'common/icons/Google'
 import PasswordField from 'components/common/form/PasswordField'
 import { email, password } from 'common/form/validation'
@@ -73,7 +73,7 @@ export default function LoginForm({ initialValues = defaults }: LoginFormProps)
       <FormInput type="hidden" name="csrfToken" />
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <FormTextField type="text" label="auth:fields.email" name="email" />
+          <EmailField label="auth:fields.email" name="email" />
         </Grid>
         <Grid item xs={12}>
           <PasswordField />

src/components/auth/profile/UpdateEmailModal.tsx

@@ -2,7 +2,7 @@ import { Modal, Box, Grid, IconButton } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
-import FormTextField from 'components/common/form/FormTextField'
+import EmailField from 'components/common/form/EmailField'
 import { Person, UpdateUserAccount, UpdatePerson } from 'gql/person'
 import { useMutation } from '@tanstack/react-query'
 import { AxiosError, AxiosResponse } from 'axios'
@@ -129,7 +129,7 @@ function UpdateEmailModal({
           validationSchema={validationSchema}>
           <Grid container spacing={3}>
             <Grid item xs={12} sm={8}>
-              <FormTextField type="text" name="email" label="email" />
+              <EmailField name="email" label="email" />
             </Grid>
             <Grid item xs={12} sm={8}>
               <PasswordField />

src/components/auth/register/RegisterForm.tsx

@@ -15,6 +15,7 @@ import FormTextField from 'components/common/form/FormTextField'
 import PasswordField from 'components/common/form/PasswordField'
 import AcceptPrivacyPolicyField from 'components/common/form/AcceptPrivacyPolicyField'
 import AcceptTermsField from 'components/common/form/AcceptTermsField'
+import EmailField from 'components/common/form/EmailField'
 
 export type RegisterFormData = {
   firstName: string
@@ -109,7 +110,7 @@ export default function RegisterForm({ initialValues = defaults }: RegisterFormP
           />
         </Grid>
         <Grid item xs={12}>
-          <FormTextField type="text" label="auth:fields.email" name="email" autoComplete="email" />
+          <EmailField label="auth:fields.email" name="email" />
         </Grid>
         <Grid item xs={12}>
           <PasswordField autoComplete="new-password" />

src/components/common/form/EmailField.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import FormTextField, { RegisterFormProps } from './FormTextField'
+
+export type EmailFieldProps = Omit<RegisterFormProps, 'type'> & {
+  type?: string
+}
+
+export default function EmailField(props: EmailFieldProps) {
+  return <FormTextField inputMode="email" autoComplete="email" type="email" {...props} />
+}

src/components/contact/ContactForm.tsx

@@ -16,6 +16,7 @@ import FormTextField from 'components/common/form/FormTextField'
 import AcceptTermsField from 'components/common/form/AcceptTermsField'
 import { name, companyName, phone, email } from 'common/form/validation'
 import AcceptPrivacyPolicyField from 'components/common/form/AcceptPrivacyPolicyField'
+import EmailField from 'components/common/form/EmailField'
 
 const validationSchema: yup.SchemaOf<ContactFormData> = yup
   .object()
@@ -110,13 +111,7 @@ export default function ContactForm({ initialValues = defaults }: ContactFormPro
             />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField
-              inputMode="email"
-              type="text"
-              label="auth:fields.email"
-              name="email"
-              autoComplete="email"
-            />
+            <EmailField label="auth:fields.email" name="email" />
           </Grid>
           <Grid item xs={12}>
             <FormTextField

src/components/irregularity/admin/grid/CreateForm.tsx

@@ -26,6 +26,8 @@ import FileUpload from 'components/file-upload/FileUpload'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
+import EmailField from 'components/common/form/EmailField'
+
 import {
   IrregularityInput,
   IrregularityResponse,
@@ -156,7 +158,7 @@ export default function CreateForm({ campaigns, person }: Props) {
           </Grid>
           <Grid container item spacing={3}>
             <Grid item xs={12} sm={6}>
-              <FormTextField type="email" name="person.email" label={t('admin.fields.email')} />
+              <EmailField name="person.email" label={t('admin.fields.email')} />
             </Grid>
             <Grid item xs={12} sm={6}>
               <FormTextField type="phone" name="person.phone" label={t('admin.fields.phone')} />

src/components/irregularity/admin/grid/EditForm.tsx

@@ -24,6 +24,8 @@ import FileUpload from 'components/file-upload/FileUpload'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
+import EmailField from 'components/common/form/EmailField'
+
 import {
   IrregularityEditInput,
   IrregularityFileResponse,
@@ -162,7 +164,7 @@ export default function EditForm({ campaigns, irregularity, irregularityFiles }:
           </Grid>
           <Grid container item spacing={3}>
             <Grid item xs={12} sm={6}>
-              <FormTextField type="email" name="person.email" label={t('admin.fields.email')} />
+              <EmailField name="person.email" label={t('admin.fields.email')} />
             </Grid>
             <Grid item xs={12} sm={6}>
               <FormTextField type="phone" name="person.phone" label={t('admin.fields.phone')} />

src/components/one-time-donation/AnonymousForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'next-i18next'
 import { Grid, Typography } from '@mui/material'
-import FormTextField from 'components/common/form/FormTextField'
+import EmailField from 'components/common/form/EmailField'
 
 export default function AnonymousForm() {
   const { t } = useTranslation('one-time-donation')
@@ -16,7 +16,7 @@ export default function AnonymousForm() {
           <Typography>{t('anonymous-menu.info-start')}</Typography>
         </Grid>
         <Grid item xs={12} md={12}>
-          <FormTextField name="personsEmail" type="text" label="Email" fullWidth />
+          <EmailField name="personsEmail" label="Email" fullWidth />
         </Grid>
       </Grid>
     </>

src/components/one-time-donation/LoginForm.tsx

@@ -5,7 +5,7 @@ import { Box, Button, CircularProgress, Grid, Typography } from '@mui/material'
 import theme from 'common/theme'
 import Google from 'common/icons/Google'
 import { OneTimeDonation } from 'gql/donations'
-import FormTextField from 'components/common/form/FormTextField'
+import EmailField from '../common/form/EmailField'
 import { signIn } from 'next-auth/react'
 import { StepsContext } from './helpers/stepperContext'
 import { AlertStore } from 'stores/AlertStore'
@@ -53,7 +53,7 @@ function LoginForm() {
         </Typography>
       </Grid>
       <Grid item xs={12}>
-        <FormTextField name="loginEmail" type="text" label="Email" fullWidth size="medium" />
+        <EmailField name="loginEmail" label="Email" fullWidth size="medium" />
       </Grid>
       <Grid item xs={12}>
         <PasswordField

src/components/one-time-donation/RegisterDialog.tsx

@@ -7,6 +7,7 @@ import { useRegister } from 'service/auth'
 import { AlertStore } from 'stores/AlertStore'
 import FormTextField from 'components/common/form/FormTextField'
 import PasswordField from 'components/common/form/PasswordField'
+import EmailField from 'components/common/form/EmailField'
 import { useFormikContext } from 'formik'
 import { OneTimeDonation } from 'gql/donations'
 import { RegisterFormData } from 'components/auth/register/RegisterForm'
@@ -80,12 +81,7 @@ export default function RegisterForm() {
           />
         </Grid>
         <Grid item xs={12}>
-          <FormTextField
-            type="text"
-            label="auth:fields.email"
-            name="registerEmail"
-            autoComplete="email"
-          />
+          <EmailField label="auth:fields.email" name="registerEmail" />
         </Grid>
         <Grid item xs={12}>
           <PasswordField name="registerPassword" autoComplete="new-password" />

src/components/person/grid/PersonForm.tsx

@@ -6,6 +6,7 @@ import GenericForm from 'components/common/form/GenericForm'
 import { name, phone, email } from 'common/form/validation'
 import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
+import EmailField from 'components/common/form/EmailField'
 import { AdminPersonFormData, AdminPersonResponse, PersonResponse } from 'gql/person'
 import { useMutation, UseQueryResult } from '@tanstack/react-query'
 import { AxiosError, AxiosResponse } from 'axios'
@@ -100,13 +101,7 @@ export default function PersonForm({ initialValues = defaults }: FormProps) {
             /> */}
           </Grid>
           <Grid item xs={12}>
-            <FormTextField
-              inputMode="email"
-              type="text"
-              label="person:admin.fields.email"
-              name="email"
-              autoComplete="email"
-            />
+            <EmailField label="person:admin.fields.email" name="email" />
           </Grid>
           <Grid item xs={12}>
             <FormTextField