Commit | Line | Data |
---|---|---|
b57dbd12 BA |
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) | |
4 | data: function() { | |
5 | return { | |
6 | user: initUser, //initialized with prop value | |
7 | stage: (!initUser.email ? "Login" : "Update"), | |
8 | infoMsg: "", | |
9 | }; | |
10 | }, | |
11 | template: ` | |
12 | <div> | |
13 | <input id="modalUser" class="modal" type="checkbox"/> | |
14 | <div role="dialog"> | |
15 | <div class="card"> | |
16 | <label class="modal-close" for="modalUser"> | |
17 | <h3>{{ stage }}</h3> | |
18 | <form id="userForm" @submit.prevent="submit"> | |
19 | <fieldset> | |
20 | <label for="useremail">Email</label> | |
21 | <input id="useremail" type="email" v-model="user.email"/> | |
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="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> | |
35 | </button> | |
36 | <button>Logout</button> | |
37 | </p> | |
38 | <div id="dialog" :style="{display: displayInfo}">{{ infoMsg }}</div> | |
39 | </div> | |
40 | </div> | |
41 | `, | |
42 | computed: { | |
43 | submitMessage: function() { | |
44 | switch (this.stage) | |
45 | { | |
46 | case "Login": | |
47 | return "Go"; | |
48 | case "Register": | |
49 | return "Send"; | |
50 | case "Update": | |
51 | return "Apply"; | |
52 | } | |
53 | }, | |
54 | displayInfo: function() { | |
55 | return (this.infoMsg.length > 0 ? "block" : "none"); | |
56 | }, | |
57 | }, | |
58 | methods: { | |
59 | toggleStage: function() { | |
60 | this.stage = (this.stage == "Login" ? "Register" : "Login"); | |
61 | }, | |
62 | ajaxUrl: function() { | |
63 | switch (this.stage) | |
64 | { | |
65 | case "Login": | |
66 | return "/sendtoken"; | |
67 | case "Register": | |
68 | return "/register"; | |
69 | case "Update": | |
70 | return "/update"; | |
71 | } | |
72 | }, | |
73 | ajaxMethod: function() { | |
74 | switch (this.stage) | |
75 | { | |
76 | case "Login": | |
77 | return "GET"; | |
78 | case "Register": | |
79 | return "POST"; | |
80 | case "Update": | |
81 | return "PUT"; | |
82 | } | |
83 | }, | |
84 | infoMessage: function() { | |
85 | switch (this.stage) | |
86 | { | |
87 | case "Login": | |
88 | return "Connection token sent. Check your emails!"; | |
89 | case "Register": | |
90 | return "Registration complete! Please check your emails."; | |
91 | case "Update": | |
92 | return "Modifications applied!"; | |
93 | } | |
94 | }, | |
95 | submit: function() { | |
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) | |
99 | // return; | |
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, | |
105 | res => { | |
106 | this.infoMsg = this.infoMessage(); | |
107 | if (this.stage != "Update") | |
108 | { | |
109 | this.user["email"] = ""; | |
110 | this.user["name"] = ""; | |
111 | } | |
112 | setTimeout(() => { | |
113 | this.infoMsg = ""; | |
114 | document.getElementById("modalUser").checked = false; | |
115 | }, 2000); | |
116 | } | |
117 | ); | |
118 | }, | |
119 | } | |
120 | }); |