1 // Logic to login, or create / update a user (and also logout)
2 vv
= 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="onSubmit()">
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 <div class="button-group">
43 <button id="submit" @click="onSubmit()">
44 <span>{{ submitMessage }}</span>
45 <i class="material-icons">send</i>
47 <button v-if="stage!='Update'" @click="toggleStage()">
48 <span>{{ stage=="Login" ? "Register" : "Login" }}</span>
50 <button v-if="stage=='Update'" onClick="location.replace('/logout')">
54 <div id="dialog" :style="{display: displayInfo}">{{ infoMsg }}</div>
60 submitMessage: function() {
71 displayInfo: function() {
72 return (this.infoMsg
.length
> 0 ? "block" : "none");
76 trySetEnterTime: function(event
) {
77 if (!!event
.target
.checked
)
78 this.enterTime
= Date
.now();
80 toggleStage: function() {
81 // Loop login <--> register (update is for logged-in users)
82 this.stage
= (this.stage
== "Login" ? "Register" : "Login");
95 ajaxMethod: function() {
106 infoMessage: function() {
110 return "Connection token sent. Check your emails!";
112 return "Registration complete! Please check your emails.";
114 return "Modifications applied!";
117 onSubmit: function() {
118 // Basic anti-bot strategy:
119 const exitTime
= Date
.now();
120 if (this.stage
== "Register" && exitTime
- this.enterTime
< 5000)
121 return; //silently return, in (curious) case of it was legitimate
122 let error
= undefined;
123 if (this.stage
== 'Login')
125 const type
= (this.nameOrEmail
.indexOf('@') >= 0 ? "email" : "name");
126 error
= checkNameEmail({[type
]: this.nameOrEmail
});
129 error
= checkNameEmail(this.user
);
132 this.infoMsg
= "Processing... Please wait";
133 ajax(this.ajaxUrl(), this.ajaxMethod(),
134 this.stage
== "Login" ? { nameOrEmail: this.nameOrEmail
} : this.user
,
136 this.infoMsg
= this.infoMessage();
137 if (this.stage
!= "Update")
139 this.nameOrEmail
= "";
140 this.user
["email"] = "";
141 this.user
["name"] = "";
142 // Store our identifiers in local storage (by little anticipation...)
143 localStorage
["myid"] = res
.id
;
144 localStorage
["myname"] = res
.name
;
148 if (this.stage
== "Register")
149 this.stage
= "Login";
150 document
.getElementById("modalUser").checked
= false;