Update linting packages to use latest

- 99% of changes were small syntax changes that were changed by the
lint command. There were a couple of small manual changes to meet the
property order patterns established as part of the vue:recommended
guidelines.

There are rules that were set from errors to warnings and new stories
are being opened to address those issues.

Testing:
- Successfully ran npm run serve
- Successfully ran npm run lint
- Verified functionality works as expected, e.g. success and failure use cases
- Resolved any JavaScript errors thrown to the console

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie082f31c73ccbe8a60afa8f88a9ef6dbf33d9fd2

11 files changed, 291 insertions, 295 deletions

diff --git a/src/views/AccessControl/Ldap/Ldap.vue b/src/views/AccessControl/Ldap/Ldap.vue
index 40164a5a..27172019 100644
--- a/src/views/AccessControl/Ldap/Ldap.vue
+++ b/src/views/AccessControl/Ldap/Ldap.vue
@@ -96,7 +96,7 @@
                   <b-row>
                     <b-col sm="6" xl="4">
                       <b-form-group label-for="server-uri">
-                        <template v-slot:label>
+                        <template #label>
                           {{ $t('pageLdap.form.serverUri') }}
                           <info-tooltip
                             :title="$t('pageLdap.form.serverUriTooltip')"
@@ -174,7 +174,7 @@
                     </b-col>
                     <b-col sm="6" xl="4">
                       <b-form-group label-for="user-id-attribute">
-                        <template v-slot:label>
+                        <template #label>
                           {{ $t('pageLdap.form.userIdAttribute') }} -
                           <span class="form-text d-inline">
                             {{ $t('global.form.optional') }}
@@ -190,7 +190,7 @@
                     </b-col>
                     <b-col sm="6" xl="4">
                       <b-form-group label-for="group-id-attribute">
-                        <template v-slot:label>
+                        <template #label>
                           {{ $t('pageLdap.form.groupIdAttribute') }} -
                           <span class="form-text d-inline">
                             {{ $t('global.form.optional') }}
