Show subscription badge where required and disable UI elements accordingly

dashboard/src/components/CatchAllSettingsItem.vue

@@ -7,7 +7,7 @@ import DomainsModel from '../models/DomainsModel.js';
 import MailModel from '../models/MailModel.js';
 import MailboxesModel from '../models/MailboxesModel.js';
 
-const props = defineProps([ 'domainConfig' ]);
+const props = defineProps([ 'domainConfig', 'disabled' ]);
 
 const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
@@ -75,8 +75,8 @@ onMounted(async () => {
     </FormGroup>
     <div style="display: flex; gap: 6px; align-items: center;">
       <InputGroup>
-        <MultiSelect v-model="addresses" :options="allAddresses" option-label="label" option-key="id" />
-        <Button @click="onSubmit()" tool :disabled="busy || !hasChanged" :loading="busy">{{ $t('email.incoming.catchall.saveAction') }}</Button>
+        <MultiSelect v-model="addresses" :options="allAddresses" option-label="label" option-key="id" :disabled="disabled"/>
+        <Button @click="onSubmit()" tool :disabled="disabled || busy || !hasChanged" :loading="busy">{{ $t('email.incoming.catchall.saveAction') }}</Button>
       </InputGroup>
     </div>
   </SettingsItem>

dashboard/src/components/ImagePicker.vue

@@ -4,7 +4,7 @@ import { useTemplateRef, ref } from 'vue';
 
 const fileInput = useTemplateRef('fileInput');
 
-const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth']);
+const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth', 'disabled']);
 const emits = defineEmits(['changed']);
 defineExpose({
   clear(originalSrc = '') {
@@ -113,10 +113,10 @@ function onError() {
 
 <template>
   <div>
-    <div class="image-picker">
+    <div>
       <input @change="onChanged($event)" type="file" ref="fileInput" style="display: none" accept="image/*"/>
 
-      <div ref="image" class="image-picker" @click="onShowIconSelector()">
+      <div ref="image" :disabled="disabled || null" class="image-picker" @click="!disabled && onShowIconSelector()">
         <img :src="internalSrc || src" @error="onError" :style="{ height: displayHeight || null, width: displayWidth || null  }">
         <i class="image-picker-edit-indicator fa fa-pencil-alt"></i>
       </div>
@@ -132,6 +132,10 @@ function onError() {
   cursor: pointer;
 }
 
+.image-picker[disabled] {
+  cursor: not-allowed;
+}
+
 .image-picker > img {
   display: block;
 /*  height: 320px;*/

dashboard/src/components/PrivateRegistry.vue

@@ -66,7 +66,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Section :title="$t('settings.privateDockerRegistry.title')">
+  <Section :title="$t('settings.privateDockerRegistry.title')" :title-badge="features.privateDockerRegistry ? 'Pro' : ''">
     <InputDialog ref="inputDialog" />
     <DockerRegistryDialog ref="dialog" @success="refresh()"/>
 

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) {