From d23707777ee9d334ea7ebc19906c1f8b5816ffb0 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Sun, 27 Oct 2024 22:06:35 +0100
Subject: [PATCH] Adapt contact forms to new API

---
 .env.example                                |   1 +
 .github/workflows/deploy.yml                |   3 +
 README.md                                   |   2 +
 package-lock.json                           |  42 +++--
 package.json                                |   2 +-
 src/components/company/CaseStudyForm.vue    | 148 +++--------------
 src/components/contributor/Newsletter.vue   | 167 +++++++------------
 src/components/home/ContactForm.vue         | 169 ++++----------------
 src/components/shared/AppButton.vue         |   2 +-
 src/components/shared/form/AppTextfield.vue |   4 +-
 src/main.ts                                 |   1 +
 src/router/index.ts                         |   3 +-
 src/util/fetch.ts                           |   6 +-
 src/util/form.ts                            |  32 ++++
 vite.config.ts                              |  28 ++--
 15 files changed, 217 insertions(+), 393 deletions(-)
 create mode 100644 .env.example
 create mode 100644 src/util/form.ts

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..292a14c
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 826b5f4..45ce893 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -4,6 +4,9 @@ on:
   push:
     branches: [main]
 
+env:
+  VITE_API_URL: ${{ vars.API_URL }}
+
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/README.md b/README.md
index b1191d9..ea9454b 100755
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@ with [Vue.js](https://vuejs.org).
 
 ## 🚀 Project Setup
 
+Copy `.env.example` to `.env`
+
 ```sh
 npm install
 ```
diff --git a/package-lock.json b/package-lock.json
index 708fe6b..0977a05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@fontsource-variable/mulish": "^5.1.0",
-        "@hcaptcha/vue3-hcaptcha": "^1.3.0",
+        "altcha": "^1.0.6",
         "vue": "^3.5.6",
         "vue-router": "^4.4.5"
       },
@@ -31,6 +31,11 @@
         "vue-tsc": "^2.1.6"
       }
     },
+    "node_modules/@altcha/crypto": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@altcha/crypto/-/crypto-0.0.1.tgz",
+      "integrity": "sha512-qZMdnoD3lAyvfSUMNtC2adRi666Pxdcw9zqfMU5qBOaJWqpN9K+eqQGWqeiKDMqL0SF+EytNG4kR/Pr/99GJ6g=="
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
@@ -558,17 +563,6 @@
       "resolved": "https://registry.npmjs.org/@fontsource-variable/mulish/-/mulish-5.1.0.tgz",
       "integrity": "sha512-ruMyFi0klNO3ILhkPDKxgNiXg0IxdZnqI5pVQ4MvJx9MdV9+aFKDRK9Cn6eOwz5YmDMeFmAZQBJkVEyyXM78jg=="
     },
-    "node_modules/@hcaptcha/vue3-hcaptcha": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@hcaptcha/vue3-hcaptcha/-/vue3-hcaptcha-1.3.0.tgz",
-      "integrity": "sha512-IEonS6JiYdU7uy6aeib8cYtMO4nj8utwStbA9bWHyYbOvOvhpkV+AW8vfSKh6SntYxqle/TRwhv+kU9p92CfsA==",
-      "dependencies": {
-        "vue": "^3.2.19"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -1359,6 +1353,30 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/altcha": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/altcha/-/altcha-1.0.6.tgz",
+      "integrity": "sha512-H5bXDfbn/H9UQhW4kVdqPPRODvFsdOrftPUQ/hFWehjhV0LI8Mnq67knvJqCC3mw+s06h4KbIYGw43uVHCHEtQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@altcha/crypto": "^0.0.1"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.18.0"
+      }
+    },
+    "node_modules/altcha/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
+      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
diff --git a/package.json b/package.json
index 12fd3b6..a84fd54 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@fontsource-variable/mulish": "^5.1.0",
-    "@hcaptcha/vue3-hcaptcha": "^1.3.0",
+    "altcha": "^1.0.6",
     "vue": "^3.5.6",
     "vue-router": "^4.4.5"
   },
diff --git a/src/components/company/CaseStudyForm.vue b/src/components/company/CaseStudyForm.vue
index e07a430..36d70f9 100644
--- a/src/components/company/CaseStudyForm.vue
+++ b/src/components/company/CaseStudyForm.vue
@@ -3,13 +3,13 @@
     <Fieldset>
       <Textfield
         id="lastname"
