From 5963e18932fe332e85cdcbb6f5f2cafdd353fb34 Mon Sep 17 00:00:00 2001
From: Steffi Antony <“steffiantony196@gmail.com”>
Date: Fri, 6 Sep 2024 13:03:31 +0530
Subject: [PATCH] Implemented Certificates and ModalUploadCertificate pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Jira: https://jsw.ibm.com/browse/PFEBMC-2392
Jira: https://jsw.ibm.com/browse/PFEBMC-2373
Signed-off-by: Steffi Antony <“steffiantony196@gmail.com”>
---
 src/assets/styles/bmc/custom/_forms.scss      |   9 +
 src/components/Global/FormFile.vue            |  10 +-
 src/router/routes.js                          |   9 +
 src/store/index.js                            |   4 +
 src/store/modules/GlobalStore.js              |   1 -
 .../SecurityAndAccess/CertificatesStore.js    | 118 ++--
 .../SecurityAndAccess/UserManagementStore.js  |  23 +-
 .../Certificates/Certificates.vue             | 569 ++++++++--------
 .../Certificates/CsrCountryCodes.js           | 606 ++++++++++--------
 .../Certificates/ModalGenerateCsr.vue         | 585 ++++++++---------
 .../Certificates/ModalUploadCertificate.vue   | 327 +++++-----
 11 files changed, 1204 insertions(+), 1057 deletions(-)

diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 56995a8917..07851dcd4f 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -181,3 +181,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 $primary,
+      inset 0 0 0 5px $white;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 6072f5f49a..47ebd64fd1 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -69,16 +69,14 @@ const props = defineProps({
   },
 });
 
-const file = ref(null);
-
-const isSecondary = computed(() => {
-  return props.variant === 'secondary';
-});
-
 function clearFile() {
   file.value = null;
   emit('input', file.value);
 }
+const file = ref(null);
+const isSecondary = computed(() => {
+  return props.variant === 'secondary';
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/router/routes.js b/src/router/routes.js
index dfaf892e2d..cad8cbf700 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -21,6 +21,7 @@ import IBMiServiceFunctions from '@/views/Logs/IBMiServiceFunctions';
 import Notices from '@/views/Notices/Notices.vue';
 import Sessions from '@/views/SecurityAndAccess/Sessions';
 import Firmware from '@/views/Operations/Firmware';
+import Certificates from '@/views/SecurityAndAccess/Certificates';
 
 const roles = {
   administrator: 'Administrator',
@@ -170,6 +171,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.sessions'),
         },
       },
+      {
+        path: '/security-and-access/certificates',
+        name: 'certificates',
+        component: Certificates,
+        meta: {
+          title: i18n.global.t('appPageTitle.certificates'),
+        },
+      },
       {
         path: '/:pathMatch(.*)*',
         name: 'page-not-found',
diff --git a/src/store/index.js b/src/store/index.js
index b8f62cceda..0a7700d222 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -18,6 +18,8 @@ import AuditLogsStore from './modules/Logs/AuditLogsStore';
 import SessionsStore from './modules/SecurityAndAccess/SessionsStore.js';
 import LicenseStore from './modules/ResourceManagement/LicenseStore';
 import BmcStore from './modules/HardwareStatus/BmcStore';
+import CertificatesStore from './modules/SecurityAndAccess/CertificatesStore';
+import UserManagementStore from './modules/SecurityAndAccess/UserManagementStore';
 
 // ... (export use other stores)
 export {
@@ -40,4 +42,6 @@ export {
   SessionsStore,
   LicenseStore,
   BmcStore,
+  CertificatesStore,
+  UserManagementStore,
 };
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 848da131aa..607f7271cb 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -62,7 +62,6 @@ export const GlobalStore = defineStore('global', {
           const bmcDateTime = response.data.DateTime;
           const date = new Date(bmcDateTime);
           this.bmcTime = date;
-          this.isAuthorized = false;
         })
         .catch((error) => console.log(error));
     },
diff --git a/src/store/modules/SecurityAndAccess/CertificatesStore.js b/src/store/modules/SecurityAndAccess/CertificatesStore.js
index de936466dc..2e5c3d3caa 100644
--- a/src/store/modules/SecurityAndAccess/CertificatesStore.js
+++ b/src/store/modules/SecurityAndAccess/CertificatesStore.js
@@ -1,16 +1,18 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
+
 export const CERTIFICATE_TYPES = [
   {
     type: 'HTTPS Certificate',
     location: '/redfish/v1/Managers/bmc/NetworkProtocol/HTTPS/Certificates/',
-    label: i18n.t('pageCertificates.httpsCertificate'),
+    label: i18n.global.t('pageCertificates.httpsCertificate'),
     limit: 1,
   },
   {
     type: 'LDAP Certificate',
     location: '/redfish/v1/AccountService/LDAP/Certificates/',
-    label: i18n.t('pageCertificates.ldapCertificate'),
+    label: i18n.global.t('pageCertificates.ldapCertificate'),
     limit: 1,
   },
   {
@@ -19,13 +21,13 @@ export const CERTIFICATE_TYPES = [
     // Web UI will show 'CA Certificate' instead of
     // 'TrustStore Certificate' after user testing revealed
     // the term 'TrustStore Certificate' wasn't recognized/was unfamilar
-    label: i18n.t('pageCertificates.caCertificate'),
+    label: i18n.global.t('pageCertificates.caCertificate'),
     limit: 10,
   },
   {
     type: 'ServiceLogin Certificate',
     location: '/redfish/v1/AccountService/Accounts/service',
-    label: i18n.t('pageCertificates.serviceLoginCertificate'),
+    label: i18n.global.t('pageCertificates.serviceLoginCertificate'),
     limit: 1,
   },
 ];
@@ -42,31 +44,22 @@ const convertFileToBase64 = (file) =>
     reader.onload = () => resolve(reader.result);
     reader.onerror = (error) => reject(error);
   });
-const CertificatesStore = {
+export const CertificatesStore = defineStore('certificates', {
   namespaced: true,
-  state: {
-    allCertificates: [],
-    acfCertificate: [],
-    availableUploadTypes: [],
+  state: () => {
+    return {
+      allCertificates: [],
+      acfCertificate: [],
+      availableUploadTypes: [],
+    };
   },
   getters: {
-    allCertificates: (state) => state.allCertificates,
-    acfCertificate: (state) => state.acfCertificate,
-    availableUploadTypes: (state) => state.availableUploadTypes,
-  },
-  mutations: {
-    setCertificates(state, certificates) {
-      state.allCertificates = certificates;
-    },
-    setAcfCertificate(state, certificate) {
-      state.acfCertificate = certificate;
-    },
-    setAvailableUploadTypes(state, availableUploadTypes) {
-      state.availableUploadTypes = availableUploadTypes;
-    },
+    allCertificatesGetter: (state) => state.allCertificates,
+    acfCertificateGetter: (state) => state.acfCertificate,
+    availableUploadTypesGetter: (state) => state.availableUploadTypes,
   },
   actions: {
-    async getAcfCertificate({ commit }) {
+    async getAcfCertificate() {
       return await api
         .get('/redfish/v1/AccountService/Accounts/service')
         .then(
@@ -87,15 +80,15 @@ const CertificatesStore = {
                 validFrom: '',
                 validUntil: new Date(ACF.ExpirationDate),
               };
-              commit('setAcfCertificate', [acfCertificate]);
+              this.acfCertificate = [acfCertificate];
             } else {
-              commit('setAcfCertificate', []);
+              this.acfCertificate = [];
             }
           },
         )
         .catch((error) => console.log(error));
     },
-    async getCertificates({ commit, dispatch }) {
+    async getCertificates() {
       return await api
         .get('/redfish/v1/CertificateService/CertificateLocations')
         .then(
@@ -129,18 +122,15 @@ const CertificatesStore = {
                   validUntil: new Date(ValidNotAfter),
                 };
               });
-              commit('setCertificates', certificates);
-              dispatch('getAvailableCertificates');
+              this.allCertificates = certificates;
+              this.getAvailableCertificates();
             }),
           );
         });
     },
