project nearly finished. TODO Next : Project page and refine some text
This commit is contained in:
262
src/views/Contact.vue
Normal file
262
src/views/Contact.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<script setup>
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { formService } from '@/services/form';
|
||||
//import { badge } from 'fontawesome';
|
||||
onMounted(() => {
|
||||
burger.check()
|
||||
|
||||
})
|
||||
const burger = useBurgerStore();
|
||||
|
||||
const name = ref('');
|
||||
const coordinates = ref('');
|
||||
const company = ref('');
|
||||
const content = ref('');
|
||||
const awaiting = ref(false);
|
||||
const errors = ref({
|
||||
name : false,
|
||||
coordinates : false,
|
||||
company: false,
|
||||
content : false,
|
||||
database : false
|
||||
});
|
||||
|
||||
const modalActive = ref(false)
|
||||
const toggleModal = () => {
|
||||
modalActive.value = ! modalActive.value
|
||||
}
|
||||
const onSubmit = () => {
|
||||
//document.getElementById("demo-form").submit();
|
||||
// initializing forms erors :
|
||||
errors.value = {
|
||||
name : false,
|
||||
coordinates : false,
|
||||
company: false,
|
||||
content : false
|
||||
};
|
||||
|
||||
// initializing spinner
|
||||
awaiting.value = true;
|
||||
|
||||
// checking errors
|
||||
errors.value.name = (name.value === '')
|
||||
errors.value.coordinates = (coordinates.value === '')
|
||||
errors.value.company = (company.value === '')
|
||||
errors.value.content = (content.value === '')
|
||||
|
||||
// send the form...
|
||||
if (!errors.value.name && !errors.value.coordinates && !errors.value.company && !errors.value.content){
|
||||
const payload = {
|
||||
'name' : name.value,
|
||||
'coordinates' : coordinates.value,
|
||||
'company' : company.value,
|
||||
'content' : content.value
|
||||
}
|
||||
grecaptcha.execute('6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW',
|
||||
{action: 'submit'})
|
||||
.then( async (token) => {
|
||||
const response = await formService.sendMessage(token, payload)
|
||||
//console.log(response)
|
||||
if (response === true){
|
||||
awaiting.value = false;
|
||||
name.value = '';
|
||||
coordinates.value = '';
|
||||
company.value = '';
|
||||
content.value = '';
|
||||
toggleModal();
|
||||
}
|
||||
else{
|
||||
errors.value.database = response;
|
||||
awaiting.value = false;
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
//... or not
|
||||
else{
|
||||
awaiting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="logo">
|
||||
</div>
|
||||
<h3><span>contact</span></h3>
|
||||
</div>
|
||||
<div class="form">
|
||||
<p>Please full up the form to keep in touch !</p>
|
||||
<form @submit.prevent="onSubmit()">
|
||||
<div class="form-item">
|
||||
<label class="first" for="name">Your name</label>
|
||||
<input v-model="name" id="name" type="text" placeholder="Name">
|
||||
<div class="error" v-if="errors.name">
|
||||
Please enter your name
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="coordinates">Your coordinates</label>
|
||||
<input v-model="coordinates" id="coordinates" type="text" placeholder="A phone or a mail (or both)">
|
||||
<div class="error" v-if="errors.coordinates">
|
||||
Please enter some coordinates
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="company">Your company</label>
|
||||
<input v-model="company" id="company" type="text" placeholder="Company ">
|
||||
<div class="error" v-if="errors.company">
|
||||
Please enter your company
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="message-content">Your message</label>
|
||||
<textarea v-model="content" id="message-content" rows="5" cols="22" placeholder="Message"></textarea>
|
||||
<div class="error" v-if="errors.content">
|
||||
Please write something
|
||||
</div>
|
||||
</div>
|
||||
<p class="small">
|
||||
This site is protected by reCAPTCHA. The Google <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and <a href="https://policies.google.com/privacy" target="_blank">Terms of Service</a> apply.
|
||||
</p>
|
||||
<button
|
||||
class="g-recaptcha"
|
||||
data-sitekey="6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW"
|
||||
:disabled="awaiting || name === '' || coordinates === '' || company === '' || content === ''"
|
||||
>
|
||||
<div v-if="!awaiting">
|
||||
Send !
|
||||
</div>
|
||||
<div v-else>
|
||||
Sending
|
||||
</div>
|
||||
</button>
|
||||
<div class="error" v-if="errors.database">
|
||||
There were a problem with backend. Message :
|
||||
{{ errors.database }}
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Modal @close="toggleModal" :modalActive="modalActive">
|
||||
<div class="modal-content">
|
||||
<h1 class="modal-title">Merci !</h1>
|
||||
<p class="modal-p">Votre message a bien été envoyé !</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/shared.scss';
|
||||
.modal-content{
|
||||
& > .modal-title{
|
||||
text-align: center;
|
||||
font-size : 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& > .modal-p{
|
||||
text-indent: 0;
|
||||
color:black;
|
||||
font-size : 1.25rem;
|
||||
text-align: center;
|
||||
margin: 1em;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
& > .title {
|
||||
& .logo{
|
||||
background-image: url('../assets/mailbox.svg');
|
||||
background-size: 85%;
|
||||
}
|
||||
}
|
||||
& form{
|
||||
border: solid 2px white;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
width: clamp(15em, 95%, 20em);
|
||||
//width : 50%;
|
||||
//border: solid 2px white;
|
||||
margin-top: 1.25em;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
& .form-item{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
& label{
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
& label.first{
|
||||
margin-top: 0;
|
||||
}
|
||||
& input, textarea{
|
||||
font-size: 1.25em;
|
||||
padding: 0.25em 0.25em;
|
||||
width: clamp(10em, 100%, 20em);
|
||||
margin:auto;
|
||||
}
|
||||
& textarea{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
}
|
||||
& p.small{
|
||||
text-indent: 0;
|
||||
font-size : 0.75em;
|
||||
padding: 1em 0.5em;
|
||||
& > a{
|
||||
color: rgb(169, 162, 255);
|
||||
text-decoration: none;
|
||||
transition : 0.25s;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
color: lighten(rgb(169, 162, 255), 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
& button{
|
||||
margin: 0.5em;
|
||||
border: none;
|
||||
//border-radius: 10px;
|
||||
font-size:1.5rem;
|
||||
background-color: white;
|
||||
outline : 3px;
|
||||
outline-style: solid;
|
||||
outline-offset: -5px;
|
||||
outline-color: black;
|
||||
color:black;
|
||||
padding: 0.3em 0.9em;
|
||||
transition:0.3s;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
background-color: darken(white, 15%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color: rgb(165, 165, 165);
|
||||
&:hover{
|
||||
cursor : default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.error{
|
||||
color: $red-light;
|
||||
text-align: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.grecaptcha-badge{
|
||||
transition : 0.5s;
|
||||
opacity : 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user