Add branding hooks for plan usage

dashboard/src/views/BrandingView.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, inject } from 'vue';
 import { Button, FormGroup, TextInput } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
 import Section from '../components/Section.vue';
@@ -17,6 +17,8 @@ const footer = ref('');
 const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random()).slice(2)}`);
 const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
 
+const features = inject('features');
+const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
 
 // Cloudron name
 const editingName = ref(false);
@@ -117,7 +119,13 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Section :title="$t('branding.title')">
+    <Section :title="$t('branding.title')" :disabled="!features.branding">
+      <template #overlay>
+        <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+          <Button @click="subscriptionRequiredDialog.open()">Subscription Required</Button>
+        </div>
+      </template>
+
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('branding.cloudronName') }}</label>

dashboard/src/views/EmailDomainView.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef } from 'vue';
+import { ref, onMounted, useTemplateRef, inject } from 'vue';
 import { Button, Checkbox, InputDialog, Dialog, FormGroup, Switch, SingleSelect } from 'pankow';
 import { prettyDecimalSize, sleep } from 'pankow/utils';
 import Section from '../components/Section.vue';
@@ -21,6 +21,9 @@ const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
 const profileModel = ProfileModel.create();
 
+const features = inject('features');
+const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
+
 const inputDialog = useTemplateRef('inputDialog');
 const enableIncomingDialog = useTemplateRef('enableIncomingDialog');
 const connectionDialog = useTemplateRef('connectionDialog');
@@ -313,6 +316,7 @@ onMounted(async () => {
 
     </Section>
 
+    <!-- TODO translation -->
     <Section title="Sending" :padding="false" v-if="!busyRefresh">
       <template #header-buttons>
         <Button @click="onSendTestMail">{{ $t('emails.domains.testEmailTooltip') }}</Button>
@@ -329,7 +333,14 @@ onMounted(async () => {
       </SettingsItem>
     </Section>
 
-    <Section title="Receiving" :padding="false" v-if="!busyRefresh">
+    <!-- TODO translation -->
+    <Section title="Receiving" :padding="false" v-if="!busyRefresh" :disabled="!features.emailServer">
+      <template #overlay>
+        <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+          <Button @click="subscriptionRequiredDialog.open()">Subscription Required</Button>
+        </div>
+      </template>
+
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('email.incoming.title') }}</label>

dashboard/src/views/UsersView.vue

@@ -269,7 +269,13 @@ onMounted(async () => {
       <div>{{ $t('users.users.count', { count: users.length }) }}</div>
     </Section>
 
-    <Section :title="$t('users.groups.title')">
+    <Section :title="$t('users.groups.title')" :disabled="!features.userGroups">
+      <template #overlay>
+        <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+          <Button @click="subscriptionRequiredDialog.open()">Subscription Required</Button>
+        </div>
+      </template>
+
       <template #header-buttons>
         <Button icon="fa-solid fa-plus" @click="onEditOrAddGroup()">{{ $t('users.groups.newGroupAction') }}</Button>
       </template>