@@ -252,9 +252,13 @@ export default {
     InputPasswordToggle,
     PageTitle,
     PageSection,
-    TableRoleGroups
+    TableRoleGroups,
   },
   mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       form: {
@@ -268,8 +272,8 @@ export default {
         bindPassword: '',
         baseDn: '',
         userIdAttribute: '',
-        groupIdAttribute: ''
-      }
+        groupIdAttribute: '',
+      },
     };
   },
   computed: {
@@ -277,70 +281,70 @@ export default {
       'isServiceEnabled',
       'isActiveDirectoryEnabled',
       'ldap',
-      'activeDirectory'
+      'activeDirectory',
     ]),
     sslCertificates() {
       return this.$store.getters['sslCertificates/allCertificates'];
     },
     caCertificateExpiration() {
       const caCertificate = find(this.sslCertificates, {
-        type: 'TrustStore Certificate'
+        type: 'TrustStore Certificate',
       });
       if (caCertificate === undefined) return null;
       return caCertificate.validUntil;
     },
     ldapCertificateExpiration() {
       const ldapCertificate = find(this.sslCertificates, {
-        type: 'LDAP Certificate'
+        type: 'LDAP Certificate',
       });
       if (ldapCertificate === undefined) return null;
       return ldapCertificate.validUntil;
     },
     ldapProtocol() {
       return this.form.secureLdapEnabled ? 'ldaps://' : 'ldap://';
-    }
+    },
   },
   watch: {
-    isServiceEnabled: function(value) {
+    isServiceEnabled: function (value) {
       this.form.ldapAuthenticationEnabled = value;
     },
-    isActiveDirectoryEnabled: function(value) {
+    isActiveDirectoryEnabled: function (value) {
       this.form.activeDirectoryEnabled = value;
       this.setFormValues();
-    }
+    },
   },
   validations: {
     form: {
       ldapAuthenticationEnabled: {},
       secureLdapEnabled: {},
       activeDirectoryEnabled: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       serverUri: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       bindDn: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       bindPassword: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       baseDn: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       userIdAttribute: {},
-      groupIdAttribute: {}
-    }
+      groupIdAttribute: {},
+    },
   },
   created() {
     this.startLoader();
@@ -350,10 +354,6 @@ export default {
     this.$store.dispatch('sslCertificates/getCertificates');
     this.setFormValues();
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     setFormValues(serviceType) {
       if (!serviceType) {
@@ -366,7 +366,7 @@ export default {
         bindDn = '',
         baseDn = '',
         userAttribute = '',
-        groupsAttribute = ''
+        groupsAttribute = '',
       } = serviceType;
       const secureLdap =
         serviceAddress && serviceAddress.includes('ldaps://') ? true : false;
@@ -392,12 +392,12 @@ export default {
         bindPassword: this.form.bindPassword,
         baseDn: this.form.baseDn,
         userIdAttribute: this.form.userIdAttribute,
-        groupIdAttribute: this.form.groupIdAttribute
+        groupIdAttribute: this.form.groupIdAttribute,
       };
       this.startLoader();
       this.$store
         .dispatch('ldap/saveAccountSettings', data)
-        .then(success => {
+        .then((success) => {
           this.successToast(success);
           this.$v.form.$reset();
         })
@@ -426,7 +426,7 @@ export default {
         // disables the service.
         this.setFormValues();
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue b/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue
index e2da1eb1..b9b1f5aa 100644
--- a/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal id="modal-role-group" ref="modal" @ok="onOk" @hidden="resetForm">
-    <template v-slot:modal-title>
+    <template #modal-title>
       <template v-if="roleGroup">
         {{ $t('pageLdap.modal.editRoleGroup') }}
       </template>
@@ -49,7 +49,7 @@
                 :state="getValidationState($v.form.groupPrivilege)"
                 @input="$v.form.groupPrivilege.$touch()"
               >
-                <template v-if="!roleGroup" v-slot:first>
+                <template v-if="!roleGroup" #first>
                   <b-form-select-option :value="null" disabled>
                     {{ $t('global.form.selectAnOption') }}
                   </b-form-select-option>
@@ -63,7 +63,7 @@
         </b-col>
       </b-row>
     </b-container>
-    <template v-slot:modal-footer="{ ok, cancel }">
+    <template #modal-footer="{ ok, cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -89,47 +89,47 @@ export default {
     roleGroup: {
       type: Object,
       default: null,
-      validator: prop => {
+      validator: (prop) => {
         if (prop === null) return true;
         return (
           prop.hasOwnProperty('groupName') &&
           prop.hasOwnProperty('groupPrivilege')
         );
-      }
-    }
+      },
+    },
   },
   data() {
     return {
       form: {
         groupName: null,
-        groupPrivilege: null
-      }
+        groupPrivilege: null,
+      },
     };
   },
   computed: {
     accountRoles() {
       return this.$store.getters['localUsers/accountRoles'];
-    }
+    },
   },
   watch: {
-    roleGroup: function(value) {
+    roleGroup: function (value) {
       if (value === null) return;
       this.form.groupName = value.groupName;
       this.form.groupPrivilege = value.groupPrivilege;
-    }
+    },
   },
   validations() {
     return {
       form: {
         groupName: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return !this.roleGroup;
-          })
+          }),
         },
         groupPrivilege: {
-          required
-        }
-      }
+          required,
+        },
+      },
     };
   },
   methods: {
@@ -139,7 +139,7 @@ export default {
       this.$emit('ok', {
         addNew: !this.roleGroup,
         groupName: this.form.groupName,
-        groupPrivilege: this.form.groupPrivilege
+        groupPrivilege: this.form.groupPrivilege,
       });
       this.closeModal();
     },
@@ -158,7 +158,7 @@ export default {
       // prevent modal close
       bvModalEvt.preventDefault();
       this.handleSubmit();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index 9daf1fd7..ef300ea5 100644
--- a/src/views/AccessControl/Ldap/TableRoleGroups.vue
+++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue
@@ -43,7 +43,7 @@
           @row-selected="onRowSelected($event, tableItems.length)"
         >
           <!-- Checkbox column -->
-          <template v-slot:head(checkbox)>
+          <template #head(checkbox)>
             <b-form-checkbox
               v-model="tableHeaderCheckboxModel"
               :indeterminate="tableHeaderCheckboxIndeterminate"
@@ -51,7 +51,7 @@
               @change="onChangeHeaderCheckbox($refs.table)"
             />
           </template>
-          <template v-slot:cell(checkbox)="row">
+          <template #cell(checkbox)="row">
             <b-form-checkbox
               v-model="row.rowSelected"
               :disabled="!isServiceEnabled"
@@ -60,7 +60,7 @@
           </template>
 
           <!-- table actions column -->
-          <template v-slot:cell(actions)="{ item }">
+          <template #cell(actions)="{ item }">
             <table-row-action
               v-for="(action, index) in item.actions"
               :key="index"
@@ -69,7 +69,7 @@
               :title="action.title"
               @click:tableAction="onTableRowAction($event, item)"
             >
-              <template v-slot:icon>
+              <template #icon>
                 <icon-edit v-if="action.value === 'edit'" />
                 <icon-trashcan v-if="action.value === 'delete'" />
               </template>
@@ -108,7 +108,7 @@ export default {
     IconTrashcan,
     ModalAddRoleGroup,
     TableRowAction,
-    TableToolbar
+    TableToolbar,
   },
   mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
   data() {
@@ -117,31 +117,31 @@ export default {
       fields: [
         {
           key: 'checkbox',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'groupName',
           sortable: true,
-          label: this.$t('pageLdap.tableRoleGroups.groupName')
+          label: this.$t('pageLdap.tableRoleGroups.groupName'),
         },
         {
           key: 'groupPrivilege',
           sortable: true,
-          label: this.$t('pageLdap.tableRoleGroups.groupPrivilege')
+          label: this.$t('pageLdap.tableRoleGroups.groupPrivilege'),
         },
         {
           key: 'actions',
           sortable: false,
           label: '',
-          tdClass: 'text-right'
-        }
+          tdClass: 'text-right',
+        },
       ],
       batchActions: [
         {
           value: 'delete',
-          label: this.$t('global.action.delete')
-        }
-      ]
+          label: this.$t('global.action.delete'),
+        },
+      ],
     };
   },
   computed: {
@@ -155,17 +155,17 @@ export default {
             {
               value: 'edit',
               title: this.$t('global.action.edit'),
-              enabled: this.isServiceEnabled
+              enabled: this.isServiceEnabled,
             },
             {
               value: 'delete',
               title: this.$t('global.action.delete'),
-              enabled: this.isServiceEnabled
-            }
-          ]
+              enabled: this.isServiceEnabled,
+            },
+          ],
         };
       });
-    }
+    },
   },
   created() {
     this.$store.dispatch('localUsers/getAccountRoles');
@@ -180,17 +180,17 @@ export default {
           ),
           {
             title: this.$t('pageLdap.modal.deleteRoleGroup'),
-            okTitle: this.$t('global.action.delete')
+            okTitle: this.$t('global.action.delete'),
           }
         )
