From 8a63d9d36ae76690984711c3118d78ee4cc11527 Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Wed, 24 Apr 2024 20:49:50 -0400
Subject: [PATCH] #33 pluged Contact with backend

---
 src/views/main/ContactView.vue | 71 ++++++++++++++++++++++------------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/views/main/ContactView.vue b/src/views/main/ContactView.vue
index f84a774..9f8fbb3 100644
--- a/src/views/main/ContactView.vue
+++ b/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 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-text-field v-model="name" label="Nom" 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 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 style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
-                    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 @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                  class="mt-4 send-btn" block>Envoyez
                 </v-btn>
               </v-col>
             </v-row>
@@ -107,21 +101,19 @@
         </v-col>
       </v-row>
 
-      <!-- Form Information  -->
-      <v-text-field 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-textarea class="labelsize" style="color: rgb(107, 0, 101)"
+      <!-- Form Information  -->+
+      <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 v-model="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
+      <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 style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
-          class="mt-4 send-btn" block>
-          Envoyez
-        </v-btn>
-      </RouterLink>
+      <v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
+        class="mt-4 send-btn" block>
+        Envoyez
+      </v-btn>
 
 
       <!-- Text about joining us -->
@@ -187,12 +179,43 @@
 </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 {
+    console.log(reasonToJoin.value);
+
+    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>