Test some way of hiding feature sections if upgrade is required

dashboard/src/components/ExternalLdap.vue

@@ -11,6 +11,8 @@ import { TASK_TYPES } from '../constants.js';
 const userDirectoryModel = UserDirectoryModel.create();
 const tasksModel = TasksModel.create();
 
+const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
+
 const availableProviders = [
   { name: 'Active Directory', value: 'ad' },
   { name: 'Cloudron', value: 'cloudron' },
@@ -301,11 +303,17 @@ onMounted(async () => {
       </div>
     </Dialog>
 
-    <Section :title="$t('users.externalLdap.title')">
+    <Section :title="$t('users.externalLdap.title')" :disabled="true">
       <template #header-buttons>
         <Button tool icon="fas fa-align-left" v-tooltip="$t('domains.renewCerts.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
       </template>
 
+      <template #overlay>
+        <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+          <Button outline @click="subscriptionRequiredDialog.open()">Subscription Required</Button>
+        </div>
+      </template>
+
       <p>{{ $t('users.externalLdap.description') }}</p>
 
       <div>

dashboard/src/components/Section.vue

@@ -6,12 +6,16 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 </script>
 
 <template>
-  <div class="section" :class="{ 'section-extra-padding': padding }">
+  <div class="section" :class="{ 'section-extra-padding': padding }" :disabled="disabled || null">
     <h2 class="section-header">
       <slot name="header-title">{{ title }}</slot>
       <div><slot name="header-buttons"></slot></div>
@@ -20,6 +24,9 @@ defineProps({
     <div class="section-body">
       <slot></slot>
     </div>
+    <div class="section-overlay">
+      <slot name="overlay"></slot>
+    </div>
   </div>
 </template>
 
@@ -27,6 +34,7 @@ defineProps({
 
 .section {
   margin-bottom: 30px;
+  position: relative;
 }
 
 .section-header {
@@ -72,4 +80,18 @@ defineProps({
   padding-right: 25px;
 }
 
+.section-overlay {
+  display: none;
+}
+
+.section[disabled] .section-overlay {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(2px);
+}
+
 </style>