X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fclient_OLD%2Fjavascripts%2Fcomponents%2FupsertUser.js;fp=client%2Fclient_OLD%2Fjavascripts%2Fcomponents%2FupsertUser.js;h=cca959e50cfa5c337b5ce76a9391a48a1620d4fd;hb=625022fdcf750f0aff8fcd699f7e9b89730e1d10;hp=0000000000000000000000000000000000000000;hpb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;p=vchess.git

diff --git a/client/client_OLD/javascripts/components/upsertUser.js b/client/client_OLD/javascripts/components/upsertUser.js
new file mode 100644
index 00000000..cca959e5
--- /dev/null
+++ b/client/client_OLD/javascripts/components/upsertUser.js
@@ -0,0 +1,160 @@
+// Logic to login, or create / update a user (and also logout)
+vv = Vue.component('my-upsert-user', {
+	data: function() {
+		return {
+			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"
+					@change="trySetEnterTime"/>
+			<div role="dialog">
+				<div class="card">
+					<label class="modal-close" for="modalUser"></label>
+					<h3>{{ stage }}</h3>
+					<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>
+						</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>
+	`,
+	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: {
+		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() {
+			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!";
+			}
+		},
+		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" ? { nameOrEmail: this.nameOrEmail } : this.user,
+				res => {
+					this.infoMsg = this.infoMessage();
+					if (this.stage != "Update")
+					{
+						this.nameOrEmail = "";
+						this.user["email"] = "";
+						this.user["name"] = "";
+						// Store our identifiers in local storage (by little anticipation...)
+						localStorage["myid"] = res.id;
+						localStorage["myname"] = res.name;
+					}
+					setTimeout(() => {
+						this.infoMsg = "";
+						if (this.stage == "Register")
+							this.stage = "Login";
+						document.getElementById("modalUser").checked = false;
+					}, 2000);
+				},
+				err => {
+					this.infoMsg = "";
+					alert(err);
+				}
+			);
+		},
+	}
+});