From 40b4b92a6e973e4961b7df0fe7b03aa9cfa564b1 Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Sun, 9 Jun 2024 16:33:34 -0700
Subject: [PATCH] Make settings a modal dialog

---
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 packages/renderer/src/App.vue                 |  30 +++-
 packages/renderer/src/ServerAPI.test.ts       |   2 -
 packages/renderer/src/ServerAPI.ts            |  19 +++
 .../renderer/src/components/ErrorMessage.vue  |  23 ++-
 packages/renderer/src/components/Header.vue   |  22 ++-
 packages/renderer/src/components/Settings.vue | 150 ++++++++++++++++++
 packages/renderer/src/helpers.ts              |   6 +
 packages/renderer/src/views/LoginView.vue     |   3 +
 packages/renderer/src/vite-env.d.ts           |  15 +-
 11 files changed, 255 insertions(+), 26 deletions(-)
 create mode 100644 packages/renderer/src/components/Settings.vue

diff --git a/package-lock.json b/package-lock.json
index 20ac5e97..6be75bfc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@types/bootstrap": "^5.2.10",
         "bootstrap": "^5.3.3",
         "electron-log": "^5.1.4",
+        "moment": "^2.30.1",
         "vue": "^3.4.21",
         "vue-router": "^4.3.2"
       },
@@ -3968,6 +3969,15 @@
         "ufo": "^1.5.3"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index e4fdbea0..e2760af6 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@types/bootstrap": "^5.2.10",
     "bootstrap": "^5.3.3",
     "electron-log": "^5.1.4",
+    "moment": "^2.30.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.2"
   },
diff --git a/packages/renderer/src/App.vue b/packages/renderer/src/App.vue
index 0b610833..89fccd01 100644
--- a/packages/renderer/src/App.vue
+++ b/packages/renderer/src/App.vue
@@ -7,6 +7,7 @@ import { getDeviceInfo } from './helpers';
 
 import Header from './components/Header.vue';
 import ErrorMessage from './components/ErrorMessage.vue';
+import Settings from './components/Settings.vue';
 
 const router = useRouter();
 
@@ -46,6 +47,13 @@ const showError = (message: string) => {
 };
 provide('showError', showError);
 
