wip: switch back to old naming [skip ci]

Signed-off-by: Sekwah <[email protected]>

src/forms/BValidatedInputGroupFormInput.vue

@@ -1,17 +1,17 @@
 <template>
-  <Field
+  <field
     :vid="id"
     :name="label"
     :rules="rules"
     :mode="mode"
     v-slot="{ errors, valid }"
   >
-    <BFormGroup :id="id" :label="label" :label-for="`${id}-input`">
-      <BInputGroup :class="inputGroupSize">
+    <b-form-group :id="id" :label="label" :label-for="`${id}-input`">
+      <b-input-group :class="inputGroupSize">
         <template #prepend v-if="icon"
           ><BInputGroupText><i :class="icon"></i></BInputGroupText
         ></template>
-        <BFormInput
+        <b-form-input
           :id="`${id}-input`"
           :type="type"
           :class="inputClasses"
@@ -23,15 +23,15 @@
           v-on="inputListeners"
         />
         <template #prepend v-if="tooltip"
-          ><BInputGroupText v-b-tooltip.hover :title="tooltip"
-            ><i class="cui-info font-lg"></i></BInputGroupText
+          ><b-input-group-text v-b-tooltip.hover :title="tooltip"
+            ><i class="cui-info font-lg"></i></b-input-group-text
         ></template>
-      </BInputGroup>
-      <BFormInvalidFeedback :state="errorHandlingMethod(errors, valid)">
+      </b-input-group>
+      <b-form-invalid-feedback :state="errorHandlingMethod(errors, valid)">
         {{ errors[0] }}
-      </BFormInvalidFeedback>
-    </BFormGroup>
-  </Field>
+      </b-form-invalid-feedback>
+    </b-form-group>
+  </field>
 </template>
 
 <script>

src/main.js

@@ -12,6 +12,7 @@ import version from './version';
 import { getContextPath } from './shared/utils';
 import { VueToastr } from 'vue-toastr';
 import { createBootstrap } from 'bootstrap-vue-next';
+import { BTooltip } from 'bootstrap-vue-next';
 
 import './assets/scss/style.scss';
 
@@ -56,6 +57,21 @@ axios
     createVueApp();
   })
 
+// For debug purposes
+const DirectiveTracker = {
+  install(app, options) {
+    app.config.globalProperties.$directives = {};
+
+    app.directive = new Proxy(app.directive, {
+      apply(target, thisArg, argumentsList) {
+        const [name, definition] = argumentsList;
+        app.config.globalProperties.$directives[name] = definition;
+        return Reflect.apply(...arguments);
+      }
+    });
+  }
+};
+
 /**
  * Removed finally block due to:
  * https://github.com/DependencyTrack/frontend/issues/34
@@ -71,9 +87,14 @@ function createVueApp() {
 
   console.log("Dependency Track v" + version.version);
 
+  if (import.meta.env.MODE === 'development') {
+    app.use(DirectiveTracker);
+  }
   app.use(router);
   app.use(i18n);
   app.use(createBootstrap());
+  // For some reason bootstrap doesn't seem to be registering the tooltip? Temporary workaround
+  app.directive('b-tooltip', BTooltip);
   app.use(VueToastr, {
     defaultTimeout: 5000,
     defaultProgressBar: false,
@@ -84,5 +105,9 @@ function createVueApp() {
   app.use(VueAxios, axios);
   app.provide('axios', app.config.globalProperties.axios);
 
+  console.log(app.config.globalProperties.$directives);
+  console.log(app.config.globalProperties.$directives);
+  console.log(app.config.globalProperties.$directives);
+
   app.directive('debounce', vueDebounce({ defaultTime: '750ms' })).mount('#app');
 }

src/views/pages/Login.vue

@@ -102,6 +102,7 @@ import $ from 'jquery';
 import { Form } from 'vee-validate';
 import BValidatedInputGroupFormInput from '../../forms/BValidatedInputGroupFormInput.vue';
 import InformationalModal from '../modals/InformationalModal.vue';
+import { BButton } from 'bootstrap-vue-next';
 import EventBus from '../../shared/eventbus';
 import { getRedirectUrl, getContextPath } from '../../shared/utils';
 import qs from 'querystring';
@@ -111,6 +112,7 @@ export default {
   components: {
     InformationalModal,
     BValidatedInputGroupFormInput,
+    BButton,
     Form,
   },
   data() {