Differentiate in LicenseAlert between Admin & User

Show a different message to the user if the license is epired or
exceeded because a user does not have access to the admin section.

Also reuse the already retrieved license status from the calling
component.

frontend/src/components/LicenseAlert.vue

@@ -1,54 +1,49 @@
 <template>
-  <div v-if="license && license.isExpired()" class="rounded-md bg-red-50 p-4 mb-3">
+  <div v-if="props.licenseStatus.isExpired()" class="rounded-md bg-red-50 p-4 mb-3">
     <div class="flex">
       <div class="flex-shrink-0">
         <XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
       </div>
       <div class="ml-3">
         <h3 class="text-sm font-medium text-red-800">{{ t('licenseAlert.licenseExpired.title') }}</h3>
-        <i18n-t keypath="licenseAlert.licenseExpired.description" scope="global" tag="p" class="mt-2 text-sm text-red-700">
+        <i18n-t v-if="props.isAdmin" keypath="licenseAlert.licenseExpired.admin.description" scope="global" tag="p" class="mt-2 text-sm text-red-700">
           <router-link to="/app/admin/settings" class="text-sm text-red-700 underline hover:text-red-600">
             {{ t('licenseAlert.button') }}
           </router-link>
         </i18n-t>
+        <p v-else class="mt-2 text-sm text-red-700">{{ t('licenseAlert.licenseExpired.user.description') }}</p>
       </div>
     </div>
   </div>
 
-  <div v-else-if="license && license.isExceeded()" class="rounded-md bg-yellow-50 p-4 mb-3">
+  <div v-else-if="props.licenseStatus.isExceeded()" class="rounded-md bg-yellow-50 p-4 mb-3">
     <div class="flex">
       <div class="flex-shrink-0">
         <ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" aria-hidden="true" />
       </div>
       <div class="ml-3">
         <h3 class="text-sm font-medium text-yellow-800">{{ t('licenseAlert.noRemainingSeats.title') }}</h3>
-        <i18n-t keypath="licenseAlert.noRemainingSeats.description" scope="global" tag="p" class="mt-2 text-sm text-yellow-700">
+        <i18n-t v-if="props.isAdmin" keypath="licenseAlert.noRemainingSeats.admin.description" scope="global" tag="p" class="mt-2 text-sm text-yellow-700">
           <router-link to="/app/admin/settings" class="text-sm text-yellow-700 underline hover:text-yellow-600">
             {{ t('licenseAlert.button') }}
           </router-link>
         </i18n-t>
+        <p v-else class="mt-2 text-sm text-yellow-700">{{ t('licenseAlert.noRemainingSeats.user.description') }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ExclamationTriangleIcon, XCircleIcon } from '@heroicons/vue/20/solid';
-import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import backend, { LicenseUserInfoDto } from '../common/backend';
+import { LicenseUserInfoDto } from '../common/backend';
 
 const { t } = useI18n({ useScope: 'global' });
 
-const license = ref<LicenseUserInfoDto>();
+const props = defineProps<{
+  isAdmin: boolean,
+  licenseStatus: LicenseUserInfoDto
+}>();
 
-onMounted(fetchData);
-
-async function fetchData() {
-  try {
-    license.value = await backend.license.getUserInfo();
-  } catch (error) {
-    console.error('Retrieving license information failed', error);
-  }
-}
 </script>

frontend/src/components/VaultList.vue

@@ -8,7 +8,7 @@
     </div>
   </div>
 
-  <LicenseAlert v-if="isLicenseViolated" />
+  <LicenseAlert v-if="isLicenseViolated && isAdmin != undefined && licenseStatus" :isAdmin="isAdmin" :licenseStatus="licenseStatus" />
 
   <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
     {{ t('vaultList.title') }}