-    async getAvailableCertificates({ commit, state }) {
+    async getAvailableCertificates() {
       const availableUploadTypes = [];
-      const allCertificates = [
-        ...state.acfCertificate,
-        ...state.allCertificates,
-      ];
+      const allCertificates = [...this.acfCertificate, ...this.allCertificates];
       CERTIFICATE_TYPES.map((certificateType) => {
         const certificateCount = allCertificates.filter((certificate) => {
           return (
@@ -154,7 +144,7 @@ const CertificatesStore = {
           availableUploadTypes.push(certificateType);
         }
       });
-      commit('setAvailableUploadTypes', availableUploadTypes);
+      this.availableUploadTypes = availableUploadTypes;
     },
     async addNewACFCertificate({ dispatch }, { file, type }) {
       const base64File = await convertFileToBase64(file);
@@ -176,13 +166,15 @@ const CertificatesStore = {
           dispatch('getCertificates');
         })
         .then(() => {
-          return i18n.t('pageCertificates.toast.successAddCertificate', {
+          return i18n.global.t('pageCertificates.toast.successAddCertificate', {
             certificate: getCertificateProp(type, 'label'),
           });
         })
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageCertificates.toast.errorAddCertificate'));
+          throw new Error(
+            i18n.global.t('pageCertificates.toast.errorAddCertificate'),
+          );
         });
     },
     async addNewACFCertificateOnLoginPage(_, { file, type }) {
@@ -201,13 +193,15 @@ const CertificatesStore = {
           headers: { 'Content-Type': 'application/octet-stream' },
         })
         .then(() =>
-          i18n.t('pageCertificates.toast.successAddCertificate', {
+          i18n.global.t('pageCertificates.toast.successAddCertificate', {
             certificate: getCertificateProp(type, 'label'),
           }),
         )
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageCertificates.toast.errorAddCertificate'));
+          throw new Error(
+            i18n.global.t('pageCertificates.toast.errorAddCertificate'),
+          );
         });
     },
     async addNewCertificate({ dispatch }, { file, type }) {
@@ -219,21 +213,26 @@ const CertificatesStore = {
         .then(() => dispatch('getCertificates'))
         .then(() => {
           if (typeOfCertificate === 'HTTPS Certificate') {
-            return i18n.t(
+            return i18n.global.t(
               'pageCertificates.toast.successAddedHTTPCertificate',
               {
                 certificate: getCertificateProp(type, 'label'),
               },
             );
           } else {
-            return i18n.t('pageCertificates.toast.successAddCertificate', {
-              certificate: getCertificateProp(type, 'label'),
-            });
+            return i18n.global.t(
+              'pageCertificates.toast.successAddCertificate',
+              {
+                certificate: getCertificateProp(type, 'label'),
+              },
+            );
           }
         })
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageCertificates.toast.errorAddCertificate'));
+          throw new Error(
+            i18n.global.t('pageCertificates.toast.errorAddCertificate'),
+          );
         });
     },
     async replaceACFCertificate({ dispatch }, { file, type, location }) {
@@ -256,14 +255,14 @@ const CertificatesStore = {
           dispatch('getCertificates');
         })
         .then(() =>
-          i18n.t('pageCertificates.toast.successReplaceCertificate', {
+          i18n.global.t('pageCertificates.toast.successReplaceCertificate', {
             certificate: getCertificateProp(type, 'label'),
           }),
         )
         .catch((error) => {
           console.log(error);
           throw new Error(
-            i18n.t('pageCertificates.toast.errorReplaceCertificate'),
+            i18n.global.t('pageCertificates.toast.errorReplaceCertificate'),
           );
         });
     },
@@ -287,22 +286,25 @@ const CertificatesStore = {
         })
         .then(() => {
           if (typeOfCertificate === 'HTTPS Certificate') {
-            return i18n.t(
+            return i18n.global.t(
               'pageCertificates.toast.successReplacedHTTPCertificate',
               {
                 certificate: getCertificateProp(type, 'label'),
               },
             );
           } else {
-            return i18n.t('pageCertificates.toast.successReplaceCertificate', {
-              certificate: getCertificateProp(type, 'label'),
-            });
+            return i18n.global.t(
+              'pageCertificates.toast.successReplaceCertificate',
+              {
+                certificate: getCertificateProp(type, 'label'),
+              },
+            );
           }
         })
         .catch((error) => {
           console.log(error);
           throw new Error(
-            i18n.t('pageCertificates.toast.errorReplaceCertificate'),
+            i18n.global.t('pageCertificates.toast.errorReplaceCertificate'),
           );
         });
     },
@@ -320,14 +322,14 @@ const CertificatesStore = {
         .patch(location, data)
         .then(() => dispatch('getCertificates'))
         .then(() =>
-          i18n.t('pageCertificates.toast.successDeleteCertificate', {
+          i18n.global.t('pageCertificates.toast.successDeleteCertificate', {
             certificate: getCertificateProp(type, 'label'),
           }),
         )
         .catch((error) => {
           console.log(error);
           throw new Error(
-            i18n.t('pageCertificates.toast.errorDeleteCertificate'),
+            i18n.global.t('pageCertificates.toast.errorDeleteCertificate'),
           );
         });
     },
@@ -336,18 +338,18 @@ const CertificatesStore = {
         .delete(location)
         .then(() => dispatch('getCertificates'))
         .then(() =>
-          i18n.t('pageCertificates.toast.successDeleteCertificate', {
+          i18n.global.t('pageCertificates.toast.successDeleteCertificate', {
             certificate: getCertificateProp(type, 'label'),
           }),
         )
         .catch((error) => {
           console.log(error);
           throw new Error(
-            i18n.t('pageCertificates.toast.errorDeleteCertificate'),
+            i18n.global.t('pageCertificates.toast.errorDeleteCertificate'),
           );
         });
     },
-    async generateCsr(_, userData) {
+    async generateCsr(userData) {
       const {
         certificateType,
         country,
@@ -376,7 +378,7 @@ const CertificatesStore = {
       data.KeyPairAlgorithm = keyPairAlgorithm;
       data.AlternativeNames = alternateName;
       if (keyCurveId) data.KeyCurveId = keyCurveId;
-      if (keyBitLength) data.KeyBitLength = keyBitLength;
+      if (keyBitLength) data.KeyBitLength = parseInt(keyBitLength);
       if (contactPerson) data.ContactPerson = contactPerson;
       if (emailAddress) data.Email = emailAddress;
       return await api
@@ -389,5 +391,5 @@ const CertificatesStore = {
         .catch((error) => console.log(error));
     },
   },
-};
+});
 export default CertificatesStore;
diff --git a/src/store/modules/SecurityAndAccess/UserManagementStore.js b/src/store/modules/SecurityAndAccess/UserManagementStore.js
index 9ab745753e..5f366503f5 100644
--- a/src/store/modules/SecurityAndAccess/UserManagementStore.js
+++ b/src/store/modules/SecurityAndAccess/UserManagementStore.js
@@ -16,7 +16,7 @@ export const UserManagementStore = defineStore('userManagment', {
     };
   },
   getters: {
-    allUsers(state) {
+    allUsersGetter(state) {
       return state.allUsers;
     },
     // accountRoles(state) {
@@ -45,14 +45,25 @@ export const UserManagementStore = defineStore('userManagment', {
         .then((response) =>
           response.data.Members.map((user) => user['@odata.id']),
         )
-        .then((userIds) => api.all(userIds.map((user) => api.get(user))))
-        .then((users) => {
-          const userData = users.map((user) => user.data);
-          this.allUsers = userData;
+        .then((userIds) => {
+          api.all(userIds.map((user) => api.get(user)))
+          .then((users) => {
+            const userData = users.map((user) => user.data);
+            this.allUsers = userData;
+          })
+          .catch((error) => {
+            console.log(error);
+            const message = i18n.global.t(
+              'pageUserManagement.toast.errorLoadUsers',
+            );
+            throw new Error(message);
+          });
         })
         .catch((error) => {
           console.log(error);
-          const message = i18n.t('pageUserManagement.toast.errorLoadUsers');
+          const message = i18n.global.t(
+            'pageUserManagement.toast.errorLoadUsers',
+          );
           throw new Error(message);
         });
     },
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index 3bfdefd973..85c319a4d1 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -1,8 +1,8 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.certificates')" />
-    <b-row>
-      <b-col xl="11">
+    <BRow>
+      <BCol xl="11">
         <!-- Expired certificates banner -->
         <alert :show="expiredCertificateTypes.length > 0" variant="danger">
           <template v-if="expiredCertificateTypes.length > 1">
@@ -29,33 +29,34 @@
             }}
           </template>
         </alert>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="11" class="text-right">
-        <b-button
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol xl="11" class="text-right">
+        <BButton
           v-b-modal.generate-csr
           data-test-id="certificates-button-generateCsr"
           variant="link"
         >
           <icon-add />
           {{ $t('pageCertificates.generateCsr') }}
-        </b-button>
-        <b-button
+        </BButton>
+        <BButton
           variant="primary"
           :disabled="certificatesForUpload.length === 0"
           @click="initModalUploadCertificate(null)"
         >
           <icon-add />
           {{ $t('pageCertificates.addNewCertificate') }}
-        </b-button>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="11">
-        <b-table
+        </BButton>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol xl="11">
+        <BTable
           responsive="xl"
           show-empty
+          sticky-header="75vh"
           hover
           :busy="isBusy"
           :fields="fields"
@@ -71,14 +72,14 @@
             }}
           </template>
           <template #cell(validFrom)="{ value }">
-            {{ value | formatDate }}
+            {{ $filters.formatDate(value) }}
           </template>
           <template #cell(validUntil)="{ value }">
             <status-icon
               v-if="getDaysUntilExpired(value) < 31"
               :status="getIconStatus(value)"
             />
-            {{ value | formatDate }}
+            {{ $filters.formatDate(value) }}
           </template>
           <template #cell(actions)="{ value, item }">
             <table-row-action
@@ -90,286 +91,314 @@
               @click-table-action="onTableRowAction($event, item)"
             >
               <template #icon>
-                <icon-replace v-if="action.value === 'replace'" />
-                <icon-trashcan v-if="action.value === 'delete'" />
+                <icon-replace
+                  v-if="action.value === 'replace'"
+                  :title="$t('pageCertificates.replaceCertificate')"
+                />
+                <icon-trashcan
+                  v-if="action.value === 'delete'"
+                  :title="$t('pageCertificates.deleteCertificate')"
+                />
               </template>
             </table-row-action>
           </template>
-        </b-table>
-      </b-col>
-    </b-row>
+        </BTable>
+      </BCol>
+    </BRow>
     <!-- Modals -->
     <modal-upload-certificate
       :certificate="modalCertificate"
       :user-role-id="userRoleId"
       @ok="onModalOk"
     />
+
+    <BModal
+      ref="myModalRef"
+      v-model="modal"
+      :title="$t('pageCertificates.deleteCertificate')"
+      :cancel-title="$t('global.action.cancel')"
+      :ok-title="$t('global.action.delete')"
+      @cancel="onModalCancel"
+      @ok="onModalDelete"
+      @hide="onModalHide"
+    >
+      {{
+        $t('pageCertificates.modal.deleteConfirmMessage', {
+          certificate: modalContent,
+        })
+      }}
+    </BModal>
+
     <modal-generate-csr />
-  </b-container>
+  </BContainer>
 </template>
-<script>
+<script setup>
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconReplace from '@carbon/icons-vue/es/renew/20';
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import ModalGenerateCsr from './ModalGenerateCsr';
-import ModalUploadCertificate from './ModalUploadCertificate';
-import PageTitle from '@/components/Global/PageTitle';
-import TableRowAction from '@/components/Global/TableRowAction';
-import StatusIcon from '@/components/Global/StatusIcon';
-import Alert from '@/components/Global/Alert';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import CurrentUserMixin from '@/components/Mixins/CurrentUserMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-export default {
-  name: 'Certificates',
-  components: {
-    Alert,
-    IconAdd,
-    IconReplace,
-    IconTrashcan,
-    ModalGenerateCsr,
-    ModalUploadCertificate,
-    PageTitle,
-    StatusIcon,
-    TableRowAction,
+import ModalGenerateCsr from './ModalGenerateCsr.vue';
+import ModalUploadCertificate from './ModalUploadCertificate.vue';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import Alert from '@/components/Global/Alert.vue';
+import { CertificatesStore, UserManagementStore, GlobalStore } from '@/store';
+import { ref, onMounted, computed } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import useToastComposable from '@/components/Composables/useToastComposable';
+import i18n from '@/i18n';
+import eventBus from '@/eventBus';
+const certificate = CertificatesStore();
+const userManagement = UserManagementStore();
+const global = GlobalStore();
+const { hideLoader, startLoader, endLoader } = useLoadingBar();
+const toast = useToastComposable();
+const modal = ref(false);
+const modalContent = ref('');
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
+const userRoleId = ref(null);
+const isBusy = ref(true);
+const modalCertificate = ref(null);
+const fields = ref([
+  {
+    key: 'certificate',
+    label: i18n.global.t('pageCertificates.table.certificate'),
+  },
+  {
+    key: 'issuedBy',
+    label: i18n.global.t('pageCertificates.table.issuedBy'),
+  },
+  {
+    key: 'issuedTo',
+    label: i18n.global.t('pageCertificates.table.issuedTo'),
+  },
+  {
+    key: 'validFrom',
+    label: i18n.global.t('pageCertificates.table.validFrom'),
+  },
+  {
+    key: 'validUntil',
+    label: i18n.global.t('pageCertificates.table.validUntil'),
   },
-  mixins: [BVToastMixin, CurrentUserMixin, LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
+  {
+    key: 'actions',
+    label: '',
+    tdClass: 'text-right text-nowrap',
   },
-  data() {
+]);
+const certificates = computed(() => {
+  const acfCertificate = certificate.acfCertificate;
+  const certificates = certificate.allCertificates;
+  const allCertificates = [...acfCertificate, ...certificates];
+  return allCertificates;
+});
+
+const tableItems = computed(() => {
+  return certificates.value.map((certificate) => {
     return {
-      userRoleId: null,
-      isBusy: true,
-      modalCertificate: null,
-      fields: [
-        {
-          key: 'certificate',
-          label: this.$t('pageCertificates.table.certificate'),
-        },
-        {
-          key: 'issuedBy',
-          label: this.$t('pageCertificates.table.issuedBy'),
-        },
-        {
-          key: 'issuedTo',
-          label: this.$t('pageCertificates.table.issuedTo'),
-        },
-        {
-          key: 'validFrom',
-          label: this.$t('pageCertificates.table.validFrom'),
-        },
+      ...certificate,
+      actions: [
         {
-          key: 'validUntil',
-          label: this.$t('pageCertificates.table.validUntil'),
+          value: 'replace',
         },
         {
-          key: 'actions',
-          label: '',
-          tdClass: 'text-right text-nowrap',
+          value: 'delete',
+          enabled:
+            certificate.type === 'TrustStore Certificate' ||
+            certificate.certificate === 'ServiceLogin Certificate' ||
+            certificate.certificate === 'CA Certificate',
         },
       ],
     };
-  },
-  computed: {
-    certificates() {
-      const acfCertificate = this.$store.getters['certificates/acfCertificate'];
-      const certificates = this.$store.getters['certificates/allCertificates'];
-      const allCertificates = [...acfCertificate, ...certificates];
-      return allCertificates;
-    },
-    tableItems() {
-      return this.certificates.map((certificate) => {
-        return {
-          ...certificate,
-          actions: [
-            {
-              value: 'replace',
-              title: this.$t('pageCertificates.replaceCertificate'),
-            },
-            {
-              value: 'delete',
-              title: this.$t('pageCertificates.deleteCertificate'),
-              enabled:
-                certificate.type === 'TrustStore Certificate' ||
-                certificate.certificate === 'ServiceLogin Certificate' ||
-                certificate.certificate === 'CA Certificate',
-            },
-          ],
-        };
-      });
-    },
-    certificatesForUpload() {
-      return this.$store.getters['certificates/availableUploadTypes'];
-    },
-    bmcTime() {
-      return this.$store.getters['global/bmcTime'];
-    },
-    expiredCertificateTypes() {
-      return this.certificates.reduce((acc, val) => {
-        const daysUntilExpired = this.getDaysUntilExpired(val.validUntil);
-        if (daysUntilExpired < 1) {
-          acc.push(val.certificate);
-        }
-        return acc;
-      }, []);
-    },
-    expiringCertificateTypes() {
-      return this.certificates.reduce((acc, val) => {
-        const daysUntilExpired = this.getDaysUntilExpired(val.validUntil);
-        if (daysUntilExpired < 31 && daysUntilExpired > 0) {
-          acc.push(val.certificate);
-        }
-        return acc;
-      }, []);
-    },
-  },
-  created() {
-    this.startLoader();
-    Promise.all([
-      this.$store.dispatch('global/getBmcTime'),
-      this.$store.dispatch('certificates/getAcfCertificate'),
-      this.$store.dispatch('certificates/getCertificates'),
-      this.$store.dispatch('userManagement/getUsers'),
-    ]).finally(() => {
-      this.endLoader();
-      this.isBusy = false;
-      this.userRoleId = this.currentUser.RoleId;
+  });
+});
+const certificatesForUpload = computed(() => {
+  return certificate.availableUploadTypes;
+});
+const bmcTime = computed(() => {
+  return global.bmcTime;
+});
+const expiredCertificateTypes = computed(() => {
+  return certificates.value.reduce((acc, val) => {
+    const daysUntilExpired = getDaysUntilExpired(val.validUntil);
+    if (daysUntilExpired < 1) {
+      acc.push(val.certificate);
+    }
+    return acc;
+  }, []);
+});
+const expiringCertificateTypes = computed(() => {
+  return certificates.value.reduce((acc, val) => {
+    const daysUntilExpired = getDaysUntilExpired(val.validUntil);
+    if (daysUntilExpired < 31 && daysUntilExpired > 0) {
+      acc.push(val.certificate);
+    }
+    return acc;
+  }, []);
+});
+onMounted(() => {
+  startLoader();
+  Promise.all([
+    global.getBmcTime(),
+    certificate.getAcfCertificate(),
+    certificate.getCertificates(),
+    userManagement.getUsers(),
+  ]).finally(() => {
+    endLoader();
+    isBusy.value = false;
+    userRoleId.value = ref(global.username);
+  });
+});
+const onTableRowAction = (event, rowItem) => {
+  switch (event) {
+    case 'replace':
+      initModalUploadCertificate(rowItem);
+      break;
+    case 'delete':
+      initModalDeleteCertificate(rowItem);
+      break;
+    default:
+      break;
+  }
+};
+const initModalUploadCertificate = (certificate = null) => {
+  modalCertificate.value = certificate;
+  // this.$bvModal.show('upload-certificate');
+  eventBus.emit('upload-certificate');
+};
+const initModalDeleteCertificate = (certificate) => {
+  modalContent.value = certificate.certificate;
+  certificate.actions.forEach((action) => {
+    if (action.enabled !== undefined) {
+      modal.value = action.enabled;
+    }
+  });
+};
+const onModalDelete = (deleteConfirmed) => {
+  if (deleteConfirmed)
+    deleteCertificate({
+      type: certificate.certificate,
+      location: certificate.location,
     });
-  },
-  methods: {
-    onTableRowAction(event, rowItem) {
-      switch (event) {
-        case 'replace':
-          this.initModalUploadCertificate(rowItem);
-          break;
-        case 'delete':
-          this.initModalDeleteCertificate(rowItem);
-          break;
-        default:
-          break;
-      }
-    },
-    initModalUploadCertificate(certificate = null) {
-      this.modalCertificate = certificate;
-      this.$bvModal.show('upload-certificate');
-    },
-    initModalDeleteCertificate(certificate) {
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('pageCertificates.modal.deleteConfirmMessage', {
-            certificate: certificate.certificate,
-          }),
-          {
-            title: this.$t('pageCertificates.deleteCertificate'),
-            okTitle: this.$t('global.action.delete'),
-            cancelTitle: this.$t('global.action.cancel'),
-          },
-        )
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed)
-            this.deleteCertificate({
-              type: certificate.certificate,
-              location: certificate.location,
-            });
-        });
-    },
-    onModalOk({ addNew, file, type, location }) {
-      if (addNew) {
-        // Upload a new certificate
-        this.addNewCertificate(file, type);
-      } else {
-        // Replace an existing certificate
-        this.replaceCertificate(file, type, location);
-      }
-    },
-    addNewCertificate(file, type) {
-      this.startLoader();
-      if (type === 'ServiceLogin Certificate') {
-        this.$store
-          .dispatch('certificates/addNewACFCertificate', { file, type })
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
-      } else {
-        this.$store
-          .dispatch('certificates/addNewCertificate', { file, type })
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
-      }
-    },
-    replaceCertificate(file, type, location) {
-      this.startLoader();
-      if (type === 'ServiceLogin Certificate') {
-        return this.$store
-          .dispatch('certificates/replaceACFCertificate', {
-            file,
-            type,
-            location,
-          })
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
-      } else {
-        const reader = new FileReader();
-        reader.readAsBinaryString(file);
-        reader.onloadend = (event) => {
-          const certificateString = event.target.result;
-          return this.$store
-            .dispatch('certificates/replaceCertificate', {
-              certificateString,
-              type,
-              location,
-            })
-            .then((success) => this.successToast(success))
-            .catch(({ message }) => this.errorToast(message))
-            .finally(() => this.endLoader());
-        };
+};
+const onModalOk = ({ addNew, file, type, location }) => {
+  if (addNew) {
+    // Upload a new certificate
+    addNewCertificate(file, type);
+  } else {
+    // Replace an existing certificate
+    replaceCertificate(file, type, location);
+  }
+};
+const addNewCertificate = (file, type) => {
+  startLoader();
+  if (type === 'ServiceLogin Certificate') {
+    certificate.addNewACFCertificate(),
+      { file, type }
+        .then((success) => toast.successToast(success))
+        .catch(({ message }) => toast.errorToast(message))
+        .finally(() => endLoader());
+  } else {
+    certificate.addNewCertificate(),
+      { file, type }
+        .then((success) => toast.successToast(success))
+        .catch(({ message }) => toast.errorToast(message))
+        .finally(() => endLoader());
+  }
+};
+const replaceCertificate = (file, type, location) => {
+  startLoader();
+  if (type === 'ServiceLogin Certificate') {
+    return (
+      certificate.replaceACFCertificate(),
+      {
+        file,
+        type,
+        location,
       }
-    },
-    deleteCertificate({ type, location }) {
-      this.startLoader();
-      Promise.all([this.deleteCertificateChecker(type, location)])
-        .then((success) => {
-          this.successToast(success);
-          this.$store.dispatch('certificates/getAcfCertificate');
-          this.$store.dispatch('certificates/getCertificates');
-        })
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => this.endLoader());
-    },
-    deleteCertificateChecker(type, location) {
-      if (type === 'ServiceLogin Certificate') {
-        return this.$store.dispatch('certificates/deleteACFCertificate', {
-          type,
-          location,
-        });
-      } else {
-        return this.$store.dispatch('certificates/deleteCertificate', {
+        .then((success) => toast.successToast(success))
+        .catch(({ message }) => toast.errorToast(message))
+        .finally(() => endLoader())
+    );
+  } else {
+    const reader = new FileReader();
+    reader.readAsBinaryString(file);
+    reader.onloadend = (event) => {
+      const certificateString = event.target.result;
+      return (
+        certificate.replaceCertificate(),
+        {
+          certificateString,
           type,
           location,
-        });
-      }
-    },
-    getDaysUntilExpired(date) {
-      if (this.bmcTime) {
-        const validUntilMs = date.getTime();
-        const currentBmcTimeMs = this.bmcTime.getTime();
-        const oneDayInMs = 24 * 60 * 60 * 1000;
-        return Math.round((validUntilMs - currentBmcTimeMs) / oneDayInMs);
+        }
+          .then((success) => toast.successToast(success))
+          .catch(({ message }) => toast.errorToast(message))
+          .finally(() => endLoader())
+      );
+    };
+  }
+};
+const deleteCertificate = ({ type, location }) => {
+  startLoader();
+  Promise.all([deleteCertificateChecker(type, location)])
+    .then((success) => {
+      toast.successToast(success);
+      certificate.getAcfCertificate();
+      certificate.getCertificates();
+    })
+    .catch(({ message }) => toast.errorToast(message))
+    .finally(() => endLoader());
+};
+const deleteCertificateChecker = (type, location) => {
+  if (type === 'ServiceLogin Certificate') {
+    return (
+      certificates.value.deleteACFCertificate(),
+      {
+        type,
+        location,
       }
-      return new Date();
-    },
-    getIconStatus(date) {
-      const daysUntilExpired = this.getDaysUntilExpired(date);
-      if (daysUntilExpired < 1) {
-        return 'danger';
-      } else if (daysUntilExpired < 31) {
-        return 'warning';
+    );
+  } else {
+    return (
+      certificate.deleteCertificate(),
+      {
+        type,
+        location,
       }
-    },
-  },
+    );
+  }
+};
+const getDaysUntilExpired = (date) => {
+  if (bmcTime.value) {
+    const validUntilMs = date.getTime();
+    const currentBmcTimeMs = bmcTime.value.toLocaleDateString();
+    const oneDayInMs = 24 * 60 * 60 * 1000;
+    return Math.round((validUntilMs - currentBmcTimeMs.value) / oneDayInMs);
+  }
+  return new Date();
+};
+const getIconStatus = (date) => {
+  const daysUntilExpired = getDaysUntilExpired(date);
+  if (daysUntilExpired < 1) {
+    return 'danger';
+  } else if (daysUntilExpired < 31) {
+    return 'warning';
+  }
 };
 </script>
+<style scoped>
+.text-right {
+  text-align: right !important;
+}
+.b-table-sticky-header .table.b-table thead tr th {
+  vertical-align: middle;
+  border-top: 1px solid #d8d8d8;
+  border-bottom: 1px solid #d8d8d8;
+  color: #161616;
+  background: #e6e6e6;
+}
+</style>
diff --git a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
index a2d7000733..f99278433b 100644
--- a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
+++ b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
@@ -1,345 +1,429 @@
 import i18n from '@/i18n';
 
 export const COUNTRY_LIST = [
-  { name: 'Afghanistan', code: 'AF', label: i18n.t('countries.AF') },
-  { name: 'Albania', code: 'AL', label: i18n.t('countries.AL') },
-  { name: 'Algeria', code: 'DZ', label: i18n.t('countries.DZ') },
-  { name: 'American Samoa', code: 'AS', label: i18n.t('countries.AS') },
-  { name: 'Andorra', code: 'AD', label: i18n.t('countries.AD') },
-  { name: 'Angola', code: 'AO', label: i18n.t('countries.AO') },
-  { name: 'Anguilla', code: 'AI', label: i18n.t('countries.AI') },
-  { name: 'Antarctica', code: 'AQ', label: i18n.t('countries.AQ') },
-  { name: 'Antigua and Barbuda', code: 'AG', label: i18n.t('countries.AG') },
-  { name: 'Argentina', code: 'AR', label: i18n.t('countries.AR') },
-  { name: 'Armenia', code: 'AM', label: i18n.t('countries.AM') },
-  { name: 'Aruba', code: 'AW', label: i18n.t('countries.AW') },
-  { name: 'Australia', code: 'AU', label: i18n.t('countries.AU') },
-  { name: 'Austria', code: 'AT', label: i18n.t('countries.AT') },
-  { name: 'Azerbaijan', code: 'AZ', label: i18n.t('countries.AZ') },
-  { name: 'Bahamas, The', code: 'BS', label: i18n.t('countries.BS') },
-  { name: 'Bahrain', code: 'BH', label: i18n.t('countries.BH') },
-  { name: 'Bangladesh', code: 'BD', label: i18n.t('countries.BD') },
-  { name: 'Barbados', code: 'BB', label: i18n.t('countries.BB') },
-  { name: 'Belarus', code: 'BY', label: i18n.t('countries.BY') },
-  { name: 'Belgium', code: 'BE', label: i18n.t('countries.BE') },
-  { name: 'Belize', code: 'BZ', label: i18n.t('countries.BZ') },
-  { name: 'Benin', code: 'BJ', label: i18n.t('countries.BJ') },
-  { name: 'Bermuda', code: 'BM', label: i18n.t('countries.BM') },
-  { name: 'Bhutan', code: 'BT', label: i18n.t('countries.BT') },
-  { name: 'Bolivia', code: 'BO', label: i18n.t('countries.BO') },
+  { name: 'Afghanistan', code: 'AF', label: i18n.global.t('countries.AF') },
+  { name: 'Albania', code: 'AL', label: i18n.global.t('countries.AL') },
+  { name: 'Algeria', code: 'DZ', label: i18n.global.t('countries.DZ') },
+  { name: 'American Samoa', code: 'AS', label: i18n.global.t('countries.AS') },
+  { name: 'Andorra', code: 'AD', label: i18n.global.t('countries.AD') },
+  { name: 'Angola', code: 'AO', label: i18n.global.t('countries.AO') },
+  { name: 'Anguilla', code: 'AI', label: i18n.global.t('countries.AI') },
+  { name: 'Antarctica', code: 'AQ', label: i18n.global.t('countries.AQ') },
+  {
+    name: 'Antigua and Barbuda',
+    code: 'AG',
+    label: i18n.global.t('countries.AG'),
+  },
+  { name: 'Argentina', code: 'AR', label: i18n.global.t('countries.AR') },
+  { name: 'Armenia', code: 'AM', label: i18n.global.t('countries.AM') },
+  { name: 'Aruba', code: 'AW', label: i18n.global.t('countries.AW') },
+  { name: 'Australia', code: 'AU', label: i18n.global.t('countries.AU') },
+  { name: 'Austria', code: 'AT', label: i18n.global.t('countries.AT') },
+  { name: 'Azerbaijan', code: 'AZ', label: i18n.global.t('countries.AZ') },
+  { name: 'Bahamas, The', code: 'BS', label: i18n.global.t('countries.BS') },
+  { name: 'Bahrain', code: 'BH', label: i18n.global.t('countries.BH') },
+  { name: 'Bangladesh', code: 'BD', label: i18n.global.t('countries.BD') },
+  { name: 'Barbados', code: 'BB', label: i18n.global.t('countries.BB') },
+  { name: 'Belarus', code: 'BY', label: i18n.global.t('countries.BY') },
+  { name: 'Belgium', code: 'BE', label: i18n.global.t('countries.BE') },
+  { name: 'Belize', code: 'BZ', label: i18n.global.t('countries.BZ') },
+  { name: 'Benin', code: 'BJ', label: i18n.global.t('countries.BJ') },
+  { name: 'Bermuda', code: 'BM', label: i18n.global.t('countries.BM') },
+  { name: 'Bhutan', code: 'BT', label: i18n.global.t('countries.BT') },
+  { name: 'Bolivia', code: 'BO', label: i18n.global.t('countries.BO') },
   {
     name: 'Bonaire, Sint Eustatius and Saba',
     code: 'BQ',
-    label: i18n.t('countries.BQ'),
+    label: i18n.global.t('countries.BQ'),
   },
   {
     name: 'Bosnia and Herzegovina ',
     code: 'BA',
-    label: i18n.t('countries.BA'),
+    label: i18n.global.t('countries.BA'),
   },
-  { name: 'Bostwana', code: 'BW', label: i18n.t('countries.BW') },
-  { name: 'Bouvet Island', code: 'BV', label: i18n.t('countries.BV') },
-  { name: 'Brazil', code: 'BR', label: i18n.t('countries.BR') },
+  { name: 'Bostwana', code: 'BW', label: i18n.global.t('countries.BW') },
+  { name: 'Bouvet Island', code: 'BV', label: i18n.global.t('countries.BV') },
+  { name: 'Brazil', code: 'BR', label: i18n.global.t('countries.BR') },
   {
     name: 'British Indian Ocean Territory',
     code: 'IO',
-    label: i18n.t('countries.IO'),
-  },
-  { name: 'Brunei Darussalam ', code: 'BN', label: i18n.t('countries.BN') },
-  { name: 'Bulgaria', code: 'BG', label: i18n.t('countries.BG') },
-  { name: 'Burkina Faso', code: 'BF', label: i18n.t('countries.BF') },
-  { name: 'Burundi', code: 'BI', label: i18n.t('countries.BI') },
-  { name: 'Cabo Verde', code: 'CV', label: i18n.t('countries.CV') },
-  { name: 'Cambodia', code: 'KH', label: i18n.t('countries.KH') },
-  { name: 'Cameroon', code: 'CM', label: i18n.t('countries.CM') },
-  { name: 'Canada', code: 'CA', label: i18n.t('countries.CA') },
-  { name: 'Cayman Islands', code: 'KY', label: i18n.t('countries.KY') },
+    label: i18n.global.t('countries.IO'),
+  },
+  {
+    name: 'Brunei Darussalam ',
+    code: 'BN',
+    label: i18n.global.t('countries.BN'),
+  },
+  { name: 'Bulgaria', code: 'BG', label: i18n.global.t('countries.BG') },
+  { name: 'Burkina Faso', code: 'BF', label: i18n.global.t('countries.BF') },
+  { name: 'Burundi', code: 'BI', label: i18n.global.t('countries.BI') },
+  { name: 'Cabo Verde', code: 'CV', label: i18n.global.t('countries.CV') },
+  { name: 'Cambodia', code: 'KH', label: i18n.global.t('countries.KH') },
+  { name: 'Cameroon', code: 'CM', label: i18n.global.t('countries.CM') },
+  { name: 'Canada', code: 'CA', label: i18n.global.t('countries.CA') },
+  { name: 'Cayman Islands', code: 'KY', label: i18n.global.t('countries.KY') },
   {
     name: 'Central African Republic',
     code: 'CF',
-    label: i18n.t('countries.CF'),
+    label: i18n.global.t('countries.CF'),
+  },
+  { name: 'Chad', code: 'TD', label: i18n.global.t('countries.TD') },
+  { name: 'Chile', code: 'CL', label: i18n.global.t('countries.CL') },
+  { name: 'China', code: 'CN', label: i18n.global.t('countries.CN') },
+  {
+    name: 'Christmas Island ',
+    code: 'CX',
+    label: i18n.global.t('countries.CX'),
   },
-  { name: 'Chad', code: 'TD', label: i18n.t('countries.TD') },
-  { name: 'Chile', code: 'CL', label: i18n.t('countries.CL') },
-  { name: 'China', code: 'CN', label: i18n.t('countries.CN') },
-  { name: 'Christmas Island ', code: 'CX', label: i18n.t('countries.CX') },
-  { name: 'Cocos(Keeling) Islands', code: 'CC', label: i18n.t('countries.CC') },
-  { name: 'Columbia', code: 'CO', label: i18n.t('countries.CO') },
-  { name: 'Comoros', code: 'KM', label: i18n.t('countries.KM') },
+  {
+    name: 'Cocos(Keeling) Islands',
+    code: 'CC',
+    label: i18n.global.t('countries.CC'),
+  },
+  { name: 'Columbia', code: 'CO', label: i18n.global.t('countries.CO') },
+  { name: 'Comoros', code: 'KM', label: i18n.global.t('countries.KM') },
   {
     name: 'Congo, The Democratic Republic of the',
     code: 'CD',
-    label: i18n.t('countries.CD'),
-  },
-  { name: 'Congo', code: 'CG', label: i18n.t('countries.CG') },
-  { name: 'Cook Islands', code: 'CK', label: i18n.t('countries.CK') },
-  { name: 'Costa Rica', code: 'CR', label: i18n.t('countries.CR') },
-  { name: 'Croatia', code: 'HR', label: i18n.t('countries.HR') },
-  { name: 'Cuba', code: 'CU', label: i18n.t('countries.CU') },
-  { name: 'Curaçao', code: 'CW', label: i18n.t('countries.CW') },
-  { name: 'Cyprus', code: 'CY', label: i18n.t('countries.CY') },
-  { name: 'Czechia', code: 'CZ', label: i18n.t('countries.CZ') },
-  { name: "Côte d'Ivoire", code: 'CI', label: i18n.t('countries.CI') },
-  { name: 'Denmark', code: 'DK', label: i18n.t('countries.DK') },
-  { name: 'Djibouti', code: 'DJ', label: i18n.t('countries.DJ') },
-  { name: 'Dominica', code: 'DM', label: i18n.t('countries.DM') },
-  { name: 'Dominican Republic', code: 'DO', label: i18n.t('countries.DO') },
-  { name: 'Ecuador', code: 'EC', label: i18n.t('countries.EC') },
-  { name: 'Egypt', code: 'EG', label: i18n.t('countries.EG') },
-  { name: 'El Salvador', code: 'SV', label: i18n.t('countries.SV') },
-  { name: 'Equatorial Guinea ', code: 'GQ', label: i18n.t('countries.GQ') },
-  { name: 'Eritrea', code: 'ER', label: i18n.t('countries.ER') },
-  { name: 'Estonia', code: 'EE', label: i18n.t('countries.EE') },
-  { name: 'Eswatini', code: 'SZ', label: i18n.t('countries.SZ') },
-  { name: 'Ethiopia', code: 'ET', label: i18n.t('countries.ET') },
+    label: i18n.global.t('countries.CD'),
+  },
+  { name: 'Congo', code: 'CG', label: i18n.global.t('countries.CG') },
+  { name: 'Cook Islands', code: 'CK', label: i18n.global.t('countries.CK') },
+  { name: 'Costa Rica', code: 'CR', label: i18n.global.t('countries.CR') },
+  { name: 'Croatia', code: 'HR', label: i18n.global.t('countries.HR') },
+  { name: 'Cuba', code: 'CU', label: i18n.global.t('countries.CU') },
+  { name: 'Curaçao', code: 'CW', label: i18n.global.t('countries.CW') },
+  { name: 'Cyprus', code: 'CY', label: i18n.global.t('countries.CY') },
+  { name: 'Czechia', code: 'CZ', label: i18n.global.t('countries.CZ') },
+  { name: "Côte d'Ivoire", code: 'CI', label: i18n.global.t('countries.CI') },
+  { name: 'Denmark', code: 'DK', label: i18n.global.t('countries.DK') },
+  { name: 'Djibouti', code: 'DJ', label: i18n.global.t('countries.DJ') },
+  { name: 'Dominica', code: 'DM', label: i18n.global.t('countries.DM') },
+  {
+    name: 'Dominican Republic',
+    code: 'DO',
+    label: i18n.global.t('countries.DO'),
+  },
+  { name: 'Ecuador', code: 'EC', label: i18n.global.t('countries.EC') },
+  { name: 'Egypt', code: 'EG', label: i18n.global.t('countries.EG') },
+  { name: 'El Salvador', code: 'SV', label: i18n.global.t('countries.SV') },
+  {
+    name: 'Equatorial Guinea ',
+    code: 'GQ',
+    label: i18n.global.t('countries.GQ'),
+  },
+  { name: 'Eritrea', code: 'ER', label: i18n.global.t('countries.ER') },
+  { name: 'Estonia', code: 'EE', label: i18n.global.t('countries.EE') },
+  { name: 'Eswatini', code: 'SZ', label: i18n.global.t('countries.SZ') },
+  { name: 'Ethiopia', code: 'ET', label: i18n.global.t('countries.ET') },
   {
     name: 'Falkland Islands (Malvinas)',
     code: 'FK',
-    label: i18n.t('countries.FK'),
+    label: i18n.global.t('countries.FK'),
+  },
+  { name: 'Faroe Islands', code: 'FO', label: i18n.global.t('countries.FO') },
+  { name: 'Fiji', code: 'FJ', label: i18n.global.t('countries.FJ') },
+  { name: 'Finland', code: 'FI', label: i18n.global.t('countries.FI') },
+  { name: 'France', code: 'FR', label: i18n.global.t('countries.FR') },
+  { name: 'French Guiana', code: 'GF', label: i18n.global.t('countries.GF') },
+  {
+    name: 'French Polynesia',
+    code: 'PF',
+    label: i18n.global.t('countries.PF'),
   },
-  { name: 'Faroe Islands', code: 'FO', label: i18n.t('countries.FO') },
-  { name: 'Fiji', code: 'FJ', label: i18n.t('countries.FJ') },
-  { name: 'Finland', code: 'FI', label: i18n.t('countries.FI') },
-  { name: 'France', code: 'FR', label: i18n.t('countries.FR') },
-  { name: 'French Guiana', code: 'GF', label: i18n.t('countries.GF') },
-  { name: 'French Polynesia', code: 'PF', label: i18n.t('countries.PF') },
   {
     name: 'French Southern Territories',
     code: 'TF',
-    label: i18n.t('countries.TF'),
-  },
-  { name: 'Gabon', code: 'GA', label: i18n.t('countries.GA') },
-  { name: 'Gambia, The', code: 'GM', label: i18n.t('countries.GM') },
-  { name: 'Georgia', code: 'GE', label: i18n.t('countries.GE') },
-  { name: 'Germany', code: 'DE', label: i18n.t('countries.DE') },
-  { name: 'Ghana', code: 'GH', label: i18n.t('countries.GH') },
-  { name: 'Gibraltar', code: 'GI', label: i18n.t('countries.GI') },
-  { name: 'Greece', code: 'GR', label: i18n.t('countries.GR') },
-  { name: 'Greenland', code: 'GL', label: i18n.t('countries.GL') },
-  { name: 'Grenada', code: 'GD', label: i18n.t('countries.GD') },
-  { name: 'Guadeloupe', code: 'GP', label: i18n.t('countries.GP') },
-  { name: 'Guam', code: 'GU', label: i18n.t('countries.GU') },
-  { name: 'Guatemala', code: 'GT', label: i18n.t('countries.GT') },
-  { name: 'Guernsey', code: 'GG', label: i18n.t('countries.GG') },
-  { name: 'Guinea', code: 'GN', label: i18n.t('countries.GN') },
-  { name: 'Guinea-Bissau', code: 'GW', label: i18n.t('countries.GW') },
-  { name: 'Guyana', code: 'GY', label: i18n.t('countries.GY') },
-  { name: 'Haiti', code: 'HT', label: i18n.t('countries.HT') },
+    label: i18n.global.t('countries.TF'),
+  },
+  { name: 'Gabon', code: 'GA', label: i18n.global.t('countries.GA') },
+  { name: 'Gambia, The', code: 'GM', label: i18n.global.t('countries.GM') },
+  { name: 'Georgia', code: 'GE', label: i18n.global.t('countries.GE') },
+  { name: 'Germany', code: 'DE', label: i18n.global.t('countries.DE') },
+  { name: 'Ghana', code: 'GH', label: i18n.global.t('countries.GH') },
+  { name: 'Gibraltar', code: 'GI', label: i18n.global.t('countries.GI') },
+  { name: 'Greece', code: 'GR', label: i18n.global.t('countries.GR') },
+  { name: 'Greenland', code: 'GL', label: i18n.global.t('countries.GL') },
+  { name: 'Grenada', code: 'GD', label: i18n.global.t('countries.GD') },
+  { name: 'Guadeloupe', code: 'GP', label: i18n.global.t('countries.GP') },
+  { name: 'Guam', code: 'GU', label: i18n.global.t('countries.GU') },
+  { name: 'Guatemala', code: 'GT', label: i18n.global.t('countries.GT') },
+  { name: 'Guernsey', code: 'GG', label: i18n.global.t('countries.GG') },
+  { name: 'Guinea', code: 'GN', label: i18n.global.t('countries.GN') },
+  { name: 'Guinea-Bissau', code: 'GW', label: i18n.global.t('countries.GW') },
+  { name: 'Guyana', code: 'GY', label: i18n.global.t('countries.GY') },
+  { name: 'Haiti', code: 'HT', label: i18n.global.t('countries.HT') },
   {
     name: 'Heard Island and McDonald Islands',
     code: 'HM',
-    label: i18n.t('countries.HM'),
+    label: i18n.global.t('countries.HM'),
   },
-  { name: 'Holy See', code: 'VA', label: i18n.t('countries.VA') },
-  { name: 'Honduras', code: 'HN', label: i18n.t('countries.HN') },
-  { name: 'Hong Kong', code: 'HK', label: i18n.t('countries.HK') },
-  { name: 'Hungary', code: 'HU', label: i18n.t('countries.HU') },
-  { name: 'Iceland', code: 'IS', label: i18n.t('countries.IS') },
-  { name: 'India', code: 'IN', label: i18n.t('countries.IN') },
-  { name: 'Indonesia', code: 'ID', label: i18n.t('countries.ID') },
+  { name: 'Holy See', code: 'VA', label: i18n.global.t('countries.VA') },
+  { name: 'Honduras', code: 'HN', label: i18n.global.t('countries.HN') },
+  { name: 'Hong Kong', code: 'HK', label: i18n.global.t('countries.HK') },
+  { name: 'Hungary', code: 'HU', label: i18n.global.t('countries.HU') },
+  { name: 'Iceland', code: 'IS', label: i18n.global.t('countries.IS') },
+  { name: 'India', code: 'IN', label: i18n.global.t('countries.IN') },
+  { name: 'Indonesia', code: 'ID', label: i18n.global.t('countries.ID') },
   {
     name: 'Iran, Islamic Republic of',
     code: 'IR',
-    label: i18n.t('countries.IR'),
-  },
-  { name: 'Iraq', code: 'IQ', label: i18n.t('countries.IQ') },
-  { name: 'Ireland', code: 'IE', label: i18n.t('countries.IE') },
-  { name: 'Isle of Man', code: 'IM', label: i18n.t('countries.IM') },
-  { name: 'Israel', code: 'IL', label: i18n.t('countries.IL') },
-  { name: 'Italy', code: 'IT', label: i18n.t('countries.IT') },
-  { name: 'Jamaica', code: 'JM', label: i18n.t('countries.JM') },
-  { name: 'Japan', code: 'JP', label: i18n.t('countries.JP') },
-  { name: 'Jersey', code: 'JE', label: i18n.t('countries.JE') },
-  { name: 'Jordan', code: 'JO', label: i18n.t('countries.JO') },
-  { name: 'Kazakhstan', code: 'KZ', label: i18n.t('countries.KZ') },
-  { name: 'Kenya', code: 'KE', label: i18n.t('countries.KE') },
-  { name: 'Kiribati', code: 'KI', label: i18n.t('countries.KI') },
-  { name: 'Korea, Republic of', code: 'KR', label: i18n.t('countries.KR') },
+    label: i18n.global.t('countries.IR'),
+  },
+  { name: 'Iraq', code: 'IQ', label: i18n.global.t('countries.IQ') },
+  { name: 'Ireland', code: 'IE', label: i18n.global.t('countries.IE') },
+  { name: 'Isle of Man', code: 'IM', label: i18n.global.t('countries.IM') },
+  { name: 'Israel', code: 'IL', label: i18n.global.t('countries.IL') },
+  { name: 'Italy', code: 'IT', label: i18n.global.t('countries.IT') },
+  { name: 'Jamaica', code: 'JM', label: i18n.global.t('countries.JM') },
+  { name: 'Japan', code: 'JP', label: i18n.global.t('countries.JP') },
+  { name: 'Jersey', code: 'JE', label: i18n.global.t('countries.JE') },
+  { name: 'Jordan', code: 'JO', label: i18n.global.t('countries.JO') },
+  { name: 'Kazakhstan', code: 'KZ', label: i18n.global.t('countries.KZ') },
+  { name: 'Kenya', code: 'KE', label: i18n.global.t('countries.KE') },
+  { name: 'Kiribati', code: 'KI', label: i18n.global.t('countries.KI') },
+  {
+    name: 'Korea, Republic of',
+    code: 'KR',
+    label: i18n.global.t('countries.KR'),
+  },
   {
     name: "Korea, Democratic People's Republic of",
     code: 'KP',
-    label: i18n.t('countries.KP'),
+    label: i18n.global.t('countries.KP'),
   },
-  { name: 'Kuwait', code: 'KW', label: i18n.t('countries.KW') },
-  { name: 'Kyrgyzstan', code: 'KG', label: i18n.t('countries.KG') },
+  { name: 'Kuwait', code: 'KW', label: i18n.global.t('countries.KW') },
+  { name: 'Kyrgyzstan', code: 'KG', label: i18n.global.t('countries.KG') },
   {
     name: "Lao People's Democratic Republic",
     code: 'LA',
-    label: i18n.t('countries.LA'),
-  },
-  { name: 'Latvia', code: 'LV', label: i18n.t('countries.LV') },
-  { name: 'Lebanon', code: 'LB', label: i18n.t('countries.LB') },
-  { name: 'Lesotho', code: 'LS', label: i18n.t('countries.LS') },
-  { name: 'Liberia', code: 'LR', label: i18n.t('countries.LR') },
-  { name: 'Libya', code: 'LY', label: i18n.t('countries.LY') },
-  { name: 'Liechtenstein', code: 'LI', label: i18n.t('countries.LI') },
-  { name: 'Lithuania', code: 'LT', label: i18n.t('countries.LT') },
-  { name: 'Luxembourg', code: 'LU', label: i18n.t('countries.LU') },
-  { name: 'Macao', code: 'MO', label: i18n.t('countries.MO') },
+    label: i18n.global.t('countries.LA'),
+  },
+  { name: 'Latvia', code: 'LV', label: i18n.global.t('countries.LV') },
+  { name: 'Lebanon', code: 'LB', label: i18n.global.t('countries.LB') },
+  { name: 'Lesotho', code: 'LS', label: i18n.global.t('countries.LS') },
+  { name: 'Liberia', code: 'LR', label: i18n.global.t('countries.LR') },
+  { name: 'Libya', code: 'LY', label: i18n.global.t('countries.LY') },
+  { name: 'Liechtenstein', code: 'LI', label: i18n.global.t('countries.LI') },
+  { name: 'Lithuania', code: 'LT', label: i18n.global.t('countries.LT') },
+  { name: 'Luxembourg', code: 'LU', label: i18n.global.t('countries.LU') },
+  { name: 'Macao', code: 'MO', label: i18n.global.t('countries.MO') },
   {
     name: 'Macedonia, The Former Yugoslav Republic of',
     code: 'MK',
-    label: i18n.t('countries.MK'),
-  },
-  { name: 'Madagascar', code: 'MG', label: i18n.t('countries.MG') },
-  { name: 'Malawi', code: 'MW', label: i18n.t('countries.MW') },
-  { name: 'Malaysia', code: 'MY', label: i18n.t('countries.MY') },
-  { name: 'Maldives', code: 'MV', label: i18n.t('countries.MV') },
-  { name: 'Mali', code: 'ML', label: i18n.t('countries.ML') },
-  { name: 'Malta', code: 'MT', label: i18n.t('countries.MT') },
-  { name: 'Marshall Islands', code: 'MH', label: i18n.t('countries.MH') },
-  { name: 'Martinique', code: 'MQ', label: i18n.t('countries.MQ') },
-  { name: 'Mauritania', code: 'MR', label: i18n.t('countries.MR') },
-  { name: 'Mauritius', code: 'MU', label: i18n.t('countries.MU') },
-  { name: 'Mayotte', code: 'YT', label: i18n.t('countries.YT') },
-  { name: 'Mexico', code: 'MX', label: i18n.t('countries.MX') },
+    label: i18n.global.t('countries.MK'),
+  },
+  { name: 'Madagascar', code: 'MG', label: i18n.global.t('countries.MG') },
+  { name: 'Malawi', code: 'MW', label: i18n.global.t('countries.MW') },
+  { name: 'Malaysia', code: 'MY', label: i18n.global.t('countries.MY') },
+  { name: 'Maldives', code: 'MV', label: i18n.global.t('countries.MV') },
+  { name: 'Mali', code: 'ML', label: i18n.global.t('countries.ML') },
+  { name: 'Malta', code: 'MT', label: i18n.global.t('countries.MT') },
+  {
+    name: 'Marshall Islands',
+    code: 'MH',
+    label: i18n.global.t('countries.MH'),
+  },
+  { name: 'Martinique', code: 'MQ', label: i18n.global.t('countries.MQ') },
+  { name: 'Mauritania', code: 'MR', label: i18n.global.t('countries.MR') },
+  { name: 'Mauritius', code: 'MU', label: i18n.global.t('countries.MU') },
+  { name: 'Mayotte', code: 'YT', label: i18n.global.t('countries.YT') },
+  { name: 'Mexico', code: 'MX', label: i18n.global.t('countries.MX') },
   {
     name: 'Micronesia, Federated States of',
     code: 'FM',
-    label: i18n.t('countries.FM'),
-  },
-  { name: 'Moldova, Republic of', code: 'MD', label: i18n.t('countries.MD') },
-  { name: 'Monaco', code: 'MC', label: i18n.t('countries.MC') },
-  { name: 'Mongolia', code: 'MN', label: i18n.t('countries.MN') },
-  { name: 'Montenegro', code: 'ME', label: i18n.t('countries.ME') },
-  { name: 'Montserrat', code: 'MS', label: i18n.t('countries.MS') },
-  { name: 'Morocco', code: 'MA', label: i18n.t('countries.MA') },
-  { name: 'Mozambique', code: 'MZ', label: i18n.t('countries.MZ') },
-  { name: 'Myanmar', code: 'MM', label: i18n.t('countries.MM') },
-  { name: 'Namibia', code: 'NA', label: i18n.t('countries.NA') },
-  { name: 'Nauru', code: 'NR', label: i18n.t('countries.NR') },
-  { name: 'Nepal', code: 'NP', label: i18n.t('countries.NP') },
-  { name: 'Netherlands', code: 'NL', label: i18n.t('countries.NL') },
-  { name: 'New Caledonia', code: 'NC', label: i18n.t('countries.NC') },
-  { name: 'New Zealand', code: 'NZ', label: i18n.t('countries.NZ') },
-  { name: 'Nicaragua', code: 'NI', label: i18n.t('countries.NI') },
-  { name: 'Niger', code: 'NE', label: i18n.t('countries.NE') },
-  { name: 'Nigeria', code: 'NG', label: i18n.t('countries.NG') },
-  { name: 'Niue', code: 'NU', label: i18n.t('countries.NU') },
-  { name: 'Norfolk Island', code: 'NF', label: i18n.t('countries.NF') },
+    label: i18n.global.t('countries.FM'),
+  },
+  {
+    name: 'Moldova, Republic of',
+    code: 'MD',
+    label: i18n.global.t('countries.MD'),
+  },
+  { name: 'Monaco', code: 'MC', label: i18n.global.t('countries.MC') },
+  { name: 'Mongolia', code: 'MN', label: i18n.global.t('countries.MN') },
+  { name: 'Montenegro', code: 'ME', label: i18n.global.t('countries.ME') },
+  { name: 'Montserrat', code: 'MS', label: i18n.global.t('countries.MS') },
+  { name: 'Morocco', code: 'MA', label: i18n.global.t('countries.MA') },
+  { name: 'Mozambique', code: 'MZ', label: i18n.global.t('countries.MZ') },
+  { name: 'Myanmar', code: 'MM', label: i18n.global.t('countries.MM') },
+  { name: 'Namibia', code: 'NA', label: i18n.global.t('countries.NA') },
+  { name: 'Nauru', code: 'NR', label: i18n.global.t('countries.NR') },
+  { name: 'Nepal', code: 'NP', label: i18n.global.t('countries.NP') },
+  { name: 'Netherlands', code: 'NL', label: i18n.global.t('countries.NL') },
+  { name: 'New Caledonia', code: 'NC', label: i18n.global.t('countries.NC') },
+  { name: 'New Zealand', code: 'NZ', label: i18n.global.t('countries.NZ') },
+  { name: 'Nicaragua', code: 'NI', label: i18n.global.t('countries.NI') },
+  { name: 'Niger', code: 'NE', label: i18n.global.t('countries.NE') },
+  { name: 'Nigeria', code: 'NG', label: i18n.global.t('countries.NG') },
+  { name: 'Niue', code: 'NU', label: i18n.global.t('countries.NU') },
+  { name: 'Norfolk Island', code: 'NF', label: i18n.global.t('countries.NF') },
   {
     name: 'Northern Mariana Islands',
     code: 'MP',
-    label: i18n.t('countries.MP'),
-  },
-  { name: 'Norway', code: 'NO', label: i18n.t('countries.NO') },
-  { name: 'Oman', code: 'OM', label: i18n.t('countries.OM') },
-  { name: 'Pakistan', code: 'PK', label: i18n.t('countries.PK') },
-  { name: 'Palau', code: 'PW', label: i18n.t('countries.PW') },
-  { name: 'Palestine', code: 'PS', label: i18n.t('countries.PS') },
-  { name: 'Panama', code: 'PA', label: i18n.t('countries.PA') },
-  { name: 'Papua New Guinea', code: 'PG', label: i18n.t('countries.PG') },
-  { name: 'Paraguay', code: 'PY', label: i18n.t('countries.PY') },
-  { name: 'Peru', code: 'PE', label: i18n.t('countries.PE') },
-  { name: 'Philippines', code: 'PH', label: i18n.t('countries.PH') },
-  { name: 'Pitcairn', code: 'PN', label: i18n.t('countries.PN') },
-  { name: 'Poland', code: 'PL', label: i18n.t('countries.PL') },
-  { name: 'Portugal', code: 'PT', label: i18n.t('countries.PT') },
-  { name: 'Puerto Rico', code: 'PR', label: i18n.t('countries.PR') },
-  { name: 'Qatar', code: 'QA', label: i18n.t('countries.QA') },
-  { name: 'Romania', code: 'RO', label: i18n.t('countries.RO') },
-  { name: 'Russian Federation', code: 'RU', label: i18n.t('countries.RU') },
-  { name: 'Rwanda', code: 'RW', label: i18n.t('countries.RW') },
-  { name: 'Réunion', code: 'RE', label: i18n.t('countries.RE') },
-  { name: 'Saint Barthélemy', code: 'BL', label: i18n.t('countries.BL') },
+    label: i18n.global.t('countries.MP'),
+  },
+  { name: 'Norway', code: 'NO', label: i18n.global.t('countries.NO') },
+  { name: 'Oman', code: 'OM', label: i18n.global.t('countries.OM') },
+  { name: 'Pakistan', code: 'PK', label: i18n.global.t('countries.PK') },
+  { name: 'Palau', code: 'PW', label: i18n.global.t('countries.PW') },
+  { name: 'Palestine', code: 'PS', label: i18n.global.t('countries.PS') },
+  { name: 'Panama', code: 'PA', label: i18n.global.t('countries.PA') },
+  {
+    name: 'Papua New Guinea',
+    code: 'PG',
+    label: i18n.global.t('countries.PG'),
+  },
+  { name: 'Paraguay', code: 'PY', label: i18n.global.t('countries.PY') },
+  { name: 'Peru', code: 'PE', label: i18n.global.t('countries.PE') },
+  { name: 'Philippines', code: 'PH', label: i18n.global.t('countries.PH') },
+  { name: 'Pitcairn', code: 'PN', label: i18n.global.t('countries.PN') },
+  { name: 'Poland', code: 'PL', label: i18n.global.t('countries.PL') },
+  { name: 'Portugal', code: 'PT', label: i18n.global.t('countries.PT') },
+  { name: 'Puerto Rico', code: 'PR', label: i18n.global.t('countries.PR') },
+  { name: 'Qatar', code: 'QA', label: i18n.global.t('countries.QA') },
+  { name: 'Romania', code: 'RO', label: i18n.global.t('countries.RO') },
+  {
+    name: 'Russian Federation',
+    code: 'RU',
+    label: i18n.global.t('countries.RU'),
+  },
+  { name: 'Rwanda', code: 'RW', label: i18n.global.t('countries.RW') },
+  { name: 'Réunion', code: 'RE', label: i18n.global.t('countries.RE') },
+  {
+    name: 'Saint Barthélemy',
+    code: 'BL',
+    label: i18n.global.t('countries.BL'),
+  },
   {
     name: 'Saint Helena, Ascension and Tristan da Cunha',
     code: 'SH',
-    label: i18n.t('countries.SH'),
+    label: i18n.global.t('countries.SH'),
   },
-  { name: 'Saint Kitts and Nevis ', code: 'KN', label: i18n.t('countries.KN') },
-  { name: 'Saint Lucia', code: 'LC', label: i18n.t('countries.LC') },
-  { name: 'Saint Martin', code: 'MF', label: i18n.t('countries.MF') },
+  {
+    name: 'Saint Kitts and Nevis ',
+    code: 'KN',
+    label: i18n.global.t('countries.KN'),
+  },
+  { name: 'Saint Lucia', code: 'LC', label: i18n.global.t('countries.LC') },
+  { name: 'Saint Martin', code: 'MF', label: i18n.global.t('countries.MF') },
   {
     name: 'Saint Pierre and Miquelon',
     code: 'PM',
-    label: i18n.t('countries.PM'),
+    label: i18n.global.t('countries.PM'),
   },
   {
     name: 'Saint Vincent and the Grenadines',
     code: 'VC',
-    label: i18n.t('countries.VC'),
-  },
-  { name: 'Samoa', code: 'WS', label: i18n.t('countries.WS') },
-  { name: 'San Marino ', code: 'SM', label: i18n.t('countries.SM') },
-  { name: 'Sao Tome and Principe', code: 'ST', label: i18n.t('countries.ST') },
-  { name: 'Saudi Arabia', code: 'SA', label: i18n.t('countries.SA') },
-  { name: 'Senegal', code: 'SN', label: i18n.t('countries.SN') },
-  { name: 'Serbia', code: 'RS', label: i18n.t('countries.RS') },
-  { name: 'Seychelles', code: 'SC', label: i18n.t('countries.SC') },
-  { name: 'Sierra Leone', code: 'SL', label: i18n.t('countries.SL') },
-  { name: 'Singapore', code: 'SG', label: i18n.t('countries.SG') },
-  { name: 'Sint Maarten', code: 'SX', label: i18n.t('countries.SX') },
-  { name: 'Slovakia', code: 'SK', label: i18n.t('countries.SK') },
-  { name: 'Slovenia', code: 'SI', label: i18n.t('countries.SI') },
-  { name: 'Solomon Islands', code: 'SB', label: i18n.t('countries.SB') },
-  { name: 'Somalia', code: 'SO', label: i18n.t('countries.SO') },
-  { name: 'South Africa ', code: 'ZA', label: i18n.t('countries.ZA') },
+    label: i18n.global.t('countries.VC'),
+  },
+  { name: 'Samoa', code: 'WS', label: i18n.global.t('countries.WS') },
+  { name: 'San Marino ', code: 'SM', label: i18n.global.t('countries.SM') },
+  {
+    name: 'Sao Tome and Principe',
+    code: 'ST',
+    label: i18n.global.t('countries.ST'),
+  },
+  { name: 'Saudi Arabia', code: 'SA', label: i18n.global.t('countries.SA') },
+  { name: 'Senegal', code: 'SN', label: i18n.global.t('countries.SN') },
+  { name: 'Serbia', code: 'RS', label: i18n.global.t('countries.RS') },
+  { name: 'Seychelles', code: 'SC', label: i18n.global.t('countries.SC') },
+  { name: 'Sierra Leone', code: 'SL', label: i18n.global.t('countries.SL') },
+  { name: 'Singapore', code: 'SG', label: i18n.global.t('countries.SG') },
+  { name: 'Sint Maarten', code: 'SX', label: i18n.global.t('countries.SX') },
+  { name: 'Slovakia', code: 'SK', label: i18n.global.t('countries.SK') },
+  { name: 'Slovenia', code: 'SI', label: i18n.global.t('countries.SI') },
+  { name: 'Solomon Islands', code: 'SB', label: i18n.global.t('countries.SB') },
+  { name: 'Somalia', code: 'SO', label: i18n.global.t('countries.SO') },
+  { name: 'South Africa ', code: 'ZA', label: i18n.global.t('countries.ZA') },
   {
     name: 'South Georgia and the South Sandwich Islands',
     code: 'GS',
-    label: i18n.t('countries.GS'),
-  },
-  { name: 'South Sudan', code: 'SS', label: i18n.t('countries.SS') },
-  { name: 'Spain', code: 'ES', label: i18n.t('countries.ES') },
-  { name: 'Sri Lanka', code: 'LK', label: i18n.t('countries.LK') },
-  { name: 'Sudan', code: 'SD', label: i18n.t('countries.SD') },
-  { name: 'Suriname', code: 'SR', label: i18n.t('countries.SR') },
-  { name: 'Svalbard and Jan Mayen', code: 'SJ', label: i18n.t('countries.SJ') },
-  { name: 'Sweden', code: 'SE', label: i18n.t('countries.SE') },
-  { name: 'Switzerland', code: 'CH', label: i18n.t('countries.CH') },
-  { name: 'Syrian Arab Republic', code: 'SY', label: i18n.t('countries.SY') },
-  { name: 'Taiwan', code: 'TW', label: i18n.t('countries.TW') },
-  { name: 'Tajikistan', code: 'TJ', label: i18n.t('countries.TJ') },
+    label: i18n.global.t('countries.GS'),
+  },
+  { name: 'South Sudan', code: 'SS', label: i18n.global.t('countries.SS') },
+  { name: 'Spain', code: 'ES', label: i18n.global.t('countries.ES') },
+  { name: 'Sri Lanka', code: 'LK', label: i18n.global.t('countries.LK') },
+  { name: 'Sudan', code: 'SD', label: i18n.global.t('countries.SD') },
+  { name: 'Suriname', code: 'SR', label: i18n.global.t('countries.SR') },
+  {
+    name: 'Svalbard and Jan Mayen',
+    code: 'SJ',
+    label: i18n.global.t('countries.SJ'),
+  },
+  { name: 'Sweden', code: 'SE', label: i18n.global.t('countries.SE') },
+  { name: 'Switzerland', code: 'CH', label: i18n.global.t('countries.CH') },
+  {
+    name: 'Syrian Arab Republic',
+    code: 'SY',
+    label: i18n.global.t('countries.SY'),
+  },
+  { name: 'Taiwan', code: 'TW', label: i18n.global.t('countries.TW') },
+  { name: 'Tajikistan', code: 'TJ', label: i18n.global.t('countries.TJ') },
   {
     name: 'Tanzania, United Republic of',
     code: 'TZ',
-    label: i18n.t('countries.TZ'),
-  },
-  { name: 'Thailand', code: 'TH', label: i18n.t('countries.TH') },
-  { name: 'Timor-Leste', code: 'TL', label: i18n.t('countries.TL') },
-  { name: 'Togo', code: 'TG', label: i18n.t('countries.TG') },
-  { name: 'Tokelau', code: 'TK', label: i18n.t('countries.TK') },
-  { name: 'Tonga', code: 'TO', label: i18n.t('countries.TO') },
-  { name: 'Trinidad and Tobago', code: 'TT', label: i18n.t('countries.TT') },
-  { name: 'Tunisia', code: 'TN', label: i18n.t('countries.TN') },
-  { name: 'Turkey', code: 'TR', label: i18n.t('countries.TR') },
-  { name: 'Turkmenistan', code: 'TM', label: i18n.t('countries.TM') },
+    label: i18n.global.t('countries.TZ'),
+  },
+  { name: 'Thailand', code: 'TH', label: i18n.global.t('countries.TH') },
+  { name: 'Timor-Leste', code: 'TL', label: i18n.global.t('countries.TL') },
+  { name: 'Togo', code: 'TG', label: i18n.global.t('countries.TG') },
+  { name: 'Tokelau', code: 'TK', label: i18n.global.t('countries.TK') },
+  { name: 'Tonga', code: 'TO', label: i18n.global.t('countries.TO') },
+  {
+    name: 'Trinidad and Tobago',
+    code: 'TT',
+    label: i18n.global.t('countries.TT'),
+  },
+  { name: 'Tunisia', code: 'TN', label: i18n.global.t('countries.TN') },
+  { name: 'Turkey', code: 'TR', label: i18n.global.t('countries.TR') },
+  { name: 'Turkmenistan', code: 'TM', label: i18n.global.t('countries.TM') },
   {
     name: 'Turks and Caicos Islands',
     code: 'TC',
-    label: i18n.t('countries.TC'),
+    label: i18n.global.t('countries.TC'),
   },
