Separate subscription plan and status display

dashboard/src/views/CloudronAccountView.vue

@@ -23,6 +23,7 @@ const cloudronId = ref('');
 const planId = ref('');
 const planName = ref('');
 const cancelAt = ref(0);
+const renewsAt = ref(0);
 const status = ref('');
 
 const refreshFeatures = inject('refreshFeatures');
@@ -44,6 +45,7 @@ async function refresh() {
   planId.value = result.plan.id;
   planName.value = result.plan.name;
   cancelAt.value = result.cancel_at;
+  renewsAt.value = result.current_period_end;
   status.value = result.status;
 
   await refreshFeatures();
@@ -128,12 +130,20 @@ onUnmounted(() => {
           <div class="info-row">
             <div class="info-label">{{ $t('settings.appstoreAccount.subscription') }}</div>
             <div class="info-value">
-              <span v-if="cancelAt" class="error-label">{{ $t('settings.appstoreAccount.subscriptionEndsAt') }} {{ prettyLongDate(cancelAt*1000) }}</span>
-              <span v-else-if="status === 'past_due'" class="error-label">{{ $t('settings.appstoreAccount.expired') }}</span>
               {{ planName }}
             </div>
           </div>
 
+          <div class="info-row" v-if="planId !== 'free'">
+            <div class="info-label">Status</div>
+            <div class="info-value">
+              <span v-if="cancelAt"><b class="text-danger">Canceled</b> (Ends on {{ prettyLongDate(cancelAt*1000) }})</span>
+              <span v-else-if="status === 'canceled'"><b class="text-danger">Canceled</b></span>
+              <span v-else-if="status === 'past_due' || status === 'incomplete_expired'"><b class="text-danger">Expired</b></span>
+              <span v-else><b class="text-success">Active</b> (Renews on {{  prettyLongDate(renewsAt*1000) }})</span>
+            </div>
+          </div>
+
           <div class="button-bar" style="margin-top: 20px">
             <Button :href="appstoreCloudronLink" target="_blank">
               <span v-if="!email">{{ $t('settings.appstoreAccount.setupAction') }}</span>