#2490: implemented pki bootstrap component

dashboard-prime/src/App.vue

@@ -24,6 +24,7 @@ import { usePageVisitService } from '@/components/utils/services/UsePageVisitSer
 import { invoke, until } from '@vueuse/core'
 import DashboardFooter from '@/components/header/DashboardFooter.vue'
 import { useUserAgreementInterceptor } from '@/interceptors/UseUserAgreementInterceptor.js'
+import PkiAppBootstrap from '@/components/access/PkiAppBootstrap.vue'
 
 const authState = useAuthState()
 const appInfoState = useAppInfoState()
@@ -101,18 +102,27 @@ const loadConfigs = () => {
 const showHeader = computed(() => {
   return !skillsDisplayInfo.isSkillsClientPath() && authState.isAuthenticated
 })
+const isPkiAndNeedsToBootstrap = computed(() => {
+  return appConfig.isPkiAuthenticated && appConfig.needToBootstrap;
+})
+const isOAuthOnlyAndNeedsToBootstrap = computed(() => {
+  return appConfig.oAuthOnly && appConfig.needToBootstrap;
+})
+const inBootstrapMode = computed(() => {
+  return isPkiAndNeedsToBootstrap.value || isOAuthOnlyAndNeedsToBootstrap.value
+})
 </script>
 
 <template>
   <div role="presentation" class="m-0">
     <VueAnnouncer class="sr-only" />
 
-    <customizable-header v-if="!isLoadingApp" role="region" aria-label="dynamic customizable header"></customizable-header>
+    <customizable-header v-if="!isLoadingApp && !inBootstrapMode" role="region" aria-label="dynamic customizable header"></customizable-header>
     <div id="app">
       <skills-spinner :is-loading="isLoadingApp" class="mt-8 text-center" />
       <div v-if="!isLoadingApp" class="m-0">
-        <div class="overall-container">
-          <!--          <pki-app-bootstrap v-if="isPkiAndNeedsToBootstrap || isOAuthOnlyAndNeedsToBootstrap" role="alert"/>-->
+        <pki-app-bootstrap v-if="inBootstrapMode" role="region"/>
+        <div v-if="!inBootstrapMode" class="overall-container">
           <new-software-version  />
           <dashboard-header v-if="showHeader" role="banner" />
           <div role="main" id="mainContent1"
@@ -125,9 +135,9 @@ const showHeader = computed(() => {
       </div>
     </div>
     <ConfirmDialog></ConfirmDialog>
-    <dashboard-footer v-if="!isLoadingApp" role="region" />
-    <customizable-footer v-if="!isLoadingApp" role="region" aria-label="dynamic customizable footer"></customizable-footer>
-    <!--    <scroll-to-top v-if="!isScrollToTopDisabled" />-->
+    <dashboard-footer v-if="!isLoadingApp && !inBootstrapMode" role="region" />
+    <customizable-footer v-if="!isLoadingApp && !inBootstrapMode" role="region" aria-label="dynamic customizable footer"></customizable-footer>
+    <!--    <scroll-to-top v-if="!isScrollToTopDisabled && !inBootstrapMode" />-->
   </div>
 </template>
 

dashboard-prime/src/components/access/BootstrapService.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import axios from 'axios';
+
+export default {
+  grantRoot() {
+    return axios.post('/grantFirstRoot').then((response) => response.data);
+  },
+};

dashboard-prime/src/components/access/PkiAppBootstrap.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import BootstrapService from '@/components/access/BootstrapService.js'
+import Logo1 from '@/components/brand/Logo1.vue'
+
+const isLoading = ref(true)
+
+const refresh = () => {
+  window.location.reload()
+}
+
+onMounted(() => {
+  BootstrapService.grantRoot()
+    .then(() => {
+      isLoading.value = false
+    })
+})
+</script>
+
+<template>
+  <div class="flex justify-content-center">
+    <Card class="mt-3 text-center w-11">
+    <template #content>
+      <logo1 />
+      <div v-if="isLoading" class="justify-content-center mt-4">
+        <skills-spinner :is-loading="true" />
+        <div class="mt-2 text-primary text-xl">Getting Things Ready!</div>
+        <div class="text-color-secondary">This may take just a second...</div>
+      </div>
+      <div v-else>
+        <Message icon="far fa-check-square" severity="success" :closable="false">
+          The root account has been successfully created!
+        </Message>
+
+        <Message icon="far fa-check-square" severity="success" :closable="false">
+          Inception self-training project created!
+        </Message>
+        <p class="mt-2">Please proceed to the SkillTree Dashboard.</p>
+        <SkillsButton
+          label="Let's Get Started!"
+          icon="far fa-smile-beam"
+          @click="refresh"
+          class="mt-2"
+          severity="success" />
+      </div>
+    </template>
+  </Card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>