-  { name: 'Tuvalu', code: 'TV', label: i18n.t('countries.TV') },
-  { name: 'Uganda', code: 'UG', label: i18n.t('countries.UG') },
-  { name: 'Ukraine', code: 'UA', label: i18n.t('countries.UA') },
-  { name: 'United Arab Emirates', code: 'AE', label: i18n.t('countries.AE') },
-  { name: 'United Kingdom', code: 'GB', label: i18n.t('countries.GB') },
+  { name: 'Tuvalu', code: 'TV', label: i18n.global.t('countries.TV') },
+  { name: 'Uganda', code: 'UG', label: i18n.global.t('countries.UG') },
+  { name: 'Ukraine', code: 'UA', label: i18n.global.t('countries.UA') },
+  {
+    name: 'United Arab Emirates',
+    code: 'AE',
+    label: i18n.global.t('countries.AE'),
+  },
+  { name: 'United Kingdom', code: 'GB', label: i18n.global.t('countries.GB') },
   {
     name: 'United States Minor Outlying Islands',
     code: 'UM',
-    label: i18n.t('countries.UM'),
+    label: i18n.global.t('countries.UM'),
   },
   {
     name: 'United States of America',
     code: 'US',
-    label: i18n.t('countries.US'),
+    label: i18n.global.t('countries.US'),
   },
