Client now running. Toward fully 1-page (with filters for variants)
[vchess.git] / client / src / components / UpsertUser.vue
1 // Logic to login, or create / update a user (and also logout)
2 <template lang="pug">
3 div
4 input#modalUser.modal(type="checkbox" @change="trySetEnterTime")
5 div(role="dialog")
6 .card
7 label.modal-close(for="modalUser")
8 h3 {{ stage }}
9 form#userForm(@submit.prevent="onSubmit()")
10 div(v-show="stage!='Login'")
11 fieldset
12 label(for="username") Name
13 input#username(type="text" v-model="user.name")
14 fieldset
15 <label for="useremail">Email</label>
16 <input id="useremail" type="email" v-model="user.email"/>
17 fieldset
18 <label for="notifyNew">Notify new moves &amp; games</label>
19 <input id="notifyNew" type="checkbox" v-model="user.notify"/>
20 div(v-show="stage=='Login'")
21 fieldset
22 <label for="nameOrEmail">Name or Email</label>
23 <input id="nameOrEmail" type="text" v-model="nameOrEmail"/>
24 .button-group
25 button#submit(@click="onSubmit()")
26 span {{ submitMessage }}
27 i.material-icons send
28 button(v-if="stage!='Update'" @click="toggleStage()")
29 span {{ stage=="Login" ? "Register" : "Login" }}
30 button(v-if="stage=='Update'" onClick="location.replace('/logout')")
31 span Logout
32 #dialog(:style="{display: displayInfo}") {{ infoMsg }}
33 </template>
34
35 <script>
36 import { store } from "@/store";
37 export default {
38 name: 'my-upsert-user',
39 data: function() {
40 return {
41 user: store.state.user, //initialized with global user object
42 nameOrEmail: "", //for login
43 stage: (!store.state.user.id ? "Login" : "Update"),
44 infoMsg: "",
45 enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
46 };
47 },
48 computed: {
49 submitMessage: function() {
50 switch (this.stage)
51 {
52 case "Login":
53 return "Go";
54 case "Register":
55 return "Send";
56 case "Update":
57 return "Apply";
58 }
59 },
60 displayInfo: function() {
61 return (this.infoMsg.length > 0 ? "block" : "none");
62 },
63 },
64 methods: {
65 trySetEnterTime: function(event) {
66 if (!!event.target.checked)
67 this.enterTime = Date.now();
68 },
69 toggleStage: function() {
70 // Loop login <--> register (update is for logged-in users)
71 this.stage = (this.stage == "Login" ? "Register" : "Login");
72 },
73 ajaxUrl: function() {
74 switch (this.stage)
75 {
76 case "Login":
77 return "/sendtoken";
78 case "Register":
79 return "/register";
80 case "Update":
81 return "/update";
82 }
83 },
84 ajaxMethod: function() {
85 switch (this.stage)
86 {
87 case "Login":
88 return "GET";
89 case "Register":
90 return "POST";
91 case "Update":
92 return "PUT";
93 }
94 },
95 infoMessage: function() {
96 switch (this.stage)
97 {
98 case "Login":
99 return "Connection token sent. Check your emails!";
100 case "Register":
101 return "Registration complete! Please check your emails.";
102 case "Update":
103 return "Modifications applied!";
104 }
105 },
106 onSubmit: function() {
107 // Basic anti-bot strategy:
108 const exitTime = Date.now();
109 if (this.stage == "Register" && exitTime - this.enterTime < 5000)
110 return; //silently return, in (curious) case of it was legitimate
111 let error = undefined;
112 if (this.stage == 'Login')
113 {
114 const type = (this.nameOrEmail.indexOf('@') >= 0 ? "email" : "name");
115 error = checkNameEmail({[type]: this.nameOrEmail});
116 }
117 else
118 error = checkNameEmail(this.user);
119 if (!!error)
120 return alert(error);
121 this.infoMsg = "Processing... Please wait";
122 ajax(this.ajaxUrl(), this.ajaxMethod(),
123 this.stage == "Login" ? { nameOrEmail: this.nameOrEmail } : this.user,
124 res => {
125 this.infoMsg = this.infoMessage();
126 if (this.stage != "Update")
127 {
128 this.nameOrEmail = "";
129 this.user["email"] = "";
130 this.user["name"] = "";
131 // Store our identifiers in local storage (by little anticipation...)
132 localStorage["myid"] = res.id;
133 localStorage["myname"] = res.name;
134 // Also in global object
135 this.$user.id = res.id;
136 this.$user.name = res.name;
137 }
138 setTimeout(() => {
139 this.infoMsg = "";
140 if (this.stage == "Register")
141 this.stage = "Login";
142 document.getElementById("modalUser").checked = false;
143 }, 2000);
144 },
145 err => {
146 this.infoMsg = "";
147 alert(err);
148 }
149 );
150 },
151 },
152 };
153 </script>