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