-  { name: 'Uruguay', code: 'UY', label: i18n.t('countries.UY') },
-  { name: 'Uzbekistan', code: 'UZ', label: i18n.t('countries.UZ') },
-  { name: 'Vanuatu', code: 'VU', label: i18n.t('countries.VU') },
-  { name: 'Venezuela', code: 'VE', label: i18n.t('countries.VE') },
-  { name: 'Viet Nam', code: 'VN', label: i18n.t('countries.VN') },
+  { name: 'Uruguay', code: 'UY', label: i18n.global.t('countries.UY') },
+  { name: 'Uzbekistan', code: 'UZ', label: i18n.global.t('countries.UZ') },
+  { name: 'Vanuatu', code: 'VU', label: i18n.global.t('countries.VU') },
+  { name: 'Venezuela', code: 'VE', label: i18n.global.t('countries.VE') },
+  { name: 'Viet Nam', code: 'VN', label: i18n.global.t('countries.VN') },
   {
     name: 'Virgin Islands, British',
     code: 'VG',
-    label: i18n.t('countries.VG'),
-  },
-  { name: 'Virgin Islands, U.S', code: 'VI', label: i18n.t('countries.VI') },
-  { name: 'Wallis and Futuna', code: 'WF', label: i18n.t('countries.WF') },
-  { name: 'Western Sahara', code: 'EH', label: i18n.t('countries.EH') },
-  { name: 'Yemen', code: 'YE', label: i18n.t('countries.YE') },
-  { name: 'Zambia', code: 'ZM', label: i18n.t('countries.ZM') },
-  { name: 'Zimbabwe', code: 'ZW', label: i18n.t('countries.ZW') },
-  { name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') },
+    label: i18n.global.t('countries.VG'),
+  },
+  {
+    name: 'Virgin Islands, U.S',
+    code: 'VI',
+    label: i18n.global.t('countries.VI'),
+  },
+  {
+    name: 'Wallis and Futuna',
+    code: 'WF',
+    label: i18n.global.t('countries.WF'),
+  },
+  { name: 'Western Sahara', code: 'EH', label: i18n.global.t('countries.EH') },
+  { name: 'Yemen', code: 'YE', label: i18n.global.t('countries.YE') },
+  { name: 'Zambia', code: 'ZM', label: i18n.global.t('countries.ZM') },
+  { name: 'Zimbabwe', code: 'ZW', label: i18n.global.t('countries.ZW') },
+  { name: 'Åland Islands', code: 'AX', label: i18n.global.t('countries.AX') },
 ];
diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 0a0b84c941..a99591db2f 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -1,207 +1,209 @@
 <template>
   <div>
-    <b-modal
+    <BModal
+      v-model="modal"
       id="generate-csr"
       ref="modal"
       size="lg"
       no-stacking
       :title="$t('pageCertificates.modal.generateACertificateSigningRequest')"
+      :ok-title="$t('pageCertificates.generateCsr')"
       @ok="onOkGenerateCsrModal"
       @cancel="resetForm"
-      @hidden="$v.$reset()"
+      @hidden="resetCsr()"
     >
-      <b-form id="generate-csr-form" novalidate @submit.prevent>
-        <b-container fluid>
-          <b-row>
-            <b-col lg="9">
-              <b-row>
-                <b-col lg="6">
-                  <b-form-group
+      <BForm id="generate-csr-form" novalidate @submit.prevent>
+        <BContainer fluid>
+          <BRow>
+            <BCol lg="9">
+              <BRow>
+                <BCol lg="6">
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.certificateType')"
                     label-for="certificate-type"
                   >
-                    <b-form-select
+                    <BFormSelect
                       id="certificate-type"
                       v-model="form.certificateType"
                       data-test-id="modalGenerateCsr-select-certificateType"
                       :options="certificateOptions"
-                      :state="getValidationState($v.form.certificateType)"
-                      @input="$v.form.certificateType.$touch()"
+                      :state="getValidationState(v$.form.certificateType)"
+                      @update:model-value="v$.form.certificateType.$touch()"
                     >
                       <template #first>
