client/src/components/ContactForm.vue

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