Add initial hooks for subscription required dialog on unpaid or expired

dashboard/src/components/Headerbar.vue

@@ -7,6 +7,7 @@ import { Button, Popover, Icon } from 'pankow';
 import NotificationsModel from '../models/NotificationsModel.js';
 
 const props = defineProps(['config', 'profile', 'subscription']);
+const emits = defineEmits(['subscriptionRequired']);
 
 const notificationModel = NotificationsModel.create();
 const notificationButton = useTemplateRef('notificationButton');
@@ -52,6 +53,10 @@ async function refresh() {
   notifications.value = result;
 }
 
+function onSubscriptionRequired() {
+  emits('subscriptionRequired');
+}
+
 onMounted(async () => {
   if (props.profile.isAtLeastAdmin) await refresh();
 });
@@ -89,14 +94,9 @@ onMounted(async () => {
 
     <div style="flex-grow: 1;"></div>
 
-    <div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
-      <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
-        {{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
-      </span>
-    </div>
-    <div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
-      <span class="badge badge-danger">Subscription Expired</span>
-    </div>
+    <!-- Warnings if subscription is expired or unpaid -->
+    <div v-if="profile.isAtLeastOwner && subscription.plan.id === 'expired'" class="headerbar-action subscription-expired" style="gap: 6px" @click="onSubscriptionRequired()">Subscription Expired</div>
+
     <div class="headerbar-action" style="gap: 6px" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
     <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a>
     <a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" /> {{ profile.username }}</a>
@@ -155,4 +155,15 @@ onMounted(async () => {
   visibility: visible;
 }
 
+.subscription-expired {
+  background-color: var(--pankow-color-danger);
+  color: white;
+  border-radius: 20px;
+}
+
+.subscription-expired:hover {
+  color: white;
+  background-color: var(--pankow-color-danger-hover);
+}
+
 </style>

dashboard/src/components/SubscriptionRequiredDialog.vue

@@ -0,0 +1,21 @@
+<script setup>
+
+import { useTemplateRef } from 'vue';
+import { Dialog, Button } from 'pankow';
+
+const dialog = useTemplateRef('dialog');
+
+defineExpose({
+  async open() {
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog" title="Subscription required" :show-x="true">
+    <p>To use this feature a Cloudron subscription needs to be set up</p>
+    <Button href="https://console.cloudron.io" target="_blank">Set up</Button>
+  </Dialog>
+</template>