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