Seamless host switching

htdocs/App.vue

@@ -3,7 +3,7 @@
 		<Navbar v-model:server="server" :user="user" />
 		<div class="container">
 			<Login :secret="secret" v-model:client="client" v-model:server="server" v-model:user="user" />
-			<router-view v-if="user"></router-view>
+			<router-view v-if="user" :client="client"></router-view>
 		</div>
 	</div>
 </template>
@@ -38,10 +38,10 @@
 				if(this.heartbeat) window.clearInterval(this.heartbeat);
 				else {
 					[
-						{ path: '/', component: RouteSchedule, props: { client: this.client } },
+						{ path: '/', component: RouteSchedule },
-						{ path: '/patient', component: RoutePatientLookup, props: { client: this.client } },
+						{ path: '/patient', component: RoutePatientLookup },
-						{ path: '/patient/:id', component: RoutePatientDetail, props: { client: this.client } },
+						{ path: '/patient/:id', component: RoutePatientDetail },
-						{ path: '/recall', component: RouteRecall, props: { client: this.client } },
+						{ path: '/recall', component: RouteRecall },
 					].forEach(route => this.$root.$router.addRoute(route));
 					await this.$root.$router.replace(this.$route);
 				}

htdocs/Login.vue

@@ -73,7 +73,6 @@
 		data() {
 			return {
 				show: false,
-				host: vistax.state.host,
 				x_client: this.client,
 				x_server: this.server,
 				x_user: this.user,
@@ -82,25 +81,21 @@
 				verifycode: null
 			};
 		},
-		watch: {
+		computed: {
-			host(value) {
+			host: {
+				get() {
+					return vistax.state.host;
+				},
+				set(value) {
 					vistax.state.host = value;
+				}
+			}
+		},
+		watch: {
+			host: {
+				async handler(value) {
 					this.logout();
-			},
+					this.x_client = await (value ? vistax.Client.fromCookie(this.secret, value) : vistax.Client.fromCookie(this.secret));
-			client(value) { this.x_client = value; },
-			x_client(value) { this.$emit('update:client', value); },
-			server(value) { this.x_server = value; },
-			x_server(value) { this.$emit('update:server', value); },
-			user(value) { this.x_user = value; },
-			x_user(value) { this.$emit('update:user', value); }
-		},
-		async mounted() {
-			this.connect();
-		},
-		methods: {
-			async connect() {
-				if(this.x_client) return this.x_client;
-				this.x_client = await vistax.Client.fromCookie(this.secret);
 					this.banner = await this.x_client.XUS_INTRO_MSG();
 					if((await this.x_client.userinfo()).result) try {
 						var user = await this.x_client.XUS_GET_USER_INFO();
@@ -113,10 +108,18 @@
 					this.$emit('update:server', this.x_server = (await this.x_client.serverinfo()).result);
 					console.log('Backend secret', this.secret);
 					console.log(this.banner);
-				return this.x_client;
+				}, immediate: true
 			},
+			client(value) { this.x_client = value; },
+			x_client(value) { this.$emit('update:client', value); },
+			server(value) { this.x_server = value; },
+			x_server(value) { this.$emit('update:server', value); },
+			user(value) { this.x_user = value; },
+			x_user(value) { this.$emit('update:user', value); }
+		},
+		methods: {
 			async login(evt) {
-				if(!this.x_client) await this.connect();
+				if(this.x_client) {
 					var res = await ((this.accesscode && this.verifycode) ? this.x_client.authenticate(this.accesscode + ';' + this.verifycode) : this.x_client.authenticate());
 					if(!!res.result[0]) {
 						var user = await this.x_client.XUS_GET_USER_INFO();
@@ -126,6 +129,7 @@
 					this.show = !this.x_user;
 					this.$emit('update:server', this.x_server = (await this.x_client.serverinfo()).result);
 					console.log('Authenticate', res);
+				}
 			},
 			async logout(evt) {
 				if(this.x_client) {
@@ -134,6 +138,8 @@
 					this.$emit('update:server', this.x_server = null);
 					this.$emit('update:user', this.x_user = null);
 				}
+				this.banner = null;
+				this.show = true;
 			}
 		}
 	};