Some more cleaning + fixes
[vchess.git] / client / src / components / UpsertUser.vue
1 <template lang="pug">
2 div
3 input#modalUser.modal(
4 type="checkbox"
5 @change="trySetEnterTime($event)"
6 )
7 div(
8 role="dialog"
9 data-checkbox="modalUser"
10 )
11 .card
12 label.modal-close(for="modalUser")
13 h3.section {{ st.tr[stage] }}
14 form(@submit.prevent="onSubmit()" @keyup.enter="onSubmit()")
15 div(v-show="stage!='Login'")
16 fieldset
17 label(for="username") {{ st.tr["User name"] }}
18 input#username(
19 type="text"
20 v-model="st.user.name"
21 )
22 fieldset
23 label(for="useremail") {{ st.tr["Email"] }}
24 input#useremail(
25 type="email"
26 v-model="st.user.email"
27 )
28 fieldset
29 label(for="notifyNew") {{ st.tr["Notifications by email"] }}
30 input#notifyNew(
31 type="checkbox"
32 v-model="st.user.notify"
33 )
34 div(v-show="stage=='Login'")
35 fieldset
36 label(for="nameOrEmail") {{ st.tr["Name or Email"] }}
37 input#nameOrEmail(
38 type="text"
39 v-model="nameOrEmail"
40 )
41 .button-group
42 button(@click="onSubmit()")
43 span {{ st.tr[submitMessage] }}
44 button(
45 v-if="stage!='Update'"
46 type="button"
47 @click="toggleStage()"
48 )
49 span {{ st.tr[stage=="Login" ? "Register" : "Login"] }}
50 button(
51 v-else type="button"
52 @click="doLogout()"
53 )
54 span {{ st.tr["Logout"] }}
55 #dialog.text-center {{ st.tr[infoMsg] }}
56 </template>
57
58 <script>
59 import { store } from "@/store";
60 import { checkNameEmail } from "@/data/userCheck";
61 import { ajax } from "@/utils/ajax";
62 export default {
63 name: "my-upsert-user",
64 data: function() {
65 return {
66 nameOrEmail: "", //for login
67 logStage: "Login", //or Register
68 infoMsg: "",
69 enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
70 st: store.state
71 };
72 },
73 watch: {
74 nameOrEmail: function(newValue) {
75 if (newValue.indexOf("@") >= 0) {
76 this.st.user.email = newValue;
77 this.st.user.name = "";
78 } else {
79 this.st.user.name = newValue;
80 this.st.user.email = "";
81 }
82 }
83 },
84 computed: {
85 submitMessage: function() {
86 switch (this.stage) {
87 case "Login":
88 return "Go";
89 case "Register":
90 return "Send";
91 case "Update":
92 return "Apply";
93 }
94 return "Never reached";
95 },
96 stage: function() {
97 return this.st.user.id > 0 ? "Update" : this.logStage;
98 }
99 },
100 methods: {
101 trySetEnterTime: function(event) {
102 if (event.target.checked) {
103 this.infoMsg = "";
104 this.enterTime = Date.now();
105 }
106 },
107 toggleStage: function() {
108 // Loop login <--> register (update is for logged-in users)
109 this.logStage = this.logStage == "Login" ? "Register" : "Login";
110 },
111 ajaxUrl: function() {
112 switch (this.stage) {
113 case "Login":
114 return "/sendtoken";
115 case "Register":
116 return "/register";
117 case "Update":
118 return "/update";
119 }
120 return "Never reached";
121 },
122 ajaxMethod: function() {
123 switch (this.stage) {
124 case "Login":
125 return "GET";
126 case "Register":
127 return "POST";
128 case "Update":
129 return "PUT";
130 }
131 return "Never reached";
132 },
133 infoMessage: function() {
134 switch (this.stage) {
135 case "Login":
136 return "Connection token sent. Check your emails!";
137 case "Register":
138 return "Registration complete! Please check your emails";
139 case "Update":
140 return "Modifications applied!";
141 }
142 return "Never reached";
143 },
144 onSubmit: function() {
145 // Basic anti-bot strategy:
146 const exitTime = Date.now();
147 if (this.stage == "Register" && exitTime - this.enterTime < 5000) return;
148 let error = undefined;
149 if (this.stage == "Login") {
150 const type = this.nameOrEmail.indexOf("@") >= 0 ? "email" : "name";
151 error = checkNameEmail({ [type]: this.nameOrEmail });
152 } else error = checkNameEmail(this.st.user);
153 if (error) {
154 alert(error);
155 return;
156 }
157 this.infoMsg = "Processing... Please wait";
158 ajax(
159 this.ajaxUrl(),
160 this.ajaxMethod(),
161 this.stage == "Login"
162 ? { nameOrEmail: this.nameOrEmail }
163 : this.st.user,
164 () => {
165 this.infoMsg = this.infoMessage();
166 if (this.stage != "Update") this.nameOrEmail = "";
167 },
168 err => {
169 this.infoMsg = "";
170 alert(err);
171 }
172 );
173 },
174 doLogout: function() {
175 document.getElementById("modalUser").checked = false;
176 this.$router.push("/logout");
177 }
178 }
179 };
180 </script>
181
182 <style lang="sass" scoped>
183 [type="checkbox"].modal+div .card
184 max-width: 370px
185 max-height: 100%
186
187 #dialog
188 padding: 5px
189 color: blue
190 </style>