Merged PR 35: Plug the form for the joinUs to the backend

Related work items: #33

src/views/main/ContactView.vue

@@ -31,20 +31,14 @@
               <!-- Form Information  -->
               <v-col class="row-joinus">
                 <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
-                <v-text-field label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
+                <v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
-                <v-text-field label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
+                <v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
-                <v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
+                <v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
                   placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
-                <v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
+                <v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
                   placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
-                <RouterLink :to="{ name: 'home' }">
+                <v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
-                  <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                  class="mt-4 send-btn" block>Envoyez
-                    class="mt-4 send-btn" block>Envoyez </v-btn>
-                </RouterLink>
-                <v-btn @click="showModal = true"
-                  style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4 send-btn"
-                  block>
-                  Test
                 </v-btn>
               </v-col>
             </v-row>
@@ -107,21 +101,19 @@
         </v-col>
       </v-row>
 
-      <!-- Form Information  -->
+      <!-- Form Information  -->+
-      <v-text-field class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
+      <v-text-field v-model="name" class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
-      <v-text-field class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
+      <v-text-field v-model="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
-      <v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
+      <v-textarea v-model="reasonToJoin" class="labelsize" style="color: rgb(107, 0, 101)"
         label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
         auto-grow></v-textarea>
-      <v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
+      <v-textarea v-model="socialNetworkAccount" class="labelsize" style="color: rgb(107, 0, 101)"
         label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
         auto-grow></v-textarea>
-      <RouterLink :to="{ name: 'home' }">
+      <v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
-        <v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
+        class="mt-4 send-btn" block>
-          class="mt-4 send-btn" block>
+        Envoyez
-          Envoyez
+      </v-btn>
-        </v-btn>
-      </RouterLink>
 
 
       <!-- Text about joining us -->
@@ -176,7 +168,7 @@
         développement est importante, et nous voulons construire cette plateforme avec vous, pour vous.
       </v-card-text>
       <v-card-actions class="justify-end" style="margin-right: 20px;">
-        <v-btn size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
+        <v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
       </v-card-actions>
 
     </v-card>
@@ -187,12 +179,41 @@
 </template>
 
 
-
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 import { ref } from 'vue';
+import { useClient } from "@/plugins/api.js";
+
+const client = useClient();
+
 const showModal = ref(false);
+const name = ref("");
+const emailAddress = ref("");
+const reasonToJoin = ref("");
+const socialNetworkAccount = ref("");
+
+//const firstName = name.value.split(" ")[0];
+//const lastName = name.value.split(" ")[1];
+
+async function sendForm() {
+  try {
+    const requestBody = {
+      FirstName: name.value,
+      LastName: name.value,
+      EmailAddress: emailAddress.value,
+      PhoneNumber: "",
+      SocialNetworkAccount: socialNetworkAccount.value,
+      ReasonToJoin: reasonToJoin.value
+    };
+
+    await client.post('/api/JoinUs', requestBody);
+    showModal.value = true;
+
+  } catch (error) {
+    console.log(error);
+  }
+}
 </script>
 
 

src/views/main/HomeView.vue

@@ -357,12 +357,6 @@
       </div>
     </div>
 
-
-    <!-- Back-end tools -->
-    <v-btn variant="outlined" @click="callBackend()">
-      Get items
-    </v-btn>
-
     <v-snackbar v-model="errorNoAccessSnackBar">
       Vous n'etes pas connecter !
       <template v-slot:actions>