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