Draft of problems section
[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 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
89021f18 15 textarea#mailContent(:placeholder="st.tr['Your message']")
9a3049f3
BA
16 button(@click="trySendMessage()") {{ st.tr["Send"] }}
17 #dialog.text-center {{ st.tr[infoMsg] }}
98db2082
BA
18</template>
19
20<script>
21import { ajax } from "../utils/ajax";
c66a829b 22import { store } from "@/store";
603b8a8b 23import { checkNameEmail } from "@/data/userCheck";
98db2082 24export default {
c66a829b
BA
25 name: "my-contact-form",
26 data: function() {
27 return {
9a3049f3 28 enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
c66a829b 29 st: store.state,
9a3049f3 30 infoMsg: "",
c66a829b
BA
31 };
32 },
ccd4a2b7 33 methods: {
9a3049f3
BA
34 trySetEnterTime: function(event) {
35 if (!!event.target.checked)
36 {
37 this.enterTime = Date.now();
38 this.infoMsg = "";
39 }
40 },
98db2082 41 trySendMessage: function() {
9a3049f3
BA
42 // Basic anti-bot strategy:
43 const exitTime = Date.now();
44 if (exitTime - this.enterTime < 5000)
45 return;
98db2082
BA
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)
602d6bef
BA
53 return alert(this.st.tr["Empty message"]);
54 if (subject.value.trim().length == 0 && !confirm(this.st.tr["No subject. Send anyway?"]))
98db2082
BA
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 () => {
9a3049f3 67 this.infoMsg = "Email sent!";
98db2082
BA
68 subject.value = "";
69 content.value = "";
98db2082
BA
70 }
71 );
72 },
dac39588 73 },
98db2082
BA
74};
75</script>
4f887105
BA
76
77<style lang="sass" scoped>
9a3049f3
BA
78[type="checkbox"].modal+div .card
79 max-width: 767px
80 max-height: 100%
81textarea#mailContent
82 width: 100%
83 min-height: 100px
84#dialog
85 padding: 5px
dcd68c41 86 color: blue
4f887105 87</style>