-        .then(deleteConfirmed => {
+        .then((deleteConfirmed) => {
           if (deleteConfirmed) {
             this.startLoader();
             this.$store
               .dispatch('ldap/deleteRoleGroup', {
-                roleGroups: this.selectedRows
+                roleGroups: this.selectedRows,
               })
-              .then(success => this.successToast(success))
+              .then((success) => this.successToast(success))
               .catch(({ message }) => this.errorToast(message))
               .finally(() => this.endLoader());
           }
@@ -205,19 +205,19 @@ export default {
           this.$bvModal
             .msgBoxConfirm(
               this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
-                groupName: row.groupName
+                groupName: row.groupName,
               }),
               {
                 title: this.$t('pageLdap.modal.deleteRoleGroup'),
-                okTitle: this.$t('global.action.delete')
+                okTitle: this.$t('global.action.delete'),
               }
             )
-            .then(deleteConfirmed => {
+            .then((deleteConfirmed) => {
               if (deleteConfirmed) {
                 this.startLoader();
                 this.$store
                   .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
-                  .then(success => this.successToast(success))
+                  .then((success) => this.successToast(success))
                   .catch(({ message }) => this.errorToast(message))
                   .finally(() => this.endLoader());
               }
@@ -236,17 +236,17 @@ export default {
       if (addNew) {
         this.$store
           .dispatch('ldap/addNewRoleGroup', data)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       } else {
         this.$store
           .dispatch('ldap/saveRoleGroup', data)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 9978f4a7..5c2d7f1b 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -39,7 +39,7 @@
           @row-selected="onRowSelected($event, tableItems.length)"
         >
           <!-- Checkbox column -->
-          <template v-slot:head(checkbox)>
+          <template #head(checkbox)>
             <b-form-checkbox
               v-model="tableHeaderCheckboxModel"
               data-test-id="localUserManagement-checkbox-tableHeaderCheckbox"
@@ -47,7 +47,7 @@
               @change="onChangeHeaderCheckbox($refs.table)"
             />
           </template>
-          <template v-slot:cell(checkbox)="row">
+          <template #cell(checkbox)="row">
             <b-form-checkbox
               v-model="row.rowSelected"
               data-test-id="localUserManagement-checkbox-toggleSelectRow"
@@ -56,7 +56,7 @@
           </template>
 
           <!-- table actions column -->
-          <template v-slot:cell(actions)="{ item }">
+          <template #cell(actions)="{ item }">
             <table-row-action
               v-for="(action, index) in item.actions"
               :key="index"
@@ -65,18 +65,14 @@
               :title="action.title"
               @click:tableAction="onTableRowAction($event, item)"
             >
-              <template v-slot:icon>
+              <template #icon>
                 <icon-edit
                   v-if="action.value === 'edit'"
-                  :data-test-id="
-                    `localUserManagement-tableRowAction-edit-${index}`
-                  "
+                  :data-test-id="`localUserManagement-tableRowAction-edit-${index}`"
                 />
                 <icon-trashcan
                   v-if="action.value === 'delete'"
-                  :data-test-id="
-                    `localUserManagement-tableRowAction-delete-${index}`
-                  "
+                  :data-test-id="`localUserManagement-tableRowAction-delete-${index}`"
                 />
               </template>
             </table-row-action>
@@ -142,48 +138,52 @@ export default {
     PageTitle,
     TableRoles,
     TableRowAction,
-    TableToolbar
+    TableToolbar,
   },
   mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       activeUser: null,
       fields: [
         {
-          key: 'checkbox'
+          key: 'checkbox',
         },
         {
           key: 'username',
-          label: this.$t('pageLocalUserManagement.table.username')
+          label: this.$t('pageLocalUserManagement.table.username'),
         },
         {
           key: 'privilege',
-          label: this.$t('pageLocalUserManagement.table.privilege')
+          label: this.$t('pageLocalUserManagement.table.privilege'),
         },
         {
           key: 'status',
-          label: this.$t('pageLocalUserManagement.table.status')
+          label: this.$t('pageLocalUserManagement.table.status'),
         },
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap'
-        }
+          tdClass: 'text-right text-nowrap',
+        },
       ],
       tableToolbarActions: [
         {
           value: 'delete',
-          label: this.$t('global.action.delete')
+          label: this.$t('global.action.delete'),
         },
         {
           value: 'enable',
-          label: this.$t('global.action.enable')
+          label: this.$t('global.action.enable'),
         },
         {
           value: 'disable',
-          label: this.$t('global.action.disable')
-        }
-      ]
+          label: this.$t('global.action.disable'),
+        },
+      ],
     };
   },
   computed: {
@@ -192,7 +192,7 @@ export default {
     },
     tableItems() {
       // transform user data to table data
-      return this.allUsers.map(user => {
+      return this.allUsers.map((user) => {
         return {
           username: user.UserName,
           privilege: user.RoleId,
@@ -205,15 +205,15 @@ export default {
             {
               value: 'edit',
               enabled: true,
-              title: this.$t('pageLocalUserManagement.editUser')
+              title: this.$t('pageLocalUserManagement.editUser'),
             },
             {
               value: 'delete',
               enabled: user.UserName === 'root' ? false : true,
-              title: this.$tc('pageLocalUserManagement.deleteUser')
-            }
+              title: this.$tc('pageLocalUserManagement.deleteUser'),
+            },
           ],
-          ...user
+          ...user,
         };
       });
     },
@@ -222,7 +222,7 @@ export default {
     },
     passwordRequirements() {
       return this.$store.getters['localUsers/accountPasswordRequirements'];
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -230,10 +230,6 @@ export default {
     this.$store.dispatch('localUsers/getAccountSettings');
     this.$store.dispatch('localUsers/getAccountRoles');
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     initModalUser(user) {
       this.activeUser = user;
@@ -243,14 +239,14 @@ export default {
       this.$bvModal
         .msgBoxConfirm(
           this.$t('pageLocalUserManagement.modal.deleteConfirmMessage', {
-            user: user.username
+            user: user.username,
           }),
           {
             title: this.$tc('pageLocalUserManagement.deleteUser'),
-            okTitle: this.$tc('pageLocalUserManagement.deleteUser')
+            okTitle: this.$tc('pageLocalUserManagement.deleteUser'),
           }
         )
-        .then(deleteConfirmed => {
+        .then((deleteConfirmed) => {
           if (deleteConfirmed) {
             this.deleteUser(user);
           }
@@ -264,13 +260,13 @@ export default {
       if (isNewUser) {
         this.$store
           .dispatch('localUsers/createUser', userData)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       } else {
         this.$store
           .dispatch('localUsers/updateUser', userData)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       }
@@ -279,7 +275,7 @@ export default {
       this.startLoader();
       this.$store
         .dispatch('localUsers/deleteUser', username)
-        .then(success => this.successToast(success))
+        .then((success) => this.successToast(success))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
     },
@@ -300,15 +296,15 @@ export default {
                 okTitle: this.$tc(
                   'pageLocalUserManagement.deleteUser',
                   this.selectedRows.length
-                )
+                ),
               }
             )
-            .then(deleteConfirmed => {
+            .then((deleteConfirmed) => {
               if (deleteConfirmed) {
                 this.startLoader();
                 this.$store
                   .dispatch('localUsers/deleteUsers', this.selectedRows)
-                  .then(messages => {
+                  .then((messages) => {
                     messages.forEach(({ type, message }) => {
                       if (type === 'success') this.successToast(message);
                       if (type === 'error') this.errorToast(message);
@@ -322,7 +318,7 @@ export default {
           this.startLoader();
           this.$store
             .dispatch('localUsers/enableUsers', this.selectedRows)
-            .then(messages => {
+            .then((messages) => {
               messages.forEach(({ type, message }) => {
                 if (type === 'success') this.successToast(message);
                 if (type === 'error') this.errorToast(message);
@@ -334,7 +330,7 @@ export default {
           this.startLoader();
           this.$store
             .dispatch('localUsers/disableUsers', this.selectedRows)
-            .then(messages => {
+            .then((messages) => {
               messages.forEach(({ type, message }) => {
                 if (type === 'success') this.successToast(message);
                 if (type === 'error') this.errorToast(message);
@@ -360,11 +356,11 @@ export default {
       this.startLoader();
       this.$store
         .dispatch('localUsers/saveAccountSettings', settings)
-        .then(message => this.successToast(message))
+        .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
index a611c590..89a1ebca 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
@@ -19,7 +19,7 @@
                 {{
                   $t('global.form.valueMustBeBetween', {
                     min: 0,
-                    max: 65535
+                    max: 65535,
                   })
                 }}
               </b-form-text>
@@ -39,13 +39,13 @@
                 <template
                   v-if="
                     !$v.form.lockoutThreshold.minLength ||
-                      !$v.form.lockoutThreshold.maxLength
+                    !$v.form.lockoutThreshold.maxLength
                   "
                 >
                   {{
                     $t('global.form.valueMustBeBetween', {
                       min: 0,
-                      max: 65535
+                      max: 65535,
                     })
                   }}
                 </template>
@@ -104,7 +104,7 @@
         </b-row>
       </b-container>
     </b-form>
-    <template v-slot:modal-footer="{ ok, cancel }">
+    <template #modal-footer="{ ok, cancel }">
       <b-button
         variant="secondary"
         data-test-id="localUserManagement-button-cancel"
@@ -131,7 +131,7 @@ import {
   required,
   requiredIf,
   minValue,
-  maxValue
+  maxValue,
 } from 'vuelidate/lib/validators';
 
 export default {
@@ -139,42 +139,42 @@ export default {
   props: {
     settings: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       form: {
         lockoutThreshold: 0,
         unlockMethod: 0,
-        lockoutDuration: null
-      }
+        lockoutDuration: null,
+      },
     };
   },
   watch: {
-    settings: function({ lockoutThreshold, lockoutDuration }) {
+    settings: function ({ lockoutThreshold, lockoutDuration }) {
       this.form.lockoutThreshold = lockoutThreshold;
       this.form.unlockMethod = lockoutDuration ? 1 : 0;
       this.form.lockoutDuration = lockoutDuration ? lockoutDuration : null;
-    }
+    },
   },
   validations: {
     form: {
       lockoutThreshold: {
         minValue: minValue(0),
         maxValue: maxValue(65535),
-        required
+        required,
       },
       unlockMethod: { required },
       lockoutDuration: {
-        minValue: function(value) {
+        minValue: function (value) {
           return this.form.unlockMethod === 0 || value > 0;
         },
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.unlockMethod === 1;
-        })
-      }
-    }
+        }),
+      },
+    },
   },
   methods: {
     handleSubmit() {
@@ -213,7 +213,7 @@ export default {
         ? this.settings.lockoutDuration
         : null;
       this.$v.$reset(); // clear validations
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index 0fec8944..962718b9 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal id="modal-user" ref="modal" @hidden="resetForm">
-    <template v-slot:modal-title>
+    <template #modal-title>
       <template v-if="newUser">
         {{ $t('pageLocalUserManagement.addUser') }}
       </template>
@@ -131,7 +131,7 @@
                 {{
                   $t('pageLocalUserManagement.modal.passwordMustBeBetween', {
                     min: passwordRequirements.minLength,
-                    max: passwordRequirements.maxLength
+                    max: passwordRequirements.maxLength,
                   })
                 }}
               </b-form-text>
@@ -160,7 +160,7 @@
                         'pageLocalUserManagement.modal.passwordMustBeBetween',
                         {
                           min: passwordRequirements.minLength,
-                          max: passwordRequirements.maxLength
+                          max: passwordRequirements.maxLength,
                         }
                       )
                     }}
@@ -200,7 +200,7 @@
         </b-row>
       </b-container>
     </b-form>
-    <template v-slot:modal-footer="{ ok, cancel }">
+    <template #modal-footer="{ ok, cancel }">
       <b-button
         variant="secondary"
         data-test-id="localUserManagement-button-cancel"
@@ -233,7 +233,7 @@ import {
   minLength,
   sameAs,
   helpers,
-  requiredIf
+  requiredIf,
 } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
@@ -245,12 +245,12 @@ export default {
   props: {
     user: {
       type: Object,
-      default: null
+      default: null,
     },
     passwordRequirements: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
@@ -261,8 +261,8 @@ export default {
         privilege: '',
         password: '',
         passwordConfirmation: '',
-        manualUnlock: false
-      }
+        manualUnlock: false,
+      },
     };
   },
   computed: {
@@ -277,46 +277,46 @@ export default {
     },
     privilegeTypes() {
       return this.$store.getters['localUsers/accountRoles'];
-    }
+    },
   },
   watch: {
-    user: function(value) {
+    user: function (value) {
       if (value === null) return;
       this.originalUsername = value.username;
       this.form.username = value.username;
       this.form.status = value.Enabled;
       this.form.privilege = value.privilege;
-    }
+    },
   },
   validations() {
     return {
       form: {
         status: {
-          required
+          required,
         },
         username: {
           required,
           maxLength: maxLength(16),
-          pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/)
+          pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/),
         },
         privilege: {
-          required
+          required,
         },
         password: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return this.requirePassword();
           }),
           minLength: minLength(this.passwordRequirements.minLength),
-          maxLength: maxLength(this.passwordRequirements.maxLength)
+          maxLength: maxLength(this.passwordRequirements.maxLength),
         },
         passwordConfirmation: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return this.requirePassword();
           }),
-          sameAsPassword: sameAs('password')
+          sameAsPassword: sameAs('password'),
         },
-        manualUnlock: {}
-      }
+        manualUnlock: {},
+      },
     };
   },
   methods: {
@@ -384,7 +384,7 @@ export default {
       // prevent modal close
       bvModalEvt.preventDefault();
       this.handleSubmit();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index bf300f50..9c2e5fe5 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -1,21 +1,21 @@
 <template>
   <b-table stacked="sm" hover small :items="items" :fields="fields">
-    <template v-slot:cell(administrator)="data">
+    <template #cell(administrator)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
     </template>
-    <template v-slot:cell(operator)="data">
+    <template #cell(operator)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
     </template>
-    <template v-slot:cell(readonly)="data">
+    <template #cell(readonly)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
     </template>
-    <template v-slot:cell(noaccess)="data">
+    <template #cell(noaccess)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
@@ -28,7 +28,7 @@ import Checkmark20 from '@carbon/icons-vue/es/checkmark/20';
 
 export default {
   components: {
-    Checkmark20
+    Checkmark20,
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -49,7 +49,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -58,7 +58,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -67,7 +67,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -76,7 +76,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -85,7 +85,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -94,7 +94,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -103,7 +103,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -112,17 +112,17 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
-        }
+          noaccess: false,
+        },
       ],
       fields: [
         { key: 'description', label: 'Privilege' },
         { key: 'administrator', label: 'Administrator', class: 'text-center' },
         { key: 'operator', label: 'Operator', class: 'text-center' },
         { key: 'readonly', label: 'ReadOnly', class: 'text-center' },
-        { key: 'noaccess', label: 'NoAccess', class: 'text-center' }
-      ]
+        { key: 'noaccess', label: 'NoAccess', class: 'text-center' },
+      ],
     };
-  }
+  },
 };
 </script>
diff --git a/src/views/AccessControl/SslCertificates/CsrCountryCodes.js b/src/views/AccessControl/SslCertificates/CsrCountryCodes.js
index 59e724b7..a2d70007 100644
--- a/src/views/AccessControl/SslCertificates/CsrCountryCodes.js
+++ b/src/views/AccessControl/SslCertificates/CsrCountryCodes.js
@@ -30,12 +30,12 @@ export const COUNTRY_LIST = [
   {
     name: 'Bonaire, Sint Eustatius and Saba',
     code: 'BQ',
-    label: i18n.t('countries.BQ')
+    label: i18n.t('countries.BQ'),
   },
   {
     name: 'Bosnia and Herzegovina ',
     code: 'BA',
-    label: i18n.t('countries.BA')
+    label: i18n.t('countries.BA'),
   },
   { name: 'Bostwana', code: 'BW', label: i18n.t('countries.BW') },
   { name: 'Bouvet Island', code: 'BV', label: i18n.t('countries.BV') },
@@ -43,7 +43,7 @@ export const COUNTRY_LIST = [
   {
     name: 'British Indian Ocean Territory',
     code: 'IO',
-    label: i18n.t('countries.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') },
@@ -57,7 +57,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Central African Republic',
     code: 'CF',
-    label: i18n.t('countries.CF')
+    label: i18n.t('countries.CF'),
   },
   { name: 'Chad', code: 'TD', label: i18n.t('countries.TD') },
   { name: 'Chile', code: 'CL', label: i18n.t('countries.CL') },
@@ -69,7 +69,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Congo, The Democratic Republic of the',
     code: 'CD',
-    label: i18n.t('countries.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') },
@@ -95,7 +95,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Falkland Islands (Malvinas)',
     code: 'FK',
-    label: i18n.t('countries.FK')
+    label: i18n.t('countries.FK'),
   },
   { name: 'Faroe Islands', code: 'FO', label: i18n.t('countries.FO') },
   { name: 'Fiji', code: 'FJ', label: i18n.t('countries.FJ') },
@@ -106,7 +106,7 @@ export const COUNTRY_LIST = [
   {
     name: 'French Southern Territories',
     code: 'TF',
-    label: i18n.t('countries.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') },
@@ -128,7 +128,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Heard Island and McDonald Islands',
     code: 'HM',
-    label: i18n.t('countries.HM')
+    label: i18n.t('countries.HM'),
   },
   { name: 'Holy See', code: 'VA', label: i18n.t('countries.VA') },
   { name: 'Honduras', code: 'HN', label: i18n.t('countries.HN') },
@@ -140,7 +140,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Iran, Islamic Republic of',
     code: 'IR',
-    label: i18n.t('countries.IR')
+    label: i18n.t('countries.IR'),
   },
   { name: 'Iraq', code: 'IQ', label: i18n.t('countries.IQ') },
   { name: 'Ireland', code: 'IE', label: i18n.t('countries.IE') },
@@ -158,14 +158,14 @@ export const COUNTRY_LIST = [
   {
     name: "Korea, Democratic People's Republic of",
     code: 'KP',
-    label: i18n.t('countries.KP')
+    label: i18n.t('countries.KP'),
   },
   { name: 'Kuwait', code: 'KW', label: i18n.t('countries.KW') },
   { name: 'Kyrgyzstan', code: 'KG', label: i18n.t('countries.KG') },
   {
     name: "Lao People's Democratic Republic",
     code: 'LA',
-    label: i18n.t('countries.LA')
+    label: i18n.t('countries.LA'),
   },
   { name: 'Latvia', code: 'LV', label: i18n.t('countries.LV') },
   { name: 'Lebanon', code: 'LB', label: i18n.t('countries.LB') },
@@ -179,7 +179,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Macedonia, The Former Yugoslav Republic of',
     code: 'MK',
-    label: i18n.t('countries.MK')
+    label: i18n.t('countries.MK'),
   },
   { name: 'Madagascar', code: 'MG', label: i18n.t('countries.MG') },
   { name: 'Malawi', code: 'MW', label: i18n.t('countries.MW') },
@@ -196,7 +196,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Micronesia, Federated States of',
     code: 'FM',
-    label: i18n.t('countries.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') },
@@ -220,7 +220,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Northern Mariana Islands',
     code: 'MP',
-    label: i18n.t('countries.MP')
+    label: i18n.t('countries.MP'),
   },
   { name: 'Norway', code: 'NO', label: i18n.t('countries.NO') },
   { name: 'Oman', code: 'OM', label: i18n.t('countries.OM') },
@@ -245,7 +245,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Saint Helena, Ascension and Tristan da Cunha',
     code: 'SH',
-    label: i18n.t('countries.SH')
+    label: i18n.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') },
@@ -253,12 +253,12 @@ export const COUNTRY_LIST = [
   {
     name: 'Saint Pierre and Miquelon',
     code: 'PM',
-    label: i18n.t('countries.PM')
+    label: i18n.t('countries.PM'),
   },
   {
     name: 'Saint Vincent and the Grenadines',
     code: 'VC',
-    label: i18n.t('countries.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') },
@@ -278,7 +278,7 @@ export const COUNTRY_LIST = [
   {
     name: 'South Georgia and the South Sandwich Islands',
     code: 'GS',
-    label: i18n.t('countries.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') },
@@ -294,7 +294,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Tanzania, United Republic of',
     code: 'TZ',
-    label: i18n.t('countries.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') },
@@ -308,7 +308,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Turks and Caicos Islands',
     code: 'TC',
-    label: i18n.t('countries.TC')
+    label: i18n.t('countries.TC'),
   },
   { name: 'Tuvalu', code: 'TV', label: i18n.t('countries.TV') },
   { name: 'Uganda', code: 'UG', label: i18n.t('countries.UG') },
@@ -318,12 +318,12 @@ export const COUNTRY_LIST = [
   {
     name: 'United States Minor Outlying Islands',
     code: 'UM',
-    label: i18n.t('countries.UM')
+    label: i18n.t('countries.UM'),
   },
   {
     name: 'United States of America',
     code: 'US',
-    label: i18n.t('countries.US')
+    label: i18n.t('countries.US'),
   },
   { name: 'Uruguay', code: 'UY', label: i18n.t('countries.UY') },
   { name: 'Uzbekistan', code: 'UZ', label: i18n.t('countries.UZ') },
@@ -333,7 +333,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Virgin Islands, British',
     code: 'VG',
-    label: i18n.t('countries.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') },
@@ -341,5 +341,5 @@ export const COUNTRY_LIST = [
   { 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') }
+  { name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') },
 ];
diff --git a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
index 84f14c3b..da6b457c 100644
--- a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
+++ b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
@@ -30,7 +30,7 @@
                       :state="getValidationState($v.form.certificateType)"
                       @input="$v.form.certificateType.$touch()"
                     >
-                      <template v-slot:first>
+                      <template #first>
                         <b-form-select-option :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
                         </b-form-select-option>
@@ -54,7 +54,7 @@
                       :state="getValidationState($v.form.country)"
                       @input="$v.form.country.$touch()"
                     >
-                      <template v-slot:first>
+                      <template #first>
                         <b-form-select-option :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
                         </b-form-select-option>
@@ -158,7 +158,7 @@
                 </b-col>
                 <b-col lg="6">
                   <b-form-group label-for="challenge-password">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.challengePassword') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -176,7 +176,7 @@
               <b-row>
                 <b-col lg="6">
                   <b-form-group label-for="contact-person">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.contactPerson') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -192,7 +192,7 @@
                 </b-col>
                 <b-col lg="6">
                   <b-form-group label-for="email-address">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.emailAddress') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -210,7 +210,7 @@
               <b-row>
                 <b-col lg="12">
                   <b-form-group label-for="alternate-name">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.alternateName') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -229,14 +229,14 @@
                       size="lg"
                       separator=" "
                       :input-attrs="{
-                        'aria-describedby': 'alternate-name-help-block'
+                        'aria-describedby': 'alternate-name-help-block',
                       }"
                       :duplicate-tag-text="
                         $t('pageSslCertificates.modal.duplicateAlternateName')
                       "
                       placeholder=""
                     >
-                      <template v-slot:add-button-text>
+                      <template #add-button-text>
                         {{ $t('global.action.add') }} <icon-add />
                       </template>
                     </b-form-tags>
@@ -262,7 +262,7 @@
                       :state="getValidationState($v.form.keyPairAlgorithm)"
                       @input="$v.form.keyPairAlgorithm.$touch()"
                     >
-                      <template v-slot:first>
+                      <template #first>
                         <b-form-select-option :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
                         </b-form-select-option>
@@ -289,7 +289,7 @@
                         :state="getValidationState($v.form.keyCurveId)"
                         @input="$v.form.keyCurveId.$touch()"
                       >
-                        <template v-slot:first>
+                        <template #first>
                           <b-form-select-option :value="null" disabled>
                             {{ $t('global.form.selectAnOption') }}
                           </b-form-select-option>
@@ -313,7 +313,7 @@
                         :state="getValidationState($v.form.keyBitLength)"
                         @input="$v.form.keyBitLength.$touch()"
                       >
-                        <template v-slot:first>
+                        <template #first>
                           <b-form-select-option :value="null" disabled>
                             {{ $t('global.form.selectAnOption') }}
                           </b-form-select-option>
@@ -330,7 +330,7 @@
           </b-row>
         </b-container>
       </b-form>
-      <template v-slot:modal-footer="{ ok, cancel }">
+      <template #modal-footer="{ ok, cancel }">
         <b-button variant="secondary" @click="cancel()">
           {{ $t('global.action.cancel') }}
         </b-button>
@@ -353,7 +353,7 @@
       @hidden="onHiddenCsrStringModal"
     >
       {{ csrString }}
-      <template v-slot:modal-footer>
+      <template #modal-footer>
         <b-btn variant="secondary" @click="copyCsrString">
           <template v-if="csrStringCopied">
             <icon-checkmark />
@@ -406,25 +406,25 @@ export default {
         alternateName: [],
         keyPairAlgorithm: null,
         keyCurveId: null,
-        keyBitLength: null
+        keyBitLength: null,
       },
       certificateOptions: CERTIFICATE_TYPES.reduce((arr, cert) => {
         if (cert.type === 'TrustStore Certificate') return arr;
         arr.push({
           text: cert.label,
-          value: cert.type
+          value: cert.type,
         });
         return arr;
       }, []),
-      countryOptions: COUNTRY_LIST.map(country => ({
+      countryOptions: COUNTRY_LIST.map((country) => ({
         text: country.label,
-        value: country.code
+        value: country.code,
       })),
       keyPairAlgorithmOptions: ['EC', 'RSA'],
       keyCurveIdOptions: ['prime256v1', 'secp521r1', 'secp384r1'],
       keyBitLengthOptions: [2048],
       csrString: '',
-      csrStringCopied: false
+      csrStringCopied: false,
     };
   },
   validations: {
@@ -442,16 +442,16 @@ export default {
       alternateName: {},
       keyPairAlgorithm: { required },
       keyCurveId: {
-        reuired: requiredIf(function(form) {
+        reuired: requiredIf(function (form) {
           return form.keyPairAlgorithm === 'EC';
-        })
+        }),
       },
       keyBitLength: {
-        reuired: requiredIf(function(form) {
+        reuired: requiredIf(function (form) {
           return form.keyPairAlgorithm === 'RSA';
-        })
-      }
-    }
+        }),
+      },
+    },
   },
   methods: {
     handleSubmit() {
@@ -493,7 +493,7 @@ export default {
           this.csrStringCopied = false;
         }, 5000 /*5 seconds*/);
       });
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
index 63c3b4e8..070dd0dc 100644
--- a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
+++ b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm">
-    <template v-slot:modal-title>
+    <template #modal-title>
       <template v-if="certificate">
         {{ $t('pageSslCertificates.replaceCertificate') }}
       </template>
@@ -59,7 +59,7 @@
         </b-form-invalid-feedback>
       </b-form-group>
     </b-form>
-    <template v-slot:modal-ok>
+    <template #modal-ok>
       <template v-if="certificate">
         {{ $t('global.action.replace') }}
       </template>
@@ -80,20 +80,20 @@ export default {
     certificate: {
       type: Object,
       default: null,
-      validator: prop => {
+      validator: (prop) => {
         if (prop === null) return true;
         return (
           prop.hasOwnProperty('type') && prop.hasOwnProperty('certificate')
         );
-      }
-    }
+      },
+    },
   },
   data() {
     return {
       form: {
         certificateType: null,
-        file: null
-      }
+        file: null,
+      },
     };
   },
   computed: {
@@ -104,30 +104,30 @@ export default {
       return this.certificateTypes.map(({ type, label }) => {
         return {
           text: label,
-          value: type
+          value: type,
         };
       });
-    }
+    },
   },
   watch: {
-    certificateOptions: function(options) {
+    certificateOptions: function (options) {
       if (options.length) {
         this.form.certificateType = options[0].value;
       }
-    }
+    },
   },
   validations() {
     return {
       form: {
         certificateType: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return !this.certificate;
-          })
+          }),
         },
         file: {
-          required
-        }
-      }
+          required,
+        },
+      },
     };
   },
   methods: {
@@ -140,7 +140,7 @@ export default {
         location: this.certificate ? this.certificate.location : null,
         type: this.certificate
           ? this.certificate.type
-          : this.form.certificateType
+          : this.form.certificateType,
       });
       this.closeModal();
     },
@@ -160,7 +160,7 @@ export default {
       // prevent modal close
       bvModalEvt.preventDefault();
       this.handleSubmit();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
index bce50d72..fe63bd99 100644
--- a/src/views/AccessControl/SslCertificates/SslCertificates.vue
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -11,7 +11,7 @@
           <template v-else>
             {{
               $t('pageSslCertificates.alert.certificateExpiredMessage', {
-                certificate: expiredCertificateTypes[0]
+                certificate: expiredCertificateTypes[0],
               })
             }}
           </template>
@@ -24,7 +24,7 @@
           <template v-else>
             {{
               $t('pageSslCertificates.alert.certificateExpiringMessage', {
-                certificate: expiringCertificateTypes[0]
+                certificate: expiringCertificateTypes[0],
               })
             }}
           </template>
@@ -61,11 +61,11 @@
           :items="tableItems"
           :empty-text="$t('global.table.emptyMessage')"
         >
-          <template v-slot:cell(validFrom)="{ value }">
+          <template #cell(validFrom)="{ value }">
             {{ value | formatDate }}
           </template>
 
-          <template v-slot:cell(validUntil)="{ value }">
+          <template #cell(validUntil)="{ value }">
             <status-icon
               v-if="getDaysUntilExpired(value) < 31"
               :status="getIconStatus(value)"
@@ -73,7 +73,7 @@
             {{ value | formatDate }}
           </template>
 
-          <template v-slot:cell(actions)="{ value, item }">
+          <template #cell(actions)="{ value, item }">
             <table-row-action
               v-for="(action, index) in value"
               :key="index"
@@ -82,7 +82,7 @@
               :enabled="action.enabled"
               @click:tableAction="onTableRowAction($event, item)"
             >
-              <template v-slot:icon>
+              <template #icon>
                 <icon-replace v-if="action.value === 'replace'" />
                 <icon-trashcan v-if="action.value === 'delete'" />
               </template>
@@ -124,39 +124,43 @@ export default {
     ModalUploadCertificate,
     PageTitle,
     StatusIcon,
-    TableRowAction
+    TableRowAction,
   },
   mixins: [BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       modalCertificate: null,
       fields: [
         {
           key: 'certificate',
-          label: this.$t('pageSslCertificates.table.certificate')
+          label: this.$t('pageSslCertificates.table.certificate'),
         },
         {
           key: 'issuedBy',
-          label: this.$t('pageSslCertificates.table.issuedBy')
+          label: this.$t('pageSslCertificates.table.issuedBy'),
         },
         {
           key: 'issuedTo',
-          label: this.$t('pageSslCertificates.table.issuedTo')
+          label: this.$t('pageSslCertificates.table.issuedTo'),
         },
         {
           key: 'validFrom',
-          label: this.$t('pageSslCertificates.table.validFrom')
+          label: this.$t('pageSslCertificates.table.validFrom'),
         },
         {
           key: 'validUntil',
-          label: this.$t('pageSslCertificates.table.validUntil')
+          label: this.$t('pageSslCertificates.table.validUntil'),
         },
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap'
-        }
-      ]
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
     };
   },
   computed: {
@@ -164,21 +168,21 @@ export default {
       return this.$store.getters['sslCertificates/allCertificates'];
     },
     tableItems() {
-      return this.certificates.map(certificate => {
+      return this.certificates.map((certificate) => {
         return {
           ...certificate,
           actions: [
             {
               value: 'replace',
-              title: this.$t('pageSslCertificates.replaceCertificate')
+              title: this.$t('pageSslCertificates.replaceCertificate'),
             },
             {
               value: 'delete',
               title: this.$t('pageSslCertificates.deleteCertificate'),
               enabled:
-                certificate.type === 'TrustStore Certificate' ? true : false
-            }
-          ]
+                certificate.type === 'TrustStore Certificate' ? true : false,
+            },
+          ],
         };
       });
     },
@@ -205,7 +209,7 @@ export default {
         }
         return acc;
       }, []);
