From 92a4dffefe93e53c58b2d962302275404163362d Mon Sep 17 00:00:00 2001
From: Dima May <sudo.may1@gmail.com>
Date: Tue, 17 Sep 2024 18:15:30 +0000
Subject: [PATCH] #289: upgraded bootstrap

---
 docs/.vuepress/components/FormAndPki.vue      | 50 +++++++++++++++----
 docs/.vuepress/components/ReleaseDate.vue     |  2 +-
 docs/.vuepress/components/RequiresRole.vue    |  2 +-
 docs/.vuepress/components/Since.vue           |  2 +-
 .../components/home/DashboardSection.vue      |  2 +-
 docs/.vuepress/components/home/InfoCards.vue  |  6 +--
 .../home/RapidIntegrationSection.vue          |  4 +-
 .../components/home/UserDisplaySection.vue    |  8 +--
 docs/.vuepress/config.js                      |  2 -
 docs/.vuepress/enhanceApp.js                  |  5 +-
 package.json                                  |  3 +-
 11 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/docs/.vuepress/components/FormAndPki.vue b/docs/.vuepress/components/FormAndPki.vue
index 36f562bd..4a63e7ab 100644
--- a/docs/.vuepress/components/FormAndPki.vue
+++ b/docs/.vuepress/components/FormAndPki.vue
@@ -9,20 +9,41 @@
             <import-content :path="this.pkiPath" class="mt-3"/>
         </div>
 
-        <b-tabs v-if="passwordAuthInstallVisible && pkiAuthInstallVisible" content-class="mt-3">
-            <b-tab v-for="(tabItem) of tabItems" :key="tabItem.name">
-                <div class="text-right text-secondary" style="font-size: 0.8rem;">Visit to learn about this mode:
-                    <a :href="$withBase(tabItem.helpUrl)" target="_blank"><span v-html="tabItem.name"></span> <i class="fas fa-external-link-alt"/></a></div>
-                <template v-slot:title>
-                    <i :class="tabItem.icon" class="mr-1"></i> <span v-html="tabItem.name"></span>
-                </template>
-                <import-content :path="tabItem.path" class="mt-3"/>
-            </b-tab>
-        </b-tabs>
+      <div v-if="passwordAuthInstallVisible && pkiAuthInstallVisible">
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
+          <li class="nav-item" role="presentation" v-for="(tabItem, index) of tabItems" :key="tabItem.name">
+            <button class="nav-link"
+                    :class="{'active': tabItem.isVisible }"
+                    :id="`${tabItem.name}-tab`"
+                    data-bs-toggle="tab"
+                    :data-bs-target="`#${index}-content`"
+                    @click="updateNavItems(tabItem.name)"
+                    type="button"
+                    role="tab"
+                    aria-controls="home"
+                    aria-selected="true">
+              <i :class="tabItem.icon" class="mr-1"></i> <span v-html="tabItem.name"/>
+            </button>
+          </li>
+        </ul>
+        <div class="tab-content" id="myTabContent">
+        <div v-for="(tabItem, index) of tabItems" :key="tabItem.name"
+            class="tab-pane fade"
+             :class="{'show active': tabItem.isVisible }"
+             :id="`${index}-content`"
+             role="tabpanel"
+             :aria-labelledby="`${tabItem.name}-tab`">
+          <div class="text-end text-secondary" style="font-size: 0.8rem;">Visit to learn about this mode:
+                                <a :href="$withBase(tabItem.helpUrl)" target="_blank"><span v-html="tabItem.name"></span> <i class="fas fa-external-link-alt"/></a></div>
+          <import-content :path="tabItem.path" class="mt-3"/>
+        </div>
+      </div>
+      </div>
     </div>
 </template>
 
 <script>
