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