-                        <b-form-select-option :value="null" disabled>
+                        <BFormSelectOption :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
-                        </b-form-select-option>
+                        </BFormSelectOption>
                       </template>
-                    </b-form-select>
-                    <b-form-invalid-feedback role="alert">
+                    </BFormSelect>
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-                <b-col lg="6">
-                  <b-form-group
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+                <BCol lg="6">
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.country')"
                     label-for="country"
                   >
-                    <b-form-select
+                    <BFormSelect
                       id="country"
                       v-model="form.country"
                       data-test-id="modalGenerateCsr-select-country"
                       :options="countryOptions"
-                      :state="getValidationState($v.form.country)"
-                      @input="$v.form.country.$touch()"
+                      :state="getValidationState(v$.form.country)"
+                      @update:model-value="v$.form.country.$touch()"
                     >
                       <template #first>
-                        <b-form-select-option :value="null" disabled>
+                        <BFormSelectOption :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
-                        </b-form-select-option>
+                        </BFormSelectOption>
                       </template>
-                    </b-form-select>
-                    <b-form-invalid-feedback role="alert">
+                    </BFormSelect>
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="6">
-                  <b-form-group
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+              </BRow>
+              <BRow>
+                <BCol lg="6">
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.state')"
                     label-for="state"
                   >
