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()") {{ st.tr["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 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(this.st.tr["Empty message"]);
  46       if (subject.value.trim().length == 0 && !confirm(this.st.tr["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   color: blue
  74   display: none
  75 </style>