client/src/components/ContactForm.vue

   1 <template lang="pug">
   2 div
   3   input#modalContact.modal(type="checkbox")
   4   div(role="dialog" data-checkbox="modalContact"
   5       aria-labelledby="contactTitle")
   6     form.card.smallpad
   7       label.modal-close(for="modalContact")
   8       h3#contactTitle.section {{ st.tr["Contact form"] }}
   9       fieldset
  10         label(for="userEmail") {{ st.tr["Email"] }}
  11         input#userEmail(type="email")
  12       fieldset
  13         label(for="mailSubject") {{ st.tr["Subject"] }}
  14         input#mailSubject(type="text")
  15       fieldset
  16         label(for="mailContent") {{ st.tr["Content"] }}
  17         br
  18         textarea#mailContent
  19       fieldset
  20         button(type="button" @click="trySendMessage") Send
  21         p#emailSent {{ st.tr["Email sent!"] }}
  22 </template>
  23
  24 <script>
  25 import { ajax } from "../utils/ajax";
  26 import { store } from "@/store";
  27 import { checkNameEmail } from "@/data/userCheck";
  28
  29 export default {
  30   name: "my-contact-form",
  31   data: function() {
  32     return {
  33       st: store.state,
  34     };
  35   },
  36   methods: {
  37     // Note: not using Vue here, but would be possible
  38     trySendMessage: function() {
  39       let email = document.getElementById("userEmail");
  40       let subject = document.getElementById("mailSubject");
  41       let content = document.getElementById("mailContent");
  42       const error = checkNameEmail({email: email});
  43       if (!!error)
  44         return alert(error);
  45       if (content.value.trim().length == 0)
  46         return alert("Empty message");
  47       if (subject.value.trim().length == 0 && !confirm("No subject. Send anyway?"))
  48         return;
  49
  50       // Message sending:
  51       ajax(
  52         "/messages",
  53         "POST",
  54         {
  55           email: email.value,
  56           subject: subject.value,
  57           content: content.value,
  58         },
  59         () => {
  60           subject.value = "";
  61           content.value = "";
  62           let emailSent = document.getElementById("emailSent");
  63           emailSent.style.display = "inline-block";
  64           setTimeout(() => { emailSent.style.display = "none"; }, 2000);
  65         }
  66       );
  67     },
  68   },
  69 };
  70 </script>
  71
  72 <style lang="sass" scoped>
  73 #emailSent
  74   color: blue
  75   display: none
  76 </style>