-        v-model="lastname"
+        name="lastname"
         label="Nom :"
         autocomplete="family-name"
       />
       <Textfield
         id="firstname"
-        v-model="firstname"
+        name="firstname"
         label="Prénom :"
         autocomplete="given-name"
       />
@@ -17,13 +17,13 @@
 
     <Textfield
       id="company"
-      v-model="company"
+      name="company"
       label="Organisation :"
       autocomplete="organization"
     />
     <Textfield
       id="role"
-      v-model="role"
+      name="role"
       label="Rôle :"
       autocomplete="organization-title"
     />
@@ -31,7 +31,7 @@
     <Fieldset>
       <Textfield
         id="email"
-        v-model="email"
+        name="email"
         type="email"
         label="E-mail * :"
         required
@@ -39,7 +39,7 @@
       />
       <Textfield
         id="phone"
-        v-model="phone"
+        name="phone"
         type="tel"
         label="Téléphone :"
         autocomplete="tel"
@@ -49,16 +49,10 @@
     <Textfield
       id="message"
       type="textarea"
-      v-model="message"
+      name="message"
       label="Votre besoin :"
     />
 
-    <vue-hcaptcha
-      @verify="getCaptcha"
-      sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
-      aria-label="Rendez vous sur https://www.hcaptcha.com/accessibility pour obtenir un passe-droit accessible"
-    />
-
     <div class="form-submit">
       <div class="error-message" v-if="error" aria-live="assertive">
         {{ error }}
@@ -79,133 +73,41 @@
         aria-label="Soumettez le formulaire"
       />
     </div>
+
+    <altcha-widget
+      :challengeurl="captchaChallengeUrl"
+      name="captcha"
+      spamfilter
+      floating
+    />
   </form>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
 import AppButton from "@/components/shared/AppButton.vue";
-import { post } from "@/util/fetch";
-import Textfield from "@/components/shared/form/AppTextfield.vue";
 import Fieldset from "@/components/shared/form/AppFieldset.vue";
+import Textfield from "@/components/shared/form/AppTextfield.vue";
+import { captchaChallengeUrl, post } from "@/util/fetch";
+import { extractFormData, validatePhone } from "@/util/form";
+import { ref } from "vue";
 
-/**
- * Validates an email address to ensure it is not empty and follows a valid email format.
- *
- * @returns {boolean} True if the email is valid, false otherwise.
- */
-const validateEmail = () => {
-  /**
-   * Regular expression to validate an email address:
-   * - It allows alphanumeric characters, dots, hyphens, percent signs, and plus or minus signs.
-   * - It requires an "@" symbol after the username.
-   * - It allows a domain consisting of alphanumeric characters, hyphens, and dots.
-   * - The domain must end with a dot followed by at least two alphabetic characters.
-   */
-  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-
-  if (!email.value) {
-    error.value = "L'e-mail est requis.";
-  } else if (!emailPattern.test(email.value)) {
-    error.value = "L'e-mail n'est pas valide.";
-  } else {
-    error.value = "";
-    return true;
-  }
-};
-
-/**
- * Validates a phone number to ensure it is not empty and follows a valid phone number format.
- *
- * @returns {boolean} True if the phone number is valid, false otherwise.
- */
-const validatePhone = () => {
-  /**
-   * Regular expression to validate a phone number:
-   * - It can optionally start with a plus sign (+).
-   * - It can then contain one or more digits (0-9), commas, periods, or whitespace.
-   * - The string must end after the allowed characters.
-   */
-  const phonePattern = /^\+?[\d,. ]+$/;
-  if (!phone.value) {
-    error.value = "";
-    return true;
-  } else if (!phonePattern.test(phone.value)) {
-    error.value =
-      "Le téléphone doit contenir uniquement des chiffres, +, ,, . ou un espace.";
-    return false;
-  }
-};
-
-/**
- * Validates whether a CAPTCHA field is empty.
- *
- * @returns {boolean} True if the CAPTCHA field is not empty, false otherwise.
- */
-const validateCaptcha = () => {
-  if (!captcha.value) {
-    error.value = "Le captcha est requis.";
-  } else {
-    error.value = "";
-    return true;
-  }
-};
-
-/**
- * Validates a complete form by executing a set of validation functions.
- *
- * @returns {boolean} True if all fields are valid, false otherwise.
- */
-const validateForm = () => {
-  const validationFunctions = [
-    validateEmail, // Function to validate email
-    validatePhone, // Function to validate phone number
-    validateCaptcha, // Function to validate CAPTCHA
-  ];
-
-  // Return true if all form fields are valid, otherwise return false.
-  return validationFunctions.every((validationFunction) =>
-    validationFunction(),
-  );
-};
+const error = ref("");
+const success = ref("");
 
