Separate timeControl logic into utils/timeControl
[vchess.git] / client / src / components / UpsertUser.vue
CommitLineData
b57dbd12 1// Logic to login, or create / update a user (and also logout)
c66a829b
BA
2<template lang="pug">
3div
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 &amp; 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>
36import { store } from "@/store";
37export 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>