-    }
+    },
   },
   async created() {
     this.startLoader();
@@ -214,10 +218,6 @@ export default {
       .dispatch('sslCertificates/getCertificates')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     onTableRowAction(event, rowItem) {
       switch (event) {
@@ -240,14 +240,14 @@ export default {
         .msgBoxConfirm(
           this.$t('pageSslCertificates.modal.deleteConfirmMessage', {
             issuedBy: certificate.issuedBy,
-            certificate: certificate.certificate
+            certificate: certificate.certificate,
           }),
           {
             title: this.$t('pageSslCertificates.deleteCertificate'),
-            okTitle: this.$t('global.action.delete')
+            okTitle: this.$t('global.action.delete'),
           }
         )
-        .then(deleteConfirmed => {
+        .then((deleteConfirmed) => {
           if (deleteConfirmed) this.deleteCertificate(certificate);
         });
     },
@@ -264,7 +264,7 @@ export default {
       this.startLoader();
       this.$store
         .dispatch('sslCertificates/addNewCertificate', { file, type })
-        .then(success => this.successToast(success))
+        .then((success) => this.successToast(success))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
     },
@@ -272,15 +272,15 @@ export default {
       this.startLoader();
       const reader = new FileReader();
       reader.readAsBinaryString(file);
-      reader.onloadend = event => {
+      reader.onloadend = (event) => {
         const certificateString = event.target.result;
         this.$store
           .dispatch('sslCertificates/replaceCertificate', {
             certificateString,
             type,
-            location
+            location,
           })
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       };
@@ -290,9 +290,9 @@ export default {
       this.$store
         .dispatch('sslCertificates/deleteCertificate', {
           type,
-          location
+          location,
         })
-        .then(success => this.successToast(success))
+        .then((success) => this.successToast(success))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
     },
@@ -312,7 +312,7 @@ export default {
       } else if (daysUntilExpired < 31) {
         return 'warning';
       }
-    }
-  }
+    },
+  },
 };
 </script>