fix: correct login placeholders

.github/workflows/ci.yml

@@ -35,6 +35,7 @@ jobs:
           mv replacements/EditMobile/* frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile
           mv replacements/locales/* frontend/src/i18n/locales
           mv replacements/Home/* frontend/src/pages/Landing/Home
+          mv replacements/login/* frontend/src/features/login/components
 
       - name: Substitute index.html OG params (delivered by Fly's proxy)
         run: |

replacements/login/LoginForm.tsx

@@ -0,0 +1,75 @@
+import { useCallback } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { FormControl, Stack } from '@chakra-ui/react'
+import isEmail from 'validator/lib/isEmail'
+
+import { INVALID_EMAIL_ERROR } from '~constants/validation'
+import Button from '~components/Button'
+import FormErrorMessage from '~components/FormControl/FormErrorMessage'
+import FormLabel from '~components/FormControl/FormLabel'
+import Input from '~components/Input'
+
+export type LoginFormInputs = {
+  email: string
+}
+
+interface LoginFormProps {
+  onSubmit: (inputs: LoginFormInputs) => Promise<void>
+}
+
+export const LoginForm = ({ onSubmit }: LoginFormProps): JSX.Element => {
+  const { t } = useTranslation()
+
+  const { handleSubmit, register, formState, setError } =
+    useForm<LoginFormInputs>()
+
+  const validateEmail = useCallback((value: string) => {
+    return isEmail(value.trim()) || INVALID_EMAIL_ERROR
+  }, [])
+
+  const onSubmitForm = async (inputs: LoginFormInputs) => {
+    return onSubmit(inputs).catch((e) => {
+      setError('email', { type: 'server', message: e.message })
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmitForm)}>
+      <FormControl
+        isInvalid={!!formState.errors.email}
+        isReadOnly={formState.isSubmitting}
+        mb="2.5rem"
+      >
+        <FormLabel isRequired>
+          {t(
+            'features.login.components.LoginForm.onlyAvailableForPublicOfficers',
+          )}
+        </FormLabel>
+        <Input
+          autoComplete="email"
+          autoFocus
+          placeholder="e.g. [email protected], [email protected], [email protected]..."
+          {...register('email', {
+            required: t(
+              'features.login.components.LoginForm.emailEmptyErrorMsg',
+            ),
+            validate: validateEmail,
+          })}
+        />
+        {formState.errors.email && (
+          <FormErrorMessage>{formState.errors.email.message}</FormErrorMessage>
+        )}
+      </FormControl>
+      <Stack
+        direction={{ base: 'column', lg: 'row' }}
+        spacing="1.5rem"
+        align="center"
+      >
+        <Button isFullWidth isLoading={formState.isSubmitting} type="submit">
+          {t('features.login.components.LoginForm.login')}
+        </Button>
+      </Stack>
+    </form>
+  )
+}