Add chat to Hall, clickable FEN, fix contact form
[vchess.git] / client / src / components / ContactForm.vue
1 <template lang="pug">
2 div
3 input#modalContact.modal(type="checkbox")
4 div(role="dialog" aria-labelledby="contactTitle")
5 form.card.smallpad
6 label.modal-close(for="modalContact")
7 h3#contactTitle.section {{ st.tr["Contact form"] }}
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 label(for="mailContent") {{ st.tr["Content"] }}
16 br
17 textarea#mailContent
18 fieldset
19 button(type="button" @click="trySendMessage") Send
20 p#emailSent {{ st.tr["Email sent!"] }}
21 </template>
22
23 <script>
24 import { ajax } from "../utils/ajax";
25 import { store } from "@/store";
26 import { checkNameEmail } from "@/data/userCheck";
27
28 export default {
29 name: "my-contact-form",
30 data: function() {
31 return {
32 st: store.state,
33 };
34 },
35 methods: {
36 // Note: not using Vue here, but would be possible
37 trySendMessage: function() {
38 let email = document.getElementById("userEmail");
39 let subject = document.getElementById("mailSubject");
40 let content = document.getElementById("mailContent");
41 const error = checkNameEmail({email: email});
42 if (!!error)
43 return alert(error);
44 if (content.value.trim().length == 0)
45 return alert("Empty message");
46 if (subject.value.trim().length == 0 && !confirm("No subject. Send anyway?"))
47 return;
48
49 // Message sending:
50 ajax(
51 "/messages",
52 "POST",
53 {
54 email: email.value,
55 subject: subject.value,
56 content: content.value,
57 },
58 () => {
59 subject.value = "";
60 content.value = "";
61 let emailSent = document.getElementById("emailSent");
62 emailSent.style.display = "inline-block";
63 setTimeout(() => { emailSent.style.display = "none"; }, 2000);
64 }
65 );
66 },
67 },
68 };
69 </script>