diff --git a/src/views/AccessControl/Ldap/Ldap.vue b/src/views/AccessControl/Ldap/Ldap.vue
index 40164a5..2717201 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 @@
     InputPasswordToggle,
     PageTitle,
     PageSection,
-    TableRoleGroups
+    TableRoleGroups,
   },
   mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       form: {
@@ -268,8 +272,8 @@
         bindPassword: '',
         baseDn: '',
         userIdAttribute: '',
-        groupIdAttribute: ''
-      }
+        groupIdAttribute: '',
+      },
     };
   },
   computed: {
@@ -277,70 +281,70 @@
       '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 @@
     this.$store.dispatch('sslCertificates/getCertificates');
     this.setFormValues();
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     setFormValues(serviceType) {
       if (!serviceType) {
@@ -366,7 +366,7 @@
         bindDn = '',
         baseDn = '',
         userAttribute = '',
-        groupsAttribute = ''
+        groupsAttribute = '',
       } = serviceType;
       const secureLdap =
         serviceAddress && serviceAddress.includes('ldaps://') ? true : false;
@@ -392,12 +392,12 @@
         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 @@
         // disables the service.
         this.setFormValues();
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue b/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue
index e2da1eb..b9b1f5a 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 @@
     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 @@
       this.$emit('ok', {
         addNew: !this.roleGroup,
         groupName: this.form.groupName,
-        groupPrivilege: this.form.groupPrivilege
+        groupPrivilege: this.form.groupPrivilege,
       });
       this.closeModal();
     },
@@ -158,7 +158,7 @@
       // 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 9daf1fd..ef300ea 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 @@
     IconTrashcan,
     ModalAddRoleGroup,
     TableRowAction,
-    TableToolbar
+    TableToolbar,
   },
   mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
   data() {
@@ -117,31 +117,31 @@
       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 @@
             {
               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 @@
           ),
           {
             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 @@
           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 @@
       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>