@@ -121,11 +121,11 @@ import { CheckIcon, ChevronRightIcon, ChevronUpDownIcon } from '@heroicons/vue/2
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import auth from '../common/auth';
-import backend, { VaultDto, LicenseUserInfoDto } from '../common/backend';
+import backend, { LicenseUserInfoDto, VaultDto } from '../common/backend';
 import FetchError from './FetchError.vue';
+import LicenseAlert from './LicenseAlert.vue';
 import SlideOver from './SlideOver.vue';
 import VaultDetails from './VaultDetails.vue';
-import LicenseAlert from './LicenseAlert.vue';
 
 const { t } = useI18n({ useScope: 'global' });
 

frontend/src/i18n/de-DE.json

@@ -157,9 +157,11 @@
   "initialSetup.submit": "Einrichtung abschließen",
 
   "licenseAlert.noRemainingSeats.title": "Lizenz überschritten",
-  "licenseAlert.noRemainingSeats.description": "Deine Cryptomator Hub Instanz hat die Anzahl an lizensierten Sitzen überschritten. Öffne den {0} und upgrade dort deine Lizenz, um deine Tresore weiterhin verwalten und entsperren zu können.",
+  "licenseAlert.noRemainingSeats.admin.description": "Deine Cryptomator Hub Instanz hat die Anzahl an lizensierten Sitzen überschritten. Öffne den {0} und upgrade dort deine Lizenz, um deine Tresore weiterhin verwalten und entsperren zu können.",
+  "licenseAlert.noRemainingSeats.user.description": "Deine Cryptomator Hub Instanz hat die Anzahl an lizensierten Sitzen überschritten. Bitte informiere einen Hub-Administrator, um die Lizenz zu erweitern.",
   "licenseAlert.licenseExpired.title": "Lizenz abgelaufen",
-  "licenseAlert.licenseExpired.description": "Deine Cryptomator Hub Lizenz ist abgelaufen. Öffne den {0} und erneuere dort deine Lizenz, um deine Tresore weiterhin verwalten und entsperren zu können.",
+  "licenseAlert.licenseExpired.admin.description": "Deine Cryptomator Hub Lizenz ist abgelaufen. Öffne den {0} und erneuere dort deine Lizenz, um deine Tresore weiterhin verwalten und entsperren zu können.",
+  "licenseAlert.licenseExpired.user.description": "Deine Cryptomator Hub Lizenz ist abgelaufen. Bitte informiere einen Hub-Administrator, um die Lizenz zu erweitern.",
   "licenseAlert.button": "Admin-Bereich",
 
   "manageAccountKey.title": "Account Key",

frontend/src/i18n/en-US.json

@@ -157,9 +157,11 @@
   "initialSetup.submit": "Finish Setup",
 
   "licenseAlert.noRemainingSeats.title": "License exceeded",
-  "licenseAlert.noRemainingSeats.description": "Your Cryptomator Hub instance has exceeded the number of licensed seats. Upgrade it in the {0} in order to manage and unlock your vaults again.",
+  "licenseAlert.noRemainingSeats.admin.description": "Your Cryptomator Hub instance has exceeded the number of licensed seats. Upgrade it in the {0} in order to manage and unlock your vaults again.",
+  "licenseAlert.noRemainingSeats.user.description": "Your Cryptomator Hub instance has exceeded the number of licensed seats. Please inform a Hub administrator to upgrade the license.",
   "licenseAlert.licenseExpired.title": "License expired",
-  "licenseAlert.licenseExpired.description": "Your Cryptomator Hub license has expired. Renew it in the {0} in order to manage and unlock your vaults again.",
+  "licenseAlert.licenseExpired.admin.description": "Your Cryptomator Hub license has expired. Renew it in the {0} in order to manage and unlock your vaults again.",
+  "licenseAlert.licenseExpired.user.description": "Your Cryptomator Hub license has expired. Please inform a Hub administrator to renew the license.",
   "licenseAlert.button": "Admin Section",
 
   "manageAccountKey.title": "Account Key",