X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2FupsertUser.js;h=dde6708e5f5453f61641f8db9fb45ef8d60becfe;hb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;hp=29444b46f67d8b8dcd5e6fca5dc5d2f88b6dd6bb;hpb=b57dbd126734b4398861292c611197c6991ed3eb;p=vchess.git

diff --git a/public/javascripts/components/upsertUser.js b/public/javascripts/components/upsertUser.js
index 29444b46..dde6708e 100644
--- a/public/javascripts/components/upsertUser.js
+++ b/public/javascripts/components/upsertUser.js
@@ -1,41 +1,58 @@
 // Logic to login, or create / update a user (and also logout)
-Vue.component('my-upsert-user', {
-	props: ["initUser"], //to find the game in storage (assumption: it exists)
+vv = Vue.component('my-upsert-user', {
 	data: function() {
 		return {
-			user: initUser, //initialized with prop value
-			stage: (!initUser.email ? "Login" : "Update"),
+			user: user, //initialized with global user object
+			nameOrEmail: "", //for login
+			stage: (!user.email ? "Login" : "Update"),
 			infoMsg: "",
+			enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
 		};
 	},
 	template: `
 		<div>
-			<input id="modalUser" class="modal" type="checkbox"/>
+			<input id="modalUser" class="modal" type="checkbox"
+					@change="trySetEnterTime"/>
 			<div role="dialog">
 				<div class="card">
-					<label class="modal-close" for="modalUser">
+					<label class="modal-close" for="modalUser"></label>
 					<h3>{{ stage }}</h3>
-					<form id="userForm" @submit.prevent="submit">
-						<fieldset>
-							<label for="useremail">Email</label>
-							<input id="useremail" type="email" v-model="user.email"/>
-						<fieldset>
-							<label for="username">Name</label>
-							<input id="username" type="text" v-model="user.name"/>
-						</fieldset>
-						<fieldset>
-							<label for="notifyNew">Notify new moves &amp; games</label>
-							<input id="notifyNew" type="checkbox" v-model="user.notify"/>
-						<button id="submit" @click.prevent="submit">
+					<form id="userForm" @submit.prevent="onSubmit()">
+						<div v-show="stage!='Login'">
+							<fieldset>
+								<label for="username">Name</label>
+								<input id="username" type="text" v-model="user.name"/>
+							</fieldset>
+							<fieldset>
+								<label for="useremail">Email</label>
+								<input id="useremail" type="email" v-model="user.email"/>
+							</fieldset>
+							<fieldset>
+								<label for="notifyNew">Notify new moves &amp; games</label>
+								<input id="notifyNew" type="checkbox" v-model="user.notify"/>
+							</fieldset>
+						</div>
+						<div v-show="stage=='Login'">
+							<fieldset>
+								<label for="nameOrEmail">Name or Email</label>
+								<input id="nameOrEmail" type="text" v-model="nameOrEmail"/>
+							</fieldset>
+						</div>
+					</form>
+					<div class="button-group">
+						<button id="submit" @click="onSubmit()">
 							<span>{{ submitMessage }}</span>
 							<i class="material-icons">send</i>
-				<p v-if="stage!='Update'">
-					<button @click.prevent="toggleStage()">
-						<span>{{ stage=="Login" ? "Register" : "Login" }}</span>
-					</button>
-					<button>Logout</button>
-				</p>
-				<div id="dialog" :style="{display: displayInfo}">{{ infoMsg }}</div>
+						</button>
+						<button v-if="stage!='Update'" @click="toggleStage()">
+							<span>{{ stage=="Login" ? "Register" : "Login" }}</span>
+						</button>
+						<button v-if="stage=='Update'" onClick="location.replace('/logout')">
+							<span>Logout</span>
+						</button>
+					</div>
+					<div id="dialog" :style="{display: displayInfo}">{{ infoMsg }}</div>
+				</div>
 			</div>
 		</div>
 	`,
@@ -56,7 +73,12 @@ Vue.component('my-upsert-user', {
 		},
 	},
 	methods: {
+		trySetEnterTime: function(event) {
+			if (!!event.target.checked)
+				this.enterTime = Date.now();
+		},
 		toggleStage: function() {
+			// Loop login <--> register (update is for logged-in users)
 			this.stage = (this.stage == "Login" ? "Register" : "Login");
 		},
 		ajaxUrl: function() {
@@ -92,27 +114,42 @@ Vue.component('my-upsert-user', {
 					return "Modifications applied!";
 			}
 		},
-		submit: function() {
-			// TODO: re-activate simple measures like this: (using time of click on modal)
-//			const exitTime = new Date();
-//			if (this.stage=="Register" && exitTime.getTime() - enterTime.getTime() < 5000)
-//				return;
-			if (!this.user.name.match(/[a-z0-9_]+/i))
-				return alert("User name: only alphanumerics and underscore");
+		onSubmit: function() {
+			// Basic anti-bot strategy:
+			const exitTime = Date.now();
+			if (this.stage == "Register" && exitTime - this.enterTime < 5000)
+				return; //silently return, in (curious) case of it was legitimate
+			let error = undefined;
+			if (this.stage == 'Login')
+			{
+				const type = (this.nameOrEmail.indexOf('@') >= 0 ? "email" : "name");
+				error = checkNameEmail({[type]: this.nameOrEmail});
+			}
+			else
+				error = checkNameEmail(this.user);
+			if (!!error)
+				return alert(error);
 			this.infoMsg = "Processing... Please wait";
 			ajax(this.ajaxUrl(), this.ajaxMethod(),
-				this.stage == "Login" ? "PUT" : "POST", this.user,
+				this.stage == "Login" ? { nameOrEmail: this.nameOrEmail } : this.user,
 				res => {
 					this.infoMsg = this.infoMessage();
 					if (this.stage != "Update")
 					{
+						this.nameOrEmail = "";
 						this.user["email"] = "";
 						this.user["name"] = "";
 					}
 					setTimeout(() => {
 						this.infoMsg = "";
+						if (this.stage == "Register")
+							this.stage = "Login";
 						document.getElementById("modalUser").checked = false;
 					}, 2000);
+				},
+				err => {
+					this.infoMsg = "";
+					alert(err);
 				}
 			);
 		},