Move cloudron.io account to its own view only for owners

2025-05-23 17:43:21 +02:00
parent 85fc467845
commit ff2cb31f0f
3 changed files with 11 additions and 7 deletions
--- a/dashboard/src/views/CloudronAccountView.vue
+++ b/dashboard/src/views/CloudronAccountView.vue
@@ -0,0 +1,152 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, Spinner, InputDialog } from 'pankow';
+import { prettyDate } from 'pankow/utils';
+import Section from '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
+import AppstoreModel from '../models/AppstoreModel.js';
+import DashboardModel from '../models/DashboardModel.js';
+
+const appstoreModel = AppstoreModel.create();
+const dashboardModel = DashboardModel.create();
+
+const consoleServerOrigin = ref();
+const busy = ref(true);
+const hasSubscription = ref(false);
+const email = ref('');
+const emailEncoded = ref('');
+const emailVerified = ref(false);
+const cloudronId = ref('');
+const planId = ref('');
+const planName = ref('');
+const cancelAt = ref(0);
+const status = ref('');
+
+async function refresh() {
+  const [error, result] = await appstoreModel.getSubscription();
+  if (error) {
+    if (error.status === 402) return busy.value = false;  // not yet registered
+    if (error.status === 412) return busy.value = false;  // invalid appstore token
+    return console.error(error);
+  }
+
+  hasSubscription.value = true;
+  email.value = result.email;
+  emailEncoded.value = encodeURIComponent(result.email);;
+  emailVerified.value = result.emailVerified;
+  cloudronId.value = result.cloudronId;
+  planId.value = result.plan.id;
+  planName.value = result.plan.name;
+  cancelAt.value = result.cancel_at || 0;
+  status.value = result.status;
+}
+
+const inputDialog = useTemplateRef('inputDialog');
+async function onAskResetCloudron() {
+  const yes = await inputDialog.value.confirm({
+    title: 'Really reset Cloudron ID',
+    message: 'This will disconnect the Cloudron from the current cloudron.io account',
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.yes'),
+    rejectLabel: t('main.dialog.cancel'),
+    rejectStyle: 'secondary',
+  });
+
+  if (!yes) return;
+
+  await onResetCloudron();
+}
+
+async function onResetCloudron() {
+  busy.value = true;
+
+  const [error] = await appstoreModel.resetCloudronId();
+  if (error) return console.error(error);
+
+  await refresh();
+
+  busy.value = false;
+}
+
+onMounted(async () => {
+  const [error, result] = await dashboardModel.config();
+  if (error) return console.error(error);
+
+  consoleServerOrigin.value = result.consoleServerOrigin;
+
+  await refresh();
+  busy.value = false;
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <InputDialog ref="inputDialog"/>
+
+    <Section :title="$t('settings.appstoreAccount.title')">
+      <!-- TODO: Show plan info -->
+
+      <div v-if="!busy">
+        <div v-if="hasSubscription">
+          <p>{{ $t('settings.appstoreAccount.description') }}</p>
+
+          <div class="info-row" v-if="email">
+            <div class="info-label">{{ $t('settings.appstoreAccount.email') }}</div>
+            <!-- TODO change to setup subscxription -->
+            <!-- TODO button is a link to console.cloudron.io/setup-subscription?cloudronId=xxx -->
+            <div class="info-value"><a :href="`${consoleServerOrigin}?email=${emailEncoded}`" target="_blank">{{ email }} <i v-show="!emailVerified" class="fas fa-exclamation-triangle text-danger" v-tooltip="$t('settings.appstoreAccount.emailNotVerified')"></i></a></div>
+          </div>
+
+          <div class="info-row">
+            <div class="info-label">{{ $t('settings.appstoreAccount.cloudronId') }}</div>
+            <div class="info-value">{{ cloudronId }}</div>
+          </div>
+
+          <div class="info-row">
+            <div class="info-label">{{ $t('settings.appstoreAccount.subscription') }}</div>
+            <div class="info-value">{{ planName }}</div>
+          </div>
+
+          <p class="text-danger" v-show="cancelAt">{{ $t('settings.appstoreAccount.subscriptionEndsAt') }} {{ prettyDate(cancelAt*1000) }}</p>
+
+          <div class="button-bar">
+            <Button :href="`${consoleServerOrigin}/#/claim/${cloudronId}`" target="_blank">
+              <span v-if="planName.toLowerCase() === 'free'">{{ $t('settings.appstoreAccount.subscriptionSetupAction') }}</span>
+              <span v-else-if="cancelAt">{{ $t('settings.appstoreAccount.subscriptionReactivateAction') }}</span>
+              <span v-else>{{ $t('settings.appstoreAccount.subscriptionChangeAction') }}</span>
+            </Button>
+
+            <Button secondary @click="onAskResetCloudron">Reset Registration</Button>
+          </div>
+        </div>
+
+        <SettingsItem v-else-if="cloudronId">
+          <div style="display: flex; align-items: center;">
+            {{ $t('settings.appstoreAccount.description') }}
+          </div>
+          <div style="display: flex; align-items: center;">
+            <Button :href="`${consoleServerOrigin}/#/claim/${cloudronId}`" target="_blank">{{ $t('settings.appstoreAccount.setupAction') }}</Button>
+          </div>
+        </SettingsItem>
+
+        <SettingsItem v-else>
+          <div style="display: flex; align-items: center;">
+            Unknown Cloudron ID or invalid cloudron.io token.
+          </div>
+          <div style="display: flex; align-items: center;">
+            <Button @click="onResetCloudron">Reset Registration</Button>
+          </div>
+        </SettingsItem>
+      </div>
+      <div v-else>
+        <Spinner class="pankow-spinner-large"/>
+      </div>
+    </Section>
+  </div>
+</template>