From d6f2b0bb51b3861ecf41f11c92e6c7bfc0e369b7 Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Sat, 13 Jul 2024 13:45:14 +0200
Subject: [PATCH] Improve user-interactions

Signed-off-by: Knut Ahlers <knut@ahlers.me>
---
 src/components/_headNav.vue                |  4 ++--
 src/components/_sideNav.vue                |  4 ++--
 src/components/app.vue                     |  2 +-
 src/components/botauth.vue                 |  4 ++--
 src/components/dashboard/_statuspanel.vue  |  2 +-
 src/components/dashboard/activeRaffles.vue |  6 +++---
 src/components/dashboard/changelog.vue     | 10 ++--------
 src/components/dashboard/eventlog.vue      |  2 +-
 src/components/dashboard/scopes.vue        |  6 +++---
 src/main.ts                                | 13 +++++--------
 src/style.scss                             |  4 ++++
 11 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/components/_headNav.vue b/src/components/_headNav.vue
index 6ed1169..be8d992 100644
--- a/src/components/_headNav.vue
+++ b/src/components/_headNav.vue
@@ -1,7 +1,7 @@
 <template>
-  <nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary user-select-none">
+  <nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
-      <span class="navbar-brand user-select-none">
+      <span class="navbar-brand">
         <i class="fas fa-robot fa-fw me-1 text-info" />
         Twitch-Bot
       </span>
diff --git a/src/components/_sideNav.vue b/src/components/_sideNav.vue
index 3cc45b2..11089a4 100644
--- a/src/components/_sideNav.vue
+++ b/src/components/_sideNav.vue
@@ -4,14 +4,14 @@
       v-for="section in navigation"
       :key="section.header"
     >
-      <div class="navHeading user-select-none">
+      <div class="navHeading">
         {{ section.header }}
       </div>
       <RouterLink
         v-for="link in section.links"
         :key="link.target"
         :to="{name: link.target}"
-        class="nav-link user-select-none"
+        class="nav-link"
       >
         <i :class="`${link.icon} fa-fw me-1`" />
         {{ link.name }}
diff --git a/src/components/app.vue b/src/components/app.vue
index 1c34192..43b72d1 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-100">
+  <div class="h-100 user-select-none">
     <head-nav :is-logged-in="true" />
 
     <div class="layout">
diff --git a/src/components/botauth.vue b/src/components/botauth.vue
index d8325c1..b58a6ba 100644
--- a/src/components/botauth.vue
+++ b/src/components/botauth.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container my-3 user-select-none">
+  <div class="container my-3">
     <div class="row justify-content-center">
       <div class="col col-9">
         <div class="card">
@@ -19,7 +19,7 @@
             <div class="input-group">
               <input
                 type="text"
-                class="form-control user-select-all"
+                class="form-control"
                 :value="authURLs?.update_bot_token || ''"
                 :disabled="!authURLs?.update_bot_token"
                 readonly
diff --git a/src/components/dashboard/_statuspanel.vue b/src/components/dashboard/_statuspanel.vue
index a54b931..e3bfe77 100644
--- a/src/components/dashboard/_statuspanel.vue
+++ b/src/components/dashboard/_statuspanel.vue
@@ -34,7 +34,7 @@ import { type RouteLocationRaw } from 'vue-router'
 export default defineComponent({
   computed: {
     cardClass(): string {
-      const classList = ['card user-select-none']
+      const classList = ['card']
 
       if (this.clickRoute) {
         classList.push('pointer-click')
diff --git a/src/components/dashboard/activeRaffles.vue b/src/components/dashboard/activeRaffles.vue
index 3d5e3d6..d93ffc7 100644
--- a/src/components/dashboard/activeRaffles.vue
+++ b/src/components/dashboard/activeRaffles.vue
@@ -40,9 +40,9 @@ export default defineComponent({
   },
 
   mounted() {
-    this.bus.on(BusEventTypes.RaffleChanged, () => {
-      this.fetchRaffleCount()
-    })
+    // Refresh raffle counts when raffle changed
+    this.bus.on(BusEventTypes.RaffleChanged, () => this.fetchRaffleCount())
+
     this.fetchRaffleCount()
   },
 
diff --git a/src/components/dashboard/changelog.vue b/src/components/dashboard/changelog.vue
index 21745a1..439df2c 100644
--- a/src/components/dashboard/changelog.vue
+++ b/src/components/dashboard/changelog.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="card user-select-none">
+  <div class="card">
     <div class="card-header">
       {{ $t('dashboard.changelog.heading') }}
     </div>
     <div
-      class="card-body"
+      class="card-body user-select-text"
       v-html="changelog"
     />
   </div>
@@ -51,9 +51,3 @@ export default defineComponent({
   name: 'DashboardChangelog',
 })
 </script>
-
-<style scoped>
-.card-body {
-  user-select: text !important;
-}
-</style>
diff --git a/src/components/dashboard/eventlog.vue b/src/components/dashboard/eventlog.vue
index b3f66f2..cbc9dcf 100644
--- a/src/components/dashboard/eventlog.vue
+++ b/src/components/dashboard/eventlog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card user-select-none">
+  <div class="card">
     <div class="card-header">
       {{ $t('dashboard.eventlog.heading') }}
     </div>
diff --git a/src/components/dashboard/scopes.vue b/src/components/dashboard/scopes.vue
index be0e2ef..bdec2a1 100644
--- a/src/components/dashboard/scopes.vue
+++ b/src/components/dashboard/scopes.vue
@@ -51,9 +51,9 @@ export default defineComponent({
   },
 
   mounted() {
-    this.bus.on(BusEventTypes.ConfigReload, () => {
-      this.fetchGeneralConfig()
-    })
+    // Scopes might have changed due to authorization change
+    this.bus.on(BusEventTypes.ConfigReload, () => this.fetchGeneralConfig())
+
     this.fetchGeneralConfig()
   },
 
diff --git a/src/main.ts b/src/main.ts
index 2c1c8ed..f8e5424 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -82,9 +82,8 @@ const app = createApp({
         .then((resp: Response) => this.parseResponseFromJSON(resp))
     },
 
-    loadVars(): Promise<void | Response> {
-      return fetch('editor/vars.json')
-        .then((resp: Response) => resp.json())
+    loadVars(): Promise<void> {
+      return this.fetchJSON('editor/vars.json')
         .then((data: any) => {
           this.vars = data
         })
@@ -100,8 +99,7 @@ const app = createApp({
         this.$router.replace({ name: 'dashboard' })
       }
 
-      fetch(`config-editor/user?user=${this.tokenUser}`, this.$root.fetchOpts)
-        .then((resp: Response) => this.$root.parseResponseFromJSON(resp))
+      this.fetchJSON(`config-editor/user?user=${this.tokenUser}`)
         .then((data: any) => {
           this.userInfo = data
         })
@@ -129,10 +127,9 @@ const app = createApp({
         return
       }
 
-      fetch('config-editor/refreshToken', this.$root.fetchOpts)
-        .then((resp: Response) => this.$root.parseResponseFromJSON(resp))
+      this.fetchJSON('config-editor/refreshToken')
         .then((data: any) => this.login(data.token, new Date(data.expiresAt), data.user))
-        .catch(err => {
+        .catch((err: Error) => {
           // Being unable to renew a token is a reason to logout
           this.logout()
           throw err
diff --git a/src/style.scss b/src/style.scss
index c3ec1e0..b0aafa0 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -2,4 +2,8 @@ html,
 body,
 #app {
   height: 100%;
+}
+
+.user-select-text {
+  user-select: text !important;
 }
\ No newline at end of file