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

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

Browse Source 
Related work items: #33
This commit is contained in:
Dominic Villemure
2024-04-25 02:16:23 +00:00
parent ca8ad7606e 67e7edf047
commit 0bbc8190fb
2 changed files with 46 additions and 31 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 -->
@@ -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>

6
src/views/main/HomeView.vue
View File

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