client/src/components/ContactForm.vue

   1 <template lang="pug">
   2 div
   3   input#modalContact.modal(type="checkbox" @change="trySetEnterTime($event)")
   4   div(role="dialog" data-checkbox="modalContact")
   5     .card
   6       label.modal-close(for="modalContact")
   7       form(@submit.prevent="trySendMessage()" @keyup.enter="trySendMessage()")
   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       button(@click="trySendMessage()") {{ st.tr["Send"] }}
  19       #dialog.text-center {{ st.tr[infoMsg] }}
  20 </template>
  21
  22 <script>
  23 import { ajax } from "../utils/ajax";
  24 import { store } from "@/store";
  25 import { checkNameEmail } from "@/data/userCheck";
  26 export default {
  27   name: "my-contact-form",
  28   data: function() {
  29     return {
  30       enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
  31       st: store.state,
  32       infoMsg: "",
  33     };
  34   },
  35   methods: {
  36     trySetEnterTime: function(event) {
  37       if (!!event.target.checked)
  38       {
  39         this.enterTime = Date.now();
  40         this.infoMsg = "";
  41       }
  42     },
  43     trySendMessage: function() {
  44       // Basic anti-bot strategy:
  45       const exitTime = Date.now();
  46       if (exitTime - this.enterTime < 5000)
  47         return;
  48       let email = document.getElementById("userEmail");
  49       let subject = document.getElementById("mailSubject");
  50       let content = document.getElementById("mailContent");
  51       const error = checkNameEmail({email: email});
  52       if (!!error)
  53         return alert(error);
  54       if (content.value.trim().length == 0)
  55         return alert(this.st.tr["Empty message"]);
  56       if (subject.value.trim().length == 0 && !confirm(this.st.tr["No subject. Send anyway?"]))
  57         return;
  58
  59       // Message sending:
  60       ajax(
  61         "/messages",
  62         "POST",
  63         {
  64           email: email.value,
  65           subject: subject.value,
  66           content: content.value,
  67         },
  68         () => {
  69           this.infoMsg = "Email sent!";
  70           subject.value = "";
  71           content.value = "";
  72         }
  73       );
  74     },
  75   },
  76 };
  77 </script>
  78
  79 <style lang="sass" scoped>
  80 [type="checkbox"].modal+div .card
  81   max-width: 767px
  82   max-height: 100%
  83 textarea#mailContent
  84   width: 100%
  85   min-height: 100px
  86 #dialog
  87   padding: 5px
  88   color: blue
  89 </style>