-                    <b-form-input
+                    <BFormInput
                       id="state"
                       v-model="form.state"
                       type="text"
                       data-test-id="modalGenerateCsr-input-state"
-                      :state="getValidationState($v.form.state)"
+                      :state="getValidationState(v$.form.state)"
                     />
-                    <b-form-invalid-feedback role="alert">
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-                <b-col lg="6">
-                  <b-form-group
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+                <BCol lg="6">
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.city')"
                     label-for="city"
                   >
-                    <b-form-input
+                    <BFormInput
                       id="city"
                       v-model="form.city"
                       type="text"
                       data-test-id="modalGenerateCsr-input-city"
-                      :state="getValidationState($v.form.city)"
+                      :state="getValidationState(v$.form.city)"
                     />
-                    <b-form-invalid-feedback role="alert">
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="6">
-                  <b-form-group
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+              </BRow>
+              <BRow>
+                <BCol lg="6">
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.companyName')"
                     label-for="company-name"
                   >
-                    <b-form-input
+                    <BFormInput
                       id="company-name"
                       v-model="form.companyName"
                       type="text"
                       data-test-id="modalGenerateCsr-input-companyName"
-                      :state="getValidationState($v.form.companyName)"
+                      :state="getValidationState(v$.form.companyName)"
                     />
-                    <b-form-invalid-feedback role="alert">
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-                <b-col lg="6">
-                  <b-form-group
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+                <BCol lg="6">
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.companyUnit')"
                     label-for="company-unit"
                   >
-                    <b-form-input
+                    <BFormInput
                       id="company-unit"
                       v-model="form.companyUnit"
                       type="text"
                       data-test-id="modalGenerateCsr-input-companyUnit"
-                      :state="getValidationState($v.form.companyUnit)"
+                      :state="getValidationState(v$.form.companyUnit)"
                     />
-                    <b-form-invalid-feedback role="alert">
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="6">
-                  <b-form-group
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+              </BRow>
+              <BRow>
+                <BCol lg="6">
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.commonName')"
                     label-for="common-name"
                   >
-                    <b-form-input
+                    <BFormInput
                       id="common-name"
                       v-model="form.commonName"
                       type="text"
                       data-test-id="modalGenerateCsr-input-commonName"
-                      :state="getValidationState($v.form.commonName)"
+                      :state="getValidationState(v$.form.commonName)"
                     />
