From 5b17a2fbe4a0024e0af74e60a1cfe2112268e1f9 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Sun, 3 Mar 2019 19:47:49 +0200
Subject: [PATCH] Port session list to vue.

---
 client/components/Session.vue            | 55 ++++++++++++++++++++++++
 client/components/Windows/Settings.vue   | 26 +++++++++--
 client/css/style.css                     |  1 +
 client/js/socket-events/configuration.js |  5 ---
 client/js/socket-events/sessions_list.js | 33 +-------------
 client/js/store.js                       |  8 ++++
 client/views/session.tpl                 | 25 -----------
 7 files changed, 89 insertions(+), 64 deletions(-)
 create mode 100644 client/components/Session.vue
 delete mode 100644 client/views/session.tpl

diff --git a/client/components/Session.vue b/client/components/Session.vue
new file mode 100644
index 00000000..6af7d64f
--- /dev/null
+++ b/client/components/Session.vue
@@ -0,0 +1,55 @@
+<template>
+	<p>
+		<button
+			class="btn pull-right remove-session"
+			@click.prevent="signOut"
+		>
+			<template v-if="session.current">
+				Sign out
+			</template>
+			<template v-else>
+				Revoke
+			</template>
+		</button>
+
+		<strong>{{ session.agent }}</strong>
+
+		<a
+			:href="'https://ipinfo.io/'+session.ip"
+			target="_blank"
+			rel="noopener"
+		>{{ session.ip }}</a>
+
+		<template v-if="!session.current">
+			<br>
+			<template v-if="session.active">
+				<em>Currently active</em>
+			</template>
+			<template v-else>
+				Last used on <time>{{ session.lastUse | localetime }}</time>
+			</template>
+		</template>
+	</p>
+</template>
+
+<script>
+const Auth = require("../js/auth");
+const socket = require("../js/socket");
+
+export default {
+	name: "Session",
+	props: {
+		session: Object,
+	},
+	methods: {
+		signOut() {
+			if (!this.session.current) {
+				socket.emit("sign-out", this.session.token);
+			} else {
+				socket.emit("sign-out");
+				Auth.signout();
+			}
+		},
+	},
+};
+</script>
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index ad4ba9b3..2c754340 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -471,13 +471,29 @@
 				class="session-list"
 			>
 				<h2>Sessions</h2>
-				<!-- TODO: Sessions -->
 
 				<h3>Current session</h3>
-				<div id="session-current" />
+				<div
+					v-if="$store.getters.currentSession"
+					id="session-current"
+				>
+					<Session :session="$store.getters.currentSession" />
+				</div>
 
 				<h3>Other sessions</h3>
-				<div id="session-list" />
+				<div id="session-list">
+					<p v-if="$store.state.sessions.length == 0">Loading…</p>
+					<p v-else-if="$store.getters.otherSessions.length == 0">
+						<em>You are not currently logged in to any other device.</em>'
+					</p>
+					<template v-else>
+						<Session
+							v-for="session in $store.getters.otherSessions"
+							:key="session.token"
+							:session="session"
+						/>
+					</template>
+				</div>
 			</div>
 		</form>
 
@@ -488,11 +504,13 @@
 // const storage = require("../../js/localStorage");  // TODO: use this
 import socket from "../../js/socket";
 import RevealPassword from "../RevealPassword.vue";
