Implemented Certificates and ModalUploadCertificate pages

src/assets/styles/bmc/custom/_forms.scss

@@ -171,3 +171,12 @@ div[role='group'] {
   background-color: $gray-900;
   border-color: $gray-900;
 }
+.form-control-file {
+  opacity: 0;
+  height: 0;
+  &:focus + span {
+    box-shadow:
+      inset 0 0 0 3px theme-color('primary'),
+      inset 0 0 0 5px $white;
+  }
+}

src/components/Global/FormFile.vue

@@ -2,15 +2,26 @@
 <template>
   <div class="custom-form-file-container">
     <label>
-      <b-form-file
+      <BFormFile
         :id="id"
         v-model="file"
         :accept="accept"
         :disabled="disabled"
         :state="state"
+        class="form-control-file"
         @change="$emit('input', file)"
       >
-      </b-form-file>
+      </BFormFile>
+      <span
+        class="add-file-btn btn"
+        :class="{
+          disabled,
+          'btn-secondary': isSecondary,
+          'btn-primary': !isSecondary,
+        }"
+      >
+        {{ $t('global.fileUpload.browseText') }}
+      </span>
       <slot name="invalid"></slot>
     </label>
     <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
@@ -31,9 +42,9 @@
 
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { BFormFile } from 'bootstrap-vue-next';
+// import { BFormFile } from 'bootstrap-vue-next';
 import IconClose from '@carbon/icons-vue/es/close/20';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
 const props = defineProps({
   id: {
@@ -57,36 +68,14 @@ const props = defineProps({
     default: 'secondary',
   },
 });
-console.log(
-  'id: ',
-  props.id,
-  'disabled: ',
-  props.disabled,
-  'accept: ',
-  props.accept,
-  'state: ',
-  props.state,
-  'variant',
-  props.variant,
-);
 const { t } = useI18n();
 const file = ref(null);
-// const isSecondary = computed(() => {
-//   return props.variant === 'secondary';
-// });
+const isSecondary = computed(() => {
+  return props.variant === 'secondary';
+});
 </script>
 
 <style lang="scss" scoped>
-.form-control-file {
-  opacity: 0;
-  height: 0;
-  &:focus + span {
-    box-shadow:
-      inset 0 0 0 3px theme-color('primary'),
-      inset 0 0 0 5px $white;
-  }
-}
-
 // Get mouse pointer on complete element
 .add-file-btn {
   position: relative;

src/router/routes.js

@@ -17,6 +17,7 @@ import Memory from '@/views/ResourceManagement/Memory';
 import Power from '@/views/ResourceManagement/Power';
 import PowerRestorePolicy from '@/views/Settings/PowerRestorePolicy';
 import IBMiServiceFunctions from '@/views/Logs/IBMiServiceFunctions';
+import Certificates from '@/views/SecurityAndAccess/Certificates';
 
 const roles = {
   administrator: 'Administrator',
@@ -142,6 +143,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.memory'),
         },
       },
+      {
+        path: '/security-and-access/certificates',
+        name: 'certificates',
+        component: Certificates,
+        meta: {
+          title: i18n.global.t('appPageTitle.certificates'),
+        },
+      },
       {
         path: '/:pathMatch(.*)*',
         name: 'page-not-found',

src/store/index.js

@@ -14,7 +14,8 @@ import ResourceMemoryStore from './modules/ResourceManagement/ResourceMemoryStor
 import PowerPolicyStore from './modules/Settings/PowerPolicyStore';
 import IBMiServiceFunctionsStore from './modules/Logs/IBMiServiceFunctionsStore';
 import AuditLogsStore from './modules/Logs/AuditLogsStore';
-
+import CertificatesStore from './modules/SecurityAndAccess/CertificatesStore';
+import UserManagementStore from './modules/SecurityAndAccess/UserManagementStore';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -31,5 +32,7 @@ export {
   ResourceMemoryStore,
   PowerPolicyStore,
   IBMiServiceFunctionsStore,
+  CertificatesStore,
+  UserManagementStore,
   AuditLogsStore,
 };