-                    <b-form-invalid-feedback role="alert">
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-                <b-col lg="6">
-                  <b-form-group label-for="contact-person">
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+                <BCol lg="6">
+                  <BFormGroup label-for="contact-person">
                     <template #label>
                       {{ $t('pageCertificates.modal.contactPerson') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
                       </span>
                     </template>
-                    <b-form-input
+                    <BFormInput
                       id="contact-person"
                       v-model="form.contactPerson"
                       type="text"
                       data-test-id="modalGenerateCsr-input-contactPerson"
                     />
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="6">
-                  <b-form-group label-for="email-address">
+                  </BFormGroup>
+                </BCol>
+              </BRow>
+              <BRow>
+                <BCol lg="6">
+                  <BFormGroup label-for="email-address">
                     <template #label>
                       {{ $t('pageCertificates.modal.emailAddress') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
                       </span>
                     </template>
-                    <b-form-input
+                    <BFormInput
                       id="email-address"
                       v-model="form.emailAddress"
                       type="text"
                       data-test-id="modalGenerateCsr-input-emailAddress"
                     />
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="12">
-                  <b-form-group label-for="alternate-name">
+                  </BFormGroup>
+                </BCol>
+              </BRow>
+              <BRow>
+                <BCol lg="12">
+                  <BFormGroup label-for="alternate-name">
                     <template #label>
                       {{ $t('pageCertificates.modal.alternateName') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
                       </span>
                     </template>
-                    <b-form-text id="alternate-name-help-block">
+                    <BFormText id="alternate-name-help-block">
                       {{ $t('pageCertificates.modal.alternateNameHelperText') }}
-                    </b-form-text>
-                    <b-form-tags
+                    </BFormText>
+                    <BFormTags
                       v-model="form.alternateName"
                       :remove-on-delete="true"
                       :tag-pills="true"
@@ -220,267 +222,272 @@
                       <template #add-button-text>
                         <icon-add /> {{ $t('global.action.add') }}
                       </template>
-                    </b-form-tags>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-            </b-col>
-            <b-col lg="3">
-              <b-row>
-                <b-col lg="12">
+                    </BFormTags>
+                  </BFormGroup>
+                </BCol>
+              </BRow>
+            </BCol>
+            <BCol lg="3">
+              <BRow>
+                <BCol lg="12">
                   <p class="col-form-label">
                     {{ $t('pageCertificates.modal.privateKey') }}
                   </p>
-                  <b-form-group
+                  <BFormGroup
                     :label="$t('pageCertificates.modal.keyPairAlgorithm')"
                     label-for="key-pair-algorithm"
                   >
-                    <b-form-select
+                    <BFormSelect
                       id="key-pair-algorithm"
                       v-model="form.keyPairAlgorithm"
                       data-test-id="modalGenerateCsr-select-keyPairAlgorithm"
                       :options="keyPairAlgorithmOptions"
-                      :state="getValidationState($v.form.keyPairAlgorithm)"
-                      @input="$v.form.keyPairAlgorithm.$touch()"
+                      :state="getValidationState(v$.form.keyPairAlgorithm)"
+                      @update:model-value="v$.form.keyPairAlgorithm.$touch()"
                     >
                       <template #first>
-                        <b-form-select-option :value="null" disabled>
+                        <BFormSelectOption :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
-                        </b-form-select-option>
+                        </BFormSelectOption>
                       </template>
-                    </b-form-select>
-                    <b-form-invalid-feedback role="alert">
+                    </BFormSelect>
+                    <BFormInvalidFeedback role="alert">
                       {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="12">
-                  <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'">
-                    <b-form-group
+                    </BFormInvalidFeedback>
+                  </BFormGroup>
+                </BCol>
+              </BRow>
+              <BRow>
+                <BCol lg="12">
+                  <template v-if="v$.form.keyPairAlgorithm.$model === 'EC'">
+                    <BFormGroup
                       :label="$t('pageCertificates.modal.keyCurveId')"
                       label-for="key-curve-id"
                     >
-                      <b-form-select
+                      <BFormSelect
                         id="key-curve-id"
                         v-model="form.keyCurveId"
                         data-test-id="modalGenerateCsr-select-keyCurveId"
                         :options="keyCurveIdOptions"
-                        :state="getValidationState($v.form.keyCurveId)"
-                        @input="$v.form.keyCurveId.$touch()"
+                        :state="getValidationState(v$.form.keyCurveId)"
+                        @update:model-value="v$.form.keyCurveId.$touch()"
                       >
                         <template #first>
-                          <b-form-select-option :value="null" disabled>
+                          <BFormSelectOption :value="null" disabled>
                             {{ $t('global.form.selectAnOption') }}
-                          </b-form-select-option>
+                          </BFormSelectOption>
                         </template>
-                      </b-form-select>
-                      <b-form-invalid-feedback role="alert">
+                      </BFormSelect>
+                      <BFormInvalidFeedback role="alert">
                         {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
+                      </BFormInvalidFeedback>
+                    </BFormGroup>
                   </template>
-                  <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'">
-                    <b-form-group
+                  <template v-if="v$.form.keyPairAlgorithm.$model === 'RSA'">
+                    <BFormGroup
                       :label="$t('pageCertificates.modal.keyBitLength')"
                       label-for="key-bit-length"
                     >
-                      <b-form-select
+                      <BFormSelect
                         id="key-bit-length"
                         v-model="form.keyBitLength"
                         data-test-id="modalGenerateCsr-select-keyBitLength"
                         :options="keyBitLengthOptions"
-                        :state="getValidationState($v.form.keyBitLength)"
-                        @input="$v.form.keyBitLength.$touch()"
+                        :state="getValidationState(v$.form.keyBitLength)"
+                        @update:model-value="v$.form.keyBitLength.$touch()"
                       >
                         <template #first>
-                          <b-form-select-option :value="null" disabled>
+                          <BFormSelectOption :value="null" disabled>
                             {{ $t('global.form.selectAnOption') }}
-                          </b-form-select-option>
+                          </BFormSelectOption>
                         </template>
-                      </b-form-select>
-                      <b-form-invalid-feedback role="alert">
+                      </BFormSelect>
+                      <BFormInvalidFeedback role="alert">
                         {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
+                      </BFormInvalidFeedback>
+                    </BFormGroup>
                   </template>
-                </b-col>
-              </b-row>
-            </b-col>
-          </b-row>
-        </b-container>
-      </b-form>
-      <template #modal-footer="{ ok, cancel }">
-        <b-button variant="secondary" @click="cancel()">
+                </BCol>
+              </BRow>
+            </BCol>
+          </BRow>
+        </BContainer>
+      </BForm>
+      <template #modal-footer>
+        <BButton variant="secondary">
           {{ $t('global.action.cancel') }}
-        </b-button>
-        <b-button
+        </BButton>
+        <BButton
           form="generate-csr-form"
           type="submit"
           variant="primary"
           data-test-id="modalGenerateCsr-button-ok"
-          @click="ok()"
         >
           {{ $t('pageCertificates.generateCsr') }}
-        </b-button>
+        </BButton>
       </template>
-    </b-modal>
-    <b-modal
+    </BModal>
+    <BModal
+      v-model="openCsrModal"
       id="csr-string"
       no-stacking
       size="lg"
+      @cancel="copyCsrString"
+      :cancel-title="csrStringCopied ? $t('global.status.copied') : $t('global.action.copy')"
+      @ok="downloadCsr"
+      :ok-title="$t('global.action.download')"
       :title="$t('pageCertificates.modal.certificateSigningRequest')"
       @hidden="onHiddenCsrStringModal"
     >
       <span class="span-csr-string">{{ csrString }}</span>
-      <template #modal-footer>
-        <b-btn variant="secondary" @click="copyCsrString">
-          <template v-if="csrStringCopied">
-            <icon-checkmark />
-            {{ $t('global.status.copied') }}
-          </template>
-          <template v-else>
-            {{ $t('global.action.copy') }}
-          </template>
-        </b-btn>
-        <a
-          :href="`data:text/plain;charset=utf-8,${encodeURIComponent(
-            csrString,
-          )}`"
-          download="certificate.txt"
-          class="btn btn-primary"
-        >
-          {{ $t('global.action.download') }}
-        </a>
-      </template>
-    </b-modal>
+    </BModal>
   </div>
 </template>
 
-<script>
-import IconAdd from '@carbon/icons-vue/es/add--alt/20';
-import IconCheckmark from '@carbon/icons-vue/es/checkmark/20';
+<script setup>
+import { ref, computed } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
 
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
+import { CertificatesStore } from '@/store';
 
 import { COUNTRY_LIST } from './CsrCountryCodes';
 import { CERTIFICATE_TYPES } from '@/store/modules/SecurityAndAccess/CertificatesStore';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import eventBus from '@/eventBus';
 
-export default {
-  name: 'ModalGenerateCsr',
-  components: { IconAdd, IconCheckmark },
-  mixins: [BVToastMixin, VuelidateMixin],
-  data() {
-    return {
-      form: {
-        certificateType: null,
-        country: null,
-        state: null,
-        city: null,
-        companyName: null,
-        companyUnit: null,
-        commonName: null,
-        contactPerson: null,
-        emailAddress: null,
-        alternateName: [],
-        keyPairAlgorithm: null,
-        keyCurveId: null,
-        keyBitLength: null,
-      },
-      certificateOptions: CERTIFICATE_TYPES.reduce((arr, cert) => {
-        if (
-          cert.type === 'TrustStore Certificate' ||
-          cert.type === 'ServiceLogin Certificate'
-        )
-          return arr;
-        arr.push({
-          text: cert.label,
-          value: cert.type,
-        });
-        return arr;
-      }, []),
-      countryOptions: COUNTRY_LIST.map((country) => ({
-        text: country.label,
-        value: country.code,
-      })),
-      keyPairAlgorithmOptions: ['EC', 'RSA'],
-      keyCurveIdOptions: ['prime256v1', 'secp521r1', 'secp384r1'],
-      keyBitLengthOptions: [2048],
-      csrString: '',
-      csrStringCopied: false,
-    };
-  },
-  validations: {
-    form: {
-      certificateType: { required },
-      country: { required },
-      state: { required },
-      city: { required },
-      companyName: { required },
-      companyUnit: { required },
-      commonName: { required },
-      contactPerson: {},
-      emailAddress: {},
-      alternateName: {},
-      keyPairAlgorithm: { required },
-      keyCurveId: {
-        reuired: requiredIf(function (form) {
-          return form.keyPairAlgorithm === 'EC';
-        }),
-      },
-      keyBitLength: {
-        reuired: requiredIf(function (form) {
-          return form.keyPairAlgorithm === 'RSA';
-        }),
-      },
-    },
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$store
-        .dispatch('certificates/generateCsr', this.form)
-        .then(({ data: { CSRString } }) => {
-          this.csrString = CSRString;
-          this.$bvModal.show('csr-string');
-          this.$v.$reset();
-        });
-    },
-    resetForm() {
-      for (let key of Object.keys(this.form)) {
-        if (key === 'alternateName') {
-          this.form[key] = [];
-        } else {
-          this.form[key] = null;
-        }
-      }
-    },
-    onOkGenerateCsrModal(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
-    },
-    onHiddenCsrStringModal() {
-      this.csrString = '';
-      this.resetForm();
+const { getValidationState } = useVuelidateComposable();
+const openCsrModal = ref(false);
+const uploadCertificate = CertificatesStore();
+const initialFormState = {
+  certificateType: null,
+  country: null,
+  state: null,
+  city: null,
+  companyName: null,
+  companyUnit: null,
+  commonName: null,
+  contactPerson: null,
+  emailAddress: null,
+  alternateName: [],
+  keyPairAlgorithm: null,
+  keyCurveId: null,
+  keyBitLength: null,
+};
+const form = ref({ ...initialFormState });
+const certificateOptions = CERTIFICATE_TYPES.reduce((arr, cert) => {
+  if (
+    cert.type === 'TrustStore Certificate' ||
+    cert.type === 'ServiceLogin Certificate'
+  )
+    return arr;
+  arr.push({
+    text: cert.label,
+    value: cert.type,
+  });
+  return arr;
+}, []);
+const countryOptions = COUNTRY_LIST.map((country) => ({
+  text: country.label,
+  value: country.code,
+}));
+const keyPairAlgorithmOptions = ['EC', 'RSA'];
+const keyCurveIdOptions = ['prime256v1', 'secp521r1', 'secp384r1'];
+const keyBitLengthOptions = ['2048'];
+const csrString = ref('');
+const csrStringCopied = ref(false);
+
+const rules = computed(() => ({
+  form: {
+    certificateType: { required },
+    country: { required },
+    state: { required },
+    city: { required },
+    companyName: { required },
+    companyUnit: { required },
+    commonName: { required },
+    contactPerson: {},
+    emailAddress: {},
+    alternateName: {},
+    keyPairAlgorithm: { required },
+    keyCurveId: {
+      requiredIf: requiredIf(function () {
+        return form.keyPairAlgorithm === 'EC';
+      }),
     },
-    copyCsrString(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      navigator.clipboard.writeText(this.csrString).then(() => {
-        // Show copied text for 5 seconds
-        this.csrStringCopied = true;
-        setTimeout(() => {
-          this.csrStringCopied = false;
-        }, 5000 /*5 seconds*/);
-      });
+    keyBitLength: {
+      requiredIf: requiredIf(function () {
+        return form.keyPairAlgorithm === 'RSA';
+      }),
     },
   },
+}));
+const v$ = useVuelidate(rules, { form });
+const modal = ref(true);
+
+const handleSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  uploadCertificate.generateCsr(form.value).then(({ data: { CSRString } }) => {
+    csrString.value = CSRString;
+    modal.value = false;
+    openCsrModal.value = true;
+    v$.value.form.$reset();
+  });
+};
+
+const resetCsr = () => {
+  // Reset validation
+  if (v$.value) {
+    v$.value.$reset();
+  }
+
+  // Reset the form to its initial state
+  Object.assign(form.value, initialFormState);
 };
+
+const resetForm = () => {
+  for (let key of Object.keys(form.value)) {
+    if (key === 'alternateName') {
+      form[key] = [];
+    } else {
+      form[key] = null;
+    }
+  }
+  Object.assign(form.value, initialFormState);
+};
+const onOkGenerateCsrModal = (event) => {
+  // prevent modal close
+  event.preventDefault();
+  handleSubmit();
+};
+const onHiddenCsrStringModal = () => {
+  csrString.value = '';
+  resetCsr();
+};
+const copyCsrString = (bvModalEvt) => {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  navigator.clipboard.writeText(csrString.value).then(() => {
+    // Show copied text for 5 seconds
+    csrStringCopied.value = true;
+    setTimeout(() => {
+      csrStringCopied.value = false;
+    }, 5000 /*5 seconds*/);
+  });
+};
+
+  const downloadCsr = (bvModalEvt) => {
+    // prevent modal close
+    bvModalEvt.preventDefault();
+    const dataUri = `data:text/plain;charset=utf-8,${encodeURIComponent(csrString.value)}`;
+    const link = document.createElement('a');
+    link.href = dataUri;
+    link.download = 'certificate-signing-request.txt'; // Specify the file name
+    document.body.appendChild(link);
+    link.click(); // Trigger the download
+    document.body.removeChild(link); // Clean up
+  };
 </script>
 
 <style scoped>
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index d24230d13c..b26050eb8c 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -1,14 +1,19 @@
 <template>
-  <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm">
-    <template #modal-title>
-      <template v-if="certificate">
-        {{ $t('pageCertificates.replaceCertificate') }}
-      </template>
-      <template v-else>
-        {{ $t('pageCertificates.addNewCertificate') }}
-      </template>
-    </template>
-    <b-form>
+  <BModal
+    id="upload-certificate"
+    ref="modal"
+    :title="
+      certificate
+        ? $t('pageCertificates.replaceCertificate')
+        : $t('pageCertificates.addNewCertificate')
+    "
+    :ok-title="
+      certificate ? $t('global.action.replace') : $t('global.action.add')
+    "
+    @ok="onOk"
+    @hidden="resetForm"
+  >
+    <BForm>
       <!-- Replace Certificate type -->
       <template v-if="certificate !== null">
         <dl class="mb-4">
@@ -16,200 +21,190 @@
           <dd>{{ certificate.certificate }}</dd>
         </dl>
       </template>
-
       <!-- Add new Certificate type -->
       <template v-else>
-        <b-form-group
+        <BFormGroup
           :label="$t('pageCertificates.modal.certificateType')"
           label-for="certificate-type"
         >
-          <b-form-select
+          <BFormSelect
             id="certificate-type"
             v-model="form.certificateType"
             :options="certificateOptions"
-            :state="getValidationState($v.form.certificateType)"
-            @input="$v.form.certificateType.$touch()"
+            :state="v$.form.certificateType"
+            @update:model-value="v$.form.certificateType.$touch()"
           >
-          </b-form-select>
-          <b-form-invalid-feedback role="alert">
-            <template v-if="!$v.form.certificateType.required">
+          </BFormSelect>
+          <BFormInvalidFeedback role="alert">
+            <template v-if="!v$.form.certificateType.required">
               {{ $t('global.form.fieldRequired') }}
             </template>
-          </b-form-invalid-feedback>
-        </b-form-group>
+          </BFormInvalidFeedback>
+        </BFormGroup>
       </template>
 
-      <b-form-group :label="$t('pageCertificates.modal.certificateFile')">
+      <BFormGroup :label="$t('pageCertificates.modal.certificateFile')">
         <template v-if="form.certificateType === 'ServiceLogin Certificate'">
-          <form-file
+          <FormFile
             id="certificate-file"
-            v-model="form.file"
             :accept="fileFormat"
-            :state="getValidationState($v.form.file)"
+            :state="getValidationState(v$.form.file)"
+            @input="onFileUpload"
           >
             <template #invalid>
-              <b-form-invalid-feedback role="alert">
+              <BFormInvalidFeedback role="alert">
                 {{ $t('global.form.required') }}
-              </b-form-invalid-feedback>
+              </BFormInvalidFeedback>
             </template>
-          </form-file>
+          </FormFile>
         </template>
         <template v-else>
-          <form-file
+          <FormFile
             id="certificate-file"
-            v-model="form.file"
             :accept="fileFormat"
-            :state="getValidationState($v.form.file)"
+            :state="getValidationState(v$.form.file)"
+            @input="onFileUpload"
           >
             <template #invalid>
-              <b-form-invalid-feedback role="alert">
+              <BFormInvalidFeedback role="alert">
                 {{ $t('global.form.required') }}
-              </b-form-invalid-feedback>
+              </BFormInvalidFeedback>
             </template>
-          </form-file>
+          </FormFile>
         </template>
-      </b-form-group>
-    </b-form>
-    <template #modal-ok>
-      <template v-if="certificate">
-        {{ $t('global.action.replace') }}
-      </template>
-      <template v-else>
-        {{ $t('global.action.add') }}
-      </template>
-    </template>
-    <template #modal-cancel>
-      {{ $t('global.action.cancel') }}
-    </template>
-  </b-modal>
+      </BFormGroup>
+    </BForm>
+  </BModal>
 </template>
 
-<script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+<script setup>
+import { required, requiredIf } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { computed, defineProps, reactive, ref, watch, defineEmits } from 'vue';
+import { CertificatesStore } from '@/store';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import FormFile from '@/components/Global/FormFile.vue';
+import eventBus from '@/eventBus';
 
-import FormFile from '@/components/Global/FormFile';
-
-export default {
-  components: { FormFile },
-  mixins: [VuelidateMixin],
-  props: {
-    certificate: {
-      type: Object,
-      default: null,
-      validator: (prop) => {
-        if (prop === null) return true;
-        return (
-          Object.prototype.hasOwnProperty.call(prop, 'type') &&
-          Object.prototype.hasOwnProperty.call(prop, 'certificate')
-        );
-      },
-    },
-    userRoleId: {
-      type: String,
-      default: null,
+const { getValidationState } = useVuelidateComposable();
+const uploadCertificate = CertificatesStore();
+const props = defineProps({
+  certificate: {
+    type: Object,
+    default: null,
+    validator: (prop) => {
+      if (prop === null) return true;
+      return (
+        Object.prototype.hasOwnProperty.call(prop, 'type') &&
+        Object.prototype.hasOwnProperty.call(prop, 'certificate')
+      );
     },
   },
-  data() {
-    return {
-      form: {
-        certificateType: null,
-        file: null,
-      },
-    };
-  },
-  computed: {
-    certificateTypes() {
-      return this.$store.getters['certificates/availableUploadTypes'];
-    },
-    certificateOptions() {
-      const filteredCertificates = this.certificateTypes
-        .filter((certificate) => {
-          if (
-            certificate.type === 'ServiceLogin Certificate' &&
-            this.isNotAdmin
-          ) {
-            return certificate.type !== 'ServiceLogin Certificate';
-          }
-          return certificate === certificate;
-        })
-        .map(({ type, label }) => {
-          return {
-            text: label,
-            value: type,
-          };
-        });
-      if (filteredCertificates.length === 1) {
-        this.form.certificateType === filteredCertificates?.[0]?.value;
-      }
-      return filteredCertificates;
-    },
-    fileFormat() {
-      if (
-        this.certificate?.certificate === 'ServiceLogin Certificate' ||
-        this.form.certificateType === 'ServiceLogin Certificate'
-      ) {
-        return '.acf';
-      } else {
-        return '.pem';
-      }
-    },
-    isNotAdmin() {
-      return this.userRoleId !== 'Administrator';
-    },
+  userRoleId: {
+    type: String,
+    default: null,
   },
-  watch: {
-    certificateOptions: function (options) {
-      if (options.length) {
-        this.form.certificateType = options[0].value;
+});
+const modal = ref(null);
+eventBus.on('upload-certificate', () => {
+  modal.value.show();
+});
+const form = ref({
+  certificateType: null,
+  file: null,
+});
+const certificateTypes = computed(() => {
+  return uploadCertificate.availableUploadTypes;
+});
+const certificateOptions = computed(() => {
+  const filteredCertificates = certificateTypes.value
+    .filter((certificate) => {
+      if (certificate.type === 'ServiceLogin Certificate' && isNotAdmin) {
+        return certificate.type !== 'ServiceLogin Certificate';
       }
+      return certificate === certificate;
+    })
+    .map(({ type, label }) => {
+      return {
+        text: label,
+        value: type,
+      };
+    });
+  if (filteredCertificates.length === 1) {
+    form.certificateType === filteredCertificates?.[0]?.value;
+  }
+  return filteredCertificates;
+});
+const fileFormat = computed(() => {
+  if (
+    props.certificate?.certificate === 'ServiceLogin Certificate' ||
+    form.certificateType === 'ServiceLogin Certificate'
+  ) {
+    return '.acf';
+  } else {
+    return '.pem';
+  }
+});
+const isNotAdmin = computed(() => {
+  return props.userRoleId !== 'Administrator';
+});
+
+watch(certificateOptions, (options) => {
+  if (options.length) {
+    form.certificateType = options[0].value;
+  }
+});
+
+const rules = computed(() => ({
+  form: {
+    certificateType: {
+      required: requiredIf(function () {
+        return !props.certificate;
+      }),
     },
-  },
-  validations() {
-    return {
-      form: {
-        certificateType: {
-          required: requiredIf(function () {
-            return !this.certificate;
-          }),
-        },
-        file: {
-          required,
-        },
-      },
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', {
-        addNew: !this.certificate,
-        file: this.form.file,
-        location: this.certificate ? this.certificate.location : null,
-        type: this.certificate
-          ? this.certificate.certificate
-          : this.form.certificateType,
-      });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      this.form.certificateType = this.certificateOptions.length
-        ? this.certificateOptions[0].value
-        : null;
-      this.form.file = null;
-      this.$v.$reset();
-    },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
+    file: {
+      required,
     },
   },
+}));
+const v$ = useVuelidate(rules, { form });
+const emit = defineEmits(['ok']);
+function onFileUpload(uploadedfile) {
+  console.log('Uploadedfile', uploadedfile);
+  form.value.file = uploadedfile;
+  v$.value.form.file.$touch()
+}
+const handleSubmit = () => {
+  console.log('propsCertificate', props.certificate);
+  console.log('formFile', form, form.certificateType, form.file);
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('ok', {
+    addNew: !props.certificate,
+    file: form.file,
+    location: props.certificate ? props.certificate.location : null,
+    type: props.certificate
+      ? props.certificate.certificate
+      : form.valuecertificateType,
+  });
+  closeModal();
+};
+const closeModal = () => {
+  eventBus.on('upload-certificate', () => {
+    modal.value.hidden();
+  });
+  v$.value.$reset();
+};
+const resetForm = () => {
+  form.certificateType = certificateOptions.value.length
+    ? certificateOptions.value[0].value
+    : null;
+  form.file = null;
+  v$.value.$reset();
+};
+const onOk = (bvModalEvt) => {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  handleSubmit();
 };
 </script>