Show subscription badge where required and disable UI elements accordingly

dashboard/src/views/BrandingView.vue

@@ -132,7 +132,7 @@ onMounted(async () => {
             <Button tool plain secondary @click="editingName = false" :disabled="editNameBusy">{{ $t('main.dialog.cancel') }}</Button>
           </div>
           <div v-else style="display: flex; position: relative; align-items: center">
-            <Button tool plain @click="onChangeName(name)">{{ $t('main.dialog.edit') }}</Button>
+            <Button tool plain @click="onChangeName(name)" :disabled="!features.branding">{{ $t('main.dialog.edit') }}</Button>
           </div>
         </Transition>
       </SettingsItem>
@@ -140,7 +140,7 @@ onMounted(async () => {
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('branding.logo') }}</label>
-          <ImagePicker :src="avatarUrl" @changed="onAvatarChanged" :size="512" display-height="60px"/>
+          <ImagePicker :src="avatarUrl" @changed="onAvatarChanged" :size="512" display-height="60px" :disabled="!features.branding"/>
         </FormGroup>
         <div v-show="avatarNew !== null" style="display: flex; position: relative; align-items: center; gap: 6px">
           <Button tool @click="onAvatarSubmit()" :disabled="!avatarNew || avatarBusy" :loading="avatarBusy">{{ $t('main.dialog.save') }}</Button>
@@ -151,7 +151,7 @@ onMounted(async () => {
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('branding.backgroundImage') }}</label>
-          <ImagePicker :src="backgroundUrl" @changed="onBackgroundChanged" fallback-src="/img/background-image-placeholder.svg" display-height="200px" :max-size="1280"/>
+          <ImagePicker :src="backgroundUrl" @changed="onBackgroundChanged" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="200px" :max-size="1280"/>
         </FormGroup>
         <div v-show="backgroundNew !== null" style="display: flex; position: relative; align-items: center; gap: 6px">
           <Button tool @click="onBackgroundSubmit()" :disabled="!backgroundNew || backgroundBusy" :loading="backgroundBusy">{{ $t('main.dialog.save') }}</Button>
@@ -171,7 +171,7 @@ onMounted(async () => {
             <Button tool plain secondary @click="editingFooter = false" :disabled="editFooterBusy">{{ $t('main.dialog.cancel') }}</Button>
           </div>
           <div v-else style="display: flex; position: relative; align-items: center">
-            <Button tool plain @click="onChangeFooter(footer)">{{ $t('main.dialog.edit') }}</Button>
+            <Button tool plain @click="onChangeFooter(footer)" :disabled="!features.branding">{{ $t('main.dialog.edit') }}</Button>
           </div>
         </Transition>
       </SettingsItem>

dashboard/src/views/EmailDomainView.vue

@@ -313,7 +313,6 @@ onMounted(async () => {
           <span v-else>{{ $t('emails.domains.disabled') }}</span>
         </div>
       </div>
-
     </Section>
 
     <!-- TODO translation -->
@@ -331,19 +330,6 @@ onMounted(async () => {
         </FormGroup>
         <Switch v-model="mailFromValidation" @change="onToggleMailFromValidation" :disabled="mailFromValidationBusy"/>
       </SettingsItem>
-    </Section>
-
-    <!-- TODO translation -->
-    <Section title="Receiving" :padding="false" v-if="!busyRefresh" :title-badge="!features.emailServer ? 'Pro' : ''">
-      <SettingsItem>
-        <FormGroup>
-          <label>{{ $t('email.incoming.title') }}</label>
-          <div>{{ $t(mailConfig.enabled ? 'email.incoming.enabled' : 'email.incoming.disabled') }}</div>
-        </FormGroup>
-        <Switch v-model="incomingEnabled" :disabled="busyRefresh" @change="onAskIncomingToggle"/>
-      </SettingsItem>
-
-      <CatchAllSettingsItem :domain-config="mailConfig" />
 
       <SettingsItem>
         <FormGroup>
@@ -355,5 +341,18 @@ onMounted(async () => {
         </div>
       </SettingsItem>
     </Section>
+
+    <!-- TODO translation -->
+    <Section title="Receiving" :padding="false" v-if="!busyRefresh" :title-badge="!features.emailServer ? 'Pro' : ''">
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('email.incoming.title') }}</label>
+          <div>{{ $t(mailConfig.enabled ? 'email.incoming.enabled' : 'email.incoming.disabled') }}</div>
+        </FormGroup>
+        <Switch v-model="incomingEnabled" :disabled="busyRefresh || !features.emailServer" @change="onAskIncomingToggle"/>
+      </SettingsItem>
+
+      <CatchAllSettingsItem :domain-config="mailConfig" :disabled="!features.emailServer"/>
+    </Section>
   </div>
 </template>

dashboard/src/views/UserDirectorySettingsView.vue

@@ -1,26 +1,43 @@
 <script setup>
 
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, inject } from 'vue';
 import { Switch } from 'pankow';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import ExternalLdap from '../components/ExternalLdap.vue';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
 
+const features = inject('features');
+
 const userDirectoryModel = UserDirectoryModel.create();
 
+const busy = ref(false);
 const editableUserProfiles = ref(false);
 const mandatory2FA = ref(false);
 
-watch(editableUserProfiles, async (newValue) => {
-  const [error] = await userDirectoryModel.setGlobalProfileConfig({ mandatory2FA: mandatory2FA.value, lockUserProfiles: !newValue });
-  if (error) console.error(error);
-});
+async function onToggleMandatory2FA(value) {
+  busy.value = true;
 
-watch(mandatory2FA, async (newValue) => {
-  const [error] = await userDirectoryModel.setGlobalProfileConfig({ mandatory2FA: newValue, lockUserProfiles: !editableUserProfiles.value });
-  if (error) console.error(error);
-});
+  const [error] = await userDirectoryModel.setGlobalProfileConfig({ mandatory2FA: value, lockUserProfiles: !editableUserProfiles.value });
+  if (error) {
+    mandatory2FA.value = !value;
+    console.error(error);
+  }
+
+  busy.value = false;
+}
+
+async function onToggleEditableUserProfiles(value) {
+  busy.value = true;
+
+  const [error] = await userDirectoryModel.setGlobalProfileConfig({ mandatory2FA: mandatory2FA.value, lockUserProfiles: !value });
+  if (error) {
+    editableUserProfiles.value = !value;
+    console.error(error);
+  }
+
+  busy.value = false;
+}
 
 onMounted(async () => {
   const [error, result] = await userDirectoryModel.getGlobalProfileConfig();
@@ -34,15 +51,15 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Section :title="$t('users.title')" :padding="false">
+    <Section :title="$t('users.title')" :padding="false" :title-badge="!features.profileConfig ? 'Pro' : ''">
       <SettingsItem>
         <div>{{ $t('users.settings.allowProfileEditCheckbox') }} <sup><a href="https://docs.cloudron.io/user-directory/#lock-profile" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
-        <Switch v-model="editableUserProfiles"/>
+        <Switch v-model="editableUserProfiles" @change="onToggleEditableUserProfiles" :disabled="busy || !features.profileConfig"/>
       </SettingsItem>
 
       <SettingsItem>
         <div>{{ $t('users.settings.require2FACheckbox') }}</div>
-        <Switch v-model="mandatory2FA"/>
+        <Switch v-model="mandatory2FA" @change="onToggleMandatory2FA" :disabled="busy || !features.profileConfig"/>
       </SettingsItem>
     </Section>
 

dashboard/src/views/UsersView.vue

@@ -158,7 +158,8 @@ function onInvitation(user) {
 }
 
 function onEditOrAddGroup(group = null) {
-  groupDialog.value.open(group);
+  if (group || features.value.userGroups) groupDialog.value.open(group);
+  else subscriptionRequiredDialog.value.open();
 }
 
 async function onRemoveGroup(group) {