+// Settings
+const showSettingsModal = ref(false);
+const showSettings = () => {
+  showSettingsModal.value = true;
+};
+provide('showSettings', showSettings);
+
 // Navigation
 const navigate = (path: string) => {
   router.push(path);
@@ -69,8 +77,13 @@ onMounted(async () => {
     <div class="flex-grow-1 m-2">
       <RouterView />
     </div>
-    <ErrorMessage v-if="showErrorModal" :message="errorMessage" :show-error-message="showErrorModal"
-      @update:show-error-message="showErrorModal = $event" @close="showErrorModal = false" />
+
+    <!-- Settings modal -->
+    <Settings v-if="showSettingsModal" @hide="showSettingsModal = false" @close="showSettingsModal = false" />
+
+    <!-- Error message modal -->
+    <ErrorMessage v-if="showErrorModal" :message="errorMessage" @hide="showErrorModal = false"
+      @close="showErrorModal = false" />
   </div>
 </template>
 
@@ -107,6 +120,15 @@ body {
   z-index: 1050;
 }
 
+/* Headers */
+h1 {
+  font-size: 1.5rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
 /* Bootstrap style that for some reason aren't making it */
 .mr-1 {
   margin-right: 0.25rem;
@@ -119,4 +141,8 @@ body {
 .mr-3 {
   margin-right: 1rem;
 }
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
 </style>
diff --git a/packages/renderer/src/ServerAPI.test.ts b/packages/renderer/src/ServerAPI.test.ts
index f2cb74d6..179503f2 100644
--- a/packages/renderer/src/ServerAPI.test.ts
+++ b/packages/renderer/src/ServerAPI.test.ts
@@ -190,5 +190,3 @@ test('ServerAPI.getNewApiToken() returns false on invalid device token', async (
     expect(result).toBe(false);
 });
 
-// Authentication tests
-
diff --git a/packages/renderer/src/ServerAPI.ts b/packages/renderer/src/ServerAPI.ts
index 0efad446..07865d92 100644
--- a/packages/renderer/src/ServerAPI.ts
+++ b/packages/renderer/src/ServerAPI.ts
@@ -181,6 +181,25 @@ export default class ServerAPI {
         }
     }
 
+    async getDevices(): Promise<GetDevicesApiResponseArray | ApiErrorResponse> {
+        console.log("GET /devices");
+        if (!await this.validateApiToken()) {
+            return this.returnError("Failed to get a new API token.")
+        }
+        try {
+            const response = await this.fetchAuthenticated("GET", `${this.apiUrl}/devices`, null);
+            if (response.status != 200) {
+                return this.returnError("Failed to get devices. Got status code " + response.status + ".")
+            }
+            const data: GetDevicesApiResponseArray = {
+                devices: await response.json()
+            };
+            return data;
+        } catch {
+            return this.returnError("Failed to get devices. Maybe the server is down?")
+        }
+    }
+
     async ping(): Promise<boolean> {
         console.log("GET /ping");
         if (!await this.validateApiToken()) {
diff --git a/packages/renderer/src/components/ErrorMessage.vue b/packages/renderer/src/components/ErrorMessage.vue
index 395886da..6a2163cf 100644
--- a/packages/renderer/src/components/ErrorMessage.vue
+++ b/packages/renderer/src/components/ErrorMessage.vue
@@ -3,14 +3,12 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import Modal from 'bootstrap/js/dist/modal';
 
 defineProps({
-    message: String,
-    showErrorMessage: Boolean
+    message: String
 });
 
-const emit = defineEmits(['update:showErrorMessage']);
-
-const hideError = () => {
-    emit('update:showErrorMessage', false);
+const emit = defineEmits(['hide']);
+const hide = () => {
+    emit('hide');
 };
 
 const errorModal = ref<HTMLElement | null>(null);
@@ -24,34 +22,33 @@ onMounted(() => {
 
         // The 'hidden.bs.modal' event is triggered when when the user clicks outside the modal
         modalElement.addEventListener('hidden.bs.modal', () => {
-            hideError();
+            hide();
         });
     }
 });
 
 onUnmounted(() => {
     if (errorModal.value && modalInstance) {
-        errorModal.value.removeEventListener('hidden.bs.modal', hideError);
+        errorModal.value.removeEventListener('hidden.bs.modal', hide);
     }
 });
 </script>
 
 <template>
-    <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"
-        aria-hidden="true" ref="errorModal">
+    <div class="modal fade" id="errorModal" ref="errorModal" tabindex="-1" role="dialog"
+        aria-labelledby="errorModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">Error</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-                        @click="hideError"></button>
+                        @click="hide"></button>
                 </div>
                 <div class="modal-body">
                     <p>{{ message }}</p>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
-                        @click="hideError">Close</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="hide">Close</button>
                 </div>
             </div>
         </div>
diff --git a/packages/renderer/src/components/Header.vue b/packages/renderer/src/components/Header.vue
index 7c5e3e18..bb986319 100644
--- a/packages/renderer/src/components/Header.vue
+++ b/packages/renderer/src/components/Header.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import { inject, Ref } from 'vue';
-import { useRouter } from 'vue-router'
 
 import ServerAPI from '../ServerAPI';
 
-const router = useRouter();
-
 const showError = inject('showError') as (message: string) => void;
+const showSettings = inject('showSettings') as () => void;
+const navigate = inject('navigate') as (path: string) => void;
 const userEmail = inject('userEmail') as Ref<string>;
 const serverApi = inject('serverApi') as Ref<ServerAPI>;
 const deviceInfo = inject('deviceInfo') as Ref<DeviceInfo | null>;
 const refreshDeviceInfo = inject('refreshDeviceInfo') as () => Promise<void>;
 
-const signOut = async () => {
+const settingsClicked = async () => {
+    showSettings();
+};
+
+const signOutClicked = async () => {
     if (deviceInfo.value === null) {
         showError('Cannot sign out without device info');
         return;
@@ -20,7 +23,8 @@ const signOut = async () => {
 
     // Delete the device
     const deleteDeviceResp = await serverApi.value.deleteDevice({
-        deviceToken: deviceInfo.value.deviceToken
+        // this API route takes either a UUID or a device token
+        uuid: deviceInfo.value.deviceToken
     });
     if (deleteDeviceResp !== undefined && deleteDeviceResp.error) {
         console.log("Error deleting device", deleteDeviceResp.message)
@@ -35,12 +39,13 @@ const signOut = async () => {
     // Delete the device from the local storage
     await (window as any).electron.setConfig("apiToken", "");
     await (window as any).electron.setConfig("deviceToken", "");
+    await (window as any).electron.setConfig("deviceUUID", "");
 
     // Refresh the device info
     await refreshDeviceInfo();
 
     // Redirect to the login page
-    router.push('/');
+    navigate('/');
 };
 </script>
 
@@ -58,8 +63,9 @@ const signOut = async () => {
                     {{ userEmail }}
                 </div>
                 <div>
-                    <button class="btn btn-secondary btn-sm mr-2"><i class="fa-solid fa-gear"></i></button>
-                    <button class="btn btn-secondary btn-sm" @click="signOut">Sign out</button>
+                    <button class="btn btn-secondary btn-sm mr-2" @click="settingsClicked"><i
+                            class="fa-solid fa-gear"></i></button>
+                    <button class="btn btn-secondary btn-sm" @click="signOutClicked">Sign out</button>
                 </div>
             </div>
         </header>
diff --git a/packages/renderer/src/components/Settings.vue b/packages/renderer/src/components/Settings.vue
new file mode 100644
index 00000000..46ead712
--- /dev/null
+++ b/packages/renderer/src/components/Settings.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { inject, ref, Ref, onMounted, onUnmounted } from 'vue';
+import Modal from 'bootstrap/js/dist/modal';
+import moment from 'moment';
+
+import ServerAPI from '../ServerAPI';
+
+const emit = defineEmits(['hide']);
+const hide = () => {
+    emit('hide');
+};
+
+const settingsModal = ref<HTMLElement | null>(null);
+let modalInstance: Modal | null = null;
+
+const showError = inject('showError') as (message: string) => void;
+const userEmail = inject('userEmail') as Ref<string>;
+const deviceInfo = inject('deviceInfo') as Ref<DeviceInfo | null>;
+const refreshDeviceInfo = inject('refreshDeviceInfo') as () => Promise<void>;
+const serverApi = inject('serverApi') as Ref<ServerAPI>;
+
+const devices = ref<GetDevicesApiResponse[]>([]);
+
+const platforms: { [key: string]: string } = {
+    'macOS': 'fa-brands fa-apple',
+    'Windows': 'fa-brands fa-windows',
+    'Linux': 'fa-brands fa-linux'
+};
+
+const getPlatformIcon = (description: string): string => {
+    for (const platform in platforms) {
+        if (description.startsWith(`${platform}: `)) {
+            return platforms[platform];
+        }
+    }
+    return 'fa-regular fa-circle-question';
+}
+
+const formatDescription = (description: string) => {
+    for (const platform in platforms) {
+        if (description.startsWith(`${platform}: `)) {
+            return description.slice(platform.length + 2);
+        }
+    }
+    return description;
+}
+
+const relativeTime = (timestamp: Date) => {
+    return moment(timestamp).fromNow();
+}
+
+const revokeDevice = async (uuid: string) => {
+    console.log('Revoking device with UUID:', uuid);
+    await serverApi.value.deleteDevice({
+        uuid: uuid
+    });
+    await getDevices();
+}
+
+const revokeAll = async () => {
+    for (const device of devices.value) {
+        if (device.uuid !== deviceInfo.value?.deviceUUID) {
+            revokeDevice(device.uuid);
+        }
+    }
+    await getDevices();
+}
+
+const getDevices = async () => {
+    const resp = await serverApi.value.getDevices();
+    if ("error" in resp && resp.error) {
+        showError(resp.message);
+        return;
+    }
+    if ("devices" in resp) {
+        devices.value = resp.devices;
+    }
+}
+
+onMounted(async () => {
+    if (!deviceInfo.value) {
+        await refreshDeviceInfo();
+    }
+    await getDevices();
+
+    const modalElement = settingsModal.value;
+    if (modalElement) {
+        modalInstance = new Modal(modalElement);
+        modalInstance.show();
+
+        // The 'hidden.bs.modal' event is triggered when when the user clicks outside the modal
+        modalElement.addEventListener('hidden.bs.modal', () => {
+            hide();
+        });
+    }
+});
+
+onUnmounted(() => {
+    if (settingsModal.value && modalInstance) {
+        settingsModal.value.removeEventListener('hidden.bs.modal', hide);
+    }
+});
+</script>
+
+<template>
+    <div class="modal fade" id="settingsModal" ref="settingsModal" tabindex="-1" role="dialog"
+        aria-labelledby="settingsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Settings for {{ userEmail }}</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
+                        @click="hide"></button>
+                </div>
+                <div class="modal-body">
+                    <div v-if="devices.length === 0">
+                        <p>No devices found. This should never happen, since you're using a device right now.</p>
+                    </div>
+                    <div v-else>
+                        <h2>Active devices</h2>
+                        <div class="d-flex flex-wrap">
+                            <div class="card m-2" style="width: 18rem;" v-for="device in devices" :key="device.uuid">
+                                <div class="card-body">
+                                    <h5 class="card-title">
+                                        <i :class="getPlatformIcon(device.description)"></i>
+                                        {{ formatDescription(device.description) }}
+                                    </h5>
+                                    <template v-if="deviceInfo?.deviceUUID == device.uuid">
+                                        <h6 class="card-subtitle mb-2 text-muted">you are currently using this device
+                                        </h6>
+                                    </template>
+                                    <template v-else>
+                                        <h6 class="card-subtitle mb-2 text-muted">last accessed {{
+                                            relativeTime(device.lastAccessedAt) }}
+                                        </h6>
+                                        <button class="btn btn-danger"
+                                            @click="revokeDevice(device.uuid)">Revoke</button>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="m-2">
+                            <button class="btn btn-danger btn-sm" @click="revokeAll">Revoke All</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/packages/renderer/src/helpers.ts b/packages/renderer/src/helpers.ts
index 919c5e03..f6a0eb3f 100644
--- a/packages/renderer/src/helpers.ts
+++ b/packages/renderer/src/helpers.ts
@@ -7,6 +7,7 @@ export async function getDeviceInfo(): Promise<DeviceInfo> {
         "userEmail": "",
         "deviceDescription": "",
         "deviceToken": "",
+        "deviceUUID": "",
         "apiToken": "",
         "valid": false
     };
@@ -30,6 +31,11 @@ export async function getDeviceInfo(): Promise<DeviceInfo> {
         if (deviceToken && deviceToken.length > 0) {
             deviceInfo["deviceToken"] = deviceToken;
 
+            const deviceUUID = await (window as any).electron.getConfig("deviceUUID");
+            if (deviceUUID) {
+                deviceInfo["deviceUUID"] = deviceUUID;
+            }
+
             serverApi.setUserEmail(userEmail);
             serverApi.setDeviceToken(deviceToken);
             const pingResp = await serverApi.ping();
diff --git a/packages/renderer/src/views/LoginView.vue b/packages/renderer/src/views/LoginView.vue
index 90e247c1..1195c27b 100644
--- a/packages/renderer/src/views/LoginView.vue
+++ b/packages/renderer/src/views/LoginView.vue
@@ -89,6 +89,9 @@ async function registerDevice() {
         return;
     }
 
+    // Save the device UUID
+    await (window as any).electron.setConfig("deviceUUID", registerDeviceResp.uuid);
+
     // Save the device token
     await (window as any).electron.setConfig("deviceToken", registerDeviceResp.deviceToken);
     serverApi.value.setDeviceToken(registerDeviceResp.deviceToken);
diff --git a/packages/renderer/src/vite-env.d.ts b/packages/renderer/src/vite-env.d.ts
index a64a00c3..f7eb118d 100644
--- a/packages/renderer/src/vite-env.d.ts
+++ b/packages/renderer/src/vite-env.d.ts
@@ -4,6 +4,7 @@ type DeviceInfo = {
     userEmail: string;
     deviceDescription: string;
     deviceToken: string;
+    deviceUUID: string;
     apiToken: string;
     valid: boolean;
 };
@@ -31,9 +32,21 @@ type RegisterDeviceApiRequest = {
 };
 
 type RegisterDeviceApiResponse = {
+    uuid: string;
     deviceToken: string;
 };
 
+// API models for GET /api/v1/devices (an array of these)
+type GetDevicesApiResponse = {
+    uuid: string;
+    description: string;
+    lastAccessedAt: Date;
+};
+
+type GetDevicesApiResponseArray = {
+    devices: GetDevicesApiResponse[];
+};
+
 // API models for POST /api/v1/token
 type TokenApiRequest = {
     email: string;
@@ -53,5 +66,5 @@ type LogoutApiResponse = {
 
 // API models for DELETE /api/v1/device
 type DeleteDeviceApiRequest = {
-    deviceToken: string;
+    uuid: string;
 };
\ No newline at end of file