Work around JS issues, improve toasts

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

src/components/_headNav.vue

@@ -29,6 +29,7 @@
             class="nav-item dropdown"
           >
             <a
+              ref="userMenuToggle"
               class="nav-link d-flex align-items-center"
               href="#"
               role="button"
@@ -58,6 +59,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { Dropdown } from 'bootstrap'
 
 export default defineComponent({
   computed: {
@@ -72,6 +74,12 @@ export default defineComponent({
     },
   },
 
+  mounted() {
+    if (this.isLoggedIn) {
+      new Dropdown(this.$refs.userMenuToggle)
+    }
+  },
+
   name: 'TwitchBotEditorHeadNav',
 
   props: {

src/components/_toast.vue

@@ -24,7 +24,14 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { Toast } from 'bootstrap'
-import { ToastContent } from './_toaster.vue'
+
+export type ToastContent = {
+  id: string
+  autoHide: boolean | undefined
+  color: string | undefined
+  delay: number | undefined
+  text: string
+}
 
 export default defineComponent({
   data() {
@@ -66,7 +73,10 @@ export default defineComponent({
 
   mounted() {
     this.$refs.toast.addEventListener('hidden.bs.toast', () => this.$emit('hidden'))
-    this.hdl = new Toast(this.$refs.toast)
+    this.hdl = new Toast(this.$refs.toast, {
+      autohide: this.toast.autoHide !== false,
+      delay: this.toast.delay || 5000,
+    })
     this.hdl.show()
   },
 

src/components/_toaster.vue

@@ -10,15 +10,9 @@
 </template>
 
 <script lang="ts">
+import Toast, { ToastContent } from './_toast.vue'
 import BusEventTypes from '../helpers/busevents'
 import { defineComponent } from 'vue'
-import Toast from './_toast.vue'
-
-export type ToastContent = {
-  id: string
-  color: string | undefined
-  text: string
-}
 
 export default defineComponent({
   components: { Toast },

src/components/login.vue

@@ -52,7 +52,7 @@ export default defineComponent({
   },
 
   mounted() {
-    this.$root.bus.on(BusEventTypes.LoginProcessing, (loading: boolean) => {
+    this.bus.on(BusEventTypes.LoginProcessing, (loading: boolean) => {
       this.loading = loading
     })
   },

src/main.ts

@@ -1,17 +1,16 @@
 /* eslint-disable sort-imports */
+/* global RequestInit, TimerHandler */
 
 import './style.scss' // Internal global styles
 import 'bootstrap/dist/css/bootstrap.css' // Bootstrap 5 Styles
 import '@fortawesome/fontawesome-free/css/all.css' // All FA free icons
 
-import 'bootstrap/dist/js/bootstrap.bundle' // Popper & Bootstrap globally available
-
 import { createApp, h } from 'vue'
 import mitt from 'mitt'
 
 import BusEventTypes from './helpers/busevents'
 import ConfigNotifyListener from './helpers/configNotify'
-import { ToastContent } from './components/_toaster.vue'
+import { ToastContent } from './components/_toast.vue'
 
 import router from './router'
 import App from './components/app.vue'
@@ -138,7 +137,7 @@ const app = createApp({
 
     // Start background-listen for config updates
     new ConfigNotifyListener((msgType: string) => {
-      this.$root.bus.emit(msgType)
+      this.bus.emit(msgType)
     })
 
     this.loadVars()
@@ -146,7 +145,7 @@ const app = createApp({
     const params = new URLSearchParams(window.location.hash.replace(/^[#/]+/, ''))
     const authToken = params.get('access_token')
     if (authToken) {
-      this.$root.bus.emit(BusEventTypes.LoginProcessing, true)
+      this.bus.emit(BusEventTypes.LoginProcessing, true)
       fetch('config-editor/login', {
         body: JSON.stringify({ token: authToken }),
         headers: { 'Content-Type': 'application/json' },
@@ -154,10 +153,16 @@ const app = createApp({
       })
         .then((resp: Response): any => {
           if (resp.status !== 200) {
-            this.$root.bus.emit(BusEventTypes.LoginProcessing, false)
+            let errorText = 'Login failed unexpectedly'
+            if (resp.status === 403) {
+              errorText = 'Access denied to this bot instance'
+            }
+
+            this.bus.emit(BusEventTypes.LoginProcessing, false)
             this.bus.emit(BusEventTypes.Toast, {
+              autoHide: false,
               color: 'danger',
-              text: 'Login failed',
+              text: errorText,
             } as ToastContent)
             throw new Error(`login failed, status=${resp.status}`)
           }