client/src/components/ContactForm.vue

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