+import Session from "../Session.vue";
 
 export default {
 	name: "Settings",
 	components: {
 		RevealPassword,
+		Session,
 	},
 	data() {
 		return {
@@ -510,6 +528,8 @@ export default {
 	mounted() {
 		this.options = require("../../js/options"); // TODO: do this in a smarter way
 
+		socket.emit("sessions:get");
+
 		// Enable protocol handler registration if supported
 		if (window.navigator.registerProtocolHandler) {
 			this.canRegisterProtocol = true;
diff --git a/client/css/style.css b/client/css/style.css
index 2c0e2bc7..6d8d6b2f 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -559,6 +559,7 @@ kbd {
 	display: none;
 	flex-direction: column;
 	width: 220px;
+	max-height: 100%;
 	will-change: transform;
 }
 
diff --git a/client/js/socket-events/configuration.js b/client/js/socket-events/configuration.js
index 09a505d9..50f85c34 100644
--- a/client/js/socket-events/configuration.js
+++ b/client/js/socket-events/configuration.js
@@ -34,11 +34,6 @@ socket.on("configuration", function(data) {
 
 	vueApp.serverConfiguration = data;
 
-	$("#settings").on("show", () => {
-		$("#session-list").html("<p>Loading…</p>");
-		socket.emit("sessions:get");
-	});
-
 	if (data.fileUpload) {
 		upload.initialize(data.fileUploadMaxFileSize);
 	}
diff --git a/client/js/socket-events/sessions_list.js b/client/js/socket-events/sessions_list.js
index 91e2a57a..dd47ee14 100644
--- a/client/js/socket-events/sessions_list.js
+++ b/client/js/socket-events/sessions_list.js
@@ -1,37 +1,8 @@
 "use strict";
-
-const $ = require("jquery");
-const Auth = require("../auth");
 const socket = require("../socket");
-const templates = require("../../views");
+const {vueApp} = require("../vue");
 
 socket.on("sessions:list", function(data) {
 	data.sort((a, b) => b.lastUse - a.lastUse);
-
-	let html = "";
-	data.forEach((connection) => {
-		if (connection.current) {
-			$("#session-current").html(templates.session(connection));
-			return;
-		}
-
-		html += templates.session(connection);
-	});
-
-	if (html.length === 0) {
-		html = "<p><em>You are not currently logged in to any other device.</em></p>";
-	}
-
-	$("#session-list").html(html);
-});
-
-$("#settings").on("click", ".remove-session", function() {
-	const token = $(this).data("token");
-
-	if (token) {
-		socket.emit("sign-out", token);
-	} else {
-		socket.emit("sign-out");
-		Auth.signout();
-	}
+	vueApp.$store.commit("sessions", data);
 });
diff --git a/client/js/store.js b/client/js/store.js
index b4015184..bab7f57d 100644
--- a/client/js/store.js
+++ b/client/js/store.js
@@ -8,6 +8,7 @@ export default new Vuex.Store({
 		isConnected: false,
 		isNotified: false,
 		activeWindow: null,
+		sessions: [],
 	},
 	mutations: {
 		isConnected(state, payload) {
@@ -22,5 +23,12 @@ export default new Vuex.Store({
 		currentNetworkConfig(state, payload) {
 			state.currentNetworkConfig = payload;
 		},
+		sessions(state, payload) {
+			state.sessions = payload;
+		},
+	},
+	getters: {
+		currentSession: (state) => state.sessions.find((item) => item.current),
+		otherSessions: (state) => state.sessions.filter((item) => !item.current),
 	},
 });
diff --git a/client/views/session.tpl b/client/views/session.tpl
deleted file mode 100644
index 7951bfc4..00000000
--- a/client/views/session.tpl
+++ /dev/null
@@ -1,25 +0,0 @@
-<p>
-	<button
-		class="btn pull-right remove-session"
-		{{#unless current}}data-token="{{token}}"{{/unless}}
-	>
-		{{#if current}}
-			Sign out
-		{{else}}
-			Revoke
-		{{/if}}
-	</button>
-
-	<strong>{{agent}}</strong>
-
-	<a href="https://ipinfo.io/{{ip}}" target="_blank" rel="noopener">{{ip}}</a>
-
-{{#unless current}}
-	<br>
-	{{#if active}}
-		<em>Currently active</em>
-	{{else}}
-		Last used on <time>{{localetime lastUse}}</time>
-	{{/if}}
-{{/unless}}
-</p>