1 // Logic to login, or create / update a user (and also logout)
2 Vue
.component('my-upsert-user', {
3 props: ["initUser"], //to find the game in storage (assumption: it exists)
6 user: initUser
, //initialized with prop value
7 stage: (!initUser
.email
? "Login" : "Update"),
13 <input id="modalUser" class="modal" type="checkbox"/>
16 <label class="modal-close" for="modalUser">
18 <form id="userForm" @submit.prevent="submit">
20 <label for="useremail">Email</label>
21 <input id="useremail" type="email" v-model="user.email"/>
23 <label for="username">Name</label>
24 <input id="username" type="text" v-model="user.name"/>
27 <label for="notifyNew">Notify new moves & games</label>
28 <input id="notifyNew" type="checkbox" v-model="user.notify"/>
29 <button id="submit" @click.prevent="submit">
30 <span>{{ submitMessage }}</span>
31 <i class="material-icons">send</i>
32 <p v-if="stage!='Update'">
33 <button @click.prevent="toggleStage()">
34 <span>{{ stage=="Login" ? "Register" : "Login" }}</span>
36 <button>Logout</button>
38 <div id="dialog" :style="{display: displayInfo}">{{ infoMsg }}</div>
43 submitMessage: function() {
54 displayInfo: function() {
55 return (this.infoMsg
.length
> 0 ? "block" : "none");
59 toggleStage: function() {
60 this.stage
= (this.stage
== "Login" ? "Register" : "Login");
73 ajaxMethod: function() {
84 infoMessage: function() {
88 return "Connection token sent. Check your emails!";
90 return "Registration complete! Please check your emails.";
92 return "Modifications applied!";
96 // TODO: re-activate simple measures like this: (using time of click on modal)
97 // const exitTime = new Date();
98 // if (this.stage=="Register" && exitTime.getTime() - enterTime.getTime() < 5000)
100 if (!this.user
.name
.match(/[a-z0-9_]+/i))
101 return alert("User name: only alphanumerics and underscore");
102 this.infoMsg
= "Processing... Please wait";
103 ajax(this.ajaxUrl(), this.ajaxMethod(),
104 this.stage
== "Login" ? "PUT" : "POST", this.user
,
106 this.infoMsg
= this.infoMessage();
107 if (this.stage
!= "Update")
109 this.user
["email"] = "";
110 this.user
["name"] = "";
114 document
.getElementById("modalUser").checked
= false;