X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FUpsertUser.vue;fp=client%2Fnext_src%2Fcomponents%2FupsertUser.js;h=5ea93a05531f80bfb1cd493768f5bdd16a7a25b9;hb=c66a829b3770122fe0ff2fb9db8def9635bbc334;hp=cca959e50cfa5c337b5ce76a9391a48a1620d4fd;hpb=ccd4a2b74aecdd6e52960a9ed42acea3e40c9271;p=vchess.git

diff --git a/client/next_src/components/upsertUser.js b/client/src/components/UpsertUser.vue
similarity index 61%
rename from client/next_src/components/upsertUser.js
rename to client/src/components/UpsertUser.vue
index cca959e5..5ea93a05 100644
--- a/client/next_src/components/upsertUser.js
+++ b/client/src/components/UpsertUser.vue
@@ -1,61 +1,50 @@
 // Logic to login, or create / update a user (and also logout)
-vv = Vue.component('my-upsert-user', {
+<template lang="pug">
+div
+  input#modalUser.modal(type="checkbox" @change="trySetEnterTime")
+  div(role="dialog")
+    .card
+      label.modal-close(for="modalUser")
+      h3 {{ stage }}
+      form#userForm(@submit.prevent="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"/>
+          fieldset
+            <label for="notifyNew">Notify new moves &amp; games</label>
+            <input id="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"/>
+      .button-group
+        button#submit(@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')")
+          span Logout
+      #dialog(:style="{display: displayInfo}") {{ infoMsg }}
+</template>
+
+<script>
+import { store } from "@/store";
+export default {
+  name: 'my-upsert-user',
 	data: function() {
 		return {
-			user: user, //initialized with global user object
+			user: store.state.user, //initialized with global user object
 			nameOrEmail: "", //for login
-			stage: (!user.email ? "Login" : "Update"),
+			stage: (!store.state.user.id ? "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)
@@ -142,6 +131,9 @@ vv = Vue.component('my-upsert-user', {
 						// 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 = "";
@@ -156,5 +148,6 @@ vv = Vue.component('my-upsert-user', {
 				}
 			);
 		},
-	}
-});
+	},
+};
+</script>