+
     export default {
         name: "FormAndPki",
         props: {
@@ -52,6 +73,12 @@
             },
         },
         methods: {
+          updateNavItems(visibleName) {
+            this.tabItems = this.tabItems.map((item) => {
+              item.isVisible = item.name === visibleName
+              return item
+            })
+          },
             getNavItems() {
                let res = [
                    {
@@ -59,12 +86,14 @@
                        path: this.pkiPath,
                        icon: 'fas fa-key',
                        helpUrl: '/dashboard/install-guide/installModes.html#pki-auth-mode',
+                       isVisible: false,
                    },
                    {
                        name: '<b>Password Auth</b> Install',
                        path: this.formPath,
                        icon: 'fab fa-wpforms',
                        helpUrl: '/dashboard/install-guide/installModes.html#password-auth-mode',
+                       isVisible: false,
                    },
                ];
 
@@ -72,6 +101,7 @@
                    res = res.reverse();
                }
 
+               res[0].isVisible = true
                return res;
             },
         }
diff --git a/docs/.vuepress/components/ReleaseDate.vue b/docs/.vuepress/components/ReleaseDate.vue
index 79893509..d7d681ab 100644
--- a/docs/.vuepress/components/ReleaseDate.vue
+++ b/docs/.vuepress/components/ReleaseDate.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="d-inline-block py-1">
-  <b-badge variant="secondary" class="release-date"><i class="fas fa-calendar mr-2"/>{{ date }}</b-badge>
+   <span class="badge bg-secondary release-date"><i class="fas fa-calendar mr-2" aria-hidden="true"/> {{ date }}</span>
 </div>
 </template>
 
diff --git a/docs/.vuepress/components/RequiresRole.vue b/docs/.vuepress/components/RequiresRole.vue
index 308bcc1a..30b9c1c8 100644
--- a/docs/.vuepress/components/RequiresRole.vue
+++ b/docs/.vuepress/components/RequiresRole.vue
@@ -1,7 +1,7 @@
 <template>
     <span class="h6">
       <a :href="$withBase('/dashboard/user-guide/users.html#user-roles')" target="_blank">
-        <i class="fas fa-user-shield"></i> Requires <b-badge variant="warning"><span class="role">{{ role }}</span></b-badge> role <i
+        <i class="fas fa-user-shield"></i> Requires <span class="badge rounded-pill bg-warning text-dark role">{{ role }}</span> role <i
           class="fas fa-external-link-alt" style="font-size: 0.8rem;"></i>
       </a>
     </span>
diff --git a/docs/.vuepress/components/Since.vue b/docs/.vuepress/components/Since.vue
index 7e26021a..605a0254 100644
--- a/docs/.vuepress/components/Since.vue
+++ b/docs/.vuepress/components/Since.vue
@@ -1,6 +1,6 @@
 <template>
     <span class="h6 pl-2" :class="{ 'd-block' : isBlock }">
-      <i class="fas fa-history" aria-hidden="true"></i> Since <b-badge variant="warning"><span class="since-value">{{ project }}:{{ version }}</span></b-badge>
+      <i class="fas fa-history" aria-hidden="true"></i> Since <span class="badge bg-warning text-dark"><span class="since-value">{{ project }}:{{ version }}</span></span>
     </span>
 </template>
 
diff --git a/docs/.vuepress/components/home/DashboardSection.vue b/docs/.vuepress/components/home/DashboardSection.vue
index 9e4edd8f..dcd6d5f8 100644
--- a/docs/.vuepress/components/home/DashboardSection.vue
+++ b/docs/.vuepress/components/home/DashboardSection.vue
@@ -8,7 +8,7 @@
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <div class="py-4 p-sm-5 mt-1">
+                    <div class="py-4 p-sm-5 mt-1 text-start">
                         <h1 class="border-bottom text-uppercase">Dashboard</h1>
                         <p class="text-secondary">A web-based user interface that enables creation and management of multiple
                             training profiles and acts as a Learning Management System (LMS).</p>
diff --git a/docs/.vuepress/components/home/InfoCards.vue b/docs/.vuepress/components/home/InfoCards.vue
index 1db85193..256055a0 100644
--- a/docs/.vuepress/components/home/InfoCards.vue
+++ b/docs/.vuepress/components/home/InfoCards.vue
@@ -11,7 +11,7 @@
                             <i class="fa fa-user-graduate fa-stack-1x icon-foreground"></i>
                           </span>
               </div>
