X-Git-Url: https://git.auder.net/assets/icon_infos.svg?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FUpsertUser.vue;h=51edba334ad3d7a3ba8957ecd15fbf0d34bbc1fc;hb=5fde3a01497262862afc4cb4c9457d4e0ad69a4a;hp=5ea93a05531f80bfb1cd493768f5bdd16a7a25b9;hpb=c66a829b3770122fe0ff2fb9db8def9635bbc334;p=vchess.git

diff --git a/client/src/components/UpsertUser.vue b/client/src/components/UpsertUser.vue
index 5ea93a05..51edba33 100644
--- a/client/src/components/UpsertUser.vue
+++ b/client/src/components/UpsertUser.vue
@@ -1,153 +1,179 @@
-// Logic to login, or create / update a user (and also logout)
 <template lang="pug">
 div
   input#modalUser.modal(type="checkbox" @change="trySetEnterTime")
-  div(role="dialog")
+  div(role="dialog" data-checkbox="modalUser")
     .card
       label.modal-close(for="modalUser")
       h3 {{ stage }}
-      form#userForm(@submit.prevent="onSubmit()")
+      form#userForm(@submit.prevent="onSubmit()" @keyup.enter="onSubmit")
         div(v-show="stage!='Login'")
           fieldset
             label(for="username") Name
             input#username(type="text" v-model="user.name")
           fieldset
-            <label for="useremail">Email</label>
-            <input id="useremail" type="email" v-model="user.email"/>
+            label(for="useremail") Email
+            input#useremail(type="email" v-model="user.email")
           fieldset
-            <label for="notifyNew">Notify new moves &amp; games</label>
-            <input id="notifyNew" type="checkbox" v-model="user.notify"/>
+            label(for="notifyNew") Notify new moves &amp; games
+            input#notifyNew(type="checkbox" v-model="user.notify")
         div(v-show="stage=='Login'")
           fieldset
-            <label for="nameOrEmail">Name or Email</label>
-            <input id="nameOrEmail" type="text" v-model="nameOrEmail"/>
+            label(for="nameOrEmail") Name or Email
+            input#nameOrEmail(type="text" v-model="nameOrEmail")
       .button-group
-        button#submit(@click="onSubmit()")
+        button#submit(type="button" @click="onSubmit()")
           span {{ submitMessage }}
           i.material-icons send
         button(v-if="stage!='Update'" @click="toggleStage()")
           span {{ stage=="Login" ? "Register" : "Login" }}
-        button(v-if="stage=='Update'" onClick="location.replace('/logout')")
+        button#logoutBtn(v-else @click="doLogout()")
           span Logout
       #dialog(:style="{display: displayInfo}") {{ infoMsg }}
 </template>
 
 <script>
 import { store } from "@/store";
+import { checkNameEmail } from "@/data/userCheck";
+import { ajax } from "@/utils/ajax";
 export default {
   name: 'my-upsert-user',
-	data: function() {
-		return {
-			user: store.state.user, //initialized with global user object
-			nameOrEmail: "", //for login
-			stage: (!store.state.user.id ? "Login" : "Update"),
-			infoMsg: "",
-			enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
-		};
-	},
-	computed: {
-		submitMessage: function() {
-			switch (this.stage)
+  data: function() {
+    return {
+      user: store.state.user,
+      nameOrEmail: "", //for login
+      logStage: "Login", //or Register
+      infoMsg: "",
+      enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
+    };
+  },
+	watch: {
+		nameOrEmail: function(newValue) {
+			if (newValue.indexOf('@') >= 0)
 			{
-				case "Login":
-					return "Go";
-				case "Register":
-					return "Send";
-				case "Update":
-					return "Apply";
+				this.user.email = newValue;
+				this.user.name = "";
 			}
-		},
-		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')
+			else
 			{
-				const type = (this.nameOrEmail.indexOf('@') >= 0 ? "email" : "name");
-				error = checkNameEmail({[type]: this.nameOrEmail});
+				this.user.name = newValue;
+				this.user.email = "";
 			}
-			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;
-            // Also in global object
-            this.$user.id = res.id;
-            this.$user.name = res.name;
-					}
-					setTimeout(() => {
-						this.infoMsg = "";
-						if (this.stage == "Register")
-							this.stage = "Login";
-						document.getElementById("modalUser").checked = false;
-					}, 2000);
-				},
-				err => {
-					this.infoMsg = "";
-					alert(err);
-				}
-			);
 		},
 	},
+  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");
+    },
+    stage: function() {
+      return this.user.id > 0 ? "Update" : this.logStage;
+    },
+  },
+  methods: {
+    trySetEnterTime: function(event) {
+      if (!!event.target.checked)
+        this.enterTime = Date.now();
+    },
+    toggleStage: function() {
+      // Loop login <--> register (update is for logged-in users)
+      this.logStage = (this.logStage == "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 = "";
+          setTimeout(() => {
+            this.infoMsg = "";
+            document.getElementById("modalUser").checked = false;
+          }, 2000);
+        },
+        err => {
+          this.infoMsg = "";
+          alert(err);
+        }
+      );
+    },
+    doLogout: function() {
+      let logoutBtn = document.getElementById("logoutBtn");
+      logoutBtn.disabled = true;
+      // NOTE: this local cleaning would logically happen when we're sure
+      // that token is erased. But in the case a user clear the cookies,
+      // it would lead to situations where he cannot ("locally") log out.
+      // At worst, if token deletion fails the user can erase cookie manually.
+      this.user.id = 0;
+      this.user.name = "";
+      this.user.email = "";
+      this.user.notify = false;
+      localStorage.removeItem("myid");
+      localStorage.removeItem("myname");
+      ajax("/logout", "GET", () => {
+        logoutBtn.disabled = false; //for symmetry, but not very useful...
+        document.getElementById("modalUser").checked = false;
+        // this.$router.push("/") will fail if logout from Hall, so:
+        document.location.reload(true);
+      });
+    },
+  },
 };
 </script>