jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#33 pluged Contact with backend

Browse Source
This commit is contained in:
Dominic Villemure
2024-04-24 20:49:50 -04:00
parent ca8ad7606e
commit 8a63d9d36a
1 changed files with 47 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/main/ContactView.vue
View File

@@ -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>