Update LoginModal to new bootstrap method

src/views/LoginModal.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
-    <b-button v-b-modal.modal-prevent-closing>{{ loginText }}</b-button>
-    <b-modal id="modal-prevent-closing" ref="modalRef" title="Login to your bot" @ok="handleOk">
+    <b-button @click="loginViewOpen = true">{{ loginText }}</b-button>
+    <b-modal
+      id="modal-prevent-closing"
+      v-model="loginViewOpen"
+      title="Login to your bot"
+      @ok="handleOk"
+    >
       <Login ref="loginForm" in-modal @loginResult="handleLoginResult" />
     </b-modal>
   </div>
@@ -12,10 +17,6 @@ import { defineComponent, ref } from 'vue';
 
 import Login from '@/components/Login.vue';
 
-interface HTMLModal extends HTMLElement {
-  hide: () => void;
-}
-
 export default defineComponent({
   name: 'LoginModal',
   components: { Login },
@@ -23,18 +24,18 @@ export default defineComponent({
     loginText: { required: false, default: 'Login', type: String },
   },
   setup() {
-    const modalRef = ref<HTMLModal>();
+    const loginViewOpen = ref(false);
     const loginForm = ref<HTMLFormElement>();
     const handleLoginResult = (result: boolean) => {
       if (result) {
-        modalRef.value?.hide();
+        loginViewOpen.value = false;
       }
     };
     const handleOk = () => {
       loginForm.value?.handleSubmit();
     };
     return {
-      modalRef,
+      loginViewOpen,
       loginForm,
       handleOk,
       handleLoginResult,