portfolio/src/views/Contact.vue

<script setup>
import { useBurgerStore } from '@/stores/burger'
import Modal from '@/components/Modal.vue';
import { ref, onMounted } from 'vue';
import { formService } from '@/services/form';
import Spinner from '@/components/Spinner.vue';

//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&nbsp;!</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>
          <Spinner/>
          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">Thank you !</h1>
      <p class="modal-p">Your message has been sent successfully!</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: darken($green, 10%);
      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: $green
      }
      &:disabled{
        background-color: hsl(0, 0%, 55%);
        &:hover{
          cursor : default;
        }
      }
      & > div{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.error{
  color: $red-light;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25em;
}

</style>