-const submitForm = async () => {
-  if (validateForm()) {
-    const formData = {
-      firstname: firstname.value,
-      lastname: lastname.value,
-      company: company.value,
-      role: role.value,
-      phone: phone.value,
-      email: email.value,
-      message: message.value,
-      captcha: captcha.value,
-    };
+const submitForm = async (event: Event) => {
+  const form = event.target as HTMLFormElement;
+  const formData = extractFormData(form);
 
+  if (validatePhone(formData.phone as string, error)) {
     try {
       await post("client_case", formData);
       success.value = "Votre demande a bien été enregistrée";
+      form.reset();
     } catch {
       error.value = "Erreur d'envoi, veuillez réessayer plus tard.";
     }
   }
 };
-
-function getCaptcha(response: any) {
-  captcha.value = response;
-}
-
-let captcha = ref("");
-const error = ref("");
-const firstname = ref("");
-const lastname = ref("");
-const company = ref("");
-const role = ref("");
-const phone = ref("");
-const email = ref("");
-const message = ref("");
-const success = ref("");
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/contributor/Newsletter.vue b/src/components/contributor/Newsletter.vue
index 169f5cb..cc7d9e9 100644
--- a/src/components/contributor/Newsletter.vue
+++ b/src/components/contributor/Newsletter.vue
@@ -1,130 +1,87 @@
 <template>
-  <form @submit.prevent="submitForm">
-    <div class="headings">
-      <h2 class="heading-2">Rejoins ecoCode !</h2>
-      <h3 class="heading-3">
-        Rejoins-nous et contribue à faire du numérique un domaine plus durable.
-      </h3>
-    </div>
+  <AppSection
+    title="Rejoins ecoCode !"
+    sub-title="Rejoins-nous et contribue à faire du numérique un domaine plus durable."
+    background-color="grey"
+  >
+    <form @submit.prevent="submitForm">
+      <div class="text-field">
+        <Textfield
+          id="email"
+          name="email"
+          type="email"
+          label="E-mail * :"
+          required
+          autocomplete="email"
+          centered
+        />
+      </div>
 
-    <div class="text-field">
-      <Textfield
-        id="email"
-        v-model="email"
-        type="email"
-        label="E-mail * :"
-        required
-        autocomplete="email"
-        centered
-      />
-    </div>
+      <p class="error-message" v-if="error">{{ error }}</p>
+      <p class="success-message" v-if="success">{{ success }}</p>
 
-    <div style="margin-top: 15px">
-      <vue-hcaptcha
-        @verify="getCaptcha"
-        sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
-      ></vue-hcaptcha>
-    </div>
-    <div style="margin-top: 15px" class="error-message" v-if="error">
-      {{ error }}
-    </div>
-    <div style="margin-top: 15px" class="success-message" v-if="success">
-      {{ success }}
-    </div>
+      <AppButton
+        type="submit"
+        variant="primary"
+        text="Recevoir les informations"
+      />
 
-    <AppButton
-      type="submit"
-      variant="primary"
-      text="Recevoir les informations"
-    />
+      <altcha-widget
+        :challengeurl="captchaChallengeUrl"
+        name="captcha"
+        spamfilter
+        floating
+      />
 
-    <div class="join-us">
-      <p>Tu souhaites contribuer sans plus attendre ? Rejoins-nous sur</p>
-      <a href="https://github.com/green-code-initiative" target="_blank">
-        <img
-          width="120"
-          height="32"
-          src="@/assets/img/github.webp"
-          alt="GitHub logo"
-        />
-      </a>
-    </div>
-  </form>
+      <div class="join-us">
+        <p>Tu souhaites contribuer sans plus attendre ? Rejoins-nous sur</p>
+        <a href="https://github.com/green-code-initiative" target="_blank">
+          <img
+            width="120"
+            height="32"
+            src="@/assets/img/github.webp"
+            alt="GitHub logo"
+          />
+        </a>
+      </div>
+    </form>
+  </AppSection>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
 import AppButton from "@/components/shared/AppButton.vue";
-import { post } from "@/util/fetch";
 import Textfield from "@/components/shared/form/AppTextfield.vue";
-
-const validateEmail = () => {
-  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-  if (!email.value) {
-    error.value = "L'e-mail est requis.";
-  } else if (!emailPattern.test(email.value)) {
-    error.value = "L'e-mail n'est pas valide.";
-  } else {
-    error.value = "";
-    return true;
-  }
-};
-
-const validateCaptcha = () => {
-  if (!captcha.value) {
-    error.value = "Le captcha est requis.";
-  } else {
-    error.value = "";
-    return true;
-  }
-};
-
-const submitForm = async () => {
-  if (validateEmail() && validateCaptcha()) {
-    const formData = {
-      email: email.value,
-      captcha: captcha.value,
-    };
-
-    try {
-      await post("newsletter", formData);
-      success.value = "Votre demande a bien été enregistrée";
-    } catch {
-      error.value = "Erreur d'envoi, veuillez réessayer plus tard.";
-    }
+import { captchaChallengeUrl, post } from "@/util/fetch";
+import { extractFormData } from "@/util/form";
+import { ref } from "vue";
+import AppSection from "../shared/AppSection.vue";
+
+const error = ref("");
+const success = ref("");
+
+const submitForm = async (event: Event) => {
+  const form = event.target as HTMLFormElement;
+  const formData = extractFormData(form);
+  try {
+    await post("newsletter", formData);
+    success.value = "Votre demande a bien été enregistrée";
+    form.reset();
+  } catch {
+    error.value = "Erreur d'envoi, veuillez réessayer plus tard.";
   }
 };
-
-function getCaptcha(response: any) {
-  captcha.value = response;
-}
-
-let email = ref("");
-let captcha = ref("");
-let error = ref("");
-let success = ref("");
 </script>
 
 <style scoped lang="scss">
 form {
-  min-height: 396px;
-  padding: 50px 0;
   display: flex;
   flex-direction: column;
+  gap: 1rem;
   align-items: center;
-  justify-content: center;
-  background-color: #f3f3f3;
-}
-
-.headings {
-  display: flex;
-  flex-direction: column;
-  gap: 3rem;
 }
 
 .text-field {
-  margin: 3rem 1rem 0;
+  margin: 1rem;
   width: 320px;
   max-width: 100%;
 }
diff --git a/src/components/home/ContactForm.vue b/src/components/home/ContactForm.vue
index 041c1e6..7eb1249 100644
--- a/src/components/home/ContactForm.vue
+++ b/src/components/home/ContactForm.vue
@@ -1,18 +1,23 @@
 <template>
-  <div class="container" id="contact">
-    <h2 class="heading-2">On discute ?</h2>
-
+  <AppSection title="On discute ?" id="contact" background-color="grey">
     <form @submit.prevent="submitForm" aria-label="Formulaire de contact">
       <div class="form-field" role="radiogroup" aria-labelledby="i-am">
         <span class="text-label" id="i-am">Je suis :</span>
         <div class="radio-field">
-          <input type="radio" id="individual" v-model="type" value="individu" />
+          <input
+            type="radio"
+            id="individual"
+            name="type"
+            v-model="type"
+            value="individu"
+          />
           <label for="individual">Un individu</label>
         </div>
         <div class="radio-field">
           <input
             type="radio"
             id="organization"
+            name="type"
             v-model="type"
             value="organisation"
           />
@@ -22,6 +27,7 @@
 
       <Selectfield
         id="subject"
+        name="subject"
         v-model="subject"
         label="Je souhaite :"
         :items="options"
@@ -29,14 +35,14 @@
 
       <Textfield
         id="entity-name"
-        v-model="name"
+        name="name"
         label="Nom de l’entreprise / Personne"
       />
 
       <Fieldset>
         <Textfield
           id="email"
-          v-model="email"
+          name="email"
           type="email"
           label="E-mail * :"
           required
@@ -44,7 +50,7 @@
         />
         <Textfield
           id="phone"
-          v-model="phone"
+          name="phone"
           type="tel"
           label="Téléphone :"
           autocomplete="tel"
@@ -53,18 +59,10 @@
 
       <Textfield
         id="message"
-        v-model="message"
+        name="message"
         label="Des éléments supplémentaires ?"
       />
 
-      <div class="hcaptcha">
-        <vue-hcaptcha
-          @verify="getCaptcha"
-          sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
-          aria-label="Rendez vous sur https://www.hcaptcha.com/accessibility pour obtenir un passe-droit accessible"
-        ></vue-hcaptcha>
-      </div>
-
       <div class="form-submit">
         <div class="error-message" v-if="error" aria-live="assertive">
           {{ error }}
@@ -85,138 +83,45 @@
           aria-label="Envoyer le formulaire de contact"
         />
       </div>
+
+      <altcha-widget
+        :challengeurl="captchaChallengeUrl"
+        name="captcha"
+        spamfilter
+        floating
+      />
     </form>
-  </div>
+  </AppSection>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
-import { post } from "@/util/fetch";
 import AppButton from "@/components/shared/AppButton.vue";
-import Textfield from "@/components/shared/form/AppTextfield.vue";
 import Fieldset from "@/components/shared/form/AppFieldset.vue";
 import Selectfield from "@/components/shared/form/AppSelectfield.vue";
+import Textfield from "@/components/shared/form/AppTextfield.vue";
+import { captchaChallengeUrl, post } from "@/util/fetch";
+import { extractFormData, validatePhone } from "@/util/form";
+import { ref, watch } from "vue";
+import AppSection from "../shared/AppSection.vue";
 
-let captcha = ref("");
 const error = ref("");
-const name = ref("");
-const email = ref("");
-const phone = ref("");
-const message = ref("");
 const success = ref("");
 
-/**
- * Validates an email address to ensure it is not empty and follows a valid email format.
- *
- * @returns {boolean} True if the email is valid, false otherwise.
- */
-const validateEmail = () => {
-  /**
-   * Regular expression to validate an email address:
-   * - It allows alphanumeric characters, dots, hyphens, percent signs, and plus or minus signs.
-   * - It requires an "@" symbol after the username.
-   * - It allows a domain consisting of alphanumeric characters, hyphens, and dots.
-   * - The domain must end with a dot followed by at least two alphabetic characters.
-   */
-  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-  if (!email.value) {
-    error.value = "L'e-mail est requis.";
-  } else if (!emailPattern.test(email.value)) {
-    error.value = "L'e-mail n'est pas valide.";
-  } else {
-    error.value = "";
-    return true;
-  }
-};
-
-/**
- * Validates a phone number to ensure it is not empty and follows a valid phone number format.
- *
- * @returns {boolean} True if the phone number is valid, false otherwise.
- */
-const validatePhone = () => {
-  /**
-   * Regular expression to validate a phone number:
-   * - It can optionally start with a plus sign (+).
-   * - It can then contain one or more digits (0-9), commas, periods, or whitespace.
-   * - The string must end after the allowed characters.
-   */
-  const phonePattern = /^\+?[\d,. ]+$/;
-
-  if (!phone.value) {
-    error.value = "";
-    return true;
-  } else if (!phonePattern.test(phone.value)) {
-    error.value =
-      "Le téléphone doit contenir uniquement des chiffres, +, ,, . ou des espaces.";
-    return false;
-  } else {
-    error.value = "";
-    return true;
-  }
-};
-
-/**
- * Validates whether a CAPTCHA field is empty.
- *
- * @returns {boolean} True if the CAPTCHA field is not empty, false otherwise.
- */
-const validateCaptcha = () => {
-  if (!captcha.value) {
-    error.value = "Le captcha est requis.";
-  } else {
-    error.value = "";
-    return true;
-  }
-};
-
-/**
- * Validates a complete form by executing a set of validation functions.
- *
- * @returns {boolean} True if all fields are valid, false otherwise.
- */
-const validateForm = () => {
-  const validationFunctions = [
-    validateEmail, // Function to validate email
-    validatePhone, // Function to validate phone number
-    validateCaptcha, // Function to validate CAPTCHA
-  ];
-
-  // Check if all validation functions return true.
-  const isValid = validationFunctions.every((validationFunction) =>
-    validationFunction()
-  );
-
-  // Return true if all form fields are valid, otherwise return false.
-  return isValid;
-};
-
-const submitForm = async () => {
-  if (validateForm()) {
-    const formData = {
-      type: type.value,
-      subject: subject.value,
-      name: name.value,
-      email: email.value,
-      phone: phone.value,
-      message: message.value,
-      captcha: captcha.value,
-    };
+const submitForm = async (event: Event) => {
+  const form = event.target as HTMLFormElement;
+  const formData = extractFormData(form);
 
+  if (validatePhone(formData.phone as string, error)) {
     try {
       await post("contact", formData);
       success.value = "Votre demande a bien été enregistrée";
+      form.reset();
     } catch {
       error.value = "Erreur d'envoi, veuillez réessayer plus tard.";
     }
   }
 };
 
-function getCaptcha(response: any) {
-  captcha.value = response;
-}
-
 const type = ref("individu");
 const subject = ref(
   "Je souhaite contribuer à la création de règles sur ecoCode"
@@ -249,19 +154,11 @@ watch(type, (newValue) => {
 </script>
 
 <style scoped lang="scss">
-.container {
-  padding: 3rem 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-  background-color: #f3f3f3;
-}
-
 form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  margin: 0 2rem;
 }
 
 .text-label {
diff --git a/src/components/shared/AppButton.vue b/src/components/shared/AppButton.vue
index 58e49c2..64a25c3 100644
--- a/src/components/shared/AppButton.vue
+++ b/src/components/shared/AppButton.vue
@@ -10,7 +10,7 @@ withDefaults(
     type?: "button" | "submit";
     link?: RouterLinkProps["to"];
   }>(),
-  { type: "button" },
+  { type: "button", link: undefined }
 );
 </script>
 
diff --git a/src/components/shared/form/AppTextfield.vue b/src/components/shared/form/AppTextfield.vue
index 56c0014..3a0c4f1 100644
--- a/src/components/shared/form/AppTextfield.vue
+++ b/src/components/shared/form/AppTextfield.vue
@@ -5,11 +5,11 @@ withDefaults(
   defineProps<{
     id: string;
     label: string;
-    modelValue: string;
+    modelValue?: string;
     type?: string;
     centered?: boolean;
   }>(),
-  { type: "text", centered: false },
+  { type: "text", modelValue: "", centered: false }
 );
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index c78e613..bbd6bcd 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,4 @@
+import "altcha";
 import "@fontsource-variable/mulish/wght.css";
 import "./assets/main.css";
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 173b084..dab29a7 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -26,10 +26,9 @@ const router = createRouter({
     },
     {
       path: "/collectif",
-      name: "collectif",
       component: TeamView,
       children: [
-        { path: "", redirect: "/collectif/membres" },
+        { path: "", name: "collectif", redirect: "/collectif/membres" },
         { path: "membres", name: "collectif-membres", component: TeamMembers },
         {
           path: "organisations",
diff --git a/src/util/fetch.ts b/src/util/fetch.ts
index 1e9ead6..9de7d29 100644
--- a/src/util/fetch.ts
+++ b/src/util/fetch.ts
@@ -1,5 +1,9 @@
+const baseApiUrl = import.meta.env.VITE_API_URL ?? "/api";
+
+export const captchaChallengeUrl = `${baseApiUrl}/captcha_challenge`;
+
 export const post = async (resource: string, body: any) => {
-  return fetch(`https://api.ecocode.io/${resource}`, {
+  return fetch(`${baseApiUrl}/${resource}`, {
     method: "POST",
     body: new URLSearchParams(body),
     headers: {
diff --git a/src/util/form.ts b/src/util/form.ts
new file mode 100644
index 0000000..f8938cf
--- /dev/null
+++ b/src/util/form.ts
@@ -0,0 +1,32 @@
+import type { Ref } from "vue";
+
+export const extractFormData = (
+  form: HTMLFormElement
+): Record<string, FormDataEntryValue> =>
+  Object.fromEntries(
+    Array.from(new FormData(form)).filter(([, value]) => value !== "")
+  );
+
+export const validatePhone = (
+  value: string,
+  errorRef: Ref<string, string>
+): boolean => {
+  /**
+   * Regular expression to validate a phone number:
+   * - It can optionally start with a plus sign (+).
+   * - It can then contain one or more digits (0-9), commas, periods, or whitespace.
+   * - The string must end after the allowed characters.
+   */
+  const phonePattern = /^\+?[\d,. ]+$/;
+  if (!value) {
+    errorRef.value = "";
+    return true;
+  } else if (!phonePattern.test(value)) {
+    errorRef.value =
+      "Le téléphone doit contenir uniquement des chiffres, +, ,, . ou un espace.";
+    return false;
+  } else {
+    errorRef.value = "";
+    return true;
+  }
+};
diff --git a/vite.config.ts b/vite.config.ts
index 03b98dd..5992e6d 100755
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,15 +1,23 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
-import svgLoader from 'vite-svg-loader'
-import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vite";
+import svgLoader from "vite-svg-loader";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), svgLoader()],
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "altcha-widget",
+        },
+      },
+    }),
+    svgLoader(),
+  ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});