Improve user-interactions

Signed-off-by: Knut Ahlers <knut@ahlers.me>

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>

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 }}

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">

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

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')

src/components/dashboard/activeRaffles.vue

@@ -40,9 +40,9 @@ export default defineComponent({
   },
 
   mounted() {
-    this.bus.on(BusEventTypes.RaffleChanged, () => {
+    // Refresh raffle counts when raffle changed
-      this.fetchRaffleCount()
+    this.bus.on(BusEventTypes.RaffleChanged, () => this.fetchRaffleCount())
-    })
+
     this.fetchRaffleCount()
   },
 

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>

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>

src/components/dashboard/scopes.vue

@@ -51,9 +51,9 @@ export default defineComponent({
   },
 
   mounted() {
-    this.bus.on(BusEventTypes.ConfigReload, () => {
+    // Scopes might have changed due to authorization change
-      this.fetchGeneralConfig()
+    this.bus.on(BusEventTypes.ConfigReload, () => this.fetchGeneralConfig())
-    })
+
     this.fetchGeneralConfig()
   },
 

src/main.ts

@@ -82,9 +82,8 @@ const app = createApp({
         .then((resp: Response) => this.parseResponseFromJSON(resp))
     },
 
-    loadVars(): Promise<void | Response> {
+    loadVars(): Promise<void> {
-      return fetch('editor/vars.json')
+      return this.fetchJSON('editor/vars.json')
-        .then((resp: Response) => resp.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)
+      this.fetchJSON(`config-editor/user?user=${this.tokenUser}`)
-        .then((resp: Response) => this.$root.parseResponseFromJSON(resp))
         .then((data: any) => {
           this.userInfo = data
         })
@@ -129,10 +127,9 @@ const app = createApp({
         return
       }
 
-      fetch('config-editor/refreshToken', this.$root.fetchOpts)
+      this.fetchJSON('config-editor/refreshToken')
-        .then((resp: Response) => this.$root.parseResponseFromJSON(resp))
         .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

src/style.scss

@@ -2,4 +2,8 @@ html,
 body,
 #app {
   height: 100%;
+}
+
+.user-select-text {
+  user-select: text !important;
 }