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

diff --git a/public/javascripts/components/upsertUser.js b/public/javascripts/components/upsertUser.js
new file mode 100644
index 00000000..29444b46
--- /dev/null
+++ b/public/javascripts/components/upsertUser.js
@@ -0,0 +1,120 @@
+// 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)
+	data: function() {
+		return {
+			user: initUser, //initialized with prop value
+			stage: (!initUser.email ? "Login" : "Update"),
+			infoMsg: "",
+		};
+	},
+	template: `
+		<div>
+			<input id="modalUser" class="modal" type="checkbox"/>
+			<div role="dialog">
+				<div class="card">
+					<label class="modal-close" for="modalUser">
+					<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">
+							<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>
+			</div>
+		</div>
+	`,
+	computed: {
+		submitMessage: function() {
+			switch (this.stage)
+			{
+				case "Login":
+					return "Go";
+				case "Register":
+					return "Send";
+				case "Update":
+					return "Apply";
+			}
+		},
+		displayInfo: function() {
+			return (this.infoMsg.length > 0 ? "block" : "none");
+		},
+	},
+	methods: {
+		toggleStage: function() {
+			this.stage = (this.stage == "Login" ? "Register" : "Login");
+		},
+		ajaxUrl: function() {
+			switch (this.stage)
+			{
+				case "Login":
+					return "/sendtoken";
+				case "Register":
+					return "/register";
+				case "Update":
+					return "/update";
+			}
+		},
+		ajaxMethod: function() {
+			switch (this.stage)
+			{
+				case "Login":
+					return "GET";
+				case "Register":
+					return "POST";
+				case "Update":
+					return "PUT";
+			}
+		},
+		infoMessage: function() {
+			switch (this.stage)
+			{
+				case "Login":
+					return "Connection token sent. Check your emails!";
+				case "Register":
+					return "Registration complete! Please check your emails.";
+				case "Update":
+					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");
+			this.infoMsg = "Processing... Please wait";
+			ajax(this.ajaxUrl(), this.ajaxMethod(),
+				this.stage == "Login" ? "PUT" : "POST", this.user,
+				res => {
+					this.infoMsg = this.infoMessage();
+					if (this.stage != "Update")
+					{
+						this.user["email"] = "";
+						this.user["name"] = "";
+					}
+					setTimeout(() => {
+						this.infoMsg = "";
+						document.getElementById("modalUser").checked = false;
+					}, 2000);
+				}
+			);
+		},
+	}
+});