-              <div class="col-sm media-body">
+              <div class="col-sm media-body text-start">
                 <div class="h5 mt-0 mb-3 mb-sm-2">User Engagement</div>
                 Enable users to Quickly learn new skills and effectively master advanced knowledge.
                 Improve training recall through continued user engagement.
@@ -32,7 +32,7 @@
                                 </span>
 
               </div>
-              <div class="col-sm media-body">
+              <div class="col-sm media-body text-start">
                 <div class="h5 mt-0">Gamification</div>
                 Consistent and innovative solution takes the guesswork and maintenance out of
                 implementing gamified training.
@@ -52,7 +52,7 @@
                                 </span>
 
               </div>
-              <div class="col-sm media-body">
+              <div class="col-sm media-body text-start">
                 <div class="h5 mt-0">Reduced Cost</div>
                 Fewer training sessions - less support costs. Continued user engagement in
                 application
diff --git a/docs/.vuepress/components/home/RapidIntegrationSection.vue b/docs/.vuepress/components/home/RapidIntegrationSection.vue
index bc08a693..349b0cc7 100644
--- a/docs/.vuepress/components/home/RapidIntegrationSection.vue
+++ b/docs/.vuepress/components/home/RapidIntegrationSection.vue
@@ -3,13 +3,13 @@
         <div class="container">
             <div class="row text-center text-sm-left">
                 <div class="col-lg-6">
-                    <div class="p-sm-5">
+                    <div class="p-5">
                         <img :src="$withBase('/img/home/Screenshot_JS_Integration.png')"
                           alt="Sample Code"/>
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <div class="py-4 p-sm-5 mt-1">
+                    <div class="py-4 p-sm-5 mt-1 text-start">
                         <h1 class="border-bottom text-uppercase">Rapid Integration</h1>
                         <p class="text-secondary">Quickly integrate gamified training into your web-application.</p>
                         <a href="skills-client/" class="btn btn-lg btn-info mt-3 font-weight-bold">Visit our Integration Guide</a>
diff --git a/docs/.vuepress/components/home/UserDisplaySection.vue b/docs/.vuepress/components/home/UserDisplaySection.vue
index 2e466fc5..2e82e26f 100644
--- a/docs/.vuepress/components/home/UserDisplaySection.vue
+++ b/docs/.vuepress/components/home/UserDisplaySection.vue
@@ -10,18 +10,12 @@
                     </div>
                 </div>
               <div class="col-lg-6 order-lg-1">
-                <div class="py-4 p-sm-5 text-white">
+                <div class="py-4 p-sm-5 text-white text-start">
                   <h1 class="border-bottom text-uppercase font-weight-bold">User Display</h1>
                   <p class="text-white">Pluggable user skill and ranking visualization - customize and use the
                     display component
                     in your application within minutes.</p>
                   <div class="d-flex d-sm-block ml-sm-2 justify-content-center">
-                    <div class="text-left" style="max-width: 16rem;">
-                      <div class="row no-gutters">
-                        <div class="col-auto"><i class="fab fa-js fa-2x"></i></div>
-                        <div class="col">Implemented in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" class="font-weight-bold text-white">JavaScript</a></div>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index c7ad619f..f30b43aa 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,5 +1,3 @@
-const fs = require('fs');
-const fetch = require('node-fetch');
 const videosJson = require('./components/videos/skilltree-training-videos.json');
 
 /**
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index 885c38f4..42983afc 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -1,7 +1,5 @@
-import BootstrapVue from 'bootstrap-vue'
-import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap-vue/dist/bootstrap-vue.css';
 import '@fortawesome/fontawesome-free/css/all.css';
+import 'bootstrap/dist/css/bootstrap.css'
 
 export default ({
     Vue, // the version of Vue being used in the VuePress app
@@ -9,5 +7,4 @@ export default ({
     router, // the router instance for the app
     siteData // site metadata
 }) => {
-    Vue.use(BootstrapVue)
 }
diff --git a/package.json b/package.json
index 058161b9..ab4dce57 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.15.3",
-    "bootstrap": "4.6.0",
-    "bootstrap-vue": "2.21.2",
+    "bootstrap": "5.3.3",
     "core-js": "3.14.0",
     "vue": "2.6.14"
   },