1 // Logic to login, or create / update a user (and also logout)
2 Vue
.component('my-upsert-user', {
5 user: user
, //initialized with global user object
6 nameOrEmail: "", //for login
7 stage: (!user
.email
? "Login" : "Update"),
9 enterTime: Number
.MAX_SAFE_INTEGER
, //for a basic anti-bot strategy
14 <input id="modalUser" class="modal" type="checkbox"
15 @change="trySetEnterTime"/>
18 <label class="modal-close" for="modalUser"></label>
20 <form id="userForm" @submit.prevent="submit">
21 <div v-show="stage!='Login'">
23 <label for="username">Name</label>
24 <input id="username" type="text" v-model="user.name"/>
27 <label for="useremail">Email</label>
28 <input id="useremail" type="email" v-model="user.email"/>
31 <label for="notifyNew">Notify new moves & games</label>
32 <input id="notifyNew" type="checkbox" v-model="user.notify"/>
35 <div v-show="stage=='Login'">
37 <label for="nameOrEmail">Name or Email</label>
38 <input id="nameOrEmail" type="text" v-model="nameOrEmail"/>
42 <button id="submit" @click.prevent="submit">
43 <span>{{ submitMessage }}</span>
44 <i class="material-icons">send</i>
48 <button v-if="stage!='Update'" @click.prevent="toggleStage()">
49 <span>{{ stage=="Login" ? "Register" : "Login" }}</span>
51 <button v-if="stage=='Update'">Logout</button>
52 <div id="dialog" :style="{display: displayInfo}">{{ infoMsg }}</div>
58 submitMessage: function() {
69 displayInfo: function() {
70 return (this.infoMsg
.length
> 0 ? "block" : "none");
74 trySetEnterTime: function(event
) {
75 if (!!event
.target
.checked
)
76 this.enterTime
= Date
.now();
78 toggleStage: function() {
79 // Loop login <--> register (update is for logged-in users)
80 this.stage
= (this.stage
== "Login" ? "Register" : "Login");
93 ajaxMethod: function() {
104 infoMessage: function() {
108 return "Connection token sent. Check your emails!";
110 return "Registration complete! Please check your emails.";
112 return "Modifications applied!";
116 // Basic anti-bot strategy:
117 const exitTime
= Date
.now();
118 if (this.stage
== "Register" && exitTime
- this.enterTime
< 5000)
119 return; //silently return, in (curious) case of it was legitimate
120 let error
= undefined;
121 if (this.stage
== 'Login')
123 const type
= (this.nameOrEmail
.indexOf('@') >= 0 ? "email" : "name");
124 error
= checkNameEmail({[type
]: this.nameOrEmail
});
127 error
= checkNameEmail(this.user
);
130 this.infoMsg
= "Processing... Please wait";
131 ajax(this.ajaxUrl(), this.ajaxMethod(),
132 this.stage
== "Login" ? { nameOrEmail: this.nameOrEmail
} : this.user
,
134 this.infoMsg
= this.infoMessage();
135 if (this.stage
!= "Update")
137 this.nameOrEmail
= "";
138 this.user
["email"] = "";
139 this.user
["name"] = "";
143 document
.getElementById("modalUser").checked
= false;