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