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