chore: improve contact form behavior

* The status was not visile in top of the form, so I moved it under the
submit button.
* It was possible to send an empty form.
* The input type for email should be email instead of text.

5 files changed, 66 insertions, 6 deletions

diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 16cb854..986ea63 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, ForwardedRef, forwardRef, SetStateAction } from 'react';
 import styles from '../Form.module.scss';
 
-type InputType = 'text' | 'number' | 'search';
+type InputType = 'text' | 'email' | 'number' | 'search';
 
 const Input = (
   {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 536f1e7..cec7ca9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -159,6 +159,10 @@
     "defaultMessage": "Email",
     "description": "ContactPage: email field label"
   },
+  "HvUpaq": {
+    "defaultMessage": "Warning: mail not sent. Some required fields are empty.",
+    "description": "ContactPage: missing fields message."
+  },
   "ILRLTq": {
     "defaultMessage": "{brandingName} picture",
     "description": "Branding: branding name picture."
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 0b9b8f6..49066aa 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -159,6 +159,10 @@
     "defaultMessage": "Email",
     "description": "ContactPage: email field label"
   },
+  "HvUpaq": {
+    "defaultMessage": "Attention : le mail n'a pas été envoyé. Certains champs requis sont vides.",
+    "description": "ContactPage: missing fields message."
+  },
   "ILRLTq": {
     "defaultMessage": "Image de {brandingName}",
     "description": "Branding: branding name picture."
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index e410afa..dc57981 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -16,13 +16,16 @@ import { FormEvent, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';
 
+type Status = 'success' | 'error' | 'warning';
+
 const ContactPage: NextPageWithLayout = () => {
   const intl = useIntl();
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [subject, setSubject] = useState('');
   const [message, setMessage] = useState('');
-  const [status, setStatus] = useState('');
+  const [status, setStatus] = useState<Status>();
+  const [statusMessage, setStatusMessage] = useState<string>('');
   const router = useRouter();
 
   const resetForm = () => {
@@ -34,7 +37,21 @@ const ContactPage: NextPageWithLayout = () => {
 
   const submitHandler = async (e: FormEvent) => {
     e.preventDefault();
-    const body = `Message received from ${name} <${email}> on ArmandPhilippot.com.\n\n${message}`;
+
+    if (!name || !email || !message) {
+      setStatus('warning');
+      setStatusMessage(
+        intl.formatMessage({
+          defaultMessage:
+            'Warning: mail not sent. Some required fields are empty.',
+          description: 'ContactPage: missing fields message.',
+        })
+      );
+      return;
+    }
+
+    const messageHTML = message.replace(/\r?\n/g, '<br />');
+    const body = `Message received from ${name} <${email}> on ${settings.url}.<br /><br />${messageHTML}`;
     const replyTo = `${name} <${email}>`;
     const data = {
       body,
@@ -45,7 +62,8 @@ const ContactPage: NextPageWithLayout = () => {
     const mail = await sendMail(data);
 
     if (mail.sent) {
-      setStatus(
+      setStatus('success');
+      setStatusMessage(
         intl.formatMessage({
           defaultMessage:
             'Thanks. Your message was successfully sent. I will answer it as soon as possible.',
@@ -59,10 +77,23 @@ const ContactPage: NextPageWithLayout = () => {
         description: 'ContactPage: error message',
       });
       const error = `${errorPrefix} ${mail.message}`;
-      setStatus(error);
+      setStatus('error');
+      setStatusMessage(error);
     }
   };
 
+  const getStatus = () => {
+    if (!status) return <></>;
+
+    const statusModifier = `status--${status}`;
+
+    return (
+      <p className={`${styles.status} ${styles[statusModifier]}`}>
+        {statusMessage}
+      </p>
+    );
+  };
+
   const pageTitle = intl.formatMessage(
     {
       defaultMessage: 'Contact form - {websiteName}',
@@ -145,7 +176,6 @@ const ContactPage: NextPageWithLayout = () => {
               description: 'ContactPage: required fields text',
             })}
           </p>
-          {status && <p>{status}</p>}
           <Form submitHandler={submitHandler}>
             <FormItem>
               <Input
@@ -163,6 +193,7 @@ const ContactPage: NextPageWithLayout = () => {
             <FormItem>
               <Input
                 id="contact-email"
+                type="email"
                 name="email"
                 value={email}
                 setValue={setEmail}
@@ -207,6 +238,7 @@ const ContactPage: NextPageWithLayout = () => {
               </ButtonSubmit>
             </FormItem>
           </Form>
+          {getStatus()}
         </div>
         <Sidebar position="right">
           <SocialMedia
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index 69a1526..02aecbf 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -41,3 +41,23 @@ li.item {
     grid-column: 2;
   }
 }
+
+.status {
+  max-width: max-content;
+  margin: var(--spacing-md) 0;
+  padding: var(--spacing-sm);
+  border: fun.convert-px(3) solid var(--color-border-light);
+  border-radius: fun.convert-px(5);
+
+  &--error {
+    border-color: var(--color-token-red);
+  }
+
+  &--success {
+    border-color: var(--color-token-green);
+  }
+
+  &--warning {
+    border-color: var(